/* The "bold" look (client-config brand.style: "bold"). Linked from components/BoldStyle.astro only
   when that's set. Kept in public/ (a plain file, not scanned by Tailwind) so it adds nothing to
   the template's CSS for other sites.
   Two scopes, never both on one page:
   - .home-bold: the homepage's <main> (its hero, stats, path cards, map). Homepage only.
   - .bold-page: BaseLayout's page wrapper on every OTHER page (headings, cards, dividers).
   Reading text (blog articles, legal pages, .article-prose / .prose-blog) keeps its font, size,
   line-height and measure; only its headings move to Archivo, in sentence case. */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-italic.woff2") format("woff2");
}

.home-bold,
.bold-page {
  --b-ink: #0d1411;
  --b-rule: #d3cec4;
  --b-paper: #fbf8ef;
  --b-green: var(--brand-primary, #15803d);
  --b-display: "Archivo Variable", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Headlines: heavy, condensed, all caps ---------- */
.home-bold h1,
.home-bold h2 {
  font-family: var(--b-display);
  font-stretch: 78%;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.92;
  overflow-wrap: break-word;
}
.home-bold h1,
.home-bold h2:not(.text-white) { color: var(--b-ink); }
.home-bold h2 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); }

/* Hero: the headline sizes to its own column (cqi units), so it can never run under the
   video or the blueprint drawing beside it at any width. */
.home-bold .hero-gradient-home .grid > div:first-child { container-type: inline-size; }
.home-bold h1 {
  font-size: clamp(2.5rem, 14cqi, 6.25rem);
  line-height: 0.9;
  letter-spacing: -0.018em;
}
.home-bold h1 .text-gradient {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.04em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--b-green);
}

/* Stronger section rules */
.home-bold .section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--b-rule) 12%, var(--b-rule) 88%, transparent 100%);
}

/* ---------- Stats under the hero: four separate cells, never touching ---------- */
.home-bold .bold-stats { border-color: var(--b-rule); }
.home-bold .bold-stats > div { padding-top: 0; padding-bottom: 0; }
.home-bold .bold-stats > div > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--b-rule);
  text-align: left;
}
@media (min-width: 768px) {
  .home-bold .bold-stats > div > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home-bold .bold-stats .w-px { display: none; }
.home-bold .bold-stats .animate-in {
  min-width: 0;
  background: #fff;
  padding: 1.75rem 1.25rem 1.6rem;
}
@media (min-width: 768px) {
  .home-bold .bold-stats .animate-in { padding: 2.25rem 2rem 2rem; }
}
.home-bold .bold-stats .stat-number {
  font-family: var(--b-display);
  font-stretch: 75%;
  font-weight: 850;
  font-size: clamp(2.6rem, 5.4vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--b-ink);
  white-space: nowrap;
}
.home-bold .bold-stats .stat-number + div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  color: #4b5563;
  letter-spacing: 0.14em;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .home-bold .bold-stats .stat-number + div { letter-spacing: 0.08em; gap: 0.4rem; }
}
.home-bold .bold-stats .stat-number + div::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--b-green);
}

/* ---------- Choose your path: a soft brand-green spotlight follows the mouse inside each card ----------
   index.astro's script sets --mx/--my (px) on the hovered card; fine pointers only. Touch screens get
   plain cards (no tracking, no glow). Keyboard focus: focus ring + a centred, static glow. */
