/* ==========================================================================
   American Cash Relief - main stylesheet
   Patriotic, modern, navy/red/white. Oswald (display) + Libre Franklin (body).
   Organized: tokens, base, layout helpers, buttons, utility bar, header,
   mobile menu, hero, trust, sections, cards, forms, tables, FAQ, CTA band,
   footer, blog + article, then responsive blocks.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --navy: #0A3161;
  --navy-900: #071f3f;
  --navy-800: #0c2a52;
  --navy-700: #13396b;
  --red: #B31942;
  --red-bright: #C8102E;
  --red-700: #9a1338;
  --ink: #0d1b2e;
  --muted: #566579;
  --muted-2: #7b889a;
  --line: #e3e8f0;
  --paper: #ffffff;
  --bg: #f4f6fa;
  --bg-2: #eef2f8;
  --green: #1f9d57;
  --green-soft: #e9f9f0;
  --gold: #d9a73e;
  --shadow-sm: 0 1px 2px rgba(10, 24, 48, .06), 0 2px 8px rgba(10, 24, 48, .05);
  --shadow-md: 0 10px 30px rgba(10, 24, 48, .10), 0 2px 8px rgba(10, 24, 48, .06);
  --shadow-lg: 0 30px 70px rgba(7, 31, 63, .22), 0 10px 24px rgba(7, 31, 63, .14);
  --maxw: 1200px;
  --r: 8px;
  --r-lg: 14px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Libre Franklin", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.04;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 720px; }
.section { padding: 96px 0; }
.center { text-align: center; }
.section__cta { margin-top: 46px; }
.lead { color: var(--muted); font-size: 18px; line-height: 1.7; }

/* Reusable star backdrop for dark sections (no inline data URIs needed). */
.stars {
  position: absolute;
  inset: 0;
  opacity: .4;
  pointer-events: none;
  background-image: url("../images/icons/star-pattern.svg");
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 72%);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 40px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn__icon { width: 18px; height: 18px; display: block; }

.btn--red { background: var(--red-bright); color: #fff; box-shadow: 0 8px 22px rgba(200, 16, 46, .32); }
.btn--red:hover { background: #d81834; box-shadow: 0 12px 30px rgba(200, 16, 46, .42); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }

.btn--ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: #f0f4fa; }

.btn--lg { padding: 18px 38px; font-size: 18px; }
.btn--block { width: 100%; }

/* ---------- Utility bar ---------- */
.util { background: var(--navy-900); color: #cdd9ea; font-size: 13px; }
.util .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: 16px; }
.util__intro { display: flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: .02em; }
.util__flag { width: 24px; height: 15px; display: block; flex: 0 0 auto; }
.util__rotator { position: relative; height: 18px; min-width: 320px; text-align: right; overflow: hidden; }
.util__rotator span {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  animation: util_rotate 12s infinite;
}
.util__rotator span:nth-child(1) { animation-delay: 0s; }
.util__rotator span:nth-child(2) { animation-delay: 4s; }
.util__rotator span:nth-child(3) { animation-delay: 8s; }
@keyframes util_rotate {
  0% { opacity: 0; transform: translateY(6px); }
  3% { opacity: 1; transform: translateY(0); }
  28% { opacity: 1; transform: translateY(0); }
  33% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0 33%, #fff 33% 66%, var(--navy-700) 66% 100%);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }

.brand { display: flex; align-items: center; gap: 13px; }
.brand__logo { height: 52px; width: auto; display: block; }

.site-nav { display: flex; gap: 30px; align-items: center; }
.site-nav__link {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--navy);
  padding: 6px 0;
  position: relative;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transition: right .25s ease;
}
.site-nav__link:hover::after { right: 0; }
.site-nav__link[aria-current="page"] { color: var(--red-bright); font-weight: 600; }
.site-nav__link[aria-current="page"]::after { right: 0; background: var(--red-bright); }

.burger {
  display: none;
  background: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  align-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px auto; border-radius: 2px; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 31, 63, .5);
  border: 0;
  cursor: pointer;
  width: 100%;
}
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(82vw, 340px);
  background: #fff;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: -20px 0 50px rgba(7, 31, 63, .25);
  transform: translateX(100%);
  transition: transform .25s ease;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__link {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: .03em;
  color: var(--navy);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__link[aria-current="page"] { color: var(--red-bright); }
.mobile-menu__close {
  align-self: flex-end;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  margin-bottom: 8px;
}

/* ---------- Section heading block ---------- */
.sec-head { max-width: 940px; margin: 0 auto 56px; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); color: var(--navy); font-weight: 700; margin-top: 14px; }
.sec-head h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 3px;
  margin: 20px auto 0;
  background: var(--red-bright);
}
.sec-head p { margin-top: 16px; }

.accent-line { position: relative; }
.accent-line::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 3px;
  margin: 20px 0 0;
  background: var(--red-bright);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(200, 16, 46, .18), transparent 60%),
    radial-gradient(900px 600px at 6% 110%, rgba(20, 57, 107, .55), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr minmax(420px, 540px); gap: 48px; align-items: center; padding-top: 62px; padding-bottom: 62px; }
