/* ==========================================================================
   MONEYFROMDEBT.COM: its own layout (2026-09-28). Mikhail: "change the layout, it's too
   much like the 1983 website ... I want it to be different."
   Loaded last. Light, bright consumer-money look: solid top bar, sans headlines,
   light page headers with a framed photo, receipt cards, numbered index lists, light footer.
   ========================================================================== */
body.mfd{
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --m-green:#0F5C45; --m-green-2:#0B4A37; --m-deep:#0C2E24; --m-mint:#E8F3ED; --m-mint-2:#D2E8DB;
  --m-paper:#FBFAF6; --m-ink:#10231C; --m-ink-2:#3A4A43; --m-muted:#5B6A63; --m-line:#E2E6E1;
  --m-brass:#B58A32; --m-brass-2:#7A5D1E;
  background:var(--m-paper);color:var(--m-ink-2)}
body.mfd h1,body.mfd h2,body.mfd h3,body.mfd h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;color:var(--m-ink)}
body.mfd h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.08}
body.mfd h3{letter-spacing:-.015em}
body.mfd section{padding:clamp(56px,7vw,96px) 0}
body.mfd .tight{padding:clamp(32px,4vw,56px) 0}
body.mfd .alt{background:#F1F6F2}
body.mfd .dark{background:var(--m-deep)}
body.mfd a{color:var(--m-green)}

/* eyebrow becomes a chip */
body.mfd .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--m-mint);color:var(--m-green);border-radius:999px;
  padding:6px 12px;font-size:.72rem;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
