/* ==========================================================================
   Pepe the Prestamista™ — lenderpepe.com front end
   Palette sampled directly from the canonical Pepe artwork by John Edmead:
   navy roundel #0A1A4B, gold ring #E7A93C, red tie #E32B22, grey suit #74727D.
   Hand-authored CSS. No framework, no build step.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --navy-950: #050D24;
  --navy-900: #071233;
  --navy-800: #0a1a4b;
  --navy-700: #142a63;
  --navy-600: #223d80;

  --gold-600: #c2872a;
  --gold-500: #e7a93c;
  --gold-300: #f6d089;
  --gold-100: #fbeccd;

  --red-500: #e32b22;
  --suit-500: #74727d;

  --cream: #faf7f1;
  --cream-dark: #f2ece1;
  --paper: #ffffff;

  --ink: #14203d;
  --ink-soft: #46516e;
  --muted: #6b7590;
  --line: rgba(10, 26, 75, 0.12);
  --line-soft: rgba(10, 26, 75, 0.07);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(7, 18, 51, 0.06), 0 2px 8px rgba(7, 18, 51, 0.04);
  --shadow: 0 4px 12px rgba(7, 18, 51, 0.07), 0 14px 32px rgba(7, 18, 51, 0.07);
  --shadow-lg: 0 10px 24px rgba(7, 18, 51, 0.1), 0 30px 60px rgba(7, 18, 51, 0.12);
  --shadow-gold: 0 6px 18px rgba(194, 135, 42, 0.32);

  --wrap: 1180px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--navy-800);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: 64px; }
.section--tight { padding-block: 48px; }

@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
  .section { padding-block: 104px; }
  .section--tight { padding-block: 72px; }
}

.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--navy {
  background: var(--navy-900);
  color: #fff;
}

/* ---------- type helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.section--navy .eyebrow { color: var(--gold-300); }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

.h1 { font-size: clamp(2.15rem, 8.2vw, 4.25rem); }
.h2 { font-size: clamp(1.75rem, 5.4vw, 2.85rem); }
.h3 { font-size: clamp(1.125rem, 3.1vw, 1.375rem); letter-spacing: -0.01em; }

.lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
@media (min-width: 768px) { .lede { font-size: 1.1875rem; } }
.section--navy .lede { color: rgba(255, 255, 255, 0.76); }

.body-text { color: var(--ink-soft); }
.section--navy .body-text { color: rgba(255, 255, 255, 0.72); }

.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 14px; }
.section-head .lede { margin-top: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn svg { flex: none; width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover { box-shadow: 0 10px 26px rgba(194, 135, 42, 0.42); }

.btn--navy {
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 26, 75, 0.24);
}
.btn--navy:hover { background: var(--navy-700); }

.btn--outline {
  background: transparent;
  color: var(--navy-800);
  border: 1.5px solid var(--line);
}
.btn--outline:hover { border-color: var(--gold-500); color: var(--gold-600); }

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); }

.btn--sm { min-height: 42px; padding: 9px 18px; font-size: 0.8125rem; }
.btn--block { width: 100%; }

@media (max-width: 420px) {
  .btn { width: 100%; }
  .btn--sm { width: auto; }
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 20px rgba(7, 18, 51, 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  /* the roundel's own navy rim would vanish against a navy surface, so give it
     a hairline of separation that reads on both cream and navy */
  box-shadow: 0 0 0 1px rgba(10, 26, 75, 0.08);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}
.brand__name { white-space: nowrap; }
/* trademark symbol — superscripted small so it never reads as part of the word */
.tm {
  font-size: 0.52em;
  font-weight: 500;
  vertical-align: super;
  line-height: 1;
  margin-left: 0.06em;
  letter-spacing: 0;
}
.brand__tag {
  /* the tagline is the first thing to go on narrow phones — it used to push the
     brand name onto three lines and blow out the header height */
  display: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@media (min-width: 560px) {
  .brand__name { font-size: 1.0625rem; }
  .brand__tag { display: block; }
}
.footer .brand__tag { display: block; }

.header__actions { display: flex; align-items: center; gap: 10px; }
.header__cta { display: none; }
@media (min-width: 720px) { .header__cta { display: inline-flex; } }

/* language switcher — server-rendered active state, works without JS */
.langs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10, 26, 75, 0.06);
}
.lang {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: all 0.2s var(--ease);
}
.lang:hover { color: var(--navy-800); }
.lang--active {
  background: var(--paper);
  color: var(--navy-800);
  box-shadow: var(--shadow-sm);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(231, 169, 60, 0.2), transparent 60%),
    radial-gradient(100% 80% at 0% 100%, rgba(34, 61, 128, 0.55), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 58%, var(--navy-950) 100%);
  color: #fff;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0);
  background-size: 34px 34px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
}