.hero__left { position: relative; z-index: 4; }
.hero h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 700; letter-spacing: .005em; margin: 0; }
.hero h1 .u { display: inline-block; position: relative; }
.hero h1 .u::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.05em;
  height: .35em;
  background: var(--red-bright);
  z-index: -1;
  border-radius: 3px;
}
.hero__sub { margin-top: 18px; font-size: 18px; line-height: 1.6; color: #d4e0f0; max-width: 40ch; }
.hero__photo { position: relative; z-index: 1; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 460px; margin-top: 28px; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.hero__form { position: relative; z-index: 4; justify-self: end; width: 100%; }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 42px 24px; }
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 46px;
  width: 1px;
  background: var(--line);
}
.stat__n .red { color: var(--red-bright); }
.trust-badges .wrap { padding: 34px 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 16px 30px; justify-content: center; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}

/* ---------- How it works ---------- */
.how { background: var(--bg); position: relative; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stepcard {
  background: #fff;
  border-radius: var(--r);
  padding: 10px 30px 34px;
  box-shadow: var(--shadow-sm);
  position: relative;
  border: 1px solid var(--line);
  transition: transform .2s, box-shadow .2s;
}
.stepcard:hover { box-shadow: var(--shadow-md); }
.stepcard::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 24px;
  font-family: "Oswald";
  font-weight: 700;
  font-size: 230px;
  line-height: 1;
  color: var(--navy);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.stepcard:nth-child(1)::before { content: "1"; }
.stepcard:nth-child(2)::before { content: "2"; }
.stepcard:nth-child(3)::before { content: "3"; }
.stepcard__num, .stepcard__ic, .stepcard h3, .stepcard p { position: relative; z-index: 1; }
.stepcard__num { font-family: "Oswald"; font-weight: 700; font-size: 14px; color: var(--red-bright); letter-spacing: .14em; }
.stepcard__ic {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--navy), var(--navy-800));
  display: grid;
  place-items: center;
  margin: 16px 0 20px;
  color: #fff;
}
.stepcard__ic img { width: 28px; height: 28px; }
.stepcard h3 { font-size: 22px; color: var(--navy); font-weight: 600; }
.stepcard p { margin-top: 11px; color: var(--muted); font-size: 15.5px; }
.stepcard__arrow {
  position: absolute;
  top: 48px;
  right: -31px;
  color: #c6d2e2;
  z-index: 2;
  width: 42px;
  height: 22px;
}
.stepcard:last-child .stepcard__arrow { display: none; }

/* ---------- Why / benefits split ---------- */
.why .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-photo { position: relative; }
.why-photo__img { width: 100%; height: 480px; object-fit: cover; object-position: center top; border-radius: var(--r); box-shadow: var(--shadow-md); }
.why-photo__blob { position: absolute; width: 160px; height: 160px; background: var(--red); border-radius: 30px; top: -26px; left: -26px; z-index: -1; opacity: .9; }
.why-photo__blob--2 { background: var(--navy); bottom: -26px; right: -26px; top: auto; left: auto; border-radius: 50%; width: 120px; height: 120px; }
.photo-stat {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  max-width: 165px;
}
.photo-stat b { font-family: "Oswald"; font-size: 30px; line-height: 1; color: var(--red-bright); display: block; }
.photo-stat span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.photo-stat--a { top: 18px; left: 18px; }
.photo-stat--b { bottom: 18px; right: 18px; }