.home-bold .bold-paths > a {
  --mx: 50%;
  --my: 50%;
  --glow: color-mix(in srgb, var(--b-green) 24%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff;
  border: 1.5px solid var(--b-rule);
  border-radius: 1rem;
  box-shadow: none;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, opacity 0.6s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-bold .bold-paths > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--glow), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.home-bold .bold-paths > a:hover { transform: none; box-shadow: none; }
.home-bold .bold-paths > a > div:first-child {
  font-family: var(--b-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--b-ink);
}
.home-bold .bold-paths > a > p { flex: 1; margin-top: 0.75rem; }
.home-bold .bold-paths > a > div:last-child {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-ink);
}
.home-bold .bold-paths-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
/* "Not sure yet": the one solid brand-green card, white text (5:1 with #15803d), a white-alpha glow */
.home-bold .bold-paths > a:last-of-type {
  --glow: color-mix(in srgb, #fff 22%, transparent);
  background: var(--b-green);
  border-color: var(--b-green);
}
.home-bold .bold-paths > a:last-of-type > *,
.home-bold .bold-paths > a:last-of-type > div:first-child,
.home-bold .bold-paths > a:last-of-type > div:last-child { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .home-bold .bold-paths > a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--b-green) 55%, var(--b-rule));
    box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--b-green) 55%, transparent);
  }
  .home-bold .bold-paths > a:last-of-type:hover {
    border-color: color-mix(in srgb, var(--b-green) 80%, #000);
    box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--b-green) 85%, transparent);
  }
  .home-bold .bold-paths > a:hover::before { opacity: 1; }
  .home-bold .bold-paths > a:hover > div:last-child { color: var(--b-green); }
  .home-bold .bold-paths > a:last-of-type:hover > div:last-child { color: #fff; }
  .home-bold .bold-paths > a:hover .bold-paths-arrow { transform: translateX(5px); }
}
/* Keyboard focus: ring + a centred, static glow (also on touch devices with a keyboard) */
.home-bold .bold-paths > a:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 3px; }
.home-bold .bold-paths > a:focus-visible:not(:hover)::before {
  background: radial-gradient(420px circle at 50% 50%, var(--glow), transparent 62%);
  opacity: 1;
}
.home-bold .bold-paths > a:focus-visible .bold-paths-arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .home-bold .bold-paths > a,
  .home-bold .bold-paths-arrow { transition: none; }
  .home-bold .bold-paths > a:hover,
  .home-bold .bold-paths > a:last-of-type:hover { transform: none; }
}