.hero__inner {
  display: grid;
  gap: 8px;
  padding-block: 40px 0;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
    padding-block: 72px 72px;
  }
}

.hero__copy { position: relative; z-index: 2; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.hero__badge .flags { display: inline-flex; align-items: center; gap: 4px; }
.hero__badge .flag {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.hero .h1 { margin-top: 22px; color: #fff; }
.hero .h1 em {
  font-style: normal;
  color: var(--gold-300);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.hero__sub {
  margin-top: 20px;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
@media (min-width: 768px) { .hero__sub { font-size: 1.1875rem; } }

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

.hero__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
}
.hero__trust svg { width: 16px; height: 16px; flex: none; color: var(--gold-300); }

/* hero character — canonical locked artwork, presented not redrawn */
.hero__art {
  position: relative;
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
}
@media (min-width: 960px) { .hero__art { margin-top: 0; } }

.hero__art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(74%, 380px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 169, 60, 0.34), transparent 66%);
  filter: blur(6px);
  z-index: 0;
}

/* the canonical artwork is used as a cut-out on the navy hero — background removed,
   character itself untouched (BRAND_LOCK: present, never redraw) */
.hero__pepe {
  position: relative;
  z-index: 1;
  width: min(66vw, 290px);
  height: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.5));
}
@media (min-width: 560px) { .hero__pepe { width: min(58vw, 330px); } }
@media (min-width: 960px) { .hero__pepe { width: min(100%, 400px); } }

.hero__pepe-badge {
  /* anchored beside his open hand, clear of the shoes — centring it under the
     character made the pill sit on top of his feet */
  position: absolute;
  right: 0;
  bottom: 30%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: rgba(7, 18, 51, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.hero__pepe-badge img {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
}
.hero__pepe-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
@media (max-width: 559px) {
  /* no room for it beside the character at phone widths */
  .hero__pepe-badge { display: none; }
}
.hero__pepe-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
  flex: none;
}

/* ---------- trust strip ---------- */
.strip {
  background: var(--navy-950);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
}
.strip__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
  padding-block: 26px;
}
@media (min-width: 760px) {
  .strip__inner { grid-template-columns: repeat(4, 1fr); padding-block: 30px; }
}
.strip__item { text-align: center; }
.strip__value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gold-300);
  letter-spacing: -0.01em;
}
.strip__label {
  margin-top: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- split (what / who) ---------- */
.split {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split--reverse .split__media { order: 2; }
}

.split__media { position: relative; }

.portrait {
  position: relative;
  display: grid;
  place-items: end center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 78%, rgba(231, 169, 60, 0.28), transparent 68%),
    linear-gradient(165deg, #fff 0%, var(--cream-dark) 100%);
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
  max-width: 430px;
  margin: 0 auto;
  /* bottom padding reserves room for the caption so it never covers the art */
  padding: 22px 20px 62px;
}
.portrait img {
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 22px rgba(7, 18, 51, 0.22));
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(10, 26, 75, 0.06);
  pointer-events: none;
}

.portrait__caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  background: rgba(7, 18, 51, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.checklist { margin-top: 26px; display: grid; gap: 13px; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.checklist svg {
  width: 21px; height: 21px;
  flex: none;
  margin-top: 1px;
  color: var(--gold-600);
}

/* ---------- feature / step cards ---------- */
.grid-3 { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(231, 169, 60, 0.45);
}
.card .h3 { margin-top: 18px; }
.card p { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-soft); }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--gold-100), rgba(231, 169, 60, 0.22));
  color: var(--gold-600);
  border: 1px solid rgba(231, 169, 60, 0.3);
}
.card__icon svg { width: 22px; height: 22px; }

.step { position: relative; padding-top: 30px; }
.step__num {
  position: absolute;
  top: 0; left: 24px;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(10, 26, 75, 0.28);
}
.step .h3 { margin-top: 30px; }

.note {
  margin-top: 28px;
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
}