.blist { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.blist__it { display: flex; gap: 16px; align-items: flex-start; }
.blist__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; background: #eef3fb; display: grid; place-items: center; border: 1px solid #dde6f3; color: var(--navy); }
.blist__ic img { width: 21px; height: 21px; }
.blist__it h4 { font-size: 18px; color: var(--navy); font-weight: 600; }
.blist__it p { margin-top: 4px; color: var(--muted); font-size: 15px; }

/* ---------- Use cases / who it helps ---------- */
.usecases { background: #fff; }
.usecase { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.usecase:hover { box-shadow: var(--shadow-md); }
.usecase h3 { font-size: 20px; color: var(--navy); font-weight: 600; }
.usecase p { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* ---------- Cards (tools / blog previews) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--navy);
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}
.card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__meta { font-family: "Oswald"; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; color: var(--muted-2); font-weight: 600; margin-bottom: 8px; }
.card h3 { font-size: 21px; color: var(--navy); font-weight: 600; line-height: 1.1; }
.card p { margin-top: 10px; color: var(--muted); font-size: 14.5px; flex: 1; }
.card__more {
  margin-top: 18px;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  color: var(--red-bright);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card__more img { width: 15px; height: 15px; transition: transform .2s; }
.card:hover .card__more img { transform: translateX(4px); }

/* Tool preview card (no image, icon-led) */
.toolcard { background: #fff; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 28px 26px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.toolcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.toolcard__ic { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(160deg, var(--navy), var(--navy-800)); display: grid; place-items: center; color: #fff; margin-bottom: 18px; }
.toolcard__ic img { width: 26px; height: 26px; }
.toolcard h3 { font-size: 19px; color: var(--navy); font-weight: 600; line-height: 1.15; }
.toolcard p { margin-top: 10px; color: var(--muted); font-size: 14.5px; flex: 1; }
.toolcard__more { margin-top: 16px; font-family: "Oswald"; text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; color: var(--red-bright); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.toolcard__more img { width: 14px; height: 14px; transition: transform .2s; }
.toolcard:hover .toolcard__more img { transform: translateX(4px); }

.bg-soft { background: var(--bg); }
.empty-note { text-align: center; color: var(--muted); font-size: 16px; padding: 20px 0; }

/* ---------- App promo ---------- */
.apppromo { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%); }
.apppromo .wrap { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; z-index: 1; }
.apppromo h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; }
.apppromo p { margin-top: 16px; color: #d4e0f0; font-size: 17px; max-width: 48ch; }
.app-badges { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.app-badge { display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; border-radius: 12px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .18); }
.app-badge img { width: 24px; height: 24px; }
.app-badge b { font-family: "Oswald"; font-size: 17px; line-height: 1; display: block; }
.app-badge span { font-size: 11px; color: #c3d1e4; }
table.data-t { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 15px; }
table.data-t th, table.data-t td { padding: 15px 18px; text-align: center; }
table.data-t thead th {
  background: var(--navy);
  color: #fff;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  font-size: 14px;
}
table.data-t thead th:first-child { text-align: left; }
table.data-t tbody th { background: #f3f6fb; color: var(--navy); font-weight: 600; text-align: left; font-size: 14px; border-right: 1px solid var(--line); }
table.data-t tbody tr:nth-child(even) td, table.data-t tbody tr:nth-child(even) th { background: #fafbfd; }
table.data-t tbody tr:nth-child(even) th { background: #eef3fa; }
table.data-t tbody tr:last-child th, table.data-t tbody tr:last-child td { background: var(--navy-900); color: #fff; font-weight: 600; }

/* ---------- Forms ---------- */
.field-label {
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  display: block;
}
.inp {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: "Libre Franklin";
  outline: none;
  transition: border .15s;
  color: var(--ink);
}
.inp:focus { border-color: var(--navy); }
.inp::placeholder { color: #aab4c2; }
.inp.is-invalid { border-color: var(--red-bright); background: #fff6f8; }
select.inp { color: var(--ink); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { color: var(--red-bright); font-size: 12.5px; margin: 6px 0 0; font-weight: 600; }

.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: var(--muted-2); cursor: pointer; }
.consent-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red-bright); }

.form-card {
  max-width: 540px;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.form-card__top {
  background: linear-gradient(100deg, #00152f, #000000);
  color: #fff;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.form-card__top h3 { font-size: 23px; font-weight: 600; letter-spacing: .02em; }
.form-card__pill {
  font-size: 11px;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  padding: 6px 11px;
  border-radius: 7px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-card__pill img { filter: brightness(0) invert(1); }
.form-card__body { padding: 20px 26px 22px; }

.progress { display: flex; gap: 0; margin: -20px -26px 18px; }
.progress i { height: 6px; flex: 1; background: var(--line); transition: .3s; }
.progress i.on { background: var(--red-bright); }

.form-step { display: none; }
.form-step.is-active { display: block; animation: form_fade .35s ease; }
@keyframes form_fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.amt-display { font-family: "Oswald"; font-weight: 700; font-size: 40px; color: var(--navy); line-height: 1; margin: 4px 0 0; }
.amt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 6px;
  outline: none;
  margin: 10px 0 6px;
  cursor: pointer;
  background: linear-gradient(90deg, var(--red-bright) 50%, var(--line) 50%);
}
.amt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--red-bright);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  cursor: grab;
}
.amt-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--red-bright);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  cursor: grab;
}
.range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-2); font-weight: 600; }

.form-foot { margin-top: 18px; }
.form-foot .btn { width: 100%; }
.micro { font-size: 12px; color: var(--muted-2); line-height: 1.5; margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; }
.micro img { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.back-link {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: "Oswald";
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .05em;
  cursor: pointer;
  padding: 6px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.back-link:hover { color: var(--navy); }
.back-link::before { content: "\2039"; font-size: 18px; line-height: 1; }
.form-status { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.form-status--error { color: var(--red-bright); }
.form-success { text-align: center; padding: 14px 6px; }
.form-success__ring { width: 74px; height: 74px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; margin: 6px auto 18px; color: var(--green); }
.form-success__ring img { width: 34px; height: 34px; }
.form-success h3 { font-size: 26px; color: var(--navy); margin-bottom: 10px; }

/* ---------- FAQ accordion ---------- */
.faq { background: var(--bg); }
.faq .wrap { max-width: 880px; }
.faq-intro { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.faq-intro h2 { font-size: clamp(30px, 4vw, 44px); color: var(--navy); font-weight: 700; }
.faq-intro h2::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 3px; margin: 20px auto 0; background: var(--red-bright); }
.faq-intro p { margin-top: 16px; color: var(--muted); }
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc__item { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.acc__item[open] { box-shadow: var(--shadow-md); border-color: #cdd9ea; }
.acc__q {
  text-align: left;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--navy);
  list-style: none;
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q::marker { content: ""; }
.acc__qi { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #f0f4fa; display: grid; place-items: center; transition: .25s; color: var(--navy); }
.acc__qi img { width: 15px; height: 15px; transition: transform .25s; }
.acc__item[open] .acc__qi { background: var(--red-bright); color: #fff; }
.acc__item[open] .acc__qi img { transform: rotate(45deg); }
.acc__a { padding: 0 22px 22px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.acc__a a { color: var(--red-bright); font-weight: 600; text-decoration: underline; }

/* ---------- Final CTA band ---------- */
.cta {
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 85% 0%, rgba(200, 16, 46, .25), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
}
.cta .wrap { position: relative; text-align: center; padding: 84px 24px; }
.cta h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 700; }
.cta h2 .u { color: var(--red-bright); }
.cta p { margin: 18px auto 0; max-width: 54ch; color: #d4e0f0; font-size: 18px; }
.cta__btns { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #9fb1c9; font-size: 14px; }
.site-footer__top { padding: 60px 0 44px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__logo { height: 56px; width: auto; }
.site-footer__pitch { margin-top: 18px; font-size: 14px; line-height: 1.65; max-width: 36ch; color: #c3d1e4; }
.site-footer__col-title { font-family: "Oswald"; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 16px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__list a { color: #9fb1c9; transition: color .15s; }
.site-footer__list a:hover { color: #fff; }

.site-footer__legal { padding: 34px 0 50px; }
.site-footer__legal .wrap { font-size: 12px; line-height: 1.7; color: #7d90ab; display: flex; flex-direction: column; gap: 14px; }
.disclosure { padding: 18px 20px; background: rgba(255, 255, 255, .04); border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: 10px; }
.disclosure__line { margin: 0; }
.disclosure__line strong { color: #aebfd6; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---------- Money Guide (blog index) ---------- */
.guide-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(200, 16, 46, .18), transparent 60%),
    radial-gradient(900px 600px at 6% 110%, rgba(20, 57, 107, .55), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
}
.guide-hero .wrap { position: relative; text-align: center; padding: 74px 24px 78px; }
.guide-hero h1 { font-size: clamp(40px, 5.5vw, 66px); font-weight: 700; }
.guide-hero h1 .u {
  background-image: linear-gradient(var(--red-bright), var(--red-bright));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% .26em;
  border-radius: 3px;
}
.guide-hero p { margin: 20px auto 0; max-width: 60ch; color: #d4e0f0; font-size: 18px; line-height: 1.6; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination a, .pagination span {
  font-family: "Oswald";
  font-weight: 600;
  font-size: 15px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
}
.pagination a:hover { border-color: var(--navy); }
.pagination .is-current { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ---------- Single article ---------- */
.article-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
}
.article-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.article-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 49, 97, .30) 0%, rgba(8, 30, 60, .74) 62%, rgba(7, 24, 49, .94) 100%);
}
.article-hero .stars { z-index: 2; }
.article-hero .wrap { position: relative; z-index: 3; max-width: 1120px; padding: 64px 24px 60px; }
.crumb {
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  color: #9fc0e6;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  transition: color .15s;
}
.crumb:hover { color: #fff; }
.art-cat {
  display: inline-block;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 600;
  background: var(--red-bright);
  color: #fff;
  padding: 7px 13px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.article-hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.04; max-width: 20ch; }
.art-meta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: #bcccdf; font-size: 14px; font-weight: 500; }
.art-meta i { width: 4px; height: 4px; border-radius: 50%; background: #6f86a6; display: block; }

.article-body { background: #fff; }
.article-body .wrap { max-width: 840px; }
.prose { max-width: 680px; margin: 0 auto; }
.prose .lead-p { font-size: 21px; line-height: 1.6; color: var(--navy); font-weight: 500; margin: 0 0 14px; }
.prose p { margin: 0 0 20px; color: #3a4859; font-size: 17.5px; line-height: 1.78; }
.prose a { color: var(--red-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--red-700); }
.prose h2 {
  font-family: "Oswald";
  text-transform: uppercase;
  color: var(--navy);
  font-size: 25px;
  font-weight: 600;
  margin: 38px 0 14px;
  padding-left: 16px;
  border-left: 5px solid var(--red-bright);
}
.prose h3 { font-family: "Oswald"; text-transform: none; color: var(--navy); font-size: 21px; font-weight: 600; margin: 28px 0 12px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 24px; color: #3a4859; }
.prose li { margin-bottom: 10px; line-height: 1.6; }
.prose blockquote {
  margin: 28px 0;
  padding: 22px 28px;
  border-left: 5px solid var(--red-bright);
  background: var(--bg);
  border-radius: 0 10px 10px 0;
  font-size: 21px;
  line-height: 1.5;
  font-style: italic;
  color: var(--navy);
  font-weight: 500;
}
.article-cta {
  max-width: 680px;
  margin: 46px auto 0;
  background: linear-gradient(120deg, var(--navy), var(--navy-900));
  color: #fff;
  border-radius: 14px;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.article-cta h3 { font-size: 24px; font-weight: 600; color: #fff; }
.article-cta p { margin-top: 6px; color: #cfe0f2; font-size: 15px; max-width: 42ch; }
.article-cta .btn { flex: 0 0 auto; }

/* Author byline block */
.author-byline { display: flex; align-items: center; gap: 14px; margin: 40px auto 0; max-width: 680px; padding-top: 26px; border-top: 1px solid var(--line); }
.author-byline__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-byline__name { font-family: "Oswald"; font-size: 18px; color: var(--navy); font-weight: 600; }
.author-byline__role { font-size: 13.5px; color: var(--muted); }

/* ---------- Secondary page hero (about, tools, contact, legal, request) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(200, 16, 46, .18), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
}
.page-hero .wrap { position: relative; text-align: center; padding: 64px 24px 70px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; }
.page-hero p { margin: 18px auto 0; max-width: 58ch; color: #d4e0f0; font-size: 18px; line-height: 1.6; }
.request-layout .wrap { display: grid; grid-template-columns: 1fr minmax(380px, 520px); gap: 50px; align-items: start; }
.request-aside .lead { margin-top: 14px; }
.request-aside .badges { justify-content: flex-start; margin-top: 26px; }

/* Long-form legal / prose page body */
.legal-body { background: #fff; }
.legal-body .wrap { max-width: 820px; }
.legal-body h2 { font-family: "Oswald"; text-transform: uppercase; color: var(--navy); font-size: 24px; margin: 36px 0 12px; }
.legal-body h3 { font-family: "Oswald"; text-transform: none; color: var(--navy); font-size: 19px; margin: 24px 0 10px; }
.legal-body p { margin: 0 0 16px; color: #3a4859; }
.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 24px; color: #3a4859; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--red-bright); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .site-nav, .site-header__cta { display: none; }
  .burger { display: grid; }
  .hero .wrap { grid-template-columns: 1fr; padding-bottom: 48px; }
  .hero__form { justify-self: stretch; }
  .hero h1 { font-size: clamp(36px, 9vw, 52px); }
  .apppromo .wrap { grid-template-columns: 1fr; }
  .apppromo__mascot { display: none; }
  .request-layout .wrap { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 880px) {
  .section { padding: 72px 0; }
  .steps { grid-template-columns: 1fr; }
  .stepcard__arrow { display: none; }
  .why .wrap { grid-template-columns: 1fr; gap: 54px; }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .usecases .cards-3 { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .article-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  .util__intro span { display: none; }
  .trust .wrap { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
  .stat + .stat::before { display: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .cards-3 { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .usecases .cards-3 { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .brand__logo { height: 42px; }
  .util__rotator { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .util__rotator span:nth-child(1) { opacity: 1; }
  .util__rotator span:nth-child(2), .util__rotator span:nth-child(3) { display: none; }
}


/* ===== merged from authors.css ===== */
/* ==========================================================================
   American Cash Relief - author pages, about, and contact
   Loaded only on these pages (via the per-page $extra_head slot). Builds on
   main.css. No inline CSS anywhere.
   ========================================================================== */

/* ---------- Author profile header ---------- */
.author-hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.author-hero .wrap { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; padding: 56px 24px; }
.author-hero__photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-md); border: 4px solid #fff; }
.author-hero__back { font-family: "Oswald"; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--muted); font-weight: 600; display: inline-block; margin-bottom: 12px; }
.author-hero__back::before { content: "\2039"; margin-right: 6px; }
.author-hero__back:hover { color: var(--red-bright); }
.author-hero__name { font-size: clamp(30px, 4vw, 44px); color: var(--navy); font-weight: 700; }
.author-hero__title { font-family: "Oswald"; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--red-bright); font-weight: 600; margin-top: 8px; }
.author-hero__lead { margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 60ch; }
.author-hero__tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.author-tag { font-size: 12.5px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: 6px 14px; }

/* ---------- Author bio body ---------- */
.author-bio { background: #fff; }
.author-bio .wrap { max-width: 760px; }
.author-bio h2 { font-family: "Oswald"; text-transform: uppercase; color: var(--navy); font-size: 24px; margin: 0 0 14px; }
.author-bio p { margin: 0 0 16px; color: #3a4859; font-size: 17px; line-height: 1.75; }

/* ---------- Authors index grid ---------- */
.author-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.author-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .2s, box-shadow .2s; }
.author-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.author-card__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.author-card__name { font-family: "Oswald"; font-size: 21px; color: var(--navy); font-weight: 600; }
.author-card__title { font-size: 13px; color: var(--red-bright); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.author-card__bio { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.author-card__more { margin-top: 16px; font-family: "Oswald"; text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; color: var(--red-bright); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.author-card__more img { width: 14px; height: 14px; }

/* ---------- About page ---------- */
.about-section { background: #fff; }
.about-section--soft { background: var(--bg); }
.about-section .wrap { max-width: 880px; }
.about-lead { font-size: 21px; line-height: 1.6; color: var(--navy); font-weight: 500; margin: 0 0 18px; }
.about-section h2 { font-family: "Oswald"; text-transform: uppercase; color: var(--navy); font-size: 26px; margin: 0 0 16px; }
.about-section h3 { font-family: "Oswald"; text-transform: none; color: var(--navy); font-size: 20px; margin: 24px 0 10px; }
.about-section p { margin: 0 0 16px; color: #3a4859; font-size: 17px; line-height: 1.75; }
.about-standards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.about-standards li { position: relative; padding-left: 36px; color: #3a4859; font-size: 16px; line-height: 1.6; }
.about-standards li img { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; color: var(--green); }
.about-disclosure { margin-top: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.about-disclosure h3 { margin-top: 0; }
.about-disclosure p { font-size: 15.5px; color: var(--muted); margin-bottom: 0; }

.about-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.about-step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); }
.about-step__n { font-family: "Oswald"; font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--red-bright); }
.about-step h3 { margin: 12px 0 8px; font-size: 18px; }
.about-step p { font-size: 14.5px; color: var(--muted); margin: 0; }

.about-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.about-team__card { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-sm); transition: box-shadow .2s; }
.about-team__card:hover { box-shadow: var(--shadow-md); }
.about-team__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.about-team__name { font-family: "Oswald"; font-size: 17px; color: var(--navy); font-weight: 600; display: block; }
.about-team__title { font-size: 12.5px; color: var(--muted); display: block; }

/* ---------- Contact page ---------- */
.contact-layout { background: var(--bg); }
.contact-layout .wrap { display: grid; grid-template-columns: 1fr minmax(360px, 520px); gap: 48px; align-items: start; }
.contact-aside h2 { font-size: clamp(26px, 3vw, 38px); color: var(--navy); font-weight: 700; }
.contact-aside p { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.contact-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.contact-points li { display: flex; gap: 14px; align-items: flex-start; }
.contact-points__ic { width: 42px; height: 42px; border-radius: 11px; background: #eef3fb; border: 1px solid #dde6f3; display: grid; place-items: center; flex: 0 0 auto; color: var(--navy); }
.contact-points__ic img { width: 20px; height: 20px; }
.contact-points b { display: block; color: var(--navy); font-size: 16px; }
.contact-points span { color: var(--muted); font-size: 14.5px; }
.contact-points a { color: var(--red-bright); font-weight: 600; }

.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 30px; }
.contact-card h2 { font-size: 22px; color: var(--navy); font-weight: 600; margin-bottom: 6px; }
.contact-card__intro { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.contact-form { display: grid; gap: 16px; }
.contact-form .field-label { margin-bottom: 6px; }
.contact-form textarea.inp { min-height: 150px; resize: vertical; font-family: "Libre Franklin"; line-height: 1.6; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-message { border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; font-size: 15px; line-height: 1.6; }
.form-message--success { background: var(--green-soft); border: 1px solid #bfe6cd; color: #1c6b3f; }
.form-message--error { background: #fff3f5; border: 1px solid #f3c4ce; color: var(--red-700); }
.form-message h3 { font-family: "Oswald"; text-transform: uppercase; font-size: 17px; margin: 0 0 6px; color: inherit; }
.form-message ul { margin: 8px 0 0; padding-left: 20px; }
.form-message p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .author-hero .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 24px; }
  .author-hero__lead { margin-left: auto; margin-right: auto; }
  .author-hero__tags { justify-content: center; }
  .author-cards { grid-template-columns: 1fr; }
  .about-steps { grid-template-columns: 1fr; }
  .about-team { grid-template-columns: 1fr; }
  .contact-layout .wrap { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .author-hero__photo { width: 140px; height: 140px; }
  .contact-card { padding: 24px 20px; }
}


/* ===== merged from calculators.css ===== */
/* ==========================================================================
   American Cash Relief - calculator pages
   Loaded only on the tools index and the four calculator pages (via the
   per-page $extra_head slot). Reuses the tokens and components from main.css;
   adds the calculator-specific layout here. No inline CSS anywhere.
   ========================================================================== */

/* Tools index list */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tools-grid .toolcard { height: 100%; }

/* Calculator shell: form on the left, results on the right */
.tool-shell { background: var(--bg); }
.tool-shell .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }

.calc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 30px 34px;
}
.calc h2 { font-size: 22px; color: var(--navy); font-weight: 600; }
.calc__intro { margin-top: 10px; color: var(--muted); font-size: 15px; }
.calc__grid { margin-top: 22px; display: grid; gap: 18px; }
.calc__field { display: flex; flex-direction: column; }
.calc__field .field-label { margin-bottom: 6px; }
.calc__hint { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }
.calc__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.calc__submit { margin-top: 24px; }
.calc__submit .btn { width: 100%; }

/* Input affordance for currency/percent fields */
.input-wrap { position: relative; }
.input-wrap .input-prefix,
.input-wrap .input-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  font-weight: 600;
  font-size: 15px;
  pointer-events: none;
}
.input-wrap .input-prefix { left: 14px; }
.input-wrap .input-suffix { right: 14px; }
.input-wrap .inp--prefixed { padding-left: 30px; }
.input-wrap .inp--suffixed { padding-right: 32px; }

/* Debt rows (debt payoff tool) */
.debt-rows { display: flex; flex-direction: column; gap: 16px; }
.debt-row { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fbfcfe; }
.debt-row__head { font-family: "Oswald"; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; color: var(--navy); font-weight: 600; margin-bottom: 12px; }
.debt-row__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Results panel */
.calc-result {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 96px;
}
.calc-result h2 { color: #fff; font-size: 20px; font-weight: 600; }
.calc-result__hint { margin-top: 10px; color: #cfe0f2; font-size: 14px; }

.result-grid { margin-top: 22px; display: grid; gap: 14px; }
.result-stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 16px 18px; }
.result-stat__label { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #aebfd6; font-family: "Oswald"; font-weight: 600; }
.result-stat__value { font-family: "Oswald"; font-weight: 700; font-size: 30px; line-height: 1.05; margin-top: 6px; }
.result-stat--accent .result-stat__value { color: #ff9db4; }
.result-stat--big .result-stat__value { font-size: 40px; }

.result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.result-summary { margin-top: 20px; font-size: 14.5px; line-height: 1.6; color: #e7eefa; }
.result-summary p { margin: 0 0 10px; }
.result-summary p:last-child { margin-bottom: 0; }

/* Explainer + disclosure + related */
.tool-explainer { background: #fff; }
.tool-explainer .wrap { max-width: 820px; }
.tool-explainer h2 { font-family: "Oswald"; text-transform: uppercase; color: var(--navy); font-size: 24px; margin: 0 0 14px; }
.tool-explainer p { margin: 0 0 16px; color: #3a4859; }
.tool-explainer .disclaimer {
  margin-top: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--muted);
}

.related { background: var(--bg); }
.related .wrap { max-width: 980px; }
.related-links { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  transition: border-color .15s, box-shadow .2s;
}
.related-links a:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.related-links img { width: 16px; height: 16px; flex: 0 0 auto; margin-left: auto; }

.tool-cta { display: flex; justify-content: center; margin-top: 30px; }

/* Responsive */
@media (max-width: 880px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-shell .wrap { grid-template-columns: 1fr; gap: 28px; }
  .calc-result { position: static; }
  .related-links { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .calc__row, .calc__row--3, .debt-row__grid { grid-template-columns: 1fr; }
  .result-cols { grid-template-columns: 1fr; }
  .calc { padding: 24px 20px 28px; }
  .calc-result { padding: 24px 20px; }
}


/* ===== merged from article.css ===== */
/* ==========================================================================
   American Cash Relief - article-page chrome
   Loaded only on money_guide article pages (via the per-page $extra_head slot).
   Small additions on top of main.css for the breadcrumb row and byline link.
   ========================================================================== */

.article-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 22px; }
.article-crumbs .crumb { margin-bottom: 0; }
.article-crumbs .crumb + .crumb { position: relative; padding-left: 18px; }
.article-crumbs .crumb + .crumb::before {
  content: "/";
  position: absolute;
  left: 4px;
  color: #6f86a6;
  font-weight: 400;
}

.art-meta__author { color: #eaf2fc; font-weight: 600; transition: color .15s; }
.art-meta__author:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.keep-reading .sec-head { margin-bottom: 40px; }


/* ===== merged from overrides.css ===== */
/* ==========================================================================
   American Cash Relief - site-wide refinements
   Loaded right after main.css on every page (via head.php). These rules are
   intentionally last so they win at equal specificity. They carry the fixes
   from the live design review, which are shared and apply across the site.
   No inline CSS anywhere.
   ========================================================================== */

/* Fix 1: stop the decorative .why-photo blob from causing horizontal scroll
   at 375px. Clipping on the section keeps the negative-offset blob inside the
   viewport while leaving the layout intact. */
.why { overflow-x: clip; }
@supports not (overflow: clip) {
  .why { overflow-x: hidden; }
}

/* Fix 12: why_family.jpg is portrait shown in a landscape frame. Anchor the
   crop toward the top so the faces are not cut off. */
.why-photo__img { object-position: center bottom; }

/* Fix 4: the red accent underline under "Built to Help Americans Move Forward"
   was not rendering. Re-assert it so the heading gets its bar like the others. */
.why .accent-line { position: relative; }
.why .accent-line::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 3px;
  margin: 20px 0 0;
  background: var(--red-bright);
}

/* Fix 3: ghost buttons had a near-invisible pale border. Give them a clearly
   visible navy outline that reads as a button, with a filled hover state. */
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--ghost:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Fix 2: keep all six trust badges on one row at desktop. An even six-column
   grid removes the orphaned 4+2 wrap. Collapses sensibly on smaller screens. */
.trust-badges .badges {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 14px;
  align-items: center;
}
.trust-badges .badge {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
@media (max-width: 980px) {
  .trust-badges .badges { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .trust-badges .badges { grid-template-columns: repeat(2, 1fr); }
  .trust-badges .badge { flex-direction: row; }
}

/* Fix 5: the mobile menu close button and scrim must be clickable. When the
   menu is closed, nothing in it can intercept taps; when open, the scrim sits
   below the panel, and the close button sits on top of the panel. Explicit
   pointer-events and stacking guarantee both dismiss the menu. */
.mobile-menu { pointer-events: none; }
.mobile-menu.is-open { pointer-events: auto; }
.mobile-menu__scrim { z-index: 1; pointer-events: auto; }
.mobile-menu__panel { z-index: 2; pointer-events: auto; }
.mobile-menu__close { position: relative; z-index: 3; pointer-events: auto; }

/* Fix 6: when a FAQ <details> item is open, turn the plus icon into an x by
   rotating it 45 degrees. */
.acc__item[open] .acc__qi img { transform: rotate(45deg); }

/* Fix 11: the active step's progress dot should be filled too. The form JS
   marks dots with .on for every step up to and including the current one. */
.progress i.on { background: var(--red-bright); }

/* Fix 8: hide the entire utility bar on mobile. At 375px it showed almost
   nothing useful, so the whole bar comes off, not just the left text. */
@media (max-width: 600px) {
  .util { display: none; }
}

/* Fix 9: app-store badges now use proper badge SVGs sized as wide buttons. */
.app-badge { padding: 0; background: transparent; border: 0; }
.app-badge:hover { transform: translateY(-2px); }
.app-badge img { width: auto; height: 52px; display: block; border-radius: 10px; }
.request-trust .badges { justify-content: flex-start; gap: 14px 22px; }

/* ===== merged from fixes.css (sample-fidelity fix pass) ===== */
/* ==========================================================================
   American Cash Relief - fix-list overrides
   Loaded right after main.css on every page (via head.php), so these rules win
   at equal specificity. They carry the changes from the latest fix list and
   keep the site aligned with the SAMPLE HTML references. No inline CSS anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: left column (copy + request-form card) with the eagle mascot on the
   right, matching the SAMPLE HTML hero (#heroMascot). The hero markup now nests
   the form card inside .hero__left, so the hero is a single left column with the
   mascot positioned over the right side of the band.
   -------------------------------------------------------------------------- */
.hero--mascot .wrap {
  display: block;
  position: relative;
  padding-top: 62px;
  padding-bottom: 0;
}
.hero--mascot .hero__left {
  max-width: 600px;
  width: 100%;
}
.hero--mascot .hero__form {
  margin-top: 28px;
  margin-bottom: 25px;
  justify-self: start;
  max-width: 540px;
}
.hero--mascot .hero__form .form-card { margin: 0; }

.hero__mascot {
  position: absolute;
  bottom: 0;
  right: max(0px, calc(50vw - 600px));
  height: 560px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .42));
}

@media (max-width: 1100px) {
  .hero__mascot { height: 460px; right: max(0px, calc(50vw - 600px)); }
}
@media (max-width: 980px) {
  .hero__mascot { display: none; }
  .hero--mascot .hero__left { max-width: none; }
  .hero--mascot .hero__form { justify-self: stretch; max-width: 540px; }
}

/* --------------------------------------------------------------------------
   White icons on colored backgrounds. The step-card, tool-card, and tools-index
   icon tiles sit on a navy gradient, so their <img> glyphs must render white.
   The icons are black-on-transparent SVGs, so invert them to pure white.
   -------------------------------------------------------------------------- */
.stepcard__ic img,
.toolcard__ic img {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Single article: the hero band reads wider than the body text column. The hero
   wrap spans the full content width while the prose stays at a comfortable
   reading measure, so the hero is clearly wider than the paragraph text.
   -------------------------------------------------------------------------- */
.article-hero .wrap { max-width: var(--maxw); }
.article-hero h1 { max-width: 24ch; }
.article-body .wrap { max-width: 820px; }
.prose { max-width: 680px; }

/* sample hero accent stripe (red/white/navy) */
.hero .stripe-accent{position:absolute;top:0;left:0;right:0;height:6px;z-index:5;opacity:.9;background:linear-gradient(90deg, var(--red-bright) 0 33%, #fff 33% 66%, var(--navy) 66% 100%);}

/* Who-it-helps: icon-led layout, deliberately unlike the article cards */
.usecases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.usecase-item { text-align: center; padding: 8px 16px; }
.usecase-item__ic {
  width: 112px; height: 112px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(20,57,107,.10), rgba(20,57,107,.04));
  border: 1px solid var(--line);
}
.usecase-item__ic img { width: 64px; height: 64px; object-fit: contain; }
.usecase-item h3 { margin: 0 0 10px; font-size: 21px; color: var(--navy); }
.usecase-item p { margin: 0; color: var(--muted); line-height: 1.65; max-width: 34ch; margin-inline: auto; }
@media (max-width: 820px) { .usecases__grid { grid-template-columns: 1fr; gap: 26px; } }

/* App-promo rendered as the final CTA band */
.apppromo-cta .app-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.apppromo-cta .app-badge img { height: 56px; width: auto; }

/* white arrow on filled buttons (match the white label) */
.btn--red .btn__icon, .btn--navy .btn__icon { filter: brightness(0) invert(1); }

/* Clickable card title: visually identical to the h3, hover affordance only */
.card h3 a, .card__title-link { color: inherit; text-decoration: none; }
.card h3 a:hover, .card__title-link:hover { color: var(--red-bright); }

/* FAQ open state: white plus icon over the red background */
.acc__item[open] .acc__qi img { filter: brightness(0) invert(1); }

/* Tool pages: single centered calculator column (result stacks below the form) */
.tool-shell .wrap { display: block; max-width: 680px; }
.tool-shell .calc { margin: 0 auto; }
.tool-shell .calc-result { position: static; top: auto; margin-top: 24px; }

/* Footer: center the copyright line (single item) */
.site-footer__bottom { justify-content: center; text-align: center; }

/* Point-of-consent fine print under the submit checkbox */
.consent-fine { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.consent-fine a { color: var(--navy); text-decoration: underline; }