body.mfd .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--m-green);display:block}
body.mfd .dark .eyebrow{background:rgba(255,255,255,.08);color:#CFE7DA}
body.mfd .dark .eyebrow::before{background:var(--m-brass)}

/* announcement */
body.mfd .annc{background:var(--m-green);color:#E6F2EC;font-size:.84rem;padding:9px 20px;text-align:center}
body.mfd .annc b{color:#fff}
body.mfd .annc a{color:#fff;text-decoration:underline}

/* solid top bar */
body.mfd header.nav{position:sticky;top:0;z-index:100;margin:0;padding:0;pointer-events:auto;background:#fff;border-bottom:1px solid var(--m-line)}
body.mfd header.nav.scrolled{box-shadow:0 8px 24px rgba(16,35,28,.08)}
body.mfd .nav-in{max-width:1240px;min-height:74px;padding:10px 20px;border-radius:0;background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
body.mfd header.nav.scrolled .nav-in{background:transparent;box-shadow:none}
body.mfd .brand .wordmark{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.03em;font-size:1.34rem}
body.mfd .brand .b2{color:var(--m-green)}
body.mfd .brand .tagline{color:var(--m-muted)}
body.mfd .nav-links>a,body.mfd .nav-links>.nav-item>a{border-radius:8px;font-weight:600;font-size:.9rem}
body.mfd .nav-links>a:hover,body.mfd .nav-links>.nav-item>a:hover{background:var(--m-mint)}
body.mfd .nav-links a.active::after{background:var(--m-green);bottom:-2px;height:2px}
body.mfd .menu-in{border-radius:12px}
body.mfd .menu-in a:hover{background:var(--m-mint)}
body.mfd .menu-in a:last-child{color:var(--m-green)}
body.mfd .lang-btn{border-radius:8px}
body.mfd main>.phero,body.mfd main>.posthero,body.mfd main>.hero{padding-top:clamp(40px,5vw,64px)}
@media(max-width:1180px){body.mfd .nav-links.open{border-radius:12px;margin-top:0}}

/* buttons: squared, green primary */
body.mfd .btn{border-radius:10px;font-weight:700;letter-spacing:-.01em}
body.mfd .btn-gold{background:var(--m-green);color:#fff;box-shadow:0 8px 20px rgba(15,92,69,.22)}
body.mfd .btn-gold:hover{background:var(--m-green-2);color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,92,69,.3)}
body.mfd .btn-ghost{background:#fff;border:1.5px solid var(--m-green);color:var(--m-green)}
body.mfd .btn-ghost:hover{background:var(--m-mint);color:var(--m-green-2);border-color:var(--m-green-2)}
body.mfd .btn-indigo{background:var(--m-ink);color:#fff}
body.mfd .btn-indigo:hover{background:#000;color:#fff}
body.mfd .dark .btn-gold,body.mfd .dt-card .btn-gold,body.mfd .mcta .btn-gold{background:var(--m-brass);color:var(--m-deep);box-shadow:none}
body.mfd .dark .btn-ghost,body.mfd .dt-card .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}

/* cards */
body.mfd .card{background:#fff;border:1px solid var(--m-line);border-radius:14px;box-shadow:none;transition:border-color .2s,transform .2s}
body.mfd a.card:hover{border-color:var(--m-green);transform:translateY(-2px)}
body.mfd .card h3{font-size:1.08rem}
body.mfd .card .more,body.mfd .more{color:var(--m-green);font-weight:700}
body.mfd .callout{border-radius:14px;border-left:4px solid var(--m-green);background:var(--m-mint)}
body.mfd .deadline{border-radius:14px;border-left:4px solid var(--m-brass);background:#FBF6EA}
body.mfd .tablewrap{border-radius:12px}
body.mfd details{border-radius:12px}

/* ---- inner-page header: light, framed photo -------------------------------------- */
.mhead{background:linear-gradient(180deg,#fff 0,var(--m-paper) 100%);border-bottom:1px solid var(--m-line);padding:clamp(28px,4vw,52px) 0 clamp(36px,5vw,64px)}
.mhead-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
.mhead .crumb{margin:0 0 16px;font-size:.84rem;color:var(--m-muted)}
.mhead .crumb a{color:var(--m-muted)}
.mhead h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.04;margin:.35em 0 .3em}
.mhead .lede{font-size:clamp(1.02rem,1.3vw,1.16rem);color:var(--m-ink-2);max-width:40em}
.mhead-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:.84rem;color:var(--m-muted)}
.mhead-meta b{color:var(--m-ink)}
.mhead-fig{margin:0;position:relative}
.mhead-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;box-shadow:0 24px 50px rgba(16,35,28,.16)}
.mhead-fig::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:18px;background:var(--m-mint-2);z-index:-1}
.mhead .tracks{margin-top:18px}
@media(max-width:860px){.mhead-in{grid-template-columns:1fr}.mhead-fig{order:-1;margin-right:14px}.mhead-fig img{aspect-ratio:16/10}}
body.mfd .phero{background:linear-gradient(180deg,#fff,var(--m-paper));border-bottom:1px solid var(--m-line)}
body.mfd .phero h1{color:var(--m-ink)}

/* ---- home hero -------------------------------------------------------------- */
.mhero{background:radial-gradient(1100px 500px at 85% 0,var(--m-mint) 0,transparent 60%),var(--m-paper);padding:clamp(36px,5vw,72px) 0 clamp(48px,6vw,84px);border-bottom:1px solid var(--m-line)}
.mhero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.mhero h1{font-size:clamp(2.5rem,5vw,4.3rem);line-height:1;letter-spacing:-.04em;margin:.3em 0 .35em}
.mhero h1 em{font-style:normal;color:var(--m-green);display:block}
.mhero .lede{font-size:clamp(1.04rem,1.3vw,1.18rem);max-width:33em}
.mhero .ctarow{margin-top:24px}
.mhero-note{margin-top:14px;font-size:.92rem;color:var(--m-muted)}
.mhero-note a{font-weight:700;color:var(--m-ink)}
.mhero-fig{position:relative;margin:0 0 40px}
.mhero-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:20px;display:block;box-shadow:0 30px 60px rgba(16,35,28,.18)}
.mhero-names{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:.84rem;color:var(--m-muted)}
.mhero-names b{color:var(--m-ink)}
.receipt{position:absolute;left:-34px;bottom:-40px;width:min(330px,70%);background:#fff;border-radius:6px;padding:18px 18px 14px;
  box-shadow:0 24px 50px rgba(16,35,28,.22);font-size:.84rem;color:var(--m-ink-2);transform:rotate(-2deg)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;
  background:radial-gradient(circle at 6px 0,transparent 6px,#fff 6.5px) 0 0/12px 10px repeat-x}
.receipt h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--m-green);margin:0 0 10px}
.receipt .r-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed #CBD3CE}
.receipt .r-row b{color:var(--m-ink);white-space:nowrap}
.receipt .r-tot{display:flex;justify-content:space-between;padding-top:9px;font-weight:700;color:var(--m-ink)}
.receipt small{display:block;margin-top:8px;color:var(--m-muted);font-size:.72rem;line-height:1.35}
@media(max-width:960px){.mhero-in{grid-template-columns:1fr}}

/* quick check with chips */
.qcheck{background:var(--m-deep);color:#DCEBE3;border-radius:22px;padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:end}
.qcheck h2{color:#fff;margin:.3em 0 .2em}
.qcheck p{color:#B9CDC3;margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 14px;font-size:.88rem;color:#fff;transition:background .15s,border-color .15s}
.chips label:hover span{border-color:#fff}
.chips input:checked+span{background:var(--m-brass);border-color:var(--m-brass);color:var(--m-deep);font-weight:700}
.chips input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
.qc-side label.lbl{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#9FC2B1;margin:0 0 6px}
.qc-side select{width:100%;min-height:var(--tap);border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:10px 12px;font:inherit;margin-bottom:12px}
.qc-side select option{color:#10231C}
.qc-side .btn{width:100%}
@media(max-width:860px){.qcheck{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:st;list-style:none;padding:0;margin:28px 0 0}
.steps li{background:#fff;border:1px solid var(--m-line);border-radius:16px;padding:24px 22px;position:relative}
.steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);display:block;font:700 2.2rem/1 'Inter',sans-serif;letter-spacing:-.04em;color:var(--m-green);margin-bottom:14px}
.steps b{display:block;color:var(--m-ink);font-size:1.08rem;margin-bottom:6px}
.steps p{margin:0;font-size:.95rem}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* numbered violation index (replaces photo tiles) */
.vindex{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 36px;counter-reset:vi}
.vindex li{border-top:1px solid var(--m-line)}
.vindex a{display:grid;grid-template-columns:52px 1fr auto;gap:4px 14px;align-items:start;padding:18px 4px;color:var(--m-ink);text-decoration:none;transition:background .15s}
.vindex a:hover{background:#fff}
.vindex .vi-n{font:700 1.3rem/1 'Inter',sans-serif;color:var(--m-green);letter-spacing:-.03em;grid-row:span 2;padding-top:2px}
.vindex .vi-t{font-weight:700;font-size:1.04rem;letter-spacing:-.01em}
.vindex .vi-chip{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-brass-2);background:#FBF3E2;border-radius:999px;padding:3px 8px;justify-self:end;grid-column:3;grid-row:1}
.vindex .vi-d{grid-column:2/4;color:var(--m-muted);font-size:.92rem;line-height:1.45}
.vindex a:hover .vi-t{color:var(--m-green)}
@media(max-width:760px){.vindex{grid-template-columns:1fr}}

/* split with photo */
.msplit{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.msplit img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block}
.mlist{list-style:none;padding:0;margin:20px 0 0}
.mlist li{border-top:1px solid var(--m-line)}
.mlist a{display:flex;justify-content:space-between;gap:12px;padding:14px 0;font-weight:600;color:var(--m-ink);text-decoration:none}
.mlist a span{color:var(--m-muted);font-weight:400;font-size:.9rem}
.mlist a:hover{color:var(--m-green)}
@media(max-width:860px){.msplit{grid-template-columns:1fr}}

/* attorneys */
.lawyers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.lawyer{background:#fff;border:1px solid var(--m-line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--m-ink)}
.lawyer img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;display:block}
.lawyer div{padding:16px 18px}
.lawyer b{display:block;font-size:1.1rem;letter-spacing:-.02em}
.lawyer span{font-size:.86rem;color:var(--m-muted)}
@media(max-width:760px){.lawyers{grid-template-columns:1fr}.lawyer{display:grid;grid-template-columns:120px 1fr}.lawyer img{height:100%;aspect-ratio:auto}}

/* stat receipts */
body.mfd .stats.band-stats .stat{background:#fff;border:1px dashed #C9D2CC;border-radius:12px;padding:20px}
body.mfd .stats.band-stats .stat .n.big{color:var(--m-green);font-family:'Inter',sans-serif;letter-spacing:-.04em}
body.mfd .stats.band-stats .stat .n.big::after{display:none}

/* ---- CTA band ------------------------------------------------------------------ */
.mcta{background:var(--m-paper);padding:clamp(40px,6vw,80px) 0}
.mcta-in{background:var(--m-green);color:#E3F0E9;border-radius:24px;padding:clamp(26px,4vw,52px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center}
.mcta h2{color:#fff;margin:.3em 0 .3em}
.mcta p{color:#CFE4D9}
.mcta .tel{display:inline-block;font:700 clamp(1.6rem,3vw,2.2rem)/1 'Inter',sans-serif;letter-spacing:-.03em;color:#fff;margin:10px 0 18px;text-decoration:none}
.mcta .fine{font-size:.82rem;color:#B6D2C4;margin-top:18px}
.mcta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.mcta .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.mcta .eyebrow::before{background:var(--m-brass)}
.mcta .receipt{position:relative;left:auto;bottom:auto;width:auto;transform:rotate(1.5deg)}
@media(max-width:860px){.mcta-in{grid-template-columns:1fr}}

/* ---- footer: light ----------------------------------------------------------- */
body.mfd footer.site{background:#fff;color:var(--m-ink-2);border-top:1px solid var(--m-line)}
body.mfd footer.site h2{color:var(--m-green);font-family:'Inter',sans-serif;letter-spacing:.06em}
body.mfd footer.site a{color:var(--m-ink)}
body.mfd footer.site a:hover{color:var(--m-green)}
body.mfd footer.site .f-addr,body.mfd footer.site p,body.mfd footer.site li{color:var(--m-ink-2)}
body.mfd .footer-disc{border-top-color:var(--m-line)}
body.mfd .footer-disc p{color:var(--m-muted)}
body.mfd .footer-disc strong{color:var(--m-ink)}
body.mfd .f-bottom{border-top-color:var(--m-line);color:var(--m-muted)}

/* ---- phone action bar -------------------------------------------------------- */
@media(max-width:760px){
  body.mfd .actionbar{background:#fff;border:1px solid var(--m-line);border-radius:14px;box-shadow:0 12px 30px rgba(16,35,28,.18)}
  body.mfd .actionbar a{color:var(--m-ink);border-radius:10px}
  body.mfd .actionbar a.primary{background:var(--m-green);color:#fff}
}
/* post and story cards */
body.mfd .postcard{border-radius:14px;border:1px solid var(--m-line);box-shadow:none}
body.mfd .p-chip{background:var(--m-green);color:#fff}
body.mfd .bloglead{border-radius:16px}

/* fixes after first capture */
body.mfd .qcheck h2,body.mfd .mcta h2{color:#fff}
body.mfd .chips span{background:transparent;color:#fff;min-height:0;box-shadow:none}
body.mfd .chips input:checked+span{background:var(--m-brass);color:var(--m-deep)}
body.mfd .eyebrow::before{width:7px!important;height:7px!important;border-radius:50%!important;margin:0!important}
.mhero-in{grid-template-columns:.92fr 1.08fr}
.mhero-fig{margin-bottom:0}
.mhero-fig img{aspect-ratio:3/2}
.receipt{left:-28px;bottom:-34px;width:260px;padding:14px 14px 10px;font-size:.78rem}
.receipt .r-row{padding:5px 0}
.receipt small{display:none}
.mcta .receipt small{display:block}
.mhero-names{margin-top:14px;padding-left:250px;justify-content:flex-end}
.lawyer img{aspect-ratio:1/1}

.mhero h1{font-size:clamp(2.4rem,4.3vw,3.8rem)}
body.mfd .qcheck .btn-gold{background:var(--m-brass);color:var(--m-deep);box-shadow:none}
body.mfd .qcheck .btn-gold:hover{background:#C99A3C;color:var(--m-deep)}
body.mfd h1,body.mfd h2{text-wrap:balance}
/* hidden chip radios must not take width */
.chips label{position:relative}
.chips input{width:1px!important;height:1px!important;min-height:0!important;margin:0;padding:0;border:0;left:0;top:0}
/* top bar fits: wider container, tighter links, short call label under 1400 */
body.mfd .nav-in{max-width:1400px;padding:10px clamp(12px,2vw,24px)}
body.mfd .nav-links>a,body.mfd .nav-links>.nav-item>a{padding:9px 9px}
@media(max-width:1399px){body.mfd .nav-cta .cta-long{display:none}body.mfd .nav-cta .cta-short{display:inline}}
@media(max-width:760px){
  body.mfd .nav-in{padding:8px 10px;min-height:62px}
  body.mfd .brand{margin-right:4px;gap:8px}
  body.mfd .brand .mark{width:36px;height:36px}
  body.mfd .brand .wordmark{font-size:1.08rem}
  body.mfd .brand .tagline{display:none}
  body.mfd .nav-cta{gap:6px}
}
.receipt{bottom:-24px}
.mhero-names{margin-top:30px}
@media(max-width:380px){body.mfd .brand .wordmark{font-size:.98rem}body.mfd .brand .mark{width:32px;height:32px}body.mfd .nav-cta .btn{padding-left:1em;padding-right:1em}}

/* headings on dark surfaces stay light (body.mfd h2 would otherwise win) */
body.mfd .dark h1,body.mfd .dark h2,body.mfd .dark h3,body.mfd .dark h4,
body.mfd .darker h2,body.mfd .darker h3,body.mfd .dt-card h2,body.mfd .dt-card h3,
body.mfd .qcheck h2,body.mfd .mcta h2,body.mfd .cl-verdict b{color:#fff}
body.mfd .dt-card .vc-h{color:#D9B968}

/* phone and tablet hero: one column, receipt below the photo, names after it
   (these must come after the desktop tweaks above) */
@media(max-width:960px){
  .mhero-in{grid-template-columns:1fr}
  .mhero-fig{margin:8px 0 0}
  .mhero .receipt{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-40px 14px 0;transform:rotate(-1deg)}
  .mhero-names{padding-left:0;justify-content:flex-start;margin-top:22px}
}
@media(max-width:560px){body.mfd .eyebrow{font-size:.66rem;letter-spacing:.06em}}

body.mfd .dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
body.mfd .dark .card p,body.mfd .dark p{color:#CFDBD5}
body.mfd .bloglead h2{color:#fff}
body.mfd .bloglead p{color:#CFDBD5}
.mcta .receipt{margin:0}