/* ---------- topics ---------- */
.topics { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 560px) { .topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .topics { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

.topic {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid rgba(231, 169, 60, 0.42);
  box-shadow: var(--shadow-sm);
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy-800);
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
    border-left-color 0.24s var(--ease), background-color 0.24s var(--ease);
}
.topic:hover {
  transform: translateY(-3px);
  border-left-color: var(--gold-500);
  box-shadow: var(--shadow);
}
.topic__arrow {
  width: 18px; height: 18px;
  margin-left: auto;
  flex: none;
  color: var(--gold-600);
  opacity: 0.55;
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.topic:hover .topic__arrow { transform: translateX(3px); opacity: 1; }

/* ==========================================================================
   CHAT — mobile first. Inline card on desktop, true full-screen sheet on phones.
   ========================================================================== */

.chat-section {
  position: relative;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(34, 61, 128, 0.5), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color: #fff;
  overflow: hidden;
}
.chat-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(100% 70% at 50% 0%, #000, transparent 75%);
}
.chat-section .wrap { position: relative; }

.chat-layout {
  display: grid;
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}
@media (min-width: 1000px) {
  .chat-layout { grid-template-columns: 0.82fr 1.18fr; gap: 52px; }
}

.chat-aside .h2 { color: #fff; }
.chat-aside .lede { margin-top: 16px; }
.chat-aside .checklist li { color: rgba(255, 255, 255, 0.74); }
.chat-aside .checklist svg { color: var(--gold-300); }

.chat-aside__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* --- the chat card --- */
.chat {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* dvh keeps the card honest when mobile browser chrome collapses */
  height: min(72dvh, 620px);
  min-height: 460px;
  color: var(--ink);
}
@media (min-width: 1000px) {
  .chat { height: 640px; min-height: 0; }
}

/* header */
.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--navy-800);
  color: #fff;
  flex: none;
  padding-top: max(12px, env(safe-area-inset-top));
}
.chat__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
  /* the face avatar carries its own gold ring, so no second one here */
}
.chat__id { min-width: 0; flex: 1; }
.chat__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat__state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.chat__state .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  flex: none;
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  60% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}

.chat__tools { display: flex; align-items: center; gap: 4px; flex: none; }
.chat__tool {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.72);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chat__tool:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.chat__tool svg { width: 18px; height: 18px; }
/* close button only exists in full-screen mode */
.chat__close { display: none; }

/* message log */
.chat__log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 14px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 26, 75, 0.2) transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat__log::-webkit-scrollbar { width: 8px; }
.chat__log::-webkit-scrollbar-thumb {
  background: rgba(10, 26, 75, 0.18);
  border-radius: 8px;
}
@media (min-width: 700px) { .chat__log { padding: 22px 20px 10px; } }

.msg {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 100%;
  animation: msg-in 0.3s var(--ease) both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.msg--user { justify-content: flex-end; }

.msg__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
}

