/* =====================================================================
   LMK Media. One stylesheet, hand written, no framework.

   Look: the parent company behind the brands. Graphite and steel, a
   chrome wordmark that only lives on dark, a serif for statements and a
   neutral grotesque for everything else. Institutional, not promotional.

   Deliberately unlike its own brands: FreshRateHub is evergreen ink with
   mono figures, LenderMatch is slate and azure. This is near-black.

   Contrast audited on --bg #0A0D11:
     --text   #E9EEF4  16.9:1      --muted  #9FADBC  8.1:1
     --faint  #72808F  4.6:1       --accent #7FA9D4  8.4:1
   --faint is never used below 14px.

   Sections: tokens, base, a11y, layout, header, buttons, hero, facts,
   cards, brands, prose, contact, footer, reveal, responsive.
   ===================================================================== */

/* --------------------------------------------------------- 1. tokens */
:root {
  --bg:        #0A0D11;
  --bg-2:      #10151B;
  --bg-3:      #161C24;
  --bg-4:      #1C242E;

  --line:      #222B35;
  --line-2:    #2E3946;

  --text:      #E9EEF4;
  --muted:     #9FADBC;
  --faint:     #72808F;

  --accent:    #7FA9D4;
  --accent-dp: #5E8CBA;
  --accent-tint: rgba(127, 169, 212, .12);

  --chrome-1:  #A7AEB6;
  --chrome-2:  #CDD2D7;
  --chrome-3:  #E4E7EA;

  --r:     10px;
  --r-lg:  16px;
  --r-xl:  22px;

  --wrap:  1180px;
  --prose: 68ch;

  --t:     200ms cubic-bezier(.4, 0, .2, 1);

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* ----------------------------------------------------------- 2. base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: #FFF;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dp); }

strong { color: #FFF; font-weight: 600; }

/* ------------------------------------------------------------ 3. a11y */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #06090C;
  padding: 12px 18px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------- 4. layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.sec     { padding: clamp(60px, 9vw, 108px) 0; }
.sec--sm { padding: clamp(28px, 3.5vw, 48px) 0; }
.sec--alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.sec__head { max-width: 62ch; margin: 0 0 clamp(32px, 4vw, 52px); }
.sec__head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; }

.kicker {
  display: inline-block;
  font-size: .765rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}

/* ---------------------------------------------------------- 5. header */
.head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 13, 17, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.head__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 24px; min-height: 92px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* Source is a 300x148 transparent PNG, the real artwork. The SVG that
   shipped first was an auto-trace with no curve commands at all, so its
   curves faceted visibly when scaled. Keep displayed width at or under
   150px so the raster stays at 2x or better on retina. */
.brand img { width: 120px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: 10px 14px;
  color: var(--muted); font-size: .935rem; font-weight: 500;
  text-decoration: none; border-radius: var(--r);
  transition: color var(--t), background var(--t);
}
.nav__link:hover { color: var(--text); background: var(--bg-3); }
.nav__link.is-on { color: #FFF; background: var(--bg-3); }

.head__burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--text); cursor: pointer;
  transition: border-color var(--t);
}
.head__burger:hover { border-color: var(--accent); }
.head__burger .i-close { display: none; }
.head__burger[aria-expanded="true"] .i-open { display: none; }
.head__burger[aria-expanded="true"] .i-close { display: block; }

/* --------------------------------------------------------- 6. buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; min-height: 48px;
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn--p  { background: var(--accent); color: #06090C; }
.btn--p:hover  { background: var(--chrome-3); color: #06090C; }
.btn--g  { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--g:hover  { border-color: var(--accent); color: #FFF; background: var(--accent-tint); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ------------------------------------------------------------ 7. hero */
.hero { position: relative; padding: clamp(64px, 9vw, 116px) 0 clamp(36px, 4vw, 56px); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -40% 0 auto -10%;
  height: 130%; pointer-events: none;
  background: radial-gradient(60% 55% at 22% 32%, rgba(127, 169, 212, .13), transparent 70%);
}
/* .hero__in also carries .wrap, so it must NOT redeclare max-width:
   an equal-specificity override here silently unbounds the container. */
.hero__in { position: relative; }
.hero h1 { max-width: 19ch; margin-bottom: .34em; }
.hero__sub { max-width: 54ch; font-size: clamp(1.06rem, 1.7vw, 1.22rem); color: var(--muted); }

/* ------------------------------------------------------------ 8. facts */
/* Replaces the invented "50M+ users" band a promotional site would use.
   Every entry here is checkable by a stranger, and the license links out. */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.fact { background: var(--bg-2); padding: 26px 24px; }
