@font-face {
  font-family: 'Neue Montreal';
  src: url('public/fonts/neue-montreal.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-sans: 'Neue Montreal', Arial, sans-serif;
  --background: #fff;
  --foreground: #181818;
  --primary: #108a00;
  --primary-foreground: #fff;
  --muted-foreground: #5e6678;
  --border: #e4e4e4;
  --ring: #108a00;
  --rating-star: #ff5a00;
  --muted: #f2f2f5;
  --card-outline: #d5dde3;
  --card-secondary: #767676;
  --page-gutter: clamp(1rem, 3.65vw, 1.5rem);
  --app-nav-height: 80px;
}

html {
  font-family: var(--font-sans);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-inline-size: 280px;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

body[data-page="home"] { background: #f7f8f7; }
body[data-page="welcome"] .welcome-page { background: #f7f8f7; }
body[data-page="signup"] .signup-page,
body[data-page="login"] .signup-page,
body[data-page="lender"] .signup-page { background: #f7f8f7; }

body.has-app-nav { padding-block-end: calc(var(--app-nav-height) + env(safe-area-inset-bottom)); }
body.has-app-nav .welcome-page { min-block-size: calc(100svh - var(--app-nav-height) - env(safe-area-inset-bottom)); }

a { text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ring); outline-offset: 5px; }

.page-container {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.site-header { border-block-end: 1px solid var(--border); background: #fff; }
.header-content {
  min-block-size: 72px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.header-leading { display: contents; }
.site-menu-button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}
.site-menu-button span { display: block; inline-size: 23px; block-size: 2px; border-radius: 99px; background: currentColor; }
.brand { display: inline-flex; align-items: center; min-block-size: 44px; flex-shrink: 0; }
.header-content > .header-leading > .brand { justify-self: center; }
.brand img { display: block; inline-size: clamp(100px, 18.85vw, 124px); block-size: auto; }
.brand-wordmark { color: var(--foreground); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.045em; }
.header-actions { display: flex; align-items: center; justify-self: end; gap: clamp(12px, 3.04vw, 20px); }
.messages-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
  border-radius: 50%;
  color: var(--foreground);
}
.messages-link > img { inline-size: 30px; block-size: 30px; }
.messages-indicator { position: absolute; inset-block-start: 2px; inset-inline-end: 1px; display: grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; border: 2px solid #fff; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; }
.site-menu-open { overflow: hidden; }
.site-menu-layer { position: fixed; z-index: 100; inset: 0; visibility: hidden; pointer-events: none; }
.site-menu-layer.is-open { visibility: visible; pointer-events: auto; }
.site-menu-backdrop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: rgba(16, 20, 16, .42); opacity: 0; transition: opacity 240ms ease; cursor: default; }
.site-menu-layer.is-open .site-menu-backdrop { opacity: 1; }
.site-side-menu {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  inline-size: min(86vw, 380px);
  max-inline-size: 100%;
  padding-block-end: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  box-shadow: 18px 0 50px rgba(16, 35, 15, .16);
  transform: translateX(-104%);
  transition: transform 280ms cubic-bezier(.22, .8, .25, 1);
}
.site-menu-layer.is-open .site-side-menu { transform: translateX(0); }
.site-side-menu-header { position: sticky; z-index: 1; inset-block-start: 0; display: flex; align-items: center; justify-content: space-between; min-block-size: 72px; padding: 12px 16px 12px 24px; border-block-end: 1px solid var(--border); background: #fff; }
.site-side-menu-header h2 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.site-side-menu-close { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.site-side-menu-close img { display: block; inline-size: 24px; block-size: 24px; }
.site-side-menu-nav { display: grid; gap: 28px; padding: 24px; }
.site-menu-section h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.site-menu-section ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-menu-section a,
.site-menu-pages a { display: flex; align-items: center; min-block-size: 42px; padding: 8px 10px; border-radius: 11px; color: #626862; font-size: 16px; line-height: 1.35; }
.site-menu-section a[aria-current='true'] { background: #edf7ea; color: var(--primary); font-weight: 600; }
.site-menu-pages { display: grid; gap: 2px; padding-block-start: 22px; border-block-start: 1px solid var(--border); }
.site-menu-pages a { color: var(--foreground); font-size: 18px; font-weight: 600; }
.site-menu-pages a[aria-current='page'] { color: var(--primary); }
.site-menu-logout { display: flex; align-items: center; min-block-size: 42px; margin-block-start: 8px; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; color: #a3261d; font: inherit; font-size: 18px; font-weight: 600; line-height: 1.35; text-align: start; cursor: pointer; }
.signup-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--foreground);
  font-size: clamp(16px, 3.35vw, 22px);
  line-height: 1.4;
  white-space: nowrap;
  block-size: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
}
.jobs-hero { padding-block-start: clamp(32px, 6.69vw, 44px); text-align: center; }
.jobs-hero h1 {
  max-inline-size: 550px;
  margin: 0 auto;
  font-size: clamp(32px, 7.3vw, 48px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.client-rating { margin-block-start: clamp(28px, 6.08vw, 40px); }
.rating-label, .rating-reviews { margin: 0; font-size: clamp(17px, 3.65vw, 24px); line-height: 1.4; }
.rating-label { font-weight: 500; }
.rating-score { display: flex; align-items: center; justify-content: center; gap: 6px; margin-block-start: 4px; }
.rating-stars { display: flex; align-items: center; gap: clamp(4px, 1.22vw, 8px); color: var(--rating-star); }
.rating-stars img { inline-size: clamp(20px, 4.25vw, 28px); block-size: auto; }
.score { font-size: clamp(20px, 4.25vw, 28px); font-weight: 600; line-height: 1.25; }
.rating-reviews { margin-block-start: 8px; color: var(--muted-foreground); }
.credit-hero-copy { display: grid; justify-items: center; gap: 18px; max-inline-size: 680px; margin: clamp(24px, 5.5vw, 36px) auto 0; }
.credit-hero-copy > p { margin: 0; color: #515851; font-size: clamp(18px, 3.65vw, 24px); line-height: 1.45; text-wrap: balance; }
.credit-hero-benefits { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.credit-hero-benefits li { display: inline-flex; align-items: center; gap: 7px; color: #626862; font-size: clamp(14px, 2.75vw, 17px); line-height: 1.4; }
.credit-hero-benefits li::before { content: '✓'; display: grid; place-items: center; flex: 0 0 auto; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #e7f5e4; color: var(--primary); font-size: 13px; font-weight: 700; }
.find-work-link {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: clamp(48px, 9.12vw, 60px);
  margin-block-start: clamp(28px, 6.69vw, 44px);
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: clamp(18px, 3.35vw, 22px);
  font-weight: 600;
  line-height: 1.4;
}
.jobs-intro { padding-block: clamp(72px, 17.63vw, 116px) 32px; }
.jobs-intro h2 { margin: 0; font-size: clamp(18px, 3.65vw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; }
.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: var(--page-gutter);
  padding: 12px 16px;
  transform: translateY(-160%);
  border-radius: 8px;
  background: var(--foreground);
  color: var(--background);
}
.skip-link:focus { transform: translateY(0); }
@media (hover: hover) {
  .find-work-link:hover { background: #0b7000; }
  .signup-link:hover { color: var(--primary); }
  .messages-link:hover { background: #f0f2f0; color: var(--primary); }
  .site-menu-button:hover, .site-side-menu-close:hover { background: #f0f2f0; }
  .site-menu-section a:hover, .site-menu-pages a:hover { background: #f2f4f2; color: var(--primary); }
}
.find-work-link:active { background: #095c00; }

/* Wider screens retain the same content; no unrequested desktop navigation. */
@media (min-width: 768px) {
  .jobs-hero { padding-block-start: 64px; }
  .jobs-hero h1 { max-inline-size: 720px; font-size: 56px; }
  .find-work-link { max-inline-size: 400px; margin-inline: auto; }
  .jobs-intro { padding-block-start: 104px; }
}

/* Request section: preserve the original green and white navigation style. */
#jobs, .credit-card { scroll-margin-block-start: 24px; }
.job-breadcrumbs { margin-block-start: 32px; }
.job-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-block-size: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(15px, 3.04vw, 20px);
  line-height: 1.4;
}
.job-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--primary);
}
.job-breadcrumbs img { display: block; }
/* Header controls stay inside the local preview. */
.local-dialog {
  inline-size: calc(100% - 32px);
  max-inline-size: 480px;
  max-block-size: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 24px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 12px 48px #18181826;
}
.local-dialog-title { padding-inline-end: 28px; font-size: 24px; font-weight: 500; line-height: 1.2; }
.local-dialog-description { margin-block-start: 12px; font-size: 16px; line-height: 1.5; }
.local-dialog-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inline-size: 44px;
  block-size: 44px;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
}
.local-dialog-action { margin-block-start: 8px; font-size: 18px; }
@media (hover: hover) {
  .job-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .credit-card-button:hover, .local-dialog-action:hover { background: #0b7000; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Compact request cards, following the original job-card layout. */
.credit-directory { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-block-start: 24px; }
.credit-directory-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 4px; inline-size: 100%; max-inline-size: 600px; block-size: auto; padding: 4px; border: 1px solid var(--card-outline); border-radius: 999px; background: #f6f7f5; scroll-margin-block-start: 16px; }
.credit-directory-tab { min-inline-size: 0; min-block-size: 44px; block-size: auto; padding: 10px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--card-secondary); font-size: clamp(14px, 2.8vw, 18px); font-weight: 500; line-height: 1.3; white-space: normal; box-shadow: none; cursor: pointer; }
.credit-directory-tab::after { display: none; }
.credit-directory-tab[aria-selected='true'] { background: #dfe2df; color: #292d2a; box-shadow: none; }
.credit-directory-panel { min-inline-size: 0; }
.credit-directory-panel[hidden] { display: none; }
.credit-active-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 18px; padding: 10px 14px; border-radius: 14px; background: #ecefec; color: #4f554f; font-size: 14px; line-height: 1.35; }
.credit-active-filter[hidden] { display: none; }
.credit-active-filter strong { color: var(--foreground); font-weight: 600; }
.credit-active-filter a { flex: 0 0 auto; color: var(--primary); font-weight: 600; }
.credit-filter-empty { display: grid; justify-items: center; gap: 10px; padding: 38px 22px; border-radius: 24px; background: #fff; text-align: center; }
.credit-filter-empty h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.3; }
.credit-filter-empty p { margin: 0; color: var(--card-secondary); font-size: 15px; line-height: 1.5; }
.credit-filter-empty a { display: flex; align-items: center; justify-content: center; min-block-size: 44px; margin-block-start: 6px; padding: 8px 18px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 600; }
.credit-institution-list { display: grid; gap: 22px; margin-block-start: 24px; }
.credit-institution-list > .credit-filter-empty { grid-column: 1 / -1; }
.institution-card { min-inline-size: 0; overflow: hidden; border: 1px solid var(--card-outline); border-radius: clamp(24px, 5vw, 30px); background: #fff; }
.institution-card-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; min-block-size: clamp(155px, 27vw, 190px); padding: clamp(17px, 3.4vw, 22px); overflow: hidden; background-image: linear-gradient(180deg, rgba(9, 16, 10, .16), rgba(8, 14, 9, .84)), var(--institution-cover); background-position: center; background-size: cover; color: #fff; }
.institution-logo { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 64px; block-size: 64px; border: 3px solid rgba(255, 255, 255, .92); border-radius: 50%; background: #0d3f33; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: 20px; font-weight: 700; line-height: 1; }
.institution-cover-copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; min-inline-size: 0; }
.institution-logo { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.institution-name-line { display: flex; align-items: center; gap: 7px; min-inline-size: 0; }
.institution-name-line h3 { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; color: #fff; font-size: clamp(25px, 5vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.institution-verified { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 21px; block-size: 21px; color: #1687e8; }
.institution-verified svg { display: block; inline-size: 21px; block-size: 21px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .32)); }
.institution-cover-copy > p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.35; }
.institution-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.institution-status i { inline-size: 9px; block-size: 9px; border-radius: 50%; }
.institution-status.is-online i { background: #31c728; box-shadow: 0 0 0 4px rgba(49, 199, 40, .15); }
.institution-status.is-offline { color: rgba(255, 255, 255, .72); }
.institution-status.is-offline i { background: #b9bdb9; }
.institution-since { display: inline-flex; margin-block-start: 10px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px; color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 500; line-height: 1.2; }
.institution-card-body { padding: clamp(16px, 3vw, 20px) clamp(18px, 4vw, 24px); }
.institution-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin: 0; }
.institution-metric { display: grid; grid-template-columns: 27px minmax(0, 1fr); column-gap: 11px; row-gap: 2px; align-content: start; min-inline-size: 0; }
.institution-metric > svg,
.institution-metric > img { grid-column: 1; grid-row: 1 / 3; inline-size: 26px; block-size: 26px; margin-block-start: 1px; color: var(--foreground); object-fit: contain; }
.institution-metric > svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.institution-metric strong { grid-column: 2; grid-row: 1; min-inline-size: 0; color: var(--foreground); font-size: clamp(19px, 3.65vw, 23px); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.institution-metric > span { grid-column: 2; grid-row: 2; color: #737973; font-size: 12px; line-height: 1.3; }
.institution-about { margin-block-start: 20px; }
.institution-about h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.institution-about p { margin: 7px 0 0; color: #4e544e; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.institution-services { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.institution-services li { padding: 5px 11px; border-radius: 999px; background: #eef1ee; color: #4f554f; font-size: 12px; line-height: 1.35; }
.institution-card-button { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 48px; margin-block-start: 18px; padding: 10px 18px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; }
.institution-card-button.is-chat-open { background: #dfe2df; color: #343934; }
.institution-card { padding: 0; overflow: hidden; background: #fff; }
.institution-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 7px 12px; }
.institution-card-title { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; min-inline-size: 0; }
.institution-card-title h3 { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; font-size: clamp(23px, 4.25vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.institution-card-status { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; justify-items: end; gap: 4px; }
.institution-card-status .institution-status { color: #297523; font-size: 13px; line-height: 1.2; }
.institution-card-status .institution-status.is-offline { color: #747a74; }
.institution-card-status small { color: #7b807b; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.institution-card-type { grid-column: 1; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--card-secondary); font-size: clamp(14px, 2.9vw, 18px); line-height: 1.4; }
.institution-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 22px 0 0; }
.institution-fact { display: grid; grid-template-columns: clamp(22px, 4vw, 26px) minmax(0, 1fr); column-gap: clamp(9px, 2.5vw, 16px); row-gap: 2px; align-content: start; min-inline-size: 0; }
.institution-fact > svg,
.institution-fact > img { grid-column: 1; grid-row: 1 / 3; inline-size: 100%; block-size: auto; margin-block-start: 2px; color: var(--foreground); object-fit: contain; }
.institution-fact > svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.institution-fact dt { grid-column: 2; grid-row: 2; color: var(--card-secondary); font-size: clamp(12px, 2.75vw, 18px); line-height: 1.4; }
.institution-fact dd { grid-column: 2; grid-row: 1; min-inline-size: 0; margin: 0; overflow-wrap: anywhere; font-size: clamp(17px, 3.35vw, 22px); font-weight: 500; line-height: 1.35; }
.institution-card-body > .institution-facts { margin-block-start: 0; }
.institution-card-body > .institution-about { margin: 22px 0 0; color: var(--foreground); font-size: clamp(16px, 3.05vw, 20px); line-height: 1.45; overflow-wrap: anywhere; }
.institution-card-body > .institution-services { margin-block-start: 18px; }
.institution-card-body > .institution-card-button { margin-block-start: 22px; }
.credit-institutions-empty { display: grid; justify-items: center; gap: 12px; margin-block-start: 24px; padding: 40px 24px; border: 1px solid var(--card-outline); border-radius: 24px; text-align: center; }
.credit-institutions-empty > svg { color: var(--card-secondary); }
.credit-institutions-empty h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.3; }
.credit-institutions-empty p { max-inline-size: 360px; margin: 0; color: var(--card-secondary); font-size: 16px; line-height: 1.5; }
@media (hover: hover) {
  .credit-directory-tab:not([aria-selected='true']):hover { background: #e9ebe9; color: var(--foreground); }
  .institution-card-button:hover { background: #0b7000; }
  .institution-card-button.is-chat-open:hover { background: #d4d8d4; }
}
/* ---------------------------------------------------------- skeletons --- */
/* Placeholders shown while content is fetched from the API. A gradient sweeps
   across them instead of a spinner, so the page keeps its final shape. */
.sk {
  --sk-base: #e9ecea;
  --sk-sheen: #f6f8f6;
  display: block;
  border-radius: 8px;
  background-image: linear-gradient(100deg, var(--sk-base) 28%, var(--sk-sheen) 48%, var(--sk-base) 68%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: sk-sweep 1.5s linear infinite;
}
@keyframes sk-sweep {
  from { background-position: 220% 0; }
  to { background-position: -120% 0; }
}
/* Darker sheen for the photo area of an institution cover. */
.sk-cover { --sk-base: #d3d8d3; --sk-sheen: #e6eae6; border-radius: 0; }

.sk-line { block-size: 1em; }
.sk-title { block-size: clamp(23px, 4.25vw, 28px); inline-size: 62%; border-radius: 9px; }
.sk-sub { block-size: clamp(14px, 2.9vw, 18px); inline-size: 44%; margin-block-start: 10px; }
.sk-text { block-size: clamp(16px, 3.05vw, 20px); margin-block-start: 10px; }
.sk-text:first-of-type { margin-block-start: 0; }
.sk-chip { block-size: 30px; inline-size: 104px; border-radius: 999px; }
.sk-button { block-size: 54px; border-radius: 999px; margin-block-start: 22px; }
.sk-icon { inline-size: clamp(22px, 4vw, 26px); block-size: clamp(22px, 4vw, 26px); border-radius: 7px; }

/* The skeleton reuses .credit-card / .institution-card so spacing matches the
   real card exactly and nothing shifts when the data arrives. */
.credit-card-skeleton dt, .credit-card-skeleton dd,
.institution-card-skeleton dt, .institution-card-skeleton dd { display: block; margin: 0; }
.sk-fact-label { block-size: 13px; inline-size: 70%; }
.sk-fact-value { block-size: 19px; inline-size: 88%; margin-block-start: 6px; }

.institution-card-skeleton .institution-card-cover {
  display: block;
  padding: 0;
  background-image: none;
  background-color: var(--muted);
}
.institution-card-skeleton .sk-cover { block-size: 100%; min-block-size: clamp(155px, 27vw, 190px); }

/* A real cover is a CSS background, so it has no load event. The card renders
   with this class, and app.js removes it once the image has been preloaded.
   The dark overlay stays put, keeping the white cover text readable. */
.institution-card-cover.is-cover-loading {
  background-image:
    linear-gradient(180deg, rgba(9, 16, 10, .16), rgba(8, 14, 9, .84)),
    linear-gradient(100deg, #d3d8d3 28%, #e6eae6 48%, #d3d8d3 68%);
  background-size: auto, 220% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: sk-sweep 1.5s linear infinite;
}
.institution-card-cover { transition: background-image 200ms ease; }
.institution-card-cover.has-no-cover {
  background-image:
    linear-gradient(180deg, rgba(9, 16, 10, .16), rgba(8, 14, 9, .84)),
    linear-gradient(135deg, #5d6b5f, #39423a);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .sk, .institution-card-cover.is-cover-loading { animation: none; }
  .sk { background-image: none; background-color: var(--sk-base); }
}

.credit-list { display: grid; gap: 24px; margin-block-start: 24px; }
.credit-card {
  min-inline-size: 0;
  padding: clamp(20px, 3.65vw, 24px);
  border: 1px solid var(--card-outline);
  border-radius: clamp(24px, 5vw, 32px);
  background: var(--background);
  scroll-margin-block-start: 24px;
}
.credit-card-own { border-color: #a8d8a2; box-shadow: 0 12px 34px rgba(20, 124, 7, .08); }
.credit-own-chip { display: inline-flex; align-items: center; min-block-size: 24px; padding: 2px 9px; border-radius: 999px; background: #e8f6e5; color: #147c07; font-size: .88em; font-weight: 600; }
.credit-response-stat[data-status='chats'] dd { color: #26751d; }
.credit-card-own.is-entering { animation: credit-own-request-enter .78s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes credit-own-request-enter {
  0% { opacity: 0; transform: translateY(-34px) scale(.975); box-shadow: 0 0 0 0 rgba(20, 124, 7, 0); }
  58% { opacity: 1; transform: translateY(4px) scale(1.006); box-shadow: 0 0 0 8px rgba(20, 124, 7, .11); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 12px 34px rgba(20, 124, 7, .08); }
}
.credit-card-header { --credit-name-size: clamp(23px, 4.25vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px 12px; }
.credit-card-header h3 { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--credit-name-size); font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.credit-card-header p { grid-column: 1; grid-row: 2; margin: 0; color: var(--card-secondary); font-size: clamp(14px, 2.9vw, 18px); line-height: 1.4; }
/* Keep captions close to their values, independent of the location row height. */
.credit-response-stats { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; margin: 0; }
.credit-response-stat { display: grid; grid-template-rows: 18px auto; row-gap: 2px; align-items: center; justify-items: center; }
.credit-response-stat dt { grid-row: 2; color: var(--card-secondary); font-size: 10px; line-height: 1.2; text-align: center; }
.credit-response-stat dd { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-inline-size: 38px; block-size: 18px; margin: 0; padding: 0; color: #525d6c; font-size: 13px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.credit-response-stat svg { flex-shrink: 0; }
.credit-response-stat[data-status='approved'] dd { color: #26751d; }
.credit-location { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.credit-city { display: inline-flex; align-items: center; gap: 7px; }
.credit-city img { flex-shrink: 0; border-radius: 2px; }
.credit-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 22px 0 0; }
.credit-fact { display: grid; grid-template-columns: clamp(22px, 4vw, 26px) minmax(0, 1fr); column-gap: clamp(9px, 2.5vw, 16px); row-gap: 2px; align-content: start; }
.credit-fact img { grid-column: 1; grid-row: 1 / 3; inline-size: 100%; block-size: auto; margin-block-start: 2px; }
.credit-fact dt { grid-column: 2; grid-row: 2; color: var(--card-secondary); font-size: clamp(12px, 2.75vw, 18px); line-height: 1.4; }
.credit-fact dd { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(17px, 3.35vw, 22px); font-weight: 500; line-height: 1.35; }
.credit-comment { margin: 22px 0 0; font-size: clamp(16px, 3.05vw, 20px); line-height: 1.45; }
.credit-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.credit-tags li { padding: 5px 13px; border-radius: 999px; background: var(--muted); font-size: clamp(13px, 2.75vw, 18px); line-height: 1.35; }
.credit-card-button, .local-dialog-action {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 46px;
  margin-block-start: 22px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: clamp(17px, 3.35vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  cursor: pointer;
}
.credit-card-button:active, .local-dialog-action:active { background: #095c00; }
.credit-details { margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--border); }
.credit-details[hidden] { display: none; }
.credit-details h4 { margin: 0; font-size: 17px; font-weight: 500; }
.credit-details p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
.credit-offer-list { display: grid; gap: 10px; margin-block-start: 12px; }
.credit-offer { padding: 13px 14px; border-radius: 16px; background: #f2f4f2; }
.credit-offer header { display: flex; align-items: center; gap: 10px; }
.credit-offer-avatar { display: grid; place-items: center; flex: 0 0 auto; inline-size: 38px; block-size: 38px; border-radius: 12px; background: #e2f2df; color: var(--primary); font-size: 14px; font-weight: 600; line-height: 1; }
.credit-offer header > div { min-inline-size: 0; }
.credit-offer h5 { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.credit-offer h5 .messages-verified { inline-size: 16px; block-size: 16px; }
.credit-offer h5 .messages-verified svg { inline-size: 16px; block-size: 16px; }
.credit-offer header > div > span { display: block; margin-block-start: 2px; color: var(--card-secondary); font-size: 12px; line-height: 1.3; }
.credit-offer > p { margin-block-start: 10px; color: #454a45; font-size: 14px; line-height: 1.45; }
.credit-offers-empty { color: var(--card-secondary); }
.credit-pagination { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; inline-size: 100%; max-inline-size: 276px; margin: 28px auto 0; }
.credit-pagination-page { display: grid; place-items: center; inline-size: 100%; min-block-size: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--foreground); font: inherit; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; }
.credit-pagination-page[aria-current='page'] { background: var(--primary); color: var(--primary-foreground); }
@media (hover: hover) {
  .credit-card-button:hover, .local-dialog-action:hover { background: #0b7000; }
  .credit-pagination-page:not([aria-current='page']):hover { background: #edf4ea; }
}
@media (min-width: 1024px) {
  .credit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .credit-institution-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 400px) {
  .institution-card-cover { gap: 12px; min-block-size: 165px; padding: 16px; }
  .institution-logo { inline-size: 58px; block-size: 58px; font-size: 18px; }
}
@media (max-width: 359px) {
  .credit-card-header { --credit-name-size: 21px; column-gap: 8px; }
  .credit-card-header h3 { grid-column: 1 / -1; }
  .credit-response-stats { grid-row: 2; }
  .credit-location { row-gap: 2px; }
  .credit-location .credit-city { flex-basis: 100%; }
  .credit-location > span[aria-hidden='true'] { display: none; }
  .credit-location > span:last-child { padding-inline-start: 28px; }
  .credit-facts { column-gap: 12px; }
  .credit-fact { grid-template-columns: 20px minmax(0, 1fr); column-gap: 7px; }
}
.site-footer { inline-size: 100%; margin-block-start: 24px; padding-block: 32px; padding-block-end: max(28px, env(safe-area-inset-bottom)); background: #181818; color: #f6f6f6; }
.footer-content { inline-size: 100%; padding-inline: clamp(16px, 4vw, 32px); }
.footer-mobile h2 { margin: 0; color: #aaa; font-size: 16px; font-weight: 400; line-height: 1.5; }
.footer-platforms { display: flex; align-items: center; gap: 12px; margin-block-start: 16px; }
.footer-platform { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 10px; border: 0; background: transparent; color: #fff; cursor: not-allowed; }
.footer-platform img { display: block; flex-shrink: 0; inline-size: 24px; block-size: 24px; }
.footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-block-start: 32px; padding-block-start: 32px; border-block-start: 1px solid #363636; }
.footer-copyright { margin: 0; color: #aaa; font-size: 16px; line-height: 1.5; }
.footer-documents { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-document { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0; border: 0; background: transparent; color: #f6f6f6; font: inherit; font-size: 16px; line-height: 1.5; text-align: start; cursor: pointer; }
.footer-document:focus-visible { outline-color: #a7e59d; }
@media (hover: hover) {
  .footer-document:hover { color: #b2e7a6; text-decoration: underline; text-underline-offset: 4px; }
}
.welcome-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 100svh;
  background: #f7f8f7;
}
.welcome-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-block-size: 72px;
  padding-inline: clamp(16px, 4vw, 40px);
  border-block-end: 1px solid #e8ebe7;
  background: #fff;
}
.welcome-brand {
  grid-column: 2;
  justify-self: center;
  color: var(--foreground);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1;
}
.welcome-main {
  align-self: center;
  inline-size: 100%;
  max-inline-size: 560px;
  margin-inline: auto;
  padding: clamp(32px, 7vh, 76px) 24px;
  transform: translateY(clamp(-28px, -3svh, -18px));
}
.welcome-main:focus { outline: none; }
.welcome-intro { margin-block-end: 32px; text-align: center; }
.welcome-intro h1 { margin: 0; font-size: clamp(32px, 6.4vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.045em; }
.welcome-intro p { margin: 16px 0 0; color: #656565; font-size: clamp(16px, 3.3vw, 19px); line-height: 1.45; }
.welcome-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.welcome-option {
  display: grid;
  grid-template-columns: clamp(74px, 18vw, 100px) minmax(0, 1fr) 21px;
  align-items: center;
  gap: 16px;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 136px;
  padding: 16px;
  border: 1px solid #dfe4de;
  border-radius: 18px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.welcome-illustration { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; border-radius: 13px; color: #192b20; }
.welcome-illustration-borrower { background: linear-gradient(130deg, #edfbc5, #caf3d4 68%, #e0fbdc); }
.welcome-illustration-lender { background: linear-gradient(130deg, #d7fbe2, #ebfbc7 65%, #d7f3c8); }
.welcome-illustration img { display: block; inline-size: 48%; block-size: auto; }
.welcome-option-copy { display: grid; gap: 7px; min-inline-size: 0; }
.welcome-option-title { font-size: clamp(19px, 3.8vw, 23px); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.welcome-option-description { color: #767676; font-size: clamp(14px, 2.9vw, 16px); line-height: 1.4; }
.welcome-option-arrow { display: grid; place-items: center; flex-shrink: 0; }
.welcome-option-arrow img { display: block; inline-size: 22px; block-size: 22px; transition: transform 150ms ease; }
.welcome-option:active { border-color: var(--primary); background: #fbfef9; }
.welcome-footer { padding: 20px 20px max(28px, env(safe-area-inset-bottom)); text-align: center; }
.welcome-footer p { margin: 0; font-size: clamp(15px, 3vw, 18px); line-height: 1.5; }
.welcome-login { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--primary); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) {
  .welcome-option:hover { border-color: #108a00; box-shadow: 0 3px 18px #173c1010; }
  .welcome-option:hover .welcome-option-arrow img { transform: translateX(2px); }
  .welcome-login:hover { color: #095c00; }
}
@media (max-width: 359px) {
  .welcome-main { padding-inline: 16px; }
  .welcome-option { grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 12px; padding: 14px; }
  .welcome-option-title { font-size: 18px; }
  .welcome-option-arrow { inline-size: 18px; }
}
.signup-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 100svh;
  background: radial-gradient(ellipse 65% 250px at 50% 0, #effaed 0%, #f8fcf7 54%, #fff0 100%), #fff;
}

.signup-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-block-size: 72px;
  padding-inline: clamp(16px, 4vw, 40px);
  border-block-end: 1px solid #e8ebe7;
  background: #fff;
}

.signup-brand {
  grid-column: 2;
  justify-self: center;
  color: var(--foreground);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1;
}

.signup-back {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  color: var(--foreground);
}
.signup-back img { display: block; inline-size: 25px; block-size: 25px; }
.signup-back[hidden] { display: none; }

.messages-placeholder-main {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-block-size: calc(100svh - 72px);
  padding: 48px var(--page-gutter);
  background:
    radial-gradient(ellipse 78% 34% at 50% 52%, #eaf7e7 0%, #f5fbf3 52%, #fff0 100%),
    #fff;
}
body.has-app-nav .messages-placeholder-main { min-block-size: calc(100svh - 72px - var(--app-nav-height) - env(safe-area-inset-bottom)); }
.messages-placeholder-card {
  position: relative;
  inline-size: min(100%, 520px);
  padding: 20px clamp(8px, 3vw, 20px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.messages-empty-icon { display: grid; place-items: center; inline-size: 62px; block-size: 62px; margin: 0 auto 18px; border-radius: 20px; background: linear-gradient(145deg, #dff4da, #f1f9ef); color: var(--foreground); box-shadow: none; }
.messages-empty-icon img { display: block; inline-size: 30px; block-size: 30px; }
.messages-placeholder-card h1 { margin: 0; font-size: clamp(28px, 6.2vw, 36px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.messages-placeholder-card p { margin: 12px auto 0; color: #656565; font-size: 16px; line-height: 1.5; }
.messages-placeholder-card .signup-eyebrow { margin: 0 0 12px; color: var(--primary); font-size: 14px; line-height: 1.3; }
.messages-placeholder-card .messages-create-request { display: inline-flex; align-items: center; justify-content: center; inline-size: min(100%, 320px); min-block-size: clamp(48px, 9.12vw, 60px); margin-block-start: 22px; padding: 10px 24px; border-radius: 999px; background: var(--primary); color: #fff; font-size: clamp(18px, 3.35vw, 22px); font-weight: 600; line-height: 1.4; }
@media (hover: hover) { .messages-create-request:hover { background: #0b7000; } }

body[data-page="messages"] .signup-header { block-size: 72px; min-block-size: 72px; max-block-size: 72px; padding-block: 0; border-block-end: 1px solid transparent; }
.messages-thread-open > .signup-header { display: none; }
.messages-thread-open .messages-inbox-main { padding-block-start: 0; padding-inline: 0; }
.messages-thread-open .messages-thread { inline-size: 100%; }
.messages-inbox-main { min-block-size: calc(100svh - 72px - var(--app-nav-height) - env(safe-area-inset-bottom)); padding: 28px 0 42px; background: #f7f8f7; }
.messages-inbox, .messages-thread { inline-size: min(100%, 680px); margin-inline: auto; }
.messages-inbox { inline-size: 100%; max-inline-size: none; }
.messages-inbox-heading { margin-block-end: 24px; }
.messages-inbox-heading h1 { margin: 0; font-size: clamp(32px, 7vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.messages-inbox-heading p { margin: 10px 0 0; color: #6b706b; font-size: 15px; line-height: 1.45; }
.messages-conversation-list { display: grid; gap: 10px; }
.messages-conversation { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; inline-size: 100%; min-block-size: 88px; padding: 14px clamp(16px, 4vw, 40px); border: 0; border-radius: 0; background: #fff; color: var(--foreground); font: inherit; text-align: start; cursor: pointer; }
.messages-conversation.is-unread { background: #ecefec; box-shadow: none; }
.messages-team-avatar { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 17px; background: #e5f5e2; color: var(--primary); font-size: 23px; font-weight: 600; }
.messages-conversation-copy { display: grid; gap: 6px; min-inline-size: 0; }
.messages-conversation-name { display: flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 600; line-height: 1.2; }
.messages-conversation-preview { overflow: hidden; color: #6a6f6a; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.messages-verified { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; vertical-align: middle; }
.messages-verified svg { display: block; inline-size: 18px; block-size: 18px; }
.messages-verified circle { fill: #1687e8; }
.messages-verified path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.messages-conversation-meta { display: grid; align-self: stretch; justify-items: end; align-content: space-between; min-inline-size: 35px; padding-block: 3px; color: #7a7e7a; font-size: 12px; line-height: 1; }
.messages-unread-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--primary); }
.messages-thread-heading { position: sticky; z-index: 46; inset-block-start: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; block-size: 72px; min-block-size: 72px; max-block-size: 72px; padding-inline: clamp(16px, 4vw, 40px); border-block-end: 1px solid transparent; background: #fff; box-shadow: 0 8px 24px #173d1408; }
.messages-thread-heading > button { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.messages-thread-heading > button img { inline-size: 25px; block-size: 25px; }
.messages-thread-profile { grid-column: 2; display: grid; grid-template-columns: minmax(0, auto) 50px; align-items: center; gap: 12px; max-inline-size: 100%; min-inline-size: 0; justify-self: end; text-align: end; }
.messages-thread-profile > div { min-inline-size: 0; }
.messages-thread-heading .messages-team-avatar { inline-size: 50px; block-size: 50px; border-radius: 16px; font-size: 22px; }
.messages-thread-heading h1 { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-inline-size: 0; margin: 0; overflow: hidden; font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.messages-thread-heading p { margin: 4px 0 0; color: #777c77; font-size: 13px; line-height: 1.3; }
.messages-thread-body { display: grid; justify-items: start; inline-size: min(100%, 680px); margin-inline: auto; padding: 20px var(--page-gutter) 52px; }
.messages-thread-date { justify-self: center; margin: 0 0 18px; color: #7b807b; font-size: 12px; line-height: 1.3; }
.messages-bubble { inline-size: fit-content; max-inline-size: min(88%, 460px); min-inline-size: 0; padding: 14px 16px 10px; border-radius: 6px 18px 18px 18px; background: #eff7ed; }
.messages-bubble p { margin: 0; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; font-size: 16px; line-height: 1.48; }
.messages-bubble time { display: block; margin-block-start: 8px; color: #747974; font-size: 11px; line-height: 1; text-align: end; }
.messages-outgoing-list { display: grid; gap: 10px; inline-size: 100%; margin-block-start: 12px; }
.messages-bubble.is-outgoing { justify-self: end; border-radius: 18px 6px 18px 18px; background: #e4f3e0; }
.messages-thread-action { display: inline-flex; align-items: center; justify-content: center; inline-size: min(100%, 320px); min-block-size: clamp(48px, 9.12vw, 60px); margin-block-start: 20px; padding: 10px 24px; border-radius: 999px; background: var(--primary); color: #fff; font-size: clamp(18px, 3.35vw, 22px); font-weight: 600; line-height: 1.4; }
.messages-composer { position: fixed; z-index: 45; inset-inline: 50% auto; inset-block-end: calc(var(--app-nav-height) + env(safe-area-inset-bottom)); inline-size: min(100%, 680px); padding: 10px var(--page-gutter) 12px; transform: translateX(-50%); background: linear-gradient(#f7f8f700, #f7f8f7 24%); }
.messages-composer > div { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: end; gap: 8px; padding: 5px 5px 5px 15px; border-radius: 24px; background: #f0f2f0; box-shadow: 0 8px 28px #173d140f; }
.messages-composer textarea { inline-size: 100%; min-block-size: 38px; max-block-size: 120px; resize: none; overflow-y: auto; padding: 8px 0 7px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: 16px; line-height: 1.4; outline: 0; }
.messages-composer textarea::placeholder { color: #7c817c; }
.messages-composer button { display: grid; place-items: center; inline-size: 42px; block-size: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; }
.messages-composer button svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .messages-conversation:hover { background: #eef0ee; } .messages-thread-heading > button:hover { background: #eef2ed; } .messages-thread-action:hover, .messages-composer button:hover { background: #0b7000; } }
@media (max-width: 350px) { .messages-conversation { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; } .messages-team-avatar { inline-size: 46px; block-size: 46px; } }

.app-bottom-nav {
  position: fixed;
  z-index: 50;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-block-size: calc(var(--app-nav-height) + env(safe-area-inset-bottom));
  padding: 4px max(8px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-block-start: 1px solid #e1e5e0;
  background: #fffffff2;
  box-shadow: 0 -8px 28px #173d140a;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.app-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-inline-size: 0; min-block-size: 60px; border-radius: 16px; color: #686e69; font-size: 11.5px; font-weight: 500; line-height: 1.1; }
.app-nav-icon-wrap { display: grid; place-items: center; inline-size: 42px; block-size: 34px; border-radius: 999px; }
.app-nav-icon { display: block; inline-size: 25px; block-size: 25px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; }
.app-nav-icon-home { mask-image: url('public/icons/nav-home.svg'); -webkit-mask-image: url('public/icons/nav-home.svg'); }
.app-nav-icon-messages { mask-image: url('public/icons/request-comment.svg'); -webkit-mask-image: url('public/icons/request-comment.svg'); }
.app-nav-icon-profile { mask-image: url('public/icons/nav-profile.svg'); -webkit-mask-image: url('public/icons/nav-profile.svg'); }
.app-nav-icon-feedback { mask-image: url('public/icons/nav-feedback.svg'); -webkit-mask-image: url('public/icons/nav-feedback.svg'); }
.app-nav-link[aria-current='page'] { color: var(--primary); font-weight: 600; }
.app-nav-link[aria-current='page'] .app-nav-icon-wrap { background: #e8f6e5; }
@media (hover: hover) { .app-nav-link:hover { color: var(--primary); background: #f4faf2; } }

.app-section-main { display: grid; place-items: center; min-block-size: calc(100svh - 72px - var(--app-nav-height) - env(safe-area-inset-bottom)); padding: 40px var(--page-gutter); background: #f7f8f7; }
.app-section-card { inline-size: min(100%, 560px); padding: clamp(28px, 6vw, 42px); border-radius: 28px; background: linear-gradient(145deg, #f4fbf2 0%, #fff 68%); box-shadow: 0 22px 64px #173d1414; text-align: center; }
.app-section-card h1 { margin: 0; font-size: clamp(30px, 7vw, 42px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.app-section-card > p:not(.signup-eyebrow) { max-inline-size: 430px; margin: 14px auto 0; color: #656565; font-size: 17px; line-height: 1.5; }
.app-section-icon { display: block; inline-size: 72px; block-size: 72px; margin: 0 auto 22px; border-radius: 24px; background-color: #19301f; background-position: center; background-repeat: no-repeat; background-size: 34px; box-shadow: 0 10px 28px #173d1412; }
.app-section-icon-profile { background-color: #e8f6e5; background-image: url('public/icons/nav-profile.svg'); }
.app-section-icon-feedback { background-color: #e8f6e5; background-image: url('public/icons/nav-feedback.svg'); }

.profile-main { min-block-size: calc(100svh - 72px - var(--app-nav-height) - env(safe-area-inset-bottom)); max-inline-size: 100%; padding: 30px var(--page-gutter) 44px; background: #f7f8f7; }
.profile-content { display: grid; gap: 18px; inline-size: min(100%, 680px); max-inline-size: 100%; min-inline-size: 0; margin-inline: auto; }
/* Same shape as .profile-content so nothing jumps when the profile arrives. */
.profile-loading { display: grid; gap: 18px; inline-size: min(100%, 680px); max-inline-size: 100%; margin-inline: auto; }
.profile-intro { padding: 2px 4px 8px; text-align: center; }
.profile-intro h1, .profile-deleted h1 { margin: 0; font-size: clamp(32px, 7vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.profile-intro > p:last-child, .profile-deleted > p:not(.signup-eyebrow) { max-inline-size: 470px; margin: 12px auto 0; color: #656965; font-size: 16px; line-height: 1.45; }
.profile-panel { max-inline-size: 100%; min-inline-size: 0; padding: clamp(20px, 5vw, 30px); border: 1px solid #e0e4df; border-radius: 22px; background: #fff; box-shadow: 0 8px 28px #173d1408; }
.profile-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block-end: 22px; }
.profile-panel-heading h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.profile-panel-heading p { margin: 6px 0 0; color: #717571; font-size: 14px; line-height: 1.4; }
.profile-logout { flex: 0 0 auto; min-block-size: 36px; padding: 6px 9px; border: 0; border-radius: 10px; background: transparent; color: #a3261d; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; }
.profile-request-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-block-size: 30px; padding: 5px 10px; border-radius: 999px; background: #e8f6e5; color: var(--primary); font-size: 13px; font-weight: 600; line-height: 1; }
.profile-request-state > i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--primary); }
.profile-request-state.is-unpublished { background: #fff6ce; color: #806200; }
.profile-request-state.is-unpublished > i { background: #e3b600; animation: profile-request-state-pulse 1.2s ease-in-out infinite; }
.profile-form { display: grid; gap: 17px; }
.profile-name-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; }
.profile-field { display: grid; gap: 8px; min-inline-size: 0; color: var(--foreground); font-size: 15px; font-weight: 500; line-height: 1.35; }
.profile-field input { inline-size: 100%; min-block-size: 50px; padding: 12px 14px; border: 1px solid #b3bab2; border-radius: 12px; background: #fff; color: var(--foreground); font: inherit; font-weight: 400; outline: 0; }
.profile-field input:focus, .profile-phone-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.profile-field small { color: #757975; font-size: 13px; font-weight: 400; line-height: 1.4; }
.profile-phone-control { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; min-block-size: 50px; border: 1px solid #b3bab2; border-radius: 12px; background: #fff; }
.profile-phone-control > strong { display: inline-flex; align-items: center; gap: 9px; padding-inline: 14px; border-inline-end: 1px solid #d8ddd7; font-size: 16px; font-weight: 500; }
.profile-phone-control > strong img { border-radius: 2px; }
.profile-phone-control input { min-block-size: 48px; border: 0; border-radius: 0; box-shadow: none; }
.profile-phone-control input:focus { box-shadow: none; }
.profile-save, .profile-request-empty a, .profile-deleted > a { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: clamp(48px, 9.12vw, 60px); padding: 10px 24px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-size: clamp(18px, 3.35vw, 22px); font-weight: 600; line-height: 1.4; cursor: pointer; }
.profile-save-status { margin: -4px 0 0; color: var(--primary); font-size: 14px; line-height: 1.4; text-align: center; }
.profile-save-status.is-error { color: #a3261d; }
.profile-delete-inline { justify-self: center; min-block-size: 40px; margin-block-start: -2px; padding: 6px 10px; border: 0; background: transparent; color: #a3261d; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.profile-request-card { overflow: hidden; max-inline-size: 100%; min-inline-size: 0; padding: 18px; border-radius: 17px; background: #f7f9f7; transition: opacity 150ms ease, filter 150ms ease; }
.profile-request-card.is-inactive > * { opacity: .62; }
.profile-request-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-inline-size: 0; }
.profile-request-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.profile-request-metrics { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; padding-block-start: 2px; color: #666c66; }
.profile-request-metrics > span { display: inline-flex; align-items: center; gap: 4px; }
.profile-request-metrics img { inline-size: 17px; block-size: 17px; opacity: .72; }
.profile-request-metrics svg { inline-size: 17px; block-size: 17px; }
.profile-request-metrics .is-approved { color: #26751d; }
.profile-request-metrics b { font-size: 13px; font-weight: 600; line-height: 1; }
.profile-request-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 18px 0 0; padding: 18px 0; border-block: 1px solid #dfe4de; }
.profile-request-facts dt, .profile-request-comment > span { color: #737873; font-size: 13px; line-height: 1.3; }
.profile-request-facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 500; line-height: 1.25; }
.profile-request-comment { padding-block-start: 16px; }
.profile-request-comment p { max-inline-size: 100%; margin: 5px 0 0; overflow-wrap: anywhere; word-break: break-word; font-size: 15px; line-height: 1.45; }
.profile-request-actions { display: grid; gap: 15px; margin-block-start: 14px; }
.profile-publish-button { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: clamp(48px, 9.12vw, 60px); padding: 10px 24px; border: 0; border-radius: 999px; background: #e2e5e2; color: #363a36; font: inherit; font-size: clamp(18px, 3.35vw, 22px); font-weight: 600; line-height: 1.4; cursor: pointer; }
.profile-publish-button.is-publish { background: var(--primary); color: #fff; }
.profile-danger-button { display: inline-flex; align-items: center; justify-content: center; justify-self: center; min-block-size: 40px; padding: 6px 12px; border: 0; background: transparent; color: #a3261d; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.profile-request-empty { padding: 24px 10px 4px; text-align: center; }
.profile-request-empty h3 { margin: 0; font-size: 21px; font-weight: 600; }
.profile-request-empty p { max-inline-size: 390px; margin: 10px auto 20px; color: #6e736e; font-size: 15px; line-height: 1.45; }
.profile-request-empty a { inline-size: min(100%, 320px); }
.profile-deleted { inline-size: min(100%, 560px); margin: 12vh auto 0; padding: 32px var(--page-gutter); text-align: center; }
.profile-deleted > a { inline-size: min(100%, 320px); margin-block-start: 24px; }
.profile-confirm-dialog { inline-size: min(calc(100% - 32px), 440px); }
.profile-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 24px; }
.profile-dialog-actions button, .profile-dialog-actions a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 46px; padding: 8px 12px; border: 1px solid #cdd2cc; border-radius: 999px; background: #fff; color: var(--foreground); font: inherit; font-weight: 500; text-align: center; cursor: pointer; }
.profile-dialog-actions .is-danger { border-color: #a3261d; background: #a3261d; color: #fff; }
.profile-dialog-actions .is-primary { border-color: var(--primary); background: var(--primary); color: #fff; }
@media (min-width: 620px) { .profile-name-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-request-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .profile-request-facts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .profile-request-state.is-unpublished > i { animation: none; } }
@media (hover: hover) { .profile-save:hover, .profile-request-empty a:hover, .profile-deleted > a:hover, .profile-publish-button.is-publish:hover { background: #0b7000; } .profile-publish-button:not(.is-publish):hover { background: #d8dcd8; } .profile-danger-button:hover { text-decoration: underline; text-underline-offset: 3px; } .profile-delete-inline:hover, .profile-logout:hover { color: #7e1d16; background: #fff1ef; } }

@keyframes profile-request-state-pulse { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

.feedback-form { display: grid; gap: 12px; margin-block-start: 28px; text-align: start; }
.feedback-form label { font-size: 15px; font-weight: 500; }
.feedback-form textarea { inline-size: 100%; min-block-size: 130px; resize: vertical; padding: 14px 16px; border: 1px solid #b8c0b8; border-radius: 16px; background: #fff; color: var(--foreground); font: inherit; font-size: 16px; line-height: 1.45; }
.feedback-form textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.feedback-form button { display: inline-flex; align-items: center; justify-content: center; min-block-size: clamp(48px, 9.12vw, 60px); padding: 10px 24px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-size: clamp(18px, 3.35vw, 22px); font-weight: 600; line-height: 1.4; cursor: pointer; }
.feedback-success { margin: 2px 0 0; color: var(--primary); font-size: 14px; line-height: 1.4; text-align: center; }

.signup-main {
  inline-size: 100%;
  padding: clamp(40px, 7vw, 76px) var(--page-gutter) max(52px, env(safe-area-inset-bottom));
}

.signup-main:focus { outline: none; }

.signup-panel {
  inline-size: 100%;
  max-inline-size: 600px;
  margin-inline: auto;
}

.signup-intro { margin-block-end: 30px; text-align: center; }
.signup-eyebrow {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signup-intro h1 {
  margin: 0;
  font-size: clamp(32px, 7vw, 46px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.signup-intro > p:last-child {
  max-inline-size: 440px;
  margin: 16px auto 0;
  color: #656565;
  font-size: clamp(16px, 3.4vw, 19px);
  line-height: 1.45;
}

.signup-form { display: grid; gap: 19px; }
.signup-name-fields { display: grid; grid-template-columns: 1fr; gap: 19px; }
.signup-field { display: grid; gap: 8px; color: var(--foreground); font-size: 16px; font-weight: 500; line-height: 1.35; }
.signup-field input {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 12px 14px;
  border: 1px solid #aeb5ad;
  border-radius: 10px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-weight: 400;
  outline: none;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.signup-field input:hover { border-color: #767d75; }
.signup-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.signup-field small { color: #707070; font-size: 14px; font-weight: 400; line-height: 1.4; }
.signup-phone-control {
  display: flex;
  align-items: stretch;
  min-block-size: 52px;
  overflow: hidden;
  border: 1px solid #aeb5ad;
  border-radius: 10px;
  background: #fff;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.signup-phone-control:hover { border-color: #767d75; }
.signup-phone-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.signup-phone-prefix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding-inline: 14px;
  border-inline-end: 1px solid #d5d9d4;
  background: #f6f8f5;
  color: #353835;
  font-weight: 500;
}
.signup-phone-prefix img { display: block; border-radius: 2px; box-shadow: 0 0 0 1px #18181812; }
.signup-phone-control input {
  min-inline-size: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.signup-phone-control input:hover,
.signup-phone-control input:focus { border: 0; box-shadow: none; }
.signup-password-control { position: relative; display: block; }
.signup-password-control input { padding-inline-end: 54px; }
.signup-password-toggle {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #555;
  cursor: pointer;
}
.signup-password-toggle img { display: block; inline-size: 22px; block-size: 22px; }
.signup-consent {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  column-gap: 11px;
  margin-block: 1px 2px;
}
.signup-consent-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.signup-consent-box {
  position: relative;
  display: block;
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 1px;
  border: 2px solid var(--primary);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.signup-consent-box::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 9px;
  block-size: 5px;
  border: solid var(--primary);
  border-width: 0 0 2px 2px;
  transform: translate(-50%, -65%) rotate(-45deg);
  transition: opacity 100ms ease, transform 100ms ease;
}
.signup-consent-input:not(:checked) + .signup-consent-box::after { opacity: 0; transform: translate(-50%, -65%) rotate(-45deg) scale(.5); }
.signup-consent-input:focus-visible + .signup-consent-box { box-shadow: 0 0 0 3px #14a80035; }
.signup-consent-input:invalid + .signup-consent-box { border-color: #b42318; }
.signup-consent-copy { margin: 0; color: #363936; font-size: 14px; font-weight: 400; line-height: 1.5; }
.signup-consent-copy label { cursor: pointer; }
.signup-consent-copy button {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.signup-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: clamp(48px, 9.12vw, 60px);
  margin-block-start: 5px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: clamp(18px, 3.35vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.signup-privacy-note { margin: -7px 0 0; color: #707070; font-size: 13px; line-height: 1.45; text-align: center; }
.signup-account-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-block-start: 2px; color: #656a65; font-size: 15px; line-height: 1.4; text-align: center; }
.signup-account-switch a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.login-main { display: grid; align-items: start; min-block-size: calc(100svh - 72px); }
.login-panel { max-inline-size: 520px; }
.login-error { margin: -4px 0 0; padding: 11px 13px; border-radius: 10px; background: #fff0ee; color: #a3261d; font-size: 14px; line-height: 1.4; }
.signup-success {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid #b9dfb3;
  border-radius: 12px;
  background: #f2faef;
  color: #186b10;
  font-size: 15px;
  line-height: 1.45;
}
.signup-success svg { flex: 0 0 auto; margin-block-start: 1px; }
.signup-page .site-footer { margin-block-start: 0; }

@media (min-width: 560px) {
  .signup-name-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .signup-panel {
    padding: 42px 46px 46px;
    border: 1px solid #e0e4df;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 40px #1630130a;
  }
}

@media (hover: hover) {
  .signup-back:hover { background: #eef6ec; color: var(--primary); }
  .signup-password-toggle:hover { background: #eef6ec; color: var(--primary); }
  .signup-brand:hover { color: var(--primary); }
  .signup-consent-copy button:hover { color: #095c00; }
  .signup-account-switch a:hover { color: #095c00; }
  .signup-submit:hover { background: #0b7000; }
}
.puzzle-dialog {
  inline-size: min(420px, calc(100% - 24px));
  max-inline-size: 420px;
  max-block-size: calc(100dvh - 24px);
  gap: 0;
  overflow-y: auto;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--foreground);
  box-shadow: 0 20px 70px #1117;
}
.puzzle-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 3px 2px 13px; }
.puzzle-title { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.puzzle-description { margin-block-start: 5px; color: #6c716b; font-size: 14px; line-height: 1.35; }
.puzzle-timer {
  flex: 0 0 auto;
  min-inline-size: 54px;
  padding: 7px 8px;
  border-radius: 999px;
  background: #eef6ec;
  color: #276d1d;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.puzzle-timer-warning { background: #fff1e5; color: #a24700; }
.puzzle-board {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #dce9dd;
  touch-action: none;
}
.puzzle-board > img { display: block; inline-size: 100%; block-size: 100%; object-fit: fill; user-select: none; }
.puzzle-board::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  block-size: 48%;
  background: linear-gradient(#0b1d24a3, #0b1d2400);
  pointer-events: none;
}
.puzzle-board-copy {
  position: absolute;
  z-index: 4;
  inset-block-start: 14px;
  inset-inline: 16px 76px;
  display: grid;
  color: #fff;
  line-height: 1.08;
  text-shadow: 0 1px 4px #000c;
  pointer-events: none;
}
.puzzle-board-copy strong { font-size: clamp(18px, 5.3vw, 24px); font-weight: 600; letter-spacing: -0.025em; }
.puzzle-board-copy span { margin-block-start: 4px; font-size: clamp(13px, 3.5vw, 16px); font-weight: 400; }
.puzzle-hole, .puzzle-piece { position: absolute; inline-size: 58px; block-size: 58px; overflow: visible; }
.puzzle-hole { z-index: 2; filter: drop-shadow(0 1px 2px #0008); }
.puzzle-hole path { fill: #102316ad; stroke: #ffffffa8; stroke-width: 1.4; }
.puzzle-piece { z-index: 3; filter: drop-shadow(0 2px 3px #102016cc); }
.puzzle-piece-outline { fill: none; stroke: #c9ff69; stroke-width: 3; }
.puzzle-slider {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 54px;
  margin-block-start: 12px;
  overflow: hidden;
  border: 1px solid #d4d9d3;
  border-radius: 999px;
  background: #f1f3f1;
  color: #777d76;
  touch-action: none;
  user-select: none;
}
.puzzle-slider::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-start: 46px;
  inline-size: 72px;
  background: linear-gradient(90deg, #fff0, #ffffffb8, #fff0);
  transform: translateX(-90px);
  animation: puzzle-direction-cue 1.9s ease-in-out infinite;
  pointer-events: none;
}
.puzzle-slider-dragging::after,
.puzzle-slider-success::after { display: none; }
.puzzle-slider-progress { position: absolute; inset: 0 auto 0 0; background: #e6f4e3; pointer-events: none; }
.puzzle-slider-label { position: relative; z-index: 2; inline-size: 100%; padding-inline: 72px 18px; font-size: 14px; line-height: 1.2; text-align: center; opacity: 1; transition: opacity 120ms ease; pointer-events: none; }
.puzzle-slider-dragging .puzzle-slider-label,
.puzzle-slider-success .puzzle-slider-label { opacity: 0; }
.puzzle-handle {
  position: absolute;
  z-index: 3;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  padding: 0;
  border: 1px solid #0d7b00;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font: inherit;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 3px 10px #173d1440;
}
.puzzle-handle:active { cursor: grabbing; }
.puzzle-handle:disabled { cursor: default; opacity: 1; }
.puzzle-handle-grip { display: flex; align-items: center; justify-content: center; gap: 4px; }
.puzzle-handle-grip i {
  display: block;
  inline-size: 3px;
  block-size: 18px;
  border-radius: 999px;
  background: #fff;
  animation: puzzle-grip-pulse 1.2s ease-in-out infinite;
}
.puzzle-handle-grip i:nth-child(2) { animation-delay: 120ms; }
.puzzle-handle-grip i:nth-child(3) { animation-delay: 240ms; }
.puzzle-slider-success { border-color: #79bb70; color: #246d1b; }
.puzzle-slider-success .puzzle-slider-progress { inline-size: 100% !important; background: #e7f6e4; }
.puzzle-status { min-block-size: 36px; margin: 9px 2px 0; color: #656b65; font-size: 13px; line-height: 1.35; }
.puzzle-status-failed, .puzzle-status-click, .puzzle-status-expired { color: #a24700; }
.puzzle-status-success { color: #18730d; }
.puzzle-actions { display: flex; align-items: center; gap: 4px; padding-block-start: 10px; border-block-start: 1px solid #e5e7e4; }
.puzzle-actions button {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5d635c;
}
.puzzle-actions button { cursor: pointer; }
.puzzle-actions button img { display: block; inline-size: 24px; block-size: 24px; }
.puzzle-actions .puzzle-retry {
  inline-size: auto;
  margin-inline-start: auto;
  padding-inline: 16px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
@media (hover: hover) {
  .puzzle-actions button:hover { background: #eef5ec; color: var(--primary); }
  .puzzle-actions .puzzle-retry:hover { background: #0b7000; color: #fff; }
}
@media (max-width: 359px) {
  .puzzle-dialog { padding: 10px; }
  .puzzle-title { font-size: 19px; }
  .puzzle-slider-label { font-size: 13px; }
}
@keyframes puzzle-direction-cue {
  0%, 18% { transform: translateX(-90px); opacity: 0; }
  35% { opacity: .72; }
  82%, 100% { transform: translateX(300px); opacity: 0; }
}
@keyframes puzzle-grip-pulse {
  0%, 100% { transform: scaleY(.68); opacity: .62; }
  48% { transform: scaleY(1); opacity: 1; }
}

/* Static HTML runtime: browser-native resets and dialogs. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.native-dialog, .puzzle-dialog { border: 0; }
.native-dialog::backdrop, .puzzle-dialog::backdrop { background: #1118; backdrop-filter: blur(5px); }
.native-dialog { position: fixed; margin: auto; }
.native-dialog[open], .puzzle-dialog[open] { animation: static-dialog-in 120ms ease-out; }
.puzzle-dialog { margin: auto; }
.puzzle-actions .puzzle-retry { font-size: 16px; }
.puzzle-check { font-size: 25px; line-height: 1; }
@keyframes static-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.lender-application-page .signup-panel { max-inline-size: 560px; }
.lender-application-success {
  display: grid;
  justify-items: center;
  padding-block: 8px 2px;
  text-align: center;
}
.lender-success-icon {
  display: grid;
  place-items: center;
  inline-size: 58px;
  block-size: 58px;
  margin-block-end: 20px;
  border-radius: 50%;
  background: #eaf7e7;
  color: var(--primary);
}
.lender-application-success h2 {
  margin: 0;
  font-size: clamp(25px, 5.5vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.lender-application-success p {
  max-inline-size: 410px;
  margin: 14px 0 24px;
  color: #656565;
  font-size: 16px;
  line-height: 1.5;
}
.lender-application-success a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: 18px;
  border: 1px solid #b6bdb5;
  border-radius: 999px;
  color: var(--foreground);
  font-weight: 500;
}
@media (hover: hover) {
  .lender-application-success a:hover { border-color: var(--primary); color: var(--primary); }
}

/* Local borrower flow: loan request, step 2 of 3. */
.request-create-page {
  min-block-size: 100svh;
  background: #f7f8f7;
}
.request-create-main {
  inline-size: 100%;
  max-inline-size: 680px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 76px) var(--page-gutter) max(52px, env(safe-area-inset-bottom));
}
@media (min-width: 720px) {
  .request-create-main { padding-block-start: calc(clamp(40px, 7vw, 76px) + 42px); }
}
.request-create-main:focus { outline: none; }
.request-create-intro {
  margin-block-end: 30px;
  text-align: center;
}
.request-eyebrow {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.request-create-intro h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(32px, 7vw, 46px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.request-intro-description {
  max-inline-size: 440px;
  margin: 16px auto 22px;
  color: #656565;
  font-size: clamp(16px, 3.4vw, 19px);
  line-height: 1.45;
  text-wrap: balance;
}
.request-step { margin: 0 0 11px; color: var(--muted-foreground); font-size: 17px; line-height: 1.3; }
.request-step strong { color: var(--primary); font-weight: 600; }
.request-progress { block-size: 5px; overflow: hidden; border-radius: 999px; background: #e1e4e7; }
.request-progress span { display: block; inline-size: 50%; block-size: 100%; border-radius: inherit; background: var(--primary); transition: inline-size 220ms ease; }
.request-progress-complete span { inline-size: 100%; }
.request-create-form { display: grid; gap: 22px; }
.request-fields-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding: 11px clamp(18px, 4vw, 25px) 18px;
  border: 1px solid #dde3dc;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 28px #173d1409;
}
.request-choice,
.request-comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  min-inline-size: 0;
  padding-block: 3px;
  cursor: pointer;
}
.request-control {
  min-inline-size: 0;
  padding-block: 12px;
  border-block-end: 1px solid #e8ebe7;
}
.request-choice {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  inline-size: 100%;
  padding-inline: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  text-align: start;
}
.request-control-trigger:focus-visible { outline: 0; border-radius: 13px; box-shadow: inset 0 0 0 2px #14a80070; }
.request-comment { grid-column: 1 / -1; align-items: start; padding-block-start: 20px; border-block-start: 0; cursor: default; }
.request-comment > .request-field-icon { margin-block-start: 6px; }
.request-field-icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #ebf8e9;
}
.request-field-icon img { display: block; inline-size: 26px; block-size: 26px; filter: brightness(0) saturate(100%); }
.request-choice-copy,
.request-comment-copy { display: grid; min-inline-size: 0; }
.request-choice-label { margin-block-start: 2px; color: var(--card-secondary); font-size: 14px; font-weight: 400; line-height: 1.3; }
.request-choice-value { overflow: hidden; color: var(--foreground); font-size: clamp(19px, 4.5vw, 23px); font-weight: 500; line-height: 1.16; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.request-choice-placeholder {
  color: var(--foreground);
  font-size: clamp(19px, 4.5vw, 23px);
  font-weight: 500;
  letter-spacing: -.025em;
}
.request-comment-title { color: var(--foreground); font-size: 18px; font-weight: 500; line-height: 1.25; }
.request-control-actions { display: flex; align-items: center; gap: 3px; }
.request-control-check {
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transform: scale(.65);
  transition: opacity 120ms ease, transform 120ms ease;
}
.request-control.is-complete .request-control-check { opacity: 1; transform: scale(1); }
.request-control-chevron { display: block; inline-size: 19px; block-size: 19px; transition: transform 150ms ease; }
.request-control.is-open .request-control-chevron { transform: rotate(180deg); }
.request-control.is-open { background: #fbfefb; }
.request-choice { min-block-size: 54px; }
.request-control-panel { padding: 11px 0 8px 51px; }
.request-range-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.request-range-heading > span { color: #4d534d; font-size: 13px; font-weight: 500; line-height: 1.35; }
.request-range-heading small { color: #777d76; font-size: 12px; line-height: 1.35; text-align: end; }
.request-range {
  --range-progress: 0%;
  display: block;
  inline-size: 100%;
  block-size: 26px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: grab;
}
.request-range:active { cursor: grabbing; }
.request-range::-webkit-slider-runnable-track { block-size: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--primary) 0 var(--range-progress), #dfe4df var(--range-progress) 100%); }
.request-range::-webkit-slider-thumb { inline-size: 22px; block-size: 22px; margin-block-start: -8px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 1px 6px #173d143d; appearance: none; }
.request-range::-moz-range-track { block-size: 6px; border-radius: 999px; background: #dfe4df; }
.request-range::-moz-range-progress { block-size: 6px; border-radius: 999px; background: var(--primary); }
.request-range::-moz-range-thumb { inline-size: 20px; block-size: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 1px 6px #173d143d; }
.request-range:focus-visible { outline: none; }
.request-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #14a8002e, 0 1px 6px #173d143d; }
.request-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px #14a8002e, 0 1px 6px #173d143d; }
.request-range-scale { display: flex; justify-content: space-between; margin-block-start: 1px; color: #858b84; font-size: 11px; line-height: 1.3; }
.request-purpose-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.request-purpose-options legend { grid-column: 1 / -1; margin-block-end: 2px; color: #777d76; font-size: 12px; }
.request-purpose-options label { position: relative; cursor: pointer; }
.request-purpose-options input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.request-purpose-options span { display: flex; align-items: center; min-block-size: 42px; padding: 9px 11px; border: 1px solid #d8ddd7; border-radius: 10px; background: #fff; color: #393c39; font-size: 14px; line-height: 1.25; }
.request-purpose-options input:checked + span { border-color: var(--primary); background: #edf8eb; color: #116f07; font-weight: 500; }
.request-purpose-options input:focus-visible + span { outline: 3px solid #14a80035; outline-offset: 2px; }
.request-form-error { margin: -10px 2px 0; padding: 11px 13px; border: 1px solid #efb7b2; border-radius: 10px; background: #fff4f3; color: #9a231a; font-size: 13px; line-height: 1.4; }
.request-comment-copy textarea {
  inline-size: 100%;
  min-block-size: 112px;
  margin-block-start: 9px;
  padding: 12px 13px;
  border: 1px solid #aeb5ad;
  border-radius: 11px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.request-comment-copy textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.request-comment-copy textarea::placeholder { color: #8c918b; }
.request-comment-copy small { margin-block-start: 7px; color: #787e77; font-size: 12px; line-height: 1.4; }
.request-privacy {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #9dd995;
  border-radius: 17px;
  background: linear-gradient(120deg, #f3fbf1, #fbfefb);
}
.request-privacy-icon { display: grid; place-items: center; inline-size: 58px; block-size: 58px; border-radius: 50%; background: #e2f5df; }
.request-privacy-icon img { inline-size: 34px; block-size: 34px; }
.request-privacy p { margin: 0; font-size: 15px; line-height: 1.48; }
.request-publish {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: clamp(48px, 9.12vw, 60px);
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: clamp(18px, 3.35vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.request-protected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: -8px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.request-protected img { flex: 0 0 auto; }
.request-published-local { display: grid; gap: 22px; }
.request-summary-card,
.request-status-card {
  padding: 20px clamp(17px, 4vw, 24px);
  border: 1px solid #dde3dc;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px #173d1409;
}
.request-summary-card h2,
.request-status-card h2 {
  margin: 0 0 14px;
  color: var(--foreground);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.request-summary-list { margin: 0; }
.request-summary-list > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-block-size: 62px;
  border-block-end: 1px solid #e8ebe7;
}
.request-summary-list > div:last-child { border-block-end: 0; }
.request-summary-icon { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: #ebf8e9; }
.request-summary-icon img { display: block; inline-size: 22px; block-size: 22px; }
.request-summary-list dt { color: var(--muted-foreground); font-size: 14px; line-height: 1.35; }
.request-summary-list dd { margin: 0; color: var(--foreground); font-size: 18px; font-weight: 500; line-height: 1.35; text-align: end; }
.request-summary-list .request-summary-comment {
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 11px;
  align-items: start;
  padding-block: 12px;
}
.request-summary-comment .request-summary-icon { grid-column: 1; grid-row: 1; align-self: start; }
.request-summary-comment dt,
.request-summary-comment dd { grid-column: 2; grid-row: 1; align-self: start; margin-block-start: 9px; }
.request-summary-comment dt { position: relative; z-index: 1; inline-size: max-content; }
.request-summary-comment dd {
  inline-size: 100%;
  margin-block-start: 7px;
  min-inline-size: 0;
  max-inline-size: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  text-indent: 99px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  text-align: start;
}
.request-status-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.request-status-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-block-size: 78px;
}
.request-status-timeline li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: 30px;
  inset-block-end: 4px;
  inset-inline-start: 14px;
  inline-size: 2px;
  background: #c9ceca;
}
.request-status-timeline li.is-complete::after { background: var(--primary); }
.request-status-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border: 2px solid #a9afaa;
  border-radius: 50%;
  background: #fff;
  color: #fff;
}
.is-complete .request-status-marker { border-color: var(--primary); background: var(--primary); }
.is-complete .request-status-marker::before {
  content: '';
  inline-size: 8px;
  block-size: 4px;
  margin-block-start: -2px;
  border-inline-start: 2px solid #fff;
  border-block-end: 2px solid #fff;
  transform: rotate(-45deg);
}
.is-active .request-status-marker { border-color: var(--primary); background: #fff; }
.is-active .request-status-marker::after {
  content: '';
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: request-status-pulse 1.1s ease-in-out infinite;
}
.just-completed .request-status-marker { animation: request-status-complete .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes request-status-pulse {
  0%, 100% { transform: scale(.72); opacity: .55; box-shadow: 0 0 0 0 rgba(15, 145, 5, .24); }
  50% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 7px rgba(15, 145, 5, 0); }
}
@keyframes request-status-complete {
  0% { transform: scale(.82); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.request-status-timeline strong { display: block; color: var(--foreground); font-size: 16px; font-weight: 500; line-height: 1.35; }
.request-status-timeline .is-active strong { font-weight: 600; }
.request-status-timeline small { display: block; margin-block-start: 4px; color: #777d76; font-size: 13px; line-height: 1.4; }
.request-status-badge {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 6px;
  min-block-size: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf8eb;
  color: #147c07;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.request-status-badge > span:last-child { display: inline-flex; align-items: center; gap: 4px; block-size: 18px; line-height: 18px; }
.request-sending-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
.request-sending-heading strong { flex: 0 0 auto; }
.request-sending-heading .request-status-badge { align-self: center; }
.request-sending-copy > small { margin-block-start: 4px; }
.request-status-timeline li.is-complete .request-send-icon svg,
.request-status-timeline li.is-complete .request-send-lines { animation: none; }
.request-waiting-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.request-waiting-heading strong { flex: 0 0 auto; }
.request-waiting-heading .request-status-badge { align-self: center; }
.request-waiting-copy > small { margin-block-start: 4px; }
.request-send-icon { display: grid; place-items: center; inline-size: 18px; block-size: 18px; overflow: visible; }
.request-send-icon svg {
  inline-size: 18px;
  block-size: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: request-mail-flight 1.45s ease-in-out infinite;
}
.request-send-lines { stroke-dasharray: 5 3; animation: request-mail-lines 1.45s linear infinite; }
@keyframes request-mail-flight {
  0%, 100% { transform: translateX(0); }
  46% { transform: translateX(2px); }
}
@keyframes request-mail-lines {
  from { stroke-dashoffset: 0; opacity: .35; }
  48% { opacity: 1; }
  to { stroke-dashoffset: -8; opacity: .35; }
}
.request-published-privacy { margin: 0; }
.request-step3-actions { display: grid; gap: 11px; }
.request-step3-actions .request-publish { text-decoration: none; }
.request-market-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
}
@media (hover: hover) {
  .request-control-trigger:hover { background: #fbfefb; }
  .request-purpose-options span:hover { border-color: #9ca59b; }
  .request-publish:hover { background: #0b7000; }
  .request-market-link:hover { color: #095c00; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 500px) {
  .request-status-timeline li { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .request-status-badge { min-block-size: 26px; padding: 0 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .request-send-icon svg,
  .request-send-lines,
  .is-active .request-status-marker::after,
  .just-completed .request-status-marker,
  .credit-card-own.is-entering { animation: none; }
}
@media (max-width: 359px) {
  .request-purpose-options { grid-template-columns: 1fr; }
  .request-privacy { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; }
  .request-privacy-icon { inline-size: 48px; block-size: 48px; }
}

/* Product presentation before registration. */
.presentation-page { overflow-x: hidden; background: #fff; }
.presentation-shell { inline-size: min(100%, 1200px); margin-inline: auto; padding-inline: var(--page-gutter); }

.presentation-hero { position: relative; overflow: hidden; padding-block: clamp(46px, 7vw, 82px) clamp(54px, 7vw, 82px); background: radial-gradient(circle at 16% 8%, #eaf9e6 0, #f7fcf5 29%, #fff0 58%), #fff; }
.presentation-hero::after { content: ''; position: absolute; inset: auto -160px -280px auto; inline-size: 560px; aspect-ratio: 1; border-radius: 50%; background: #dff5d9; filter: blur(2px); opacity: .42; pointer-events: none; }
.presentation-hero-grid { position: relative; z-index: 1; display: grid; align-items: center; gap: 42px; }
.presentation-hero-copy { max-inline-size: 660px; }
.presentation-eyebrow { margin: 0 0 14px; color: var(--primary); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .085em; }
.presentation-hero h1 { max-inline-size: 690px; margin: 0; font-size: clamp(40px, 8.5vw, 68px); font-weight: 600; line-height: .99; letter-spacing: -.055em; text-wrap: balance; }
.presentation-lead { max-inline-size: 590px; margin: 25px 0 0; color: #535853; font-size: clamp(18px, 3.8vw, 22px); line-height: 1.5; }
.presentation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-block-start: 46px; }
.presentation-primary { display: inline-flex; align-items: center; justify-content: center; min-block-size: clamp(48px, 9.12vw, 60px); padding: 10px 24px; border-radius: 999px; background: var(--primary); color: #fff; font-size: clamp(18px, 3.35vw, 22px); font-weight: 600; line-height: 1.4; }
.presentation-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; color: #252825; font-size: 17px; font-weight: 500; }
.presentation-secondary img { inline-size: 19px; block-size: 19px; transition: transform 150ms ease; }
.presentation-product { position: relative; min-block-size: 480px; max-inline-size: 560px; margin-inline: auto; }
.presentation-product-glow { position: absolute; inset: 8% 4% 8%; border-radius: 50%; background: radial-gradient(circle, #bdebb5 0, #e9f8e5 54%, #fff0 72%); filter: blur(16px); }
.presentation-request-preview { position: relative; z-index: 2; inline-size: min(100%, 490px); margin-inline: auto; padding: clamp(20px, 4vw, 29px); border: 1px solid #d9e2d7; border-radius: 27px; background: #ffffffed; box-shadow: 0 28px 90px #173d1424; backdrop-filter: blur(9px); }
.presentation-request-preview header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.presentation-request-preview header span:first-child { color: #6c726c; font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.presentation-request-preview h2 { margin: 5px 0 0; font-size: clamp(24px, 5vw, 31px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.presentation-live { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: #e7f7e4; color: #147c07 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.presentation-live i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px #108a001c; }
.presentation-request-preview dl { margin: 23px 0 0; }
.presentation-request-preview dl > div { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-block-size: 61px; border-block-end: 1px solid #e8ebe7; }
.presentation-preview-icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: #ebf8e9; }
.presentation-preview-icon img { inline-size: 21px; block-size: 21px; }
.presentation-request-preview dt { color: #6c726c; font-size: 14px; }
.presentation-request-preview dd { margin: 0; font-size: 18px; font-weight: 500; }
.presentation-distribution { margin-block-start: 22px; }
.presentation-distribution > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.presentation-distribution > div strong { font-weight: 500; }
.presentation-distribution > div span { color: var(--primary); font-weight: 600; }
.presentation-distribution-track { display: block; block-size: 7px; margin-block-start: 10px; overflow: hidden; border-radius: 999px; background: #e4e8e3; }
.presentation-distribution-track i { display: block; inline-size: 72%; block-size: 100%; border-radius: inherit; background: var(--primary); }
.presentation-offer-preview { position: absolute; z-index: 3; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; inline-size: min(82%, 330px); padding: 13px 15px; border: 1px solid #dce3da; border-radius: 17px; background: #fff; box-shadow: 0 16px 45px #173d1426; }
.presentation-offer-one { inset: auto 0 44px auto; }
.presentation-offer-two { inset: auto auto -28px 0; }
.presentation-offer-logo { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: #eaf7e7; color: var(--primary); font-weight: 700; }
.presentation-offer-preview div { display: grid; min-inline-size: 0; }
.presentation-offer-preview small { color: #747a74; font-size: 11px; }
.presentation-offer-preview strong { overflow: hidden; margin-block-start: 3px; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: hover) {
  .presentation-primary:hover { background: #0b7000; }
  .presentation-secondary:hover img { transform: translateX(3px); }
}
@media (min-width: 900px) {
  .presentation-hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr); }
  .presentation-product { inline-size: 100%; }
  .presentation-actions { grid-column: 2; margin-block-start: 18px; }
}
@media (max-width: 639px) {
  .presentation-hero { block-size: 100svh; padding-block: clamp(26px, 4svh, 44px) clamp(18px, 3svh, 28px); }
  .presentation-hero-grid { block-size: 100%; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(14px, 2.2svh, 24px); }
  .presentation-product { --satellite-gap: clamp(10px, 1.8svh, 18px); --satellite-offset: clamp(12px, 4vw, 22px); position: relative; display: grid; align-self: center; align-content: center; justify-items: center; gap: var(--satellite-gap); min-block-size: 0; inline-size: min(100%, 330px); }
  .presentation-request-preview { inline-size: 100%; }
  .presentation-actions { align-self: end; align-items: stretch; margin-block-start: 0; }
  .presentation-primary { inline-size: 100%; }
  .presentation-secondary { inline-size: 100%; }
  .presentation-offer-preview { position: relative; inset: auto; inline-size: min(86%, 284px); }
  .presentation-offer-one { justify-self: end; transform: translateX(var(--satellite-offset)); }
  .presentation-offer-two { justify-self: start; transform: translateX(calc(0px - var(--satellite-offset))); }
}
@media (max-width: 430px) and (max-height: 950px) {
  .presentation-shell { padding-inline: 16px; }
  .presentation-hero { min-block-size: 100svh; padding-block: 26px 24px; }
  .presentation-hero-grid { min-block-size: calc(100svh - 50px); grid-template-rows: auto minmax(370px, 1fr) auto; gap: 22px; }
  .presentation-eyebrow { margin-block-end: 10px; font-size: 12px; }
  .presentation-hero h1 { font-size: 36px; line-height: 1; }
  .presentation-lead { margin-block-start: 18px; font-size: 16px; line-height: 1.45; }
  .presentation-product { --satellite-gap: 14px; --satellite-offset: 16px; min-block-size: 0; inline-size: min(100%, 330px); }
  .presentation-request-preview { padding: 16px; border-radius: 22px; }
  .presentation-request-preview h2 { font-size: 22px; }
  .presentation-request-preview dl { margin-block-start: 14px; }
  .presentation-request-preview dl > div { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; min-block-size: 50px; }
  .presentation-preview-icon { inline-size: 32px; block-size: 32px; }
  .presentation-preview-icon img { inline-size: 19px; block-size: 19px; }
  .presentation-request-preview dt { font-size: 13px; }
  .presentation-request-preview dd { font-size: 17px; }
  .presentation-distribution { margin-block-start: 14px; }
  .presentation-offer-preview { inline-size: min(86%, 284px); padding: 10px 12px; }
  .presentation-actions { align-self: end; margin-block-start: 0; }
  .presentation-primary { min-block-size: 50px; font-size: 18px; }
  .presentation-secondary { min-block-size: 38px; font-size: 16px; }
}
@media (max-width: 390px) and (max-height: 700px) {
  .presentation-hero { min-block-size: 100svh; padding-block: 16px 10px; }
  .presentation-hero-grid { min-block-size: calc(100svh - 26px); grid-template-rows: auto minmax(350px, 1fr) auto; align-content: space-between; gap: 0; }
  .presentation-eyebrow { margin-block-end: 8px; font-size: 11px; }
  .presentation-hero h1 { font-size: 34px; line-height: .98; }
  .presentation-lead { margin-block-start: 12px; font-size: 16px; line-height: 1.35; }
  .presentation-product { --satellite-gap: 9px; --satellite-offset: 12px; min-block-size: 0; inline-size: min(100%, 300px); }
  .presentation-request-preview { inline-size: min(100%, 300px); padding: 12px; border-radius: 20px; }
  .presentation-request-preview header { gap: 10px; }
  .presentation-request-preview header span:first-child { font-size: 9px; }
  .presentation-request-preview h2 { margin-block-start: 3px; font-size: 19px; }
  .presentation-live { gap: 5px; padding: 5px 8px; font-size: 10px !important; }
  .presentation-live i { inline-size: 6px; block-size: 6px; }
  .presentation-request-preview dl { margin-block-start: 10px; }
  .presentation-request-preview dl > div { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; min-block-size: 42px; }
  .presentation-preview-icon { inline-size: 28px; block-size: 28px; }
  .presentation-preview-icon img { inline-size: 17px; block-size: 17px; }
  .presentation-request-preview dt { font-size: 11px; }
  .presentation-request-preview dd { font-size: 14px; }
  .presentation-distribution { margin-block-start: 10px; }
  .presentation-distribution > div { font-size: 11px; }
  .presentation-distribution-track { block-size: 5px; margin-block-start: 6px; }
  .presentation-offer-preview { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; inline-size: min(86%, 258px); padding: 8px 10px; border-radius: 14px; }
  .presentation-offer-logo { inline-size: 32px; block-size: 32px; border-radius: 10px; }
  .presentation-offer-preview small { font-size: 9px; }
  .presentation-offer-preview strong { font-size: 11px; }
  .presentation-offer-preview img { inline-size: 16px; block-size: 16px; }
  .presentation-actions { gap: 6px 12px; margin-block-start: 0; }
  .presentation-primary { min-block-size: 50px; padding-block: 8px; font-size: 18px; }
  .presentation-secondary { min-block-size: 40px; font-size: 16px; }
}