* { box-sizing: border-box; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--black); color: #fff; padding: 12px 20px;
  font-weight: 700; text-decoration: none; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 10px; top: 10px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.oc-mark {
  background: var(--blue); color: #fff; font-family: var(--font-display);
  font-size: 13px; font-weight: 800; padding: 6px 10px; border-radius: var(--radius-sm);
}
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.site-nav a { text-decoration: none; color: var(--muted); transition: color 0.15s ease; }
.site-nav a:hover, .site-nav a.active { color: var(--blue); }
.site-nav .btn-help {
  background: var(--blue); color: #fff; padding: 9px 18px;
  text-decoration: none; font-weight: 700; border-radius: var(--radius-full);
  transition: background 0.15s ease, transform 0.1s ease;
}
.site-nav .btn-help:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* Same pill button when .btn-help is used outside the nav (e.g. the
   "Start Here" card on the homepage) — otherwise it renders as a bare link. */
.hero-card .btn-help {
  display: inline-block; background: var(--blue); color: #fff; padding: 12px 22px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-decoration: none;
  border-radius: var(--radius-full); transition: background 0.15s ease, transform 0.1s ease;
}
.hero-card .btn-help:hover { background: var(--blue-dark); transform: translateY(-1px); }
.hero-card .btn-help:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 48px; }
.hero-eyebrow { color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { font-size: clamp(38px, 5.5vw, 62px); }
.hero h1 .dot { color: var(--brand-orange); }
.hero p.lede { max-width: 580px; font-size: 18px; margin-top: 18px; color: var(--muted); line-height: 1.55; }
.hero p.fine { font-style: normal; color: var(--muted-light); margin-top: 12px; font-size: 14px; }

.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; margin-top: 40px; align-items: stretch; }
.hero-photo {
  background-size: cover; background-position: center; min-height: 340px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border);
}
.hero-card {
  background: var(--black-card); color: #fff; padding: 36px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-card .eyebrow { color: #94A3B8; font-size: 12px; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; }
.hero-card h2 { font-size: 26px; margin-bottom: 12px; color: #fff; }
.hero-card p { color: #CBD5E1; font-size: 15px; margin-bottom: 22px; line-height: 1.6; }
@media (max-width: 840px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Search ---------- */
.search-section {
  background: var(--black); color: #fff; padding: 56px 0;
  border-radius: var(--radius-lg); margin: 20px 0; box-shadow: var(--shadow-lg);
}
.search-section .eyebrow { color: #94A3B8; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 10px; text-transform: uppercase; }
.search-section h2 { font-size: clamp(26px, 3.8vw, 36px); margin-bottom: 28px; color: #fff; }
.search-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.search-field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #94A3B8; margin-bottom: 8px; text-transform: uppercase; }
.search-field select {
  width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.07); color: #fff;
  border: 1px solid var(--border-light); border-radius: var(--radius-md); font-size: 15px; font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.search-field select:focus { outline: none; border-color: var(--blue); background: rgba(255, 255, 255, 0.12); }
.search-field select option { background: var(--black-card); color: #fff; }

.btn-search, .btn-primary {
  background: var(--blue); color: #fff; border: none; padding: 14px 28px;
  font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-search:hover, .btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }

.city-links-label { color: #94A3B8; font-size: 13px; font-weight: 600; margin: 28px 0 8px; }
.city-links { font-size: 13px; line-height: 2; color: #94A3B8; }
.city-links a { color: #E2E8F0; text-decoration: none; border-bottom: 1px solid rgba(226, 232, 240, 0.3); transition: color 0.15s ease; }
.city-links a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 768px) { .search-form { grid-template-columns: 1fr; } }

/* ---------- Results ---------- */
.results-section { padding: 40px 0 20px; }
.results-count { color: var(--muted); font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.result-card {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 14px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--surface);
  box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.result-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #CBD5E1;
}
.result-main { flex: 1; min-width: 260px; }
.result-city { font-size: 11px; letter-spacing: 0.08em; color: var(--blue); font-weight: 800; text-transform: uppercase; margin-bottom: 4px; }
.result-name { font-size: 19px; font-weight: 700; margin-bottom: 6px; color: var(--text-main); }
.result-meta { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.result-amount { font-size: 17px; font-weight: 800; color: #047857; }
.result-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; justify-content: center; }
.result-link {
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--blue);
  background: var(--blue-light); padding: 8px 16px; border-radius: var(--radius-full);
  transition: background 0.15s ease;
}
.result-link:hover { background: #DBEAFE; }

.status-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; font-weight: 700; border-radius: var(--radius-full); }
.status-active { background: #ECFDF5; color: #065F46; }
.status-waitlist { background: #FFFBEB; color: #92400E; }
.status-referral { background: #EFF6FF; color: #1E40AF; }
.no-results { padding: 40px 0; text-align: center; color: var(--muted); }

/* ---------- Three Kinds of Help ---------- */
.help-section { padding: 64px 0; }
.help-section .eyebrow { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.help-section h2 { font-size: clamp(26px, 3.8vw, 36px); margin-bottom: 32px; }
.help-row {
  display: grid; grid-template-columns: 80px 240px 1fr; gap: 24px; padding: 28px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 12px; box-shadow: var(--shadow-sm); align-items: center;
}
.help-num { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--blue); }
.help-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.25; }
.help-desc { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 768px) { .help-row { grid-template-columns: 1fr; gap: 10px; padding: 20px; } }

/* ---------- Contact CTA ---------- */
.contact-section {
  background: var(--black); color: #fff; padding: 64px 0;
  border-radius: var(--radius-lg); margin: 40px 0; box-shadow: var(--shadow-lg);
}
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.contact-section .eyebrow { color: #94A3B8; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.contact-section h2 { font-size: clamp(26px, 3.8vw, 36px); margin-bottom: 16px; color: #fff; }
.contact-section p.lede { font-size: 16px; max-width: 480px; color: #CBD5E1; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form input, .contact-form textarea {
  padding: 14px 16px; border: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.06);
  color: #fff; font-family: inherit; font-size: 15px; border-radius: var(--radius-md);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--blue); background: rgba(255, 255, 255, 0.1); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #94A3B8; }
.contact-form button {
  background: var(--blue); color: #fff; border: none; padding: 15px 24px;
  font-weight: 700; cursor: pointer; font-size: 15px; border-radius: var(--radius-md);
  transition: background 0.15s ease;
}
.contact-form button:hover { background: var(--blue-dark); }
.form-msg { font-size: 14px; margin-top: 4px; color: #fff; }
.form-msg.is-error { color: #FCA5A5; }
.contact-form .field-error { color: #FCA5A5; font-size: 13px; margin: -8px 0 0; display: none; }
.contact-form input.invalid, .contact-form textarea.invalid { border-color: #EF4444; }
.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 840px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #fff; padding: 48px 0 28px; font-size: 14px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: #94A3B8; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
.footer-grid a { display: block; color: #CBD5E1; text-decoration: none; margin-bottom: 10px; font-size: 14px; transition: color 0.15s ease; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border-light); color: #64748B; font-size: 13px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }

/* =====================================================
   FAQ ACCORDION
   ===================================================== */
.faq-item {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex-shrink: 0; font-family: var(--font-display); font-size: 18px;
  color: var(--blue); width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius-full); background: var(--blue-light); line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-answer { padding: 0 20px 20px; font-size: 15px; color: var(--muted); max-width: 75ch; line-height: 1.6; }
.faq-divider { margin: 48px 0 24px; }
.faq-divider h2 { font-size: clamp(24px, 3.5vw, 30px); }
.faq-divider p { color: var(--muted); margin-top: 8px; }

/* =====================================================
   LEGAL / TERMS PAGE
   ===================================================== */
.legal-toc {
  background: var(--surface); color: var(--text-main); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.legal-toc p.eyebrow { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 8px; font-size: 14px; }
.legal-toc a { color: var(--blue); text-decoration: none; font-weight: 600; }
.legal-section {
  display: grid; grid-template-columns: 60px 1fr; gap: 20px;
  padding: 24px 0; border-top: 1px solid var(--border); scroll-margin-top: 20px;
}
.legal-num { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--blue); }
.legal-section h2 { font-size: 18px; margin-bottom: 8px; }
.legal-section p { font-size: 15px; color: var(--muted); }
@media (max-width: 700px) { .legal-section { grid-template-columns: 1fr; gap: 4px; } }

/* =====================================================
   SIMPLE CONTENT PAGE TEMPLATE
   ===================================================== */
/* Content pages (About, FAQ, Terms, Submit, Thank-you, page-template).
   Header and body share ONE centered reading column so they line up;
   previously .page-body capped its width without centering, which
   pushed body text to the far left on wide screens. */
.page-hero {
  padding: 60px 0 44px;
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero .container, .page-body .container { max-width: 860px; }
.page-hero .eyebrow { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.page-hero h1 { font-size: clamp(30px, 4.5vw, 46px); max-width: 20ch; }
.page-hero .page-lede { font-size: 18px; color: var(--muted); margin-top: 14px; max-width: 60ch; line-height: 1.6; }
.page-body { padding: 44px 0 72px; }
.page-body p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.page-body p + p { margin-top: 18px; }

.content-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 36px 40px;
}
.content-card h2 { font-size: 22px; margin: 0 0 12px; color: var(--text-main); }
.content-card h2:not(:first-child) { margin-top: 32px; }
@media (max-width: 600px) { .content-card { padding: 24px 20px; } }

/* Three short "why trust this" points (About page) */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.value-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.value-item .value-icon {
  width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 12px;
}
.value-item h3 { font-size: 16px; margin: 0 0 6px; color: var(--text-main); }
.value-item p { font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 720px) { .value-grid { grid-template-columns: 1fr; } }

/* "Brought to you by" agent card (includes/agent-card.php) */
.agent-card {
  background: var(--black-card); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 32px 36px; margin: 32px 0;
}
.agent-card .eyebrow { color: #94A3B8; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; }
.agent-people { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 18px; }
.agent-person { display: flex; align-items: center; gap: 14px; min-width: 240px; }
.agent-photo {
  width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; border: 2px solid rgba(255,255,255,0.15);
}
.agent-name { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.agent-license { color: #CBD5E1; font-size: 13px; margin-top: 2px; }
.agent-card .agent-blurb { color: #CBD5E1; font-size: 15px; line-height: 1.6; max-width: 62ch; margin: 0 0 20px; }
.agent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.agent-actions a {
  display: inline-block; padding: 11px 18px; border-radius: var(--radius-full); font-weight: 700; font-size: 14px;
  text-decoration: none; transition: background 0.15s ease;
}
.agent-actions .agent-primary { background: var(--blue); color: #fff; }
.agent-actions .agent-primary:hover { background: var(--blue-dark); }
.agent-actions .agent-secondary { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.agent-actions .agent-secondary:hover { background: rgba(255,255,255,0.16); }
.agent-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.agent-card .agent-fine { color: #94A3B8; font-size: 12px; margin-top: 18px; line-height: 1.5; }

/* =====================================================
   ADMIN PANEL
   ===================================================== */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--cream); }
.login-card {
  background: var(--surface); padding: 40px; width: 380px; max-width: 90vw;
  text-align: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.login-mark {
  background: var(--blue); color: #fff; font-family: var(--font-display);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 15px; font-weight: 800; border-radius: var(--radius-sm);
}
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.login-card form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.login-card label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; margin-top: 10px; }
.login-card input { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 15px; }
.login-card input:focus { outline: 2px solid var(--blue); }
.login-card button {
  margin-top: 20px; background: var(--blue); color: #fff; border: none; padding: 13px;
  font-weight: 700; font-size: 15px; cursor: pointer; border-radius: var(--radius-md);
}
.login-card button:hover { background: var(--blue-dark); }
.login-back { display: block; margin-top: 20px; font-size: 13px; color: var(--muted); text-decoration: none; }

.admin-body { background: #F1F5F9; font-family: var(--font-body); margin: 0; }
.admin-header { background: var(--black); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.admin-header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
.admin-logo { font-weight: 700; font-size: 15px; }
.admin-header nav { display: flex; gap: 20px; align-items: center; font-size: 14px; }
.admin-header nav a { color: #CBD5E1; text-decoration: none; }
.admin-header nav a:hover { color: #fff; }

.admin-main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 60px; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.admin-filter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-filter-form input, .admin-filter-form select {
  padding: 9px 12px; border: 1px solid var(--border); font-family: inherit; font-size: 14px;
  background: #fff; border-radius: var(--radius-sm);
}
.admin-filter-form button, .btn-clear, .btn-add {
  padding: 9px 16px; font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; border: none; border-radius: var(--radius-sm);
}
.admin-filter-form button { background: var(--black); color: #fff; }
.btn-clear { background: #E2E8F0; color: var(--text-main); display: inline-flex; align-items: center; }
.btn-add { background: var(--blue); color: #fff; display: inline-flex; align-items: center; }

.admin-count { color: var(--muted); font-size: 13px; margin: 16px 0; }
.admin-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; background: #F8FAFC; padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.admin-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.admin-actions a { color: var(--blue); font-weight: 600; text-decoration: none; font-size: 13px; }
.btn-delete { background: none; border: none; color: #DC2626; font-weight: 600; cursor: pointer; font-size: 13px; padding: 0; font-family: inherit; }

.status-pill { padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; border-radius: var(--radius-full); }
.status-pill.status-active { background: #ECFDF5; color: #065F46; }
.status-pill.status-waitlist { background: #FFFBEB; color: #92400E; }
.status-pill.status-closed { background: #FEF2F2; color: #991B1B; }
.status-pill.status-referral { background: #EFF6FF; color: #1E40AF; }
.status-pill.status-needs_verification { background: #FAF5FF; color: #6B21A8; }

.admin-form-main h1 { font-size: 24px; margin-bottom: 20px; }
.admin-form { max-width: 640px; background: #fff; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.form-row input, .form-row select, .form-row textarea { padding: 10px 12px; border: 1px solid var(--border); font-family: inherit; font-size: 14px; border-radius: var(--radius-sm); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.btn-save { background: var(--blue); color: #fff; border: none; padding: 13px 26px; font-weight: 700; font-size: 15px; cursor: pointer; border-radius: var(--radius-md); }

/* =====================================================
   PROGRAM SUBMISSION FORM (submit-program.php)
   ===================================================== */
.submit-form { margin-top: 28px; }
.submit-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px 6px; margin: 0 0 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.submit-form legend { font-family: var(--font-display); font-size: 15px; padding: 0 8px; }
.submit-form .form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.submit-form label { font-size: 14px; font-weight: 600; }
.submit-form input[type="text"], .submit-form input[type="email"], .submit-form input[type="tel"],
.submit-form input[type="url"], .submit-form select, .submit-form textarea {
  padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; background: var(--surface);
}
.submit-form input:focus, .submit-form select:focus, .submit-form textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.form-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 14px; }
.form-check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.submit-errors { border: 1px solid #B23A2E; border-radius: var(--radius-md); background: #FBEDEB; padding: 14px 18px; margin-top: 20px; font-size: 14px; color: #7A2219; }
.submit-errors ul { margin: 8px 0 0; padding-left: 20px; }

/* =====================================================
   ADMIN — SUBMISSION REVIEW QUEUE
   ===================================================== */
.submission-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; }
.submission-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 15px; }
.submission-detail { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.submission-detail th { text-align: left; width: 150px; padding: 6px 10px 6px 0; color: var(--muted); font-weight: 600; vertical-align: top; }
.submission-detail td { padding: 6px 0; vertical-align: top; }
.submission-actions { border-top: 1px solid #eee; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.submission-actions label { font-size: 13px; font-weight: 600; }
.submission-actions textarea, .submission-actions select { padding: 8px 10px; border: 1px solid #ccc; font-family: inherit; font-size: 14px; }
.submission-buttons { display: flex; gap: 10px; margin-top: 8px; }

/* Links inside running text on content pages: plain underlined links,
   not the pill style .result-link uses on program cards (pills wrap
   awkwardly mid-sentence). */
.page-body p .result-link, .faq-answer .result-link, .legal-section .result-link {
  background: none; padding: 0; border: 0; border-radius: 0; display: inline; font-size: inherit;
  color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.page-body p .result-link:hover, .faq-answer .result-link:hover, .legal-section .result-link:hover {
  background: none; color: var(--blue-dark);
}
.content-card .legal-section:first-child { border-top: 0; padding-top: 0; }
.content-card .legal-section:last-child { border-bottom: 0; padding-bottom: 0; }

/* =====================================================
   PROGRAMS OVERVIEW PAGE (programs.php)
   ===================================================== */
.stats-band { display: flex; flex-wrap: wrap; gap: 14px; }
.stat-tile {
  flex: 1 1 160px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 20px 16px; text-align: center;
}
.stat-num { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--blue); line-height: 1.1; letter-spacing: -0.02em; }
.stat-num-sm { font-size: 28px; }
.stat-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.page-body p.stats-note { font-size: 13px; color: var(--muted-light); margin-top: 12px; line-height: 1.5; }

.kind-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.kind-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-main);
  font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.kind-jump a:hover { border-color: var(--blue); background: var(--blue-light); }
.kind-jump a span { color: var(--blue); font-weight: 800; }
.kind-jump a em { font-style: normal; background: var(--blue-light); color: var(--blue); border-radius: var(--radius-full); padding: 1px 8px; font-size: 12px; font-weight: 700; }

.kind-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 34px; margin-top: 20px; scroll-margin-top: 90px;
}
.kind-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.kind-num {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--blue-light);
  color: var(--blue); font-family: var(--font-display); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.kind-card h2 { font-size: 22px; margin: 2px 0 10px; color: var(--text-main); }
.kind-card h3 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-main); margin: 20px 0 8px; }
.kind-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kind-pill { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-full); background: var(--cream); border: 1px solid var(--border); color: var(--text-main); }
.kind-pill-strong { background: var(--blue); border-color: var(--blue); color: #fff; }
.kind-points { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.kind-points li + li { margin-top: 6px; }
.kind-cta {
  display: inline-block; margin-top: 20px; background: var(--blue); color: #fff; padding: 11px 20px;
  border-radius: var(--radius-full); font-weight: 700; font-size: 14px; text-decoration: none; transition: background 0.15s ease;
}
.kind-cta:hover { background: var(--blue-dark); }
.kind-cta:focus-visible, .kind-jump a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 600px) {
  .kind-card { padding: 22px 20px; }
  .kind-head { gap: 12px; }
  .kind-num { width: 42px; height: 42px; font-size: 16px; }
  .stat-num { font-size: 28px; }
}

/* Header on phones: logo on its own row, links in one swipeable row
   underneath (previously the logo wrapped onto three lines and the links
   were squeezed together). Not sticky on phones, to save screen space. */
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; padding: 12px 16px 0; position: static; }
  .site-header .brand { flex: 1 1 auto; white-space: nowrap; }
  .site-nav {
    order: 3; width: 100%; gap: 0; overflow-x: auto; white-space: nowrap;
    padding: 12px 0; margin-top: 10px; border-top: 1px solid var(--border);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex-shrink: 0; font-size: 13px; margin-right: 20px; }
  .site-nav a:last-child { margin-right: 0; }
  .site-nav .btn-help { padding: 7px 14px; }
}

/* =====================================================
   NEWSLETTER PAGE (newsletter.php)
   ===================================================== */
.newsletter-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.newsletter-signup, .newsletter-what {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 32px;
}
.newsletter-signup { flex: 1 1 380px; }
.newsletter-what { flex: 1 1 300px; }
.newsletter-layout h2 { font-size: 22px; margin: 0 0 8px; color: var(--text-main); }
.page-body p.newsletter-sub { font-size: 15px; margin: 0 0 18px; }
.newsletter-promises { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.newsletter-promises li { position: relative; padding-left: 24px; line-height: 1.55; }
.newsletter-promises li + li { margin-top: 8px; }
.newsletter-promises li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 800; }
.newsletter-promises strong { color: var(--text-main); }
.newsletter-item { display: flex; gap: 14px; align-items: flex-start; }
.newsletter-item + .newsletter-item { margin-top: 18px; }
.newsletter-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--blue-light);
  color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800;
}
.newsletter-item h3 { font-size: 15px; margin: 2px 0 3px; color: var(--text-main); }
.page-body .newsletter-item p { font-size: 14px; line-height: 1.55; margin: 0; }

/* Native newsletter form (no third-party script) */
.newsletter-form .nl-row { display: flex; flex-wrap: wrap; gap: 12px; }
.newsletter-form .nl-field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.newsletter-form .nl-field-email { flex: 2 1 240px; }
.newsletter-form label { font-size: 14px; font-weight: 600; color: var(--text-main); }
.newsletter-form .nl-optional { font-weight: 400; color: var(--muted); }
.newsletter-form input[type="text"], .newsletter-form input[type="email"] {
  height: 50px; border: 1px solid #CBD5E1; border-radius: var(--radius-md); padding: 0 14px;
  font-family: inherit; font-size: 16px; color: var(--text-main); background: #fff;
}
.newsletter-form input:focus { outline: 2px solid var(--blue-light); border-color: var(--blue); }
.nl-submit {
  margin-top: 14px; height: 50px; padding: 0 28px; border: 0; border-radius: var(--radius-full);
  background: var(--blue); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.nl-submit:hover { background: var(--blue-dark); transform: translateY(-1px); }
.nl-submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 520px) {
  .newsletter-signup, .newsletter-what { padding: 22px 20px; }
  .nl-submit { width: 100%; }
}

/* =====================================================
   SUBMITTER SELF-SERVICE (manage.php) + admin comparison
   ===================================================== */
.page-lede .result-link {
  background: none; padding: 0; border: 0; border-radius: 0; display: inline; font-size: inherit;
  color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.manage-notice { background: #ECFDF3; border: 1px solid #A6E3BF; color: #14532D; border-radius: var(--radius-md); padding: 12px 16px; font-size: 15px; margin: 0 0 18px; }
.manage-warning { background: #FFF7E6; border: 1px solid #F5D08A; color: #7A4B00; border-radius: var(--radius-md); padding: 12px 16px; font-size: 15px; margin: 0 0 18px; }
.manage-signin { max-width: 560px; }
.manage-signin .nl-field { display: flex; flex-direction: column; gap: 6px; }
.page-body p.manage-small, .manage-small { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.manage-h2 { font-size: 20px; margin: 34px 0 12px; color: var(--text-main); }
.manage-h2:first-child { margin-top: 0; }
.page-body p.manage-empty { font-size: 15px; }
.manage-program { margin-bottom: 14px; padding: 24px 28px; }
.manage-program-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.manage-program h3 { font-size: 18px; margin: 2px 0 0; color: var(--text-main); }
.page-body p.manage-pending { background: var(--blue-light); border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px; color: var(--text-main); margin-top: 14px; }
.manage-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.manage-details summary { cursor: pointer; font-weight: 700; color: var(--blue); font-size: 15px; list-style-position: inside; }
.manage-details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.manage-form { margin-top: 14px; }
.nl-submit.manage-danger { background: #B42318; }
.nl-submit.manage-danger:hover { background: #912018; }
.manage-table-card { padding: 8px 12px; overflow-x: auto; }
.manage-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manage-table th { text-align: left; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; }
.manage-table td { padding: 12px 8px; border-top: 1px solid var(--border); vertical-align: top; color: var(--text-main); }
.manage-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.manage-status-pending { background: #FFF7E6; color: #7A4B00; }
.manage-status-approved { background: #ECFDF3; color: #14532D; }
.manage-status-rejected { background: #FEF3F2; color: #912018; }
.manage-status-withdrawn { background: #F2F4F7; color: #475467; }
.manage-link-btn { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.manage-inline p { margin: 0 0 8px; }
.manage-delete summary { color: #B42318; }
.manage-signout { margin-top: 24px; text-align: right; }

/* Admin: live vs. proposed comparison */
.submission-diff { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 14px; }
.submission-diff th, .submission-diff td { text-align: left; padding: 7px 10px; border: 1px solid #E5E7EB; vertical-align: top; }
.submission-diff thead th { background: #F9FAFB; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.submission-diff tbody th { width: 120px; color: var(--muted); font-weight: 600; }
.submission-diff tr.diff-changed td:last-child { background: #FFFBEB; }
.diff-flag { color: #B45309; font-size: 11px; text-transform: uppercase; margin-left: 6px; }
.submission-target { font-size: 14px; margin: 4px 0 12px; }
@media (max-width: 600px) { .manage-program { padding: 20px; } .manage-program-head { flex-direction: column; } }

/* Privacy policy: subheadings and lists inside numbered sections */
.privacy-section h3 { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-main); margin: 18px 0 8px; }
.privacy-section h3:first-child { margin-top: 4px; }
.privacy-section ul { margin: 8px 0 12px; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.privacy-section li + li { margin-top: 6px; }
.privacy-section strong { color: var(--text-main); }
.page-body p.form-privacy-note { font-size: 13px; color: var(--muted-light); margin-top: 12px; }

/* =====================================================
   LANGUAGES (Spanish / Simplified Chinese)
   ===================================================== */
.lang-switch { display: flex; align-items: center; gap: 4px; margin-left: 18px; font-size: 13px; font-weight: 600; }
.lang-switch a, .lang-switch .lang-current {
  padding: 5px 9px; border-radius: var(--radius-full); text-decoration: none; color: var(--muted); white-space: nowrap;
}
.lang-switch a:hover { background: var(--blue-light); color: var(--blue); }
.lang-switch .lang-current { background: var(--blue-light); color: var(--blue); }
.lang-switch a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.i18n-banner {
  margin: 0; padding: 10px 24px; text-align: center; font-size: 14px;
  background: #FFF7E6; color: #7A4B00; border-bottom: 1px solid #F5D08A;
}
.i18n-office-note { font-size: 14px; color: var(--muted); background: var(--blue-light); border-radius: var(--radius-md); padding: 10px 14px; margin: 0 0 16px; }
.i18n-note { font-size: 13px; color: #7A4B00; margin: 6px 0 0; }
.i18n-type { font-size: 12px; color: var(--muted); text-align: right; }
.program-fields { margin: 8px 0 4px; font-size: 14.5px; }
.program-fields > div { display: flex; gap: 10px; padding: 3px 0; }
.program-fields dt { flex: 0 0 118px; font-weight: 700; color: var(--text-main); }
@media (max-width: 520px) { .program-fields > div { flex-direction: column; gap: 0; padding: 5px 0; } .program-fields dt { flex: none; } }
.program-fields dd { margin: 0; color: #334155; }
.i18n-english { margin-top: 8px; font-size: 13px; color: var(--muted); }
.i18n-english summary { cursor: pointer; }
.i18n-english summary span { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.i18n-english p { margin: 8px 0 0; font-size: 14px; color: #334155; }
.admin-i18n-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #FFF7E6; border: 1px solid #F5D08A; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* Chinese: the site fonts have no Chinese characters, so name good
   system fonts explicitly, and drop letter-spacing/uppercase styling
   that only suits Latin text. */
:lang(zh-Hans) body, body:lang(zh-Hans) {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", var(--font-body);
}
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3, :lang(zh-Hans) .eyebrow, :lang(zh-Hans) .site-nav a {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", var(--font-display);
  letter-spacing: 0;
}
@media (max-width: 860px) {
  .lang-switch { order: 2; margin-left: auto; }
}
/* The decorative blue period after headlines reads as a typo after Chinese text. */
:lang(zh-Hans) h1 .dot { display: none; }

/* "Thinking about buying with assistance?" call to action */
.buy-cta-section { padding: 8px 0 48px; }
.buy-cta {
  background: var(--black-card); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 36px 40px;
}
.buy-cta h2 { font-size: clamp(24px, 3.4vw, 34px); color: #fff; margin: 0 0 12px; letter-spacing: -0.01em; }
.buy-cta p { color: #CBD5E1; font-size: 16px; line-height: 1.6; max-width: 62ch; margin: 0; }
.buy-cta p strong { color: #fff; }
.buy-cta-btn {
  display: inline-block; margin-top: 20px; background: var(--blue); color: #fff; padding: 12px 22px;
  border-radius: var(--radius-full); font-weight: 700; font-size: 15px; text-decoration: none; transition: background 0.15s ease;
}
.buy-cta-btn:hover { background: var(--blue-dark); }
.buy-cta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.buy-cta p.buy-cta-license { font-size: 12px; color: #94A3B8; margin-top: 18px; max-width: none; }
@media (max-width: 600px) { .buy-cta { padding: 26px 22px; } }
.agent-card .agent-blurb strong { color: #fff; }
.i18n-note-muted { color: var(--muted); }
.result-official-name { font-size: 13px; color: var(--muted); margin-top: 2px; }
.result-official-name span { color: var(--text-main); font-weight: 600; }
.legal-governs { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 6px; max-width: 70ch; }
.legal-governs .result-link { background: none; padding: 0; border: 0; border-radius: 0; display: inline; font-size: inherit; color: var(--blue); font-weight: 600; font-style: normal; text-decoration: underline; text-underline-offset: 3px; }

/* Legal pages (Privacy, Terms): less space between the header band and the table of contents */
.page-hero.page-hero--tight { padding-bottom: 22px; }
.page-hero.page-hero--tight + .page-body { padding-top: 24px; }
.page-hero--tight .legal-effective { color: var(--muted); font-size: 14px; font-style: italic; margin: 8px 0 0; }
:lang(zh-Hans) .page-hero h1 { max-width: 36ch; }

/* Contact form privacy note: quiet fine print on the dark section, with a
   plain underlined link (not the pill style used on program cards). */
.contact-section .form-privacy-note { font-size: 13px; line-height: 1.5; color: #94A3B8; margin: 2px 0 0; }
.contact-section .form-privacy-note .result-link {
  background: none; padding: 0; border: 0; border-radius: 0; display: inline; font-size: inherit;
  color: #CBD5E1; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.contact-section .form-privacy-note .result-link:hover { color: #fff; }
.contact-section .form-privacy-note .result-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =====================================================
   BRAND: logo mark + "OCHomeAssist" wordmark
   ===================================================== */
.site-header .brand { text-decoration: none; }
.brand-mark { width: 44px; height: 44px; flex-shrink: 0; display: block; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wm-oc, .wm-assist { color: var(--brand-navy); }
.wm-home { color: var(--brand-orange); }
.brand-footer { margin-bottom: 8px; }
.site-footer .wm-oc, .site-footer .wm-assist { color: #fff; }
.site-footer .wm-home { color: #FF7A2E; }
.brand-tagline { color: #94A3B8; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; }
:lang(zh-Hans) .brand-tagline { letter-spacing: 0.2em; }
.site-header .brand:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
/* The decorative period after headlines now uses the brand orange. */
h1 .dot { color: var(--brand-orange); }
@media (max-width: 760px) {
  .brand-mark { width: 36px; height: 36px; }
  .wordmark { font-size: 20px; }
}
/* Language switcher: full names on wide screens, EN / ES / 中文 on phones
   (the full name stays available to screen readers). */
.lang-switch .lang-short { display: none; }
@media (max-width: 760px) {
  .lang-switch { gap: 2px; margin-left: 8px; }
  .lang-switch a, .lang-switch .lang-current { padding: 5px 8px; }
  .lang-switch .lang-short { display: inline; }
  .lang-switch .lang-full { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}