.fact__k {
  display: block; font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 9px;
}
.fact__v { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; color: #FFF; line-height: 1.25; }
.fact__v a { color: #FFF; text-decoration-color: var(--accent); }
.fact__v a:hover { color: var(--accent); }
.fact__n { display: block; margin-top: 7px; font-size: .855rem; color: var(--muted); }

/* ------------------------------------------------------------ 9. cards */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px;
  transition: border-color var(--t), background var(--t);
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: .965rem; margin-bottom: 0; }
.card__ico {
  width: 40px; height: 40px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); background: var(--accent-tint); color: var(--accent);
}
.card__ico svg { width: 21px; height: 21px; }

a.card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.card:hover { border-color: var(--line-2); background: var(--bg-3); }
.card__more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; color: var(--accent);
  font-size: .91rem; font-weight: 600;
}
.card__more svg { width: 15px; height: 15px; transition: transform var(--t); }
a.card:hover .card__more svg { transform: translateX(3px); }

/* ---------------------------------------------------------- 10. brands */
.brandcard {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 32px;
}
.brandcard + .brandcard { margin-top: 20px; }
.brandcard__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 14px; }
.brandcard__top h3 { margin: 0; }
.brandcard__tag {
  font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); padding: 4px 11px;
  background: var(--accent-tint); border-radius: 999px;
}
.brandcard p { color: var(--muted); max-width: var(--prose); }
/* Compensation disclosure. Deliberately the most prominent block in the card:
   a reviewer who finds lender compensation disclosed on a sibling brand but not
   named here reads the omission as framing, which costs more than the fact. */
.brandcard__paid {
  margin-top: 18px; padding: 16px 18px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: .92rem; color: var(--muted);
}
.brandcard__paid span {
  display: block; margin-bottom: 6px;
  font-size: .715rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
}

.brandcard__note {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--faint);
}
.brandcard__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 600; }
.brandcard__link svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------- 11. prose */
/* .prose is applied alongside .wrap. Redeclaring a narrower max-width here
   would inherit .wrap's `margin: 0 auto` and centre the reading column while
   page headings stayed left. Hold the container width, constrain the children. */
.prose { max-width: var(--wrap); }
.prose > * { max-width: var(--prose); }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.6em; }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--faint); }

.note {
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 22px 26px; margin: 1.6em 0;
}
.note p:last-child { margin-bottom: 0; }

.pagehead { padding: clamp(52px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.pagehead p { max-width: 60ch; color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.pagehead .updated { margin-top: 18px; font-size: .86rem; color: var(--faint); }

/* --------------------------------------------------------- 12. contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cbox { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.cbox h3 { font-size: 1.08rem; margin-bottom: .55em; }
.cbox p, .cbox address { color: var(--muted); font-size: .965rem; font-style: normal; margin: 0; }
.cbox a { font-weight: 500; }

/* ---------------------------------------------------------- 13. footer */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0 36px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px 32px; }
.foot__brand img { width: 140px; margin-bottom: 20px; }
.foot__blurb { color: var(--muted); font-size: .93rem; max-width: 34ch; }
.foot__h {
  font-family: var(--sans); font-size: .745rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin-bottom: 9px; }
.foot__col a { color: var(--muted); text-decoration: none; font-size: .93rem; transition: color var(--t); }
.foot__col a:hover { color: var(--text); text-decoration: underline; }
.foot__contact { color: var(--muted); font-size: .93rem; font-style: normal; }
.foot__contact a { color: var(--muted); }
.foot__contact p { margin-bottom: 11px; }

.foot__bottom { margin-top: clamp(38px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0 0 18px; padding: 0; }
.foot__legal a { color: var(--muted); font-size: .89rem; text-decoration: none; }
.foot__legal a:hover { color: var(--text); text-decoration: underline; }
.foot__disc { color: var(--faint); font-size: .855rem; max-width: 84ch; margin-bottom: 12px; }
.foot__copy { color: var(--faint); font-size: .855rem; margin: 0; }

/* ---------------------------------------------------------- 14. reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms ease; }
.rv.is-in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ 15. responsive */
@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .head__burger { display: flex; }
  .nav {
    position: fixed; inset: 74px 0 auto; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 10px 18px 22px;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - 92px); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 15px 12px; font-size: 1.02rem; border-radius: var(--r); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .card { padding: 26px 22px; }
  .brandcard { padding: 28px 22px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}