.msg__bubble {
  max-width: min(84%, 34rem);
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}
.msg--pepe .msg__bubble {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 6px;
}
.msg--user .msg__bubble {
  background: var(--navy-800);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.msg__bubble a {
  color: var(--gold-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.msg--user .msg__bubble a { color: var(--gold-300); }

/* typing indicator */
.msg--typing .msg__bubble { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; }
.msg--typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  display: block;
  animation: typing 1.2s var(--ease) infinite;
}
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* suggestion chips */
.chat__chips {
  position: relative;
  display: flex;
  gap: 8px;
  flex: none;
  padding: 8px 14px 4px;
  /* fade the right edge so the horizontal scroll reads as scrollable on phones */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.chat__chips::-webkit-scrollbar { display: none; }
@media (min-width: 700px) {
  .chat__chips {
    padding-inline: 20px;
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.chip {
  flex: none;
  scroll-snap-align: start;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(10, 26, 75, 0.05);
  border: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-700);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { background: var(--gold-100); border-color: rgba(231, 169, 60, 0.5); color: var(--gold-600); }
.chat__chips.is-hidden { display: none; }

/* composer */
.chat__composer {
  flex: none;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 700px) { .chat__composer { padding: 12px 16px; } }

.chat__status {
  min-height: 15px;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  /* 16px minimum — anything smaller makes iOS Safari zoom the whole page on focus */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 11px 16px;
  min-height: 46px;
  max-height: 120px;
  resize: none;
  overflow-y: auto;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.composer__input::placeholder { color: var(--muted); }
.composer__input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(231, 169, 60, 0.2);
}
.composer__input:disabled { opacity: 0.6; }

.composer__send {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
  transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
}
.composer__send svg { width: 19px; height: 19px; }
.composer__send:hover { transform: scale(1.06); }
.composer__send:disabled { opacity: 0.45; transform: none; cursor: default; }

.chat__legal {
  margin-top: 8px;
  font-size: 0.625rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

/* --- full-screen mode (phones + explicit expand) --- */
body.chat-open { overflow: hidden; }

.chat.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  /* dvh follows the shrinking viewport when the mobile keyboard opens;
     --kb is a JS-measured fallback for browsers without dvh support */
  height: 100dvh;
  max-height: none;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: sheet-in 0.28s var(--ease) both;
}
@supports not (height: 100dvh) {
  .chat.is-fullscreen { height: calc(100vh - var(--kb, 0px)); }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.chat.is-fullscreen .chat__close { display: grid; }
.chat.is-fullscreen .chat__log { padding-bottom: 12px; }

.chat__backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(5, 13, 36, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.chat__backdrop.is-visible { opacity: 1; }

/* On phones the inline card is a compact teaser; the real conversation is the sheet. */
@media (max-width: 999px) {
  .chat:not(.is-fullscreen) { height: min(64dvh, 520px); min-height: 400px; }
}

/* --- floating launcher --- */
.launcher {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 10px 30px rgba(5, 13, 36, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.launcher.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.launcher img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.launcher span { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.launcher:hover { background: var(--navy-700); }
@media (max-width: 380px) { .launcher span { display: none; } .launcher { padding: 8px; } }

/* ---------- final CTA ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: 64px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(231, 169, 60, 0.22), transparent 62%),
    linear-gradient(150deg, var(--navy-800), var(--navy-950));
  color: #fff;
  text-align: center;
}
@media (min-width: 768px) { .cta-band { padding-block: 92px; } }

.cta-band .h2 { color: #fff; max-width: 32rem; margin-inline: auto; }
.cta-band .lede { max-width: 34rem; margin: 16px auto 0; }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
/* the closing CTA gets a full figure, not another disc — the roundel already
   appears in the header and footer and a third one read as repetition */
.cta-band__pepe {
  display: block;
  width: auto;
  height: 200px;
  margin: 0 auto 20px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.42));
}
@media (min-width: 768px) { .cta-band__pepe { height: 264px; margin-bottom: 26px; } }

/* ---------- meet john ----------
   The one place on the site showing a real photograph. It gets a squarer, more
   formal frame than Pepe's illustrated .portrait so the two do not read as the
   same kind of image. */
.john {
  display: grid;
  gap: 34px;
  align-items: center;
}
@media (min-width: 900px) {
  .john { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 60px; }
}

.john__media {
  position: relative;
  /* Kept well short of the 390px viewport: at 340px a 4:5 headshot is 425px
     tall and turns the section into a long scroll before any credential is
     visible. The photo is supporting evidence, not the message. */
  max-width: 268px;
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 900px) { .john__media { max-width: 380px; margin-inline: 0; } }

.headshot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-dark);
  box-shadow: var(--shadow);
  /* Slightly taller than square: enough torso to read as a business portrait
     without the 2:3 source becoming a full-height column on mobile. */
  aspect-ratio: 4 / 5;
}
.headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* His face sits in the upper half of the source frame. */
  object-position: 50% 12%;
}
/* Warms the cool studio grey towards the page's cream so the photo does not
   read as a foreign element dropped onto the section. */
.headshot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(251, 236, 205, 0.14), rgba(7, 18, 51, 0.14));
  pointer-events: none;
}

.nmls-badge {
  position: absolute;
  right: -8px;
  bottom: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 11px 16px;
  border-radius: var(--radius);
  background: var(--navy-800);
  box-shadow: var(--shadow), 0 0 0 1px rgba(231, 169, 60, 0.4) inset;
}
.nmls-badge__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.nmls-badge__value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.creds {
  margin: 28px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.creds__row {
  display: grid;
  gap: 2px 18px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 560px) {
  /* Label column is fixed so the four values align into a readable spine. */
  .creds__row { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
}
.creds dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.creds dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  /* dt/dd pairs wrap independently; this keeps the value and its NMLS link
     together on one line where there is room. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.creds__link {
  color: var(--gold-600);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 135, 42, 0.4);
  font-variant-numeric: tabular-nums;
}
.creds__link:hover { border-bottom-color: var(--gold-600); }

.john__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.john__disclosure {
  margin-top: 22px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34rem;
}

/* ---------- footer ---------- */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.6);
  padding-block: 44px 34px;
  font-size: 0.875rem;
}
/* The floating launcher is fixed bottom-right and the copyright / ownership
   line is the last thing on the page, so there is nothing left to scroll. On
   narrow screens that line wraps the full width and the launcher permanently
   covers "JRES LLC" and the rights notice. The launcher stays visible at
   desktop widths too, but there the line is left-aligned and short enough to
   clear it. Launcher is ~54px tall plus its 16px inset. */
@media (max-width: 999px) {
  .footer { padding-block: 44px 104px; }
}

.footer__top {
  display: grid;
  gap: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.footer .brand__name { color: #fff; }
/* the navy logo disc disappears against the navy footer — lift the fill */
.footer .brand__mark { box-shadow: 0 0 0 1px rgba(231, 169, 60, 0.28); }
.footer .brand__tag { color: rgba(255, 255, 255, 0.42); }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
@media (min-width: 760px) { .footer__nav { justify-content: flex-end; } }
.footer__nav a {
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.footer__nav a:hover { color: var(--gold-300); }

.footer__legal { margin-top: 24px; display: grid; gap: 12px; }
.footer__disclaimer {
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  max-width: 54rem;
}
.footer__meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.38);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}