/* ---------- Where we lend: heading beside a map of the licensed states ---------- */
.home-bold .bold-where { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-bold .bold-where > :first-child { max-width: 46rem; }
.home-bold .bold-where h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.home-bold .bold-where > :last-child { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .home-bold .bold-where { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 3.5rem; }
  .home-bold .bold-where h2 { font-size: clamp(2.1rem, 3.5vw, 3.4rem); }
}
.home-bold .bold-where .rounded-2xl { border-color: var(--b-rule); }
.home-bold .bold-where .grid-cols-3 > div {
  background: #fff;
  border: 1.5px solid var(--b-ink);
  border-radius: 0.75rem;
  min-width: 0;
}
.home-bold .bold-where .grid-cols-3 > div > div:first-child {
  font-family: var(--b-display);
  font-stretch: 80%;
  font-weight: 850;
  font-size: 1.75rem;
  line-height: 1;
}

.home-bold .sm-wrap {
  --sm-ink: color-mix(in srgb, var(--b-green) 55%, #1f2937);
  position: relative;
  margin-top: 2.5rem;
  padding: 1.5rem;
}
@media (min-width: 1024px) { .home-bold .sm-wrap { margin-top: 0; } }
/* pale drafting paper, fading out on every edge (same family as the hero blueprint) */
.home-bold .sm-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--b-paper);
  background-image:
    linear-gradient(color-mix(in srgb, var(--sm-ink) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sm-ink) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--sm-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sm-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.home-bold .sm-map { position: relative; width: 100%; }
.home-bold .sm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.home-bold .sm-context path {
  fill: color-mix(in srgb, var(--sm-ink) 5%, transparent);
  stroke: color-mix(in srgb, var(--sm-ink) 40%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.home-bold .sm-states path {
  fill: color-mix(in srgb, var(--b-green) 11%, transparent);
  stroke: var(--sm-ink);
  stroke-width: 1.75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.home-bold .sm-dot { fill: var(--b-green); stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.home-bold .sm-dot-halo { fill: color-mix(in srgb, var(--b-green) 22%, transparent); }
.home-bold .sm-ring { fill: none; stroke: var(--b-green); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .home-bold .sm-ring { animation: sm-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .home-bold .sm-ring-2 { animation-delay: 1.3s; }
}
@keyframes sm-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(3); opacity: 0; }
}
.home-bold .sm-tag,
.home-bold .sm-pin-label { position: absolute; pointer-events: none; }
.home-bold .sm-tag { transform: translate(-50%, -50%); }
.home-bold .sm-tag::after {
  content: attr(data-l);
  display: block;
  padding: 3px 7px 2px;
  border: 1.5px solid var(--b-ink);
  border-radius: 5px;
  background: #fff;
  font: 800 13px/1 var(--b-display);
  font-stretch: 85%;
  letter-spacing: 0.08em;
  color: var(--b-ink);
}
@media (max-width: 639px) {
  .home-bold .sm-wrap { padding: 1rem 0.75rem; }
  .home-bold .sm-tag::after { font-size: 11px; padding: 2px 5px 1px; }
  .home-bold .sm-pin-label::after { font-size: 10px; padding: 3px 6px 2px; }
}
.home-bold .sm-pin-label { transform: translate(calc(-100% - 14px), -50%); }
.home-bold .sm-pin-label::after {
  content: attr(data-l);
  display: block;
  white-space: nowrap;
  padding: 4px 8px 3px;
  border-radius: 5px;
  background: var(--b-green);
  font: 800 12px/1 var(--b-display);
  font-stretch: 85%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* =====================================================================================
   Every other page (.bold-page = BaseLayout's wrapper when the page isn't the homepage)
   ===================================================================================== */

/* ---------- Display headings: heavy, condensed, all caps (like the homepage) ----------
   Not inside reading text, not the small label-style h2s ("Sources", "Key takeaways"), not
   blog-card titles, and not a widget heading that sets its own font inline. */
.bold-page :is(h1, h2):not(:is(.article-prose, .prose-blog) *):not(article.max-w-3xl h2):not([class~="text-sm"]):not([class~="group-hover:text-emerald-700"]):not([style*="font-family"]) {
  font-family: var(--b-display);
  font-stretch: 78%;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.95;
  overflow-wrap: break-word;
}
.bold-page :is(h1, h2):not(:is(.article-prose, .prose-blog) *):not(article.max-w-3xl h2):not([class~="text-sm"]):not([class*="text-white"]) { color: var(--b-ink); }

/* Page H1: a step smaller than the homepage hero */
.bold-page h1 {
  font-size: clamp(2.35rem, 1.25rem + 4.4vw, 4.25rem);
  line-height: 0.92;
  letter-spacing: -0.016em;
}
/* The team page's headline was set larger */
.bold-page h1[class~="md:text-7xl"] { font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5rem); }
/* Sentence-length headlines (loan pages, a team member, referral partners, calculators, guides, the blog) */
.bold-page h1:is([class~="leading-tight"], [class~="xl:text-6xl"], [class~="md:text-6xl"]) { font-size: clamp(2.15rem, 1.15rem + 3.7vw, 3.75rem); line-height: 0.95; }
/* The hero column beside a page video: never wider than its own column */
.bold-page .min-w-0:has(+ .hero-media) { container-type: inline-size; }
.bold-page .min-w-0:has(+ .hero-media) h1 { font-size: min(clamp(2.15rem, 1.15rem + 3.7vw, 3.75rem), 11.5cqi); }

/* The accent words: slanted serif in the brand green, like the homepage hero */
.bold-page h1 .text-gradient {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.04em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--b-green);
}

/* Section H2s, by the size they were set at */
.bold-page h2:not(article.max-w-3xl h2):not([class~="group-hover:text-emerald-700"]):is([class~="text-3xl"], [class~="md:text-5xl"]) { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem); }
.bold-page h2:not(article.max-w-3xl h2):not([class~="group-hover:text-emerald-700"])[class~="text-2xl"] { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.bold-page h2:not(article.max-w-3xl h2):not([class~="group-hover:text-emerald-700"])[class~="text-xl"] { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.85rem); line-height: 1; }
.bold-page h2:not(article.max-w-3xl h2):not([class~="group-hover:text-emerald-700"])[class~="text-lg"] { font-size: 1.4rem; line-height: 1; }

/* H3s (and the blog's own headings): Archivo bold, sentence case, about the same size */
.bold-page h3:not([style*="font-family"]),
.bold-page :is(.article-prose, .prose-blog, article.max-w-3xl) :is(h2, h3):not([class~="text-sm"]),
.bold-page h2[class~="group-hover:text-emerald-700"] {
  font-family: var(--b-display);
  font-stretch: 90%;
  font-weight: 750;
  letter-spacing: -0.008em;
}
.bold-page.bold-page :is(.article-prose, .prose-blog, article.max-w-3xl) :is(h2, h3) { font-weight: 700; }

/* Stronger section rules */
.bold-page .section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--b-rule) 12%, var(--b-rule) 88%, transparent 100%);
}

/* ---------- Cards: the homepage's border weight ---------- */
.bold-page :is(.rounded-2xl, .rounded-3xl)[class~="border-gray-200"]:not(.accent-card),
.bold-page .s-card {
  border-width: 1.5px;
  border-color: var(--b-rule);
}

/* ---------- Clickable cards: the homepage's cursor-follow spotlight, lift and green tint ----------
   Calculator, loan, team, blog, related-post and "where to next" cards (and the cards that already
   lifted on hover). BoldStyle.astro sets --mx/--my on the hovered card; fine pointers only. */
.bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block) {
  --mx: 50%;
  --my: 50%;
  --glow: color-mix(in srgb, var(--b-green) 24%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #fff;
  border: 1.5px solid var(--b-rule);
  box-shadow: none;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--glow), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Related articles under a post had no frame; they get the same card */
.bold-page article.max-w-3xl .grid > a.group.block:not([class~="border-gray-200"]) { border-radius: 0.75rem; padding: 0.75rem 0.75rem 1rem; }
.bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block):hover { transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--b-green) 55%, var(--b-rule));
    box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--b-green) 55%, transparent);
  }
  .bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block):hover::before { opacity: 1; }
}
.bold-page :is(a.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block):focus-visible,
.bold-page a:focus-visible > .card-hover { outline: 3px solid var(--b-ink); outline-offset: 3px; }
.bold-page :is(a.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block):focus-visible:not(:hover)::before,
.bold-page a:focus-visible > .card-hover:not(:hover)::before {
  background: radial-gradient(420px circle at 50% 50%, var(--glow), transparent 62%);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block) { transition: none; }
  .bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"], a.group.block[class~="border-gray-200"], article.max-w-3xl .grid > a.group.block):hover { transform: none; }
}
/* Card titles (loan names, calculators, people): the homepage's path-card title */
.bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"]) :is(h2, h3):not([class~="group-hover:text-emerald-700"]) {
  font-family: var(--b-display);
  font-stretch: 80%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
}
.bold-page.bold-page.bold-page :is(.card-hover, a.accent-card, a[class~="rounded-xl"][class~="shadow-sm"]) :is(h2, h3):is([class~="text-xl"], [class~="text-lg"]) { font-size: 1.45rem; }

/* ---------- Get started: the one-question card ---------- */
.bold-page .s-q {
  font-family: var(--b-display);
  font-stretch: 90%;
  word-spacing: 0.04em;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--b-ink);
}
.bold-page .s-opt { border-width: 1.5px; }
/* A card whose title is a plain line rather than a heading (About "How we work", Get started) */
.bold-page .card-hover > div[class~="text-lg"][class~="font-semibold"]:first-child,
.bold-page a.accent-card > div:first-child {
  font-family: var(--b-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--b-ink);
}
/* Loan cards' "… details →" line: the homepage path cards' small tracked caps */
.bold-page a.accent-card > div:last-child {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* State codes on the service-area cards: the homepage map's state cells */
.bold-page .rounded-2xl > span[class~="text-3xl"][class~="font-bold"]:first-child {
  font-family: var(--b-display);
  font-stretch: 80%;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  color: var(--b-ink);
}