:root {
 --bg: #f7f7f4;
 --card: #ffffff;
 --text: #161616;
 --muted: #5f6368;
 --border: #deded8;
 --accent: #1f4f3a;
 --accent-soft: #e3efe8;
 --dark: #101815;
 --warning: #f4b942;
}

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 background: var(--bg);
 color: var(--text);
 line-height: 1.5;
}

a {
 color: inherit;
}

.site-header {
 background: var(--card);
 border-bottom: 1px solid var(--border);
 position: sticky;
 top: 0;
 z-index: 10;
}

.nav {
 max-width: 1120px;
 margin: 0 auto;
 padding: 18px 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}

.logo {
 font-size: 22px;
 font-weight: 800;
 text-decoration: none;
 letter-spacing: -0.03em;
}

.nav-links {
 display: flex;
 align-items: center;
 gap: 18px;
 flex-wrap: wrap;
}

.nav-links a {
 text-decoration: none;
 color: var(--muted);
 font-size: 14px;
}

.nav-links a:hover {
 color: var(--text);
}

.page {
 max-width: 1120px;
 margin: 0 auto;
 padding: 56px 24px;
}

.hero {
 padding: 72px 0 48px;
}

.eyebrow {
 display: inline-block;
 background: var(--accent-soft);
 color: var(--accent);
 padding: 8px 12px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 700;
 margin-bottom: 18px;
}

h1 {
 font-size: clamp(42px, 7vw, 76px);
 line-height: 0.95;
 letter-spacing: -0.07em;
 margin: 0 0 24px;
 max-width: 900px;
}

h2 {
 font-size: 32px;
 line-height: 1.1;
 letter-spacing: -0.04em;
 margin: 0 0 16px;
}

h3 {
 font-size: 20px;
 margin: 0 0 8px;
}

.lead {
 font-size: 21px;
 color: var(--muted);
 max-width: 760px;
 margin: 0 0 32px;
}

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

.button {
 display: inline-block;
 padding: 13px 18px;
 border-radius: 12px;
 text-decoration: none;
 font-weight: 700;
 border: 1px solid var(--border);
 background: var(--card);
}

.button.primary {
 background: var(--dark);
 color: #ffffff;
 border-color: var(--dark);
}

.button:hover {
 transform: translateY(-1px);
}

.section {
 padding: 44px 0;
 border-top: 1px solid var(--border);
}

.grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
}

.grid.two {
 grid-template-columns: repeat(2, 1fr);
}

.card {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 22px;
}

.card p {
 color: var(--muted);
 margin-bottom: 0;
}

.badge {
 display: inline-block;
 font-size: 12px;
 font-weight: 700;
 color: var(--accent);
 background: var(--accent-soft);
 padding: 6px 10px;
 border-radius: 999px;
 margin-bottom: 12px;
}

.notice {
 background: #fff8df;
 border: 1px solid #ecd58b;
 border-radius: 18px;
 padding: 20px;
 color: #4a3a08;
}

.site-footer {
 border-top: 1px solid var(--border);
 padding: 36px 24px;
 color: var(--muted);
 background: var(--card);
}

.footer-inner {
 max-width: 1120px;
 margin: 0 auto;
}

.list {
 margin: 0;
 padding-left: 20px;
 color: var(--muted);
}

.list li {
 margin: 8px 0;
}

@media (max-width: 850px) {
 .nav {
  align-items: flex-start;
  flex-direction: column;
 }

 .grid,
 .grid.two {
  grid-template-columns: 1fr;
 }

 .hero {
  padding-top: 44px;
 }
}

.board-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 24px;
 margin-bottom: 28px;
}

.board-header p {
 margin: 0;
 color: var(--muted);
 max-width: 720px;
}

.filter-row {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin: 24px 0 32px;
}

.filter-chip {
 display: inline-block;
 padding: 8px 11px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--card);
 color: var(--muted);
 font-size: 13px;
 text-decoration: none;
}

.card-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 18px;
}

.problem-card {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.problem-meta {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

.meta-pill {
 display: inline-block;
 padding: 6px 9px;
 border-radius: 999px;
 background: #f1f1ed;
 color: var(--muted);
 font-size: 12px;
 font-weight: 700;
}

.problem-card h3 {
 font-size: 22px;
 line-height: 1.15;
 letter-spacing: -0.03em;
}

.problem-card p {
 margin: 0;
}

.problem-label {
 font-size: 12px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--muted);
}

.validation-row {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
 margin-top: auto;
 padding-top: 10px;
}

.validation-button {
 border: 1px solid var(--border);
 background: #ffffff;
 border-radius: 10px;
 padding: 9px;
 font-size: 12px;
 font-weight: 700;
 text-decoration: none;
 color: var(--text);
 text-align: center;
}

.validation-button:hover {
 background: var(--accent-soft);
 color: var(--accent);
}

@media (max-width: 850px) {
 .board-header {
  flex-direction: column;
  align-items: flex-start;
 }

 .card-grid {
  grid-template-columns: 1fr;
 }

 .validation-row {
  grid-template-columns: 1fr;
 }
}

.opportunity-card {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.opportunity-card h3 {
 font-size: 22px;
 line-height: 1.15;
 letter-spacing: -0.03em;
}

.opportunity-card p {
 margin: 0;
}

.role-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.role-pill {
 display: inline-block;
 padding: 7px 9px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 700;
}

.apply-row {
 margin-top: auto;
 padding-top: 12px;
}

.team-card {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.team-card h3 {
 font-size: 22px;
 line-height: 1.15;
 letter-spacing: -0.03em;
}

.team-card p {
 margin: 0;
}

.stage-pill {
 display: inline-block;
 padding: 6px 9px;
 border-radius: 999px;
 background: #f1f1ed;
 color: var(--muted);
 font-size: 12px;
 font-weight: 700;
}

.form-shell {
 max-width: 820px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 22px;
 padding: 28px;
}

.form-group {
 margin-bottom: 20px;
}

.form-group label {
 display: block;
 font-weight: 800;
 margin-bottom: 8px;
}

.form-group .help-text {
 color: var(--muted);
 font-size: 14px;
 margin: 6px 0 0;
}

input,
select,
textarea {
 width: 100%;
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 12px 13px;
 font-size: 15px;
 font-family: Arial, Helvetica, sans-serif;
 background: #ffffff;
 color: var(--text);
}

textarea {
 min-height: 120px;
 resize: vertical;
}

.form-note {
 color: var(--muted);
 font-size: 14px;
 margin-top: 16px;
}

.checkbox-list {
 display: grid;
 gap: 10px;
}

.checkbox-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 color: var(--muted);
}

.checkbox-item input {
 width: auto;
 margin-top: 3px;
}

.hidden {
 display: none;
}

.success-panel {
 max-width: 760px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 24px;
 padding: 32px;
}

.inline-validation-form {
 margin: 0;
}

.inline-validation-form .validation-button,
button.validation-button {
 width: 100%;
 cursor: pointer;
 font-family: Arial, Helvetica, sans-serif;
}

.multi-select {
 border: 1px solid var(--border);
 border-radius: 12px;
 background: #ffffff;
 overflow: hidden;
}

.multi-select summary {
 cursor: pointer;
 padding: 12px 13px;
 font-weight: 700;
 color: var(--text);
}

.multi-select[open] summary {
 border-bottom: 1px solid var(--border);
}

.multi-select-options {
 display: grid;
 gap: 10px;
 padding: 12px 13px;
 max-height: 260px;
 overflow-y: auto;
}

.multi-select-options label {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 color: var(--muted);
 font-weight: 400;
 margin: 0;
}

.multi-select-options input {
 width: auto;
 margin-top: 3px;
}

.autocomplete-note {
 font-size: 13px;
 color: var(--muted);
 margin-top: 7px;
}

.autocomplete-wrapper {
 position: relative;
}

.autocomplete-results {
 display: none;
 position: absolute;
 z-index: 50;
 left: 0;
 right: 0;
 top: calc(100% + 6px);
 background: #ffffff;
 border: 1px solid var(--border);
 border-radius: 14px;
 box-shadow: 0 12px 30px rgba(0,0,0,0.08);
 overflow: hidden;
 max-height: 260px;
 overflow-y: auto;
}

.autocomplete-results.show {
 display: block;
}

.autocomplete-option {
 padding: 11px 13px;
 cursor: pointer;
 border-bottom: 1px solid #f0f0ec;
 font-size: 14px;
}

.autocomplete-option:last-child {
 border-bottom: 0;
}

.autocomplete-option:hover {
 background: var(--accent-soft);
 color: var(--accent);
}

.location-status {
 font-size: 13px;
 color: var(--muted);
 margin-top: 7px;
}

.autocomplete-wrapper {
 position: relative;
}

.autocomplete-results {
 display: none;
 position: absolute;
 z-index: 50;
 left: 0;
 right: 0;
 top: calc(100% + 6px);
 background: #ffffff;
 border: 1px solid var(--border);
 border-radius: 14px;
 box-shadow: 0 12px 30px rgba(0,0,0,0.08);
 overflow: hidden;
 max-height: 280px;
 overflow-y: auto;
}

.autocomplete-results.show {
 display: block;
}

.autocomplete-option {
 padding: 11px 13px;
 cursor: pointer;
 border-bottom: 1px solid #f0f0ec;
 font-size: 14px;
}

.autocomplete-option:last-child {
 border-bottom: 0;
}

.autocomplete-option:hover {
 background: var(--accent-soft);
 color: var(--accent);
}

.multi-select {
 border: 1px solid var(--border);
 border-radius: 12px;
 background: #ffffff;
 overflow: hidden;
}

.multi-select summary {
 cursor: pointer;
 padding: 12px 13px;
 font-weight: 700;
 color: var(--text);
}

.multi-select[open] summary {
 border-bottom: 1px solid var(--border);
}

.timezone-search {
 padding: 12px 13px;
 border-bottom: 1px solid var(--border);
}

.timezone-search input {
 margin: 0;
}

.multi-select-options {
 display: grid;
 gap: 10px;
 padding: 12px 13px;
 max-height: 320px;
 overflow-y: auto;
}

.multi-select-options label {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 color: var(--muted);
 font-weight: 400;
 margin: 0;
}

.multi-select-options input {
 width: auto;
 margin-top: 3px;
}

.timezone-empty {
 display: none;
 color: var(--muted);
 font-size: 14px;
 padding: 12px 13px;
}

.timezone-empty.show {
 display: block;
}

.clean-checkbox-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
}

.clean-checkbox-card {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 padding: 12px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: #ffffff;
 color: var(--muted);
 font-weight: 400;
}

.clean-checkbox-card input {
 width: auto;
 margin-top: 3px;
}

.clean-checkbox-card strong {
 display: block;
 color: var(--text);
 margin-bottom: 2px;
}

.clean-checkbox-card span {
 display: block;
 font-size: 13px;
 line-height: 1.35;
}

@media (max-width: 850px) {
 .clean-checkbox-grid {
  grid-template-columns: 1fr;
 }
}

.auth-panel {
 max-width: 720px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 24px;
 padding: 28px;
}

.status-message {
 margin-top: 16px;
 color: var(--muted);
 font-size: 14px;
}

.status-message.success {
 color: var(--accent);
 font-weight: 700;
}

.status-message.error {
 color: #9d1c1c;
 font-weight: 700;
}

.profile-toolbar {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 24px;
}

.readonly-input {
 background: #f1f1ed;
 color: var(--muted);
}

.profile-prefill-notice {
 max-width: 820px;
 background: var(--accent-soft);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 18px;
 margin-bottom: 24px;
 color: var(--accent);
}

.nav-more {
 position: relative;
}

.nav-more summary {
 list-style: none;
 cursor: pointer;
 color: var(--muted);
 font-size: 14px;
}

.nav-more summary::-webkit-details-marker {
 display: none;
}

.nav-more summary:hover {
 color: var(--text);
}

.nav-more-menu {
 position: absolute;
 right: 0;
 top: 28px;
 min-width: 190px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 10px;
 box-shadow: 0 16px 40px rgba(0,0,0,0.10);
 display: grid;
 gap: 4px;
 z-index: 100;
}

.nav-more-menu a {
 display: block;
 padding: 9px 10px;
 border-radius: 10px;
 white-space: nowrap;
}

.nav-more-menu a:hover {
 background: var(--accent-soft);
 color: var(--accent);
}

@media (max-width: 850px) {
 .nav-more-menu {
  position: static;
  box-shadow: none;
  margin-top: 8px;
 }
}

.detail-shell {
 max-width: 900px;
}

.detail-meta {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 18px;
}

.detail-section {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 22px;
 margin-bottom: 16px;
}

.detail-section p {
 color: var(--muted);
 margin-bottom: 0;
}

.application-list {
 display: grid;
 gap: 14px;
}

.application-item {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 20px;
}

.application-item h3 {
 margin-bottom: 8px;
}

.application-item p {
 color: var(--muted);
 margin: 6px 0;
}

.status-pill {
 display: inline-block;
 padding: 6px 9px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 800;
}

.legal-page {
 max-width: 880px;
}

.legal-page p,
.legal-page li {
 color: var(--muted);
}

.footer-links {
 line-height: 1.9;
}

.footer-links a {
 color: var(--muted);
 text-decoration: none;
}

.footer-links a:hover {
 color: var(--text);
}

.application-save-status {
 margin-top: 14px;
 font-size: 14px;
 color: var(--muted);
}

.application-save-status.error {
 color: #9d1c1c;
 font-weight: 700;
}

.application-save-status.success {
 color: var(--accent);
 font-weight: 700;
}

.home-hero {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
 gap: 56px;
 align-items: center;
 padding-top: 56px;
 padding-bottom: 56px;
}

.home-hero h1 {
 font-size: clamp(52px, 7vw, 92px);
 line-height: 0.95;
 letter-spacing: -0.065em;
 margin-bottom: 24px;
}

.home-hero .lead {
 max-width: 700px;
 font-size: 24px;
 line-height: 1.35;
}

.hero-visual {
 position: relative;
 min-height: 520px;
 border: 1px solid var(--border);
 border-radius: 32px;
 background:
  radial-gradient(circle at 25% 20%, rgba(16, 158, 119, 0.12), transparent 30%),
  radial-gradient(circle at 70% 60%, rgba(36, 82, 161, 0.10), transparent 35%),
  #ffffff;
 overflow: hidden;
 padding: 28px;
}

.visual-node {
 position: absolute;
 width: 220px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 22px;
 padding: 18px;
 box-shadow: 0 18px 45px rgba(0,0,0,0.08);
 animation: floatNode 6s ease-in-out infinite;
}

.visual-node strong {
 display: block;
 margin-bottom: 6px;
 color: var(--text);
}

.visual-node span {
 display: block;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.35;
}

.visual-node.one {
 top: 42px;
 left: 32px;
}

.visual-node.two {
 top: 190px;
 right: 34px;
 animation-delay: 1.2s;
}

.visual-node.three {
 bottom: 54px;
 left: 64px;
 animation-delay: 2.1s;
}

.visual-line {
 position: absolute;
 height: 2px;
 background: linear-gradient(90deg, rgba(16,158,119,0), rgba(16,158,119,0.75), rgba(16,158,119,0));
 transform-origin: left center;
 opacity: 0.65;
}

.visual-line.one {
 width: 210px;
 top: 172px;
 left: 188px;
 transform: rotate(24deg);
}

.visual-line.two {
 width: 230px;
 top: 338px;
 left: 188px;
 transform: rotate(-28deg);
}

.visual-pill {
 position: absolute;
 right: 32px;
 bottom: 28px;
 padding: 10px 14px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-weight: 800;
 font-size: 13px;
}

@keyframes floatNode {
 0%, 100% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(-12px);
 }
}

.home-paths {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}

.path-card {
 min-height: 260px;
}

.path-number {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-weight: 900;
 margin-bottom: 16px;
}

.home-strip {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
}

.home-strip .notice {
 height: 100%;
}

@media (max-width: 1050px) {
 .home-hero {
  grid-template-columns: 1fr;
 }

 .hero-visual {
  min-height: 440px;
 }

 .home-paths,
 .home-strip {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 650px) {
 .hero-visual {
  display: none;
 }

 .home-hero h1 {
  font-size: 54px;
 }

 .home-hero .lead {
  font-size: 20px;
 }
}

.home-routing-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 14px;
}

.routing-card {
 min-height: 220px;
 position: relative;
 overflow: hidden;
}

.routing-card h3 {
 margin-top: 12px;
}

.routing-card p {
 font-size: 15px;
 line-height: 1.45;
}

.routing-icon {
 display: inline-flex;
 width: 42px;
 height: 42px;
 border-radius: 14px;
 align-items: center;
 justify-content: center;
 background: var(--accent-soft);
 color: var(--accent);
 font-weight: 900;
 font-size: 18px;
}

.preview-header {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: end;
 margin-bottom: 20px;
}

.preview-header p {
 max-width: 680px;
 color: var(--muted);
}

.preview-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}

.preview-card {
 min-height: 310px;
}

.preview-card .problem-label {
 margin-top: 14px;
}

.preview-actions {
 margin-top: 18px;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.preview-actions .inline-validation-form {
 margin: 0;
}

.preview-actions .button,
.preview-actions .validation-button {
 width: auto;
}

.home-quote {
 border-radius: 28px;
 border: 1px solid var(--border);
 background: var(--text);
 color: #ffffff;
 padding: 36px;
}

.home-quote h2 {
 color: #ffffff;
 max-width: 980px;
 margin-bottom: 10px;
}

.home-quote p {
 color: rgba(255,255,255,0.72);
 max-width: 760px;
}

.trust-mini-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 14px;
}

.trust-mini {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 18px;
}

.trust-mini strong {
 display: block;
 margin-bottom: 6px;
}

.trust-mini span {
 color: var(--muted);
 font-size: 14px;
 line-height: 1.4;
}

@media (max-width: 1150px) {
 .home-routing-grid,
 .preview-grid,
 .trust-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 .home-routing-grid,
 .preview-grid,
 .trust-mini-grid {
  grid-template-columns: 1fr;
 }

 .preview-header {
  display: block;
 }
}

/* ============================================================
  Solveworthy Modern Color System
  Warm neutral base + deep green primary + amber accent
  ============================================================ */

:root {
 --bg: #F7F5EF;
 --card: #FFFFFF;
 --text: #18201C;
 --muted: #66736D;
 --border: #E4DDD0;

 --accent: #0F8F68;
 --accent-dark: #0B6F51;
 --accent-soft: #E7F5EF;

 --amber: #F4A261;
 --amber-soft: #FFF1DF;

 --blue: #2452A1;
 --blue-soft: #EAF0FB;

 --danger: #C94C32;
 --danger-soft: #FBEAE5;
}

body {
 background: var(--bg);
 color: var(--text);
}

.site-header {
 background: rgba(247, 245, 239, 0.86);
 backdrop-filter: blur(14px);
 border-bottom: 1px solid var(--border);
}

.logo {
 color: var(--text);
}

.nav-links a,
.nav-more summary {
 color: var(--muted);
}

.nav-links a:hover,
.nav-more summary:hover {
 color: var(--text);
}

.card,
.auth-panel,
.form-shell,
.detail-section,
.application-item,
.success-panel {
 background: var(--card);
 border-color: var(--border);
}

.button.primary {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.button.primary:hover {
 background: var(--accent-dark);
 border-color: var(--accent-dark);
 color: #ffffff;
}

.button {
 border-color: var(--border);
 color: var(--text);
 background: #ffffff;
}

.button:hover {
 border-color: var(--accent);
 color: var(--accent);
 background: var(--accent-soft);
}

.eyebrow,
.problem-label,
.path-number,
.routing-icon {
 color: var(--accent);
}

.meta-pill,
.badge,
.status-pill {
 background: var(--accent-soft);
 color: var(--accent);
}

.notice {
 background: var(--amber-soft);
 border-color: #F2D6AD;
 color: var(--text);
}

.notice strong {
 color: var(--text);
}

input,
select,
textarea {
 border-color: var(--border);
}

input:focus,
select:focus,
textarea:focus {
 border-color: var(--accent);
 outline: 2px solid rgba(15, 143, 104, 0.16);
}

/* ============================================================
  Modern Homepage Pattern
  Splash-led triage homepage
  ============================================================ */

.modern-home-hero {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
 gap: 56px;
 align-items: center;
 padding-top: 64px;
 padding-bottom: 54px;
}

.modern-home-hero h1 {
 font-size: clamp(56px, 7vw, 96px);
 line-height: 0.94;
 letter-spacing: -0.07em;
 margin-bottom: 24px;
}

.modern-home-hero .lead {
 max-width: 720px;
 font-size: 23px;
 line-height: 1.36;
}

.hero-proof-row {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 26px;
}

.hero-proof-pill {
 padding: 9px 12px;
 border-radius: 999px;
 background: #ffffff;
 border: 1px solid var(--border);
 color: var(--muted);
 font-size: 13px;
 font-weight: 700;
}

.hero-proof-pill strong {
 color: var(--accent);
}

.modern-visual {
 position: relative;
 min-height: 540px;
 border: 1px solid var(--border);
 border-radius: 34px;
 background:
  radial-gradient(circle at 18% 18%, rgba(15, 143, 104, 0.14), transparent 30%),
  radial-gradient(circle at 82% 65%, rgba(244, 162, 97, 0.16), transparent 34%),
  linear-gradient(145deg, #ffffff, #FBFAF6);
 overflow: hidden;
 padding: 30px;
}

.modern-visual-card {
 position: absolute;
 width: 232px;
 background: rgba(255,255,255,0.94);
 border: 1px solid var(--border);
 border-radius: 24px;
 padding: 18px;
 box-shadow: 0 22px 50px rgba(24,32,28,0.09);
 animation: solveworthyFloat 6.4s ease-in-out infinite;
}

.modern-visual-card strong {
 display: block;
 margin-bottom: 7px;
 color: var(--text);
}

.modern-visual-card span {
 color: var(--muted);
 font-size: 14px;
 line-height: 1.38;
}

.modern-visual-card.problem {
 top: 42px;
 left: 34px;
}

.modern-visual-card.opportunity {
 top: 205px;
 right: 34px;
 animation-delay: 1.1s;
}

.modern-visual-card.people {
 bottom: 54px;
 left: 66px;
 animation-delay: 2.2s;
}

.modern-visual-badge {
 position: absolute;
 right: 30px;
 bottom: 28px;
 padding: 10px 14px;
 border-radius: 999px;
 background: var(--accent);
 color: #ffffff;
 font-weight: 900;
 font-size: 13px;
 box-shadow: 0 12px 30px rgba(15,143,104,0.22);
}

.modern-visual-line {
 position: absolute;
 height: 2px;
 opacity: 0.72;
 background: linear-gradient(90deg, rgba(15,143,104,0), rgba(15,143,104,0.86), rgba(244,162,97,0));
 transform-origin: left center;
}

.modern-visual-line.one {
 width: 240px;
 top: 184px;
 left: 196px;
 transform: rotate(24deg);
}

.modern-visual-line.two {
 width: 246px;
 top: 356px;
 left: 202px;
 transform: rotate(-28deg);
}

@keyframes solveworthyFloat {
 0%, 100% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(-11px);
 }
}

.home-section-header {
 display: flex;
 justify-content: space-between;
 gap: 28px;
 align-items: end;
 margin-bottom: 22px;
}

.home-section-header p {
 max-width: 660px;
 color: var(--muted);
}

.triage-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 14px;
}

.triage-card {
 min-height: 220px;
 display: flex;
 flex-direction: column;
}

.triage-card p {
 font-size: 15px;
 line-height: 1.45;
}

.triage-card .button-row {
 margin-top: auto;
}

.triage-icon {
 width: 44px;
 height: 44px;
 border-radius: 15px;
 background: var(--accent-soft);
 color: var(--accent);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 900;
 margin-bottom: 16px;
}

.activity-grid {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: 18px;
}

.activity-column {
 display: grid;
 gap: 14px;
}

.activity-card {
 min-height: 230px;
}

.activity-card h3 {
 margin-bottom: 12px;
}

.activity-card p {
 color: var(--muted);
}

.activity-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 18px;
}

.trust-strip-modern {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 14px;
}

.trust-mini {
 background: #ffffff;
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 18px;
}

.trust-mini strong {
 display: block;
 color: var(--text);
 margin-bottom: 6px;
}

.trust-mini span {
 display: block;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.42;
}

.quote-band {
 background: var(--text);
 color: #ffffff;
 border-radius: 30px;
 padding: 40px;
 border: 1px solid rgba(255,255,255,0.12);
}

.quote-band h2 {
 color: #ffffff;
 font-size: clamp(32px, 4vw, 54px);
 line-height: 1;
 letter-spacing: -0.04em;
 max-width: 980px;
 margin-bottom: 12px;
}

.quote-band p {
 color: rgba(255,255,255,0.72);
 max-width: 760px;
 margin-bottom: 0;
}

.learning-cta {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 24px;
 align-items: center;
}

@media (max-width: 1180px) {
 .triage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .activity-grid,
 .trust-strip-modern,
 .learning-cta {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 1050px) {
 .modern-home-hero {
  grid-template-columns: 1fr;
 }

 .modern-visual {
  min-height: 460px;
 }
}

@media (max-width: 700px) {
 .modern-visual {
  display: none;
 }

 .modern-home-hero h1 {
  font-size: 52px;
 }

 .modern-home-hero .lead {
  font-size: 20px;
 }

 .triage-grid {
  grid-template-columns: 1fr;
 }

 .home-section-header {
  display: block;
 }
}

/* ============================================================
  Homepage Hero Polish Overrides
  Calmer scale, better spacing, cleaner visual flow.
  ============================================================ */

.modern-home-hero {
 padding-top: 86px;
 padding-bottom: 62px;
 gap: 64px;
 align-items: center;
}

.modern-home-hero h1 {
 font-size: clamp(50px, 6.15vw, 84px);
 line-height: 0.97;
 letter-spacing: -0.06em;
 margin-bottom: 26px;
 max-width: 820px;
}

.modern-home-hero .lead {
 max-width: 720px;
 font-size: 21px;
 line-height: 1.42;
 color: var(--muted);
}

.modern-home-hero .button-row {
 margin-top: 30px;
}

.hero-proof-row {
 margin-top: 18px;
 gap: 9px;
}

.hero-proof-pill {
 padding: 8px 12px;
 font-size: 13px;
 background: rgba(255,255,255,0.72);
}

.modern-visual {
 min-height: 520px;
 padding: 28px;
}

.modern-visual-card {
 width: 214px;
 padding: 17px;
 border-radius: 22px;
}

.modern-visual-card strong {
 font-size: 16px;
 line-height: 1.18;
}

.modern-visual-card span {
 font-size: 13.5px;
 line-height: 1.42;
}

.modern-visual-card.problem {
 top: 42px;
 left: 42px;
}

.modern-visual-card.opportunity {
 top: 194px;
 right: 42px;
}

.modern-visual-card.people {
 bottom: 72px;
 left: 80px;
}

.modern-visual-badge {
 right: 34px;
 bottom: 30px;
 font-size: 12.5px;
 padding: 9px 13px;
}

.modern-visual-line {
 opacity: 0.34;
}

.modern-visual-line.one {
 width: 210px;
 top: 178px;
 left: 205px;
 transform: rotate(22deg);
}

.modern-visual-line.two {
 width: 205px;
 top: 340px;
 left: 210px;
 transform: rotate(-24deg);
}

@media (max-width: 1050px) {
 .modern-home-hero {
  padding-top: 58px;
  gap: 42px;
 }

 .modern-visual {
  min-height: 460px;
 }
}

@media (max-width: 700px) {
 .modern-home-hero {
  padding-top: 42px;
 }

 .modern-home-hero h1 {
  font-size: 48px;
  letter-spacing: -0.045em;
 }

 .modern-home-hero .lead {
  font-size: 19px;
 }
}

/* ============================================================
  Final Homepage Hero Polish
  ============================================================ */

.modern-home-hero {
 padding-top: 86px;
 padding-bottom: 62px;
 gap: 64px;
 align-items: center;
}

.modern-home-hero h1 {
 font-size: clamp(50px, 6.15vw, 84px);
 line-height: 0.97;
 letter-spacing: -0.06em;
 margin-bottom: 26px;
 max-width: 820px;
}

.modern-home-hero .lead {
 max-width: 720px;
 font-size: 21px;
 line-height: 1.42;
 color: var(--muted);
}

.modern-home-hero .button-row {
 margin-top: 30px;
}

.hero-proof-row {
 margin-top: 18px;
 gap: 9px;
}

.hero-proof-pill {
 padding: 8px 12px;
 font-size: 13px;
 background: rgba(255,255,255,0.72);
}

.modern-visual {
 min-height: 520px;
 padding: 28px;
}

.modern-visual-card {
 width: 214px;
 padding: 17px;
 border-radius: 22px;
}

.modern-visual-card strong {
 font-size: 16px;
 line-height: 1.18;
}

.modern-visual-card span {
 font-size: 13.5px;
 line-height: 1.42;
}

.modern-visual-card.problem {
 top: 42px;
 left: 42px;
}

.modern-visual-card.opportunity {
 top: 194px;
 right: 42px;
}

.modern-visual-card.people {
 bottom: 72px;
 left: 80px;
}

.modern-visual-badge {
 right: 34px;
 bottom: 30px;
 font-size: 12.5px;
 padding: 9px 13px;
}

.modern-visual-line {
 opacity: 0.34;
}

.modern-visual-line.one {
 width: 210px;
 top: 178px;
 left: 205px;
 transform: rotate(22deg);
}

.modern-visual-line.two {
 width: 205px;
 top: 340px;
 left: 210px;
 transform: rotate(-24deg);
}

@media (max-width: 1050px) {
 .modern-home-hero {
  padding-top: 58px;
  gap: 42px;
 }

 .modern-visual {
  min-height: 460px;
 }
}

@media (max-width: 700px) {
 .modern-home-hero {
  padding-top: 42px;
 }

 .modern-home-hero h1 {
  font-size: 48px;
  letter-spacing: -0.045em;
 }

 .modern-home-hero .lead {
  font-size: 19px;
 }
}

/* ============================================================
  Clean Homepage Reset
  Removes messy split hero and replaces it with calmer hierarchy.
  ============================================================ */

.clean-hero {
 max-width: 980px;
 margin: 0 auto;
 text-align: center;
 padding: 92px 0 74px;
}

.clean-hero h1 {
 font-size: clamp(48px, 7vw, 92px);
 line-height: 0.96;
 letter-spacing: -0.065em;
 margin: 0 auto 26px;
 max-width: 940px;
}

.clean-hero .lead {
 max-width: 760px;
 margin: 0 auto;
 font-size: 22px;
 line-height: 1.42;
 color: var(--muted);
}

.clean-hero .button-row {
 justify-content: center;
 margin-top: 32px;
}

.clean-proof-row {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 24px;
}

.clean-proof-pill {
 padding: 9px 13px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: rgba(255,255,255,0.75);
 color: var(--muted);
 font-weight: 700;
 font-size: 13px;
}

.clean-proof-pill strong {
 color: var(--accent);
}

.process-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}

.process-card {
 position: relative;
 min-height: 230px;
}

.process-number {
 display: inline-flex;
 width: 42px;
 height: 42px;
 border-radius: 14px;
 background: var(--accent-soft);
 color: var(--accent);
 align-items: center;
 justify-content: center;
 font-weight: 900;
 margin-bottom: 18px;
}

.process-card p,
.triage-card p,
.activity-card p {
 color: var(--muted);
}

.clean-section-header {
 max-width: 820px;
 margin-bottom: 24px;
}

.clean-section-header.center {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

.clean-section-header p {
 color: var(--muted);
 font-size: 18px;
}

.triage-grid.clean {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}

.activity-grid.clean {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 18px;
}

.simple-quote-band {
 background: var(--text);
 color: #ffffff;
 border-radius: 30px;
 padding: 42px;
}

.simple-quote-band h2 {
 color: #ffffff;
 max-width: 980px;
 font-size: clamp(34px, 4.3vw, 58px);
 line-height: 1;
 letter-spacing: -0.045em;
 margin-bottom: 12px;
}

.simple-quote-band p {
 color: rgba(255,255,255,0.72);
 max-width: 740px;
 margin-bottom: 0;
}

@media (max-width: 1050px) {
 .process-grid,
 .triage-grid.clean,
 .activity-grid.clean {
  grid-template-columns: 1fr 1fr;
 }

 .clean-hero {
  padding-top: 64px;
 }
}

@media (max-width: 720px) {
 .process-grid,
 .triage-grid.clean,
 .activity-grid.clean {
  grid-template-columns: 1fr;
 }

 .clean-hero {
  text-align: left;
  padding-top: 48px;
 }

 .clean-hero h1 {
  font-size: 48px;
 }

 .clean-hero .lead {
  font-size: 19px;
 }

 .clean-hero .button-row,
 .clean-proof-row {
  justify-content: flex-start;
 }
}

/* ============================================================
  Cleaner Homepage Path Section
  More compact routing cards with clearer labels.
  ============================================================ */

.path-routing-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.path-routing-card {
 min-height: 250px;
 display: flex;
 flex-direction: column;
 padding: 26px;
 transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.path-routing-card:hover {
 transform: translateY(-3px);
 border-color: rgba(15, 143, 104, 0.32);
 box-shadow: 0 18px 42px rgba(24, 32, 28, 0.07);
}

.path-card-kicker {
 display: inline-flex;
 width: fit-content;
 padding: 7px 10px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 900;
 margin-bottom: 18px;
}

.path-routing-card h3 {
 margin-bottom: 12px;
}

.path-routing-card p {
 color: var(--muted);
 font-size: 16px;
 line-height: 1.45;
 margin-bottom: 22px;
}

.path-routing-card .button-row {
 margin-top: auto;
}

.path-routing-card .button {
 width: 100%;
 justify-content: center;
}

@media (max-width: 1150px) {
 .path-routing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 .path-routing-grid {
  grid-template-columns: 1fr;
 }

 .path-routing-card {
  min-height: auto;
 }
}

/* ============================================================
  Polished Routing Section
  Compact, role-labeled, no placeholder letter icons.
  ============================================================ */

.path-routing-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.path-routing-card {
 display: flex;
 flex-direction: column;
 min-height: 236px;
 padding: 26px;
 transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.path-routing-card:hover {
 transform: translateY(-3px);
 border-color: rgba(15, 143, 104, 0.34);
 box-shadow: 0 18px 42px rgba(24, 32, 28, 0.07);
}

.path-card-kicker {
 display: inline-flex;
 width: fit-content;
 padding: 7px 11px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 900;
 margin-bottom: 18px;
}

.path-routing-card h3 {
 margin-bottom: 12px;
}

.path-routing-card p {
 color: var(--muted);
 font-size: 16px;
 line-height: 1.45;
 margin-bottom: 22px;
}

.path-routing-card .button-row {
 margin-top: auto;
}

.path-routing-card .button {
 width: 100%;
 justify-content: center;
}

@media (max-width: 1150px) {
 .path-routing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 .path-routing-grid {
  grid-template-columns: 1fr;
 }

 .path-routing-card {
  min-height: auto;
 }
}

/* ============================================================
  Force Polished Routing Section
  ============================================================ */

.path-routing-grid-final {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.path-routing-card-final {
 display: flex;
 flex-direction: column;
 min-height: 220px;
 padding: 24px;
 transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.path-routing-card-final:hover {
 transform: translateY(-3px);
 border-color: rgba(15, 143, 104, 0.34);
 box-shadow: 0 18px 42px rgba(24, 32, 28, 0.07);
}

.path-card-kicker-final {
 display: inline-flex;
 width: fit-content;
 padding: 7px 11px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 900;
 margin-bottom: 16px;
}

.path-routing-card-final h3 {
 margin-bottom: 10px;
}

.path-routing-card-final p {
 color: var(--muted);
 font-size: 15.5px;
 line-height: 1.45;
 margin-bottom: 20px;
}

.path-routing-card-final .button-row {
 margin-top: auto;
}

.path-routing-card-final .button {
 width: 100%;
 justify-content: center;
}

@media (max-width: 1150px) {
 .path-routing-grid-final {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 .path-routing-grid-final {
  grid-template-columns: 1fr;
 }

 .path-routing-card-final {
  min-height: auto;
 }
}

/* ============================================================
  Force Polished Routing Section
  ============================================================ */

.path-routing-grid-final {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.path-routing-card-final {
 display: flex;
 flex-direction: column;
 min-height: 220px;
 padding: 24px;
 transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.path-routing-card-final:hover {
 transform: translateY(-3px);
 border-color: rgba(15, 143, 104, 0.34);
 box-shadow: 0 18px 42px rgba(24, 32, 28, 0.07);
}

.path-card-kicker-final {
 display: inline-flex;
 width: fit-content;
 padding: 7px 11px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 900;
 margin-bottom: 16px;
}

.path-routing-card-final h3 {
 margin-bottom: 10px;
}

.path-routing-card-final p {
 color: var(--muted);
 font-size: 15.5px;
 line-height: 1.45;
 margin-bottom: 20px;
}

.path-routing-card-final .button-row {
 margin-top: auto;
}

.path-routing-card-final .button {
 width: 100%;
 justify-content: center;
}

@media (max-width: 1150px) {
 .path-routing-grid-final {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 .path-routing-grid-final {
  grid-template-columns: 1fr;
 }

 .path-routing-card-final {
  min-height: auto;
 }
}

/* ============================================================
  Final Path Section Polish
  Tighter cards + centered CTA text.
  ============================================================ */

.path-routing-card-final {
 min-height: 205px;
 padding: 24px;
}

.path-routing-card-final h3 {
 margin-bottom: 8px;
}

.path-routing-card-final p {
 font-size: 15.5px;
 line-height: 1.42;
 margin-bottom: 16px;
}

.path-routing-card-final .button-row {
 margin-top: auto;
 width: 100%;
}

.path-routing-card-final .button {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 white-space: normal;
}

.path-card-kicker-final {
 margin-bottom: 14px;
}

@media (max-width: 720px) {
 .path-routing-card-final {
  min-height: auto;
 }
}

/* ============================================================
  Problem-to-Opportunity Story Section
  Cleaner product story: problem signal -> collaborator opportunity.
  ============================================================ */

.problem-opportunity-story {
 display: grid;
 gap: 24px;
}

.story-header {
 max-width: 860px;
 margin: 0 auto 10px;
 text-align: center;
}

.story-header p {
 color: var(--muted);
 font-size: 18px;
 line-height: 1.5;
 margin-left: auto;
 margin-right: auto;
 max-width: 760px;
}

.story-flow-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 align-items: stretch;
 gap: 18px;
}

.story-card {
 min-height: 330px;
 padding: 28px;
 display: flex;
 flex-direction: column;
}

.story-card h3 {
 margin-bottom: 14px;
}

.story-card p {
 color: var(--muted);
 margin-bottom: 20px;
}

.story-label {
 display: inline-flex;
 width: fit-content;
 padding: 7px 11px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 900;
 margin-bottom: 16px;
}

.story-card .problem-meta {
 margin-bottom: 16px;
}

.story-card .activity-actions {
 margin-top: auto;
}

.story-card .inline-validation-form {
 margin: 0;
}

.story-card .button,
.story-card button.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.story-connector {
 display: flex;
 align-items: center;
 justify-content: center;
 min-width: 66px;
}

.story-arrow {
 width: 54px;
 height: 54px;
 border-radius: 999px;
 background: var(--accent);
 color: #ffffff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 26px;
 font-weight: 900;
 box-shadow: 0 14px 34px rgba(15, 143, 104, 0.22);
}

@media (max-width: 900px) {
 .story-flow-grid {
  grid-template-columns: 1fr;
 }

 .story-connector {
  min-width: 0;
  min-height: 44px;
 }

 .story-arrow {
  transform: rotate(90deg);
 }

 .story-card {
  min-height: auto;
 }
}

/* ============================================================
  Polished Thesis + Trust Section
  Calmer quote block with connected trust cards.
  ============================================================ */

.thesis-trust-section {
 display: grid;
 gap: 22px;
}

.thesis-band {
 background: var(--text);
 color: #ffffff;
 border-radius: 26px;
 padding: 32px 38px;
 border: 1px solid rgba(255,255,255,0.10);
}

.thesis-band h2 {
 color: #ffffff;
 font-size: clamp(32px, 3.7vw, 54px);
 line-height: 1.02;
 letter-spacing: -0.045em;
 max-width: 1040px;
 margin-bottom: 14px;
}

.thesis-band p {
 color: rgba(255,255,255,0.74);
 max-width: 820px;
 font-size: 18px;
 line-height: 1.45;
 margin-bottom: 0;
}

.trust-model-header {
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: 24px;
 margin-top: 4px;
}

.trust-model-header h2 {
 margin-bottom: 0;
}

.trust-model-header p {
 max-width: 620px;
 color: var(--muted);
 margin-bottom: 0;
}

.thesis-trust-section .trust-strip-modern {
 margin-top: 0;
}

.thesis-trust-section .trust-mini {
 min-height: 150px;
}

.thesis-trust-section .trust-mini span {
 line-height: 1.42;
}

@media (max-width: 850px) {
 .thesis-band {
  padding: 28px;
 }

 .trust-model-header {
  display: block;
 }

 .trust-model-header p {
  margin-top: 10px;
 }
}

/* ============================================================
  Final CTA + Structured Footer Polish
  ============================================================ */

.final-action-cta {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 28px;
 align-items: center;
 padding: 34px;
}

.final-action-cta h2 {
 max-width: 820px;
}

.final-action-cta p {
 max-width: 780px;
 color: var(--muted);
 margin-bottom: 0;
}

.final-action-cta .button-row {
 justify-content: flex-end;
 flex-wrap: wrap;
}

.final-action-cta .button {
 white-space: nowrap;
}

.site-footer {
 border-top: 1px solid var(--border);
 background: #ffffff;
}

.footer-inner {
 max-width: 1440px;
 margin: 0 auto;
 padding: 44px 32px;
}

.footer-top {
 display: flex;
 justify-content: space-between;
 gap: 28px;
 align-items: flex-start;
 margin-bottom: 34px;
}

.footer-brand strong {
 display: block;
 font-size: 18px;
 margin-bottom: 8px;
 color: var(--text);
}

.footer-brand p {
 color: var(--muted);
 margin: 0;
 max-width: 440px;
}

.footer-columns {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 28px;
}

.footer-column h4 {
 margin: 0 0 12px;
 color: var(--text);
 font-size: 14px;
}

.footer-column a {
 display: block;
 color: var(--muted);
 text-decoration: none;
 margin-bottom: 8px;
 font-size: 14px;
}

.footer-column a:hover {
 color: var(--accent);
}

.footer-bottom {
 margin-top: 34px;
 padding-top: 18px;
 border-top: 1px solid var(--border);
 color: var(--muted);
 font-size: 13px;
}

@media (max-width: 900px) {
 .final-action-cta {
  grid-template-columns: 1fr;
 }

 .final-action-cta .button-row {
  justify-content: flex-start;
 }

 .footer-top {
  display: block;
 }

 .footer-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 600px) {
 .footer-columns {
  grid-template-columns: 1fr;
 }
}

/* ============================================================
  Final Brand + Responsive Polish
  ============================================================ */

.brand-logo {
 display: inline-flex;
 align-items: center;
 gap: 10px;
}

.brand-mark {
 position: relative;
 width: 30px;
 height: 30px;
 display: inline-block;
 border-radius: 10px;
 background: var(--accent-soft);
 border: 1px solid rgba(15, 143, 104, 0.16);
 flex: 0 0 auto;
}

.brand-mark span {
 position: absolute;
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: var(--accent);
 z-index: 2;
}

.brand-mark span:nth-child(1) {
 left: 7px;
 top: 7px;
}

.brand-mark span:nth-child(2) {
 right: 7px;
 top: 12px;
}

.brand-mark span:nth-child(3) {
 left: 11px;
 bottom: 7px;
}

.brand-mark::before,
.brand-mark::after {
 content: "";
 position: absolute;
 height: 2px;
 background: var(--accent);
 border-radius: 999px;
 opacity: 0.72;
 transform-origin: left center;
}

.brand-mark::before {
 width: 14px;
 left: 12px;
 top: 11px;
 transform: rotate(23deg);
}

.brand-mark::after {
 width: 13px;
 left: 14px;
 top: 17px;
 transform: rotate(-32deg);
}

/* Slightly calmer homepage hero */
.clean-hero {
 padding-top: 82px;
 padding-bottom: 66px;
}

.clean-hero h1 {
 font-size: clamp(44px, 6.4vw, 84px);
 line-height: 0.98;
 letter-spacing: -0.058em;
}

.clean-hero .lead {
 font-size: clamp(19px, 2.1vw, 22px);
}

/* Inner page consistency */
.page > .hero:not(.clean-hero) {
 padding-top: 58px;
 padding-bottom: 38px;
}

.page > .hero:not(.clean-hero) h1 {
 font-size: clamp(42px, 5.2vw, 74px);
 line-height: 0.98;
 letter-spacing: -0.052em;
 max-width: 960px;
}

.page > .hero:not(.clean-hero) .lead {
 max-width: 820px;
 color: var(--muted);
}

.card,
.form-shell,
.auth-panel,
detail-section,
.application-item {
 box-shadow: 0 12px 34px rgba(24, 32, 28, 0.035);
}

.card:hover {
 border-color: rgba(15, 143, 104, 0.22);
}

.form-shell,
.auth-panel {
 max-width: 960px;
}

.form-group label {
 color: var(--text);
}

.help-text,
.form-note,
.location-status {
 color: var(--muted);
}

/* Board page MVP notice */
.mvp-notice {
 margin: 0 0 24px;
 padding: 16px 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
 color: var(--muted);
}

.mvp-notice strong {
 color: var(--text);
}

/* Footer refinement */
.footer-inner {
 padding-top: 40px;
 padding-bottom: 38px;
}

.footer-column h4 {
 color: var(--text);
 letter-spacing: 0;
}

.footer-bottom {
 color: var(--muted);
}

/* Mobile nav and spacing */
@media (max-width: 900px) {
 .nav {
  align-items: flex-start;
  gap: 16px;
 }

 .nav-links {
  gap: 14px;
  row-gap: 10px;
 }

 .brand-mark {
  width: 28px;
  height: 28px;
 }

 .clean-hero {
  padding-top: 56px;
  padding-bottom: 48px;
 }

 .clean-hero h1 {
  max-width: 720px;
 }

 .section {
  padding-top: 48px;
  padding-bottom: 48px;
 }

 .final-action-cta {
  padding: 28px;
 }

 .final-action-cta .button-row {
  justify-content: flex-start;
 }
}

@media (max-width: 650px) {
 .page {
  padding-left: 20px;
  padding-right: 20px;
 }

 .site-header {
  position: static;
 }

 .nav {
  padding-left: 20px;
  padding-right: 20px;
 }

 .nav-links {
  font-size: 14px;
 }

 .clean-hero {
  text-align: left;
  padding-top: 42px;
 }

 .clean-hero h1 {
  font-size: 46px;
  letter-spacing: -0.045em;
 }

 .clean-hero .lead {
  font-size: 18.5px;
 }

 .clean-hero .button-row,
 .clean-proof-row {
  justify-content: flex-start;
 }

 .clean-proof-row {
  gap: 8px;
 }

 .button-row {
  width: 100%;
 }

 .button-row .button {
  flex: 1 1 100%;
  justify-content: center;
  text-align: center;
 }

 .page > .hero:not(.clean-hero) {
  padding-top: 38px;
  padding-bottom: 28px;
 }

 .page > .hero:not(.clean-hero) h1 {
  font-size: 42px;
  letter-spacing: -0.042em;
 }

 .footer-inner {
  padding-left: 20px;
  padding-right: 20px;
 }

 .footer-columns {
  gap: 18px;
 }

 .footer-column a {
  margin-bottom: 10px;
 }
}

/* ============================================================
  Final Problem-to-Opportunity Story Polish
  Centers arrow icon and normalizes story-card buttons.
  ============================================================ */

.story-arrow {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 line-height: 1;
 padding: 0;
}

.story-arrow svg {
 width: 28px;
 height: 28px;
 display: block;
}

.story-card .activity-actions {
 align-items: stretch;
}

.story-card .activity-actions .button,
.story-card .activity-actions button.button {
 min-width: 178px;
 min-height: 58px;
 padding: 15px 22px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 line-height: 1.15;
}

.story-card .activity-actions .inline-validation-form {
 display: inline-flex;
 margin: 0;
}

.story-card .activity-actions .inline-validation-form .button {
 width: 100%;
}

@media (max-width: 650px) {
 .story-card .activity-actions .button,
 .story-card .activity-actions button.button,
 .story-card .activity-actions .inline-validation-form {
  width: 100%;
  min-width: 0;
 }
}

/* ============================================================
  Problems Page Filter Polish
  ============================================================ */

.problem-filter-button,
.category-filter,
.filter-button {
 cursor: pointer;
 transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.problem-filter-button:hover,
.category-filter:hover,
.filter-button:hover {
 transform: translateY(-1px);
 border-color: rgba(15, 143, 104, 0.35);
 color: var(--accent);
}

.problem-filter-button.active,
.category-filter.active,
.filter-button.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.problem-filter-empty {
 display: none;
 margin-top: 18px;
 padding: 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
 color: var(--muted);
}

.problem-filter-empty.show {
 display: block;
}

/* ============================================================
  Private Problem Bounty Page
  ============================================================ */

.bounty-shell {
 max-width: 980px;
 margin: 0 auto;
}

.bounty-panel {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 28px;
 padding: 32px;
 box-shadow: 0 18px 44px rgba(24, 32, 28, 0.045);
}

.bounty-problem-box {
 padding: 18px;
 border-radius: 20px;
 background: var(--accent-soft);
 border: 1px solid rgba(15, 143, 104, 0.18);
 margin-bottom: 24px;
}

.bounty-problem-box strong {
 display: block;
 color: var(--accent);
 margin-bottom: 6px;
}

.bounty-problem-box h2 {
 margin-bottom: 0;
}

.amount-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 10px;
 margin: 14px 0 12px;
}

.amount-option {
 border: 1px solid var(--border);
 background: #ffffff;
 color: var(--text);
 border-radius: 16px;
 padding: 16px;
 font-weight: 900;
 cursor: pointer;
 transition: 160ms ease;
}

.amount-option:hover {
 border-color: var(--accent);
 color: var(--accent);
 background: var(--accent-soft);
}

.amount-option.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.custom-amount-row {
 display: none;
 margin-top: 12px;
}

.custom-amount-row.show {
 display: block;
}

.bounty-disclosure {
 background: var(--amber-soft);
 border: 1px solid #F2D6AD;
 border-radius: 18px;
 padding: 16px;
 color: var(--text);
 margin: 20px 0;
}

.consent-row {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 16px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
}

.consent-row input {
 width: auto;
 margin-top: 4px;
}

.bounty-status {
 margin-top: 16px;
 color: var(--muted);
 font-size: 14px;
}

.bounty-status.error {
 color: var(--danger);
 font-weight: 800;
}

.bounty-status.success {
 color: var(--accent);
 font-weight: 800;
}

@media (max-width: 760px) {
 .amount-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .bounty-panel {
  padding: 24px;
 }
}

/* ============================================================
  Private Problem Bounty Polish
  Lower friction, clearer explanation, custom amount in grid.
  ============================================================ */

.bounty-panel {
 max-width: 1120px;
 margin: 0 auto;
}

.bounty-intro-box {
 padding: 18px 20px;
 border-radius: 20px;
 background: #ffffff;
 border: 1px solid var(--border);
 margin-bottom: 24px;
}

.bounty-intro-box strong {
 display: block;
 margin-bottom: 6px;
 color: var(--text);
}

.bounty-intro-box p {
 color: var(--muted);
 margin-bottom: 0;
 line-height: 1.45;
}

.amount-grid {
 grid-template-columns: repeat(6, minmax(0, 1fr));
}

.amount-option {
 min-height: 58px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.custom-amount-row {
 margin-top: 14px;
}

.bounty-panel .help-text {
 margin-top: 10px;
}

.bounty-panel textarea {
 min-height: 112px;
}

@media (max-width: 900px) {
 .amount-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

@media (max-width: 560px) {
 .amount-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

/* ============================================================
  Solveworthy Logo Option 12 — Golden Path SW
  ============================================================ */

.brand-logo {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 text-decoration: none;
}

.brand-mark-img {
 width: 38px;
 height: 38px;
 display: block;
 border-radius: 12px;
 flex: 0 0 auto;
}

.brand-logo span:last-child {
 color: var(--text);
 font-weight: 900;
 letter-spacing: -0.045em;
}

@media (max-width: 650px) {
 .brand-mark-img {
  width: 34px;
  height: 34px;
 }
}

/* ============================================================
  Solveworthy S/W Golden Path Logo
  ============================================================ */

.brand-logo {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 text-decoration: none;
}

.brand-mark-img {
 width: 40px;
 height: 40px;
 display: block;
 border-radius: 12px;
 flex: 0 0 auto;
}

.brand-logo > span:last-child {
 color: var(--text);
 font-weight: 900;
 letter-spacing: -0.045em;
}

@media (max-width: 650px) {
 .brand-mark-img {
  width: 34px;
  height: 34px;
 }
}

/* ============================================================
  Temporary Solveworthy PNG Logo Concept
  ============================================================ */

.brand-logo {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 text-decoration: none;
}

.brand-mark-img {
 width: 42px;
 height: 42px;
 display: block;
 object-fit: contain;
 border-radius: 12px;
 flex: 0 0 auto;
}

.brand-logo > span:last-child {
 color: var(--text);
 font-weight: 900;
 letter-spacing: -0.045em;
}

@media (max-width: 650px) {
 .brand-mark-img {
  width: 36px;
  height: 36px;
 }
}

/* ============================================================
  Problems → Opportunity Flow Polish
  ============================================================ */

.open-problem-explainer {
 margin: 0 0 24px;
 padding: 20px 22px;
 border-radius: 22px;
 border: 1px solid var(--border);
 background: #ffffff;
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 20px;
 align-items: center;
}

.open-problem-explainer strong {
 display: block;
 color: var(--text);
 margin-bottom: 6px;
}

.open-problem-explainer p {
 margin: 0;
 color: var(--muted);
}

.open-problem-explainer .mini-flow {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: flex-end;
}

.open-problem-explainer .mini-flow span {
 display: inline-flex;
 padding: 7px 10px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 12px;
 font-weight: 900;
}

.source-problem-notice {
 padding: 18px 20px;
 border: 1px solid rgba(15, 143, 104, 0.24);
 border-radius: 20px;
 background: var(--accent-soft);
 margin-bottom: 24px;
}

.source-problem-notice strong {
 display: block;
 color: var(--accent);
 margin-bottom: 6px;
}

.source-problem-notice p {
 color: var(--text);
 margin-bottom: 0;
}

.source-problem-notice.hidden {
 display: none;
}

.build-around-button {
 border-color: rgba(15, 143, 104, 0.34);
}

@media (max-width: 800px) {
 .open-problem-explainer {
  grid-template-columns: 1fr;
 }

 .open-problem-explainer .mini-flow {
  justify-content: flex-start;
 }
}

/* ============================================================
  Problems Page Final Copy/Hierarchy Polish
  ============================================================ */

.open-problem-explainer {
 padding: 18px 20px;
}

.open-problem-explainer strong {
 font-size: 17px;
}

.open-problem-explainer p {
 font-size: 15.5px;
 line-height: 1.42;
}

.open-problem-explainer .mini-flow span {
 padding: 7px 11px;
}

.mvp-notice {
 padding: 14px 16px;
 font-size: 14.5px;
 line-height: 1.4;
 background: rgba(255,255,255,0.76);
}

.mvp-notice strong {
 color: var(--text);
}

/* Slightly increase visibility of the temporary PNG logo mark */
.brand-mark-img {
 width: 46px;
 height: 46px;
}

@media (max-width: 650px) {
 .brand-mark-img {
  width: 38px;
  height: 38px;
 }
}

/* ============================================================
  Problems Card CTA Repair
  Clear Validate / Contribute / Build action system.
  ============================================================ */

.problem-card-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 18px;
}

.problem-card-actions .button,
.problem-card-actions button.button {
 min-height: 52px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.problem-card-actions form {
 margin: 0;
 display: inline-flex;
}

.problem-card-actions .problem-secondary-action {
 background: #ffffff;
}

.problem-card-actions .problem-bounty-action {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.problem-card-actions .problem-build-action {
 border-color: rgba(15, 143, 104, 0.35);
}

.problem-card-actions .problem-build-action:hover {
 border-color: var(--accent);
 color: var(--accent);
}

@media (max-width: 700px) {
 .problem-card-actions,
 .problem-card-actions form {
  width: 100%;
 }

 .problem-card-actions .button,
 .problem-card-actions button.button {
  width: 100%;
 }
}

/* ============================================================
  Problem Validation CTA Cleanup
  ============================================================ */

.problem-card-actions .problem-validation-action {
 background: #ffffff;
 border-color: rgba(15, 143, 104, 0.28);
 color: var(--text);
}

.problem-card-actions .problem-validation-action:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: var(--accent-soft);
}

.problem-card-actions form {
 margin: 0;
}

/* ============================================================
  Final Problems CTA System
  Clear three-action model: Agree / Pay / Fix.
  ============================================================ */

.problem-card-action-panel {
 margin-top: 20px;
 display: grid;
 gap: 12px;
}

.problem-card-action-panel .view-details-row {
 display: grid;
}

.problem-card-action-panel .view-details-row .button {
 width: 100%;
 justify-content: center;
 text-align: center;
}

.problem-core-actions {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 10px;
}

.problem-core-actions form {
 margin: 0;
 display: grid;
}

.problem-core-actions .button,
.problem-core-actions button.button {
 min-height: 58px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 line-height: 1.15;
 width: 100%;
 white-space: normal;
}

.problem-agree-action {
 background: #ffffff;
 border-color: rgba(15, 143, 104, 0.28);
 color: var(--text);
}

.problem-agree-action:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: var(--accent-soft);
}

.problem-pay-action {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.problem-pay-action:hover {
 background: var(--accent-dark);
 border-color: var(--accent-dark);
 color: #ffffff;
}

.problem-fix-action {
 background: #ffffff;
 border-color: rgba(15, 143, 104, 0.34);
 color: var(--text);
}

.problem-fix-action:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: var(--accent-soft);
}

@media (max-width: 850px) {
 .problem-core-actions {
  grid-template-columns: 1fr;
 }
}

/* ============================================================
  Problem Agreement Counts + Sorting
  ============================================================ */

.problem-sort-panel {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 margin: 0 0 22px;
 padding: 16px 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
}

.problem-sort-panel label {
 font-weight: 900;
 color: var(--text);
}

.problem-sort-panel select {
 max-width: 240px;
}

.problem-stats-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 16px 0 0;
}

.problem-agree-count {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 11px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-size: 13px;
 font-weight: 900;
}

.problem-agree-count.loading {
 color: var(--muted);
 background: #ffffff;
 border: 1px solid var(--border);
}

.problem-card-action-panel {
 margin-top: 18px;
 display: grid;
 gap: 12px;
}

.problem-card-action-panel .view-details-row {
 display: grid;
}

.problem-card-action-panel .view-details-row .button {
 width: 100%;
 justify-content: center;
 text-align: center;
}

.problem-core-actions {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 10px;
}

.problem-core-actions .button,
.problem-core-actions button.button {
 min-height: 58px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 line-height: 1.15;
 width: 100%;
 white-space: normal;
}

.problem-agree-action {
 background: #ffffff;
 border-color: rgba(15, 143, 104, 0.28);
 color: var(--text);
}

.problem-agree-action:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: var(--accent-soft);
}

.problem-agree-action.agreed {
 color: var(--accent);
 border-color: var(--accent);
 background: var(--accent-soft);
}

.problem-pay-action {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.problem-pay-action:hover {
 background: var(--accent-dark);
 border-color: var(--accent-dark);
 color: #ffffff;
}

.problem-fix-action {
 background: #ffffff;
 border-color: rgba(15, 143, 104, 0.34);
 color: var(--text);
}

.problem-fix-action:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: var(--accent-soft);
}

@media (max-width: 850px) {
 .problem-core-actions {
  grid-template-columns: 1fr;
 }

 .problem-sort-panel {
  display: block;
 }

 .problem-sort-panel select {
  margin-top: 10px;
  max-width: 100%;
 }
}

/* ============================================================
  Problems Keyword Search + Unified Filtering
  ============================================================ */

.problem-search-panel {
 margin: 0 0 18px;
 padding: 18px;
 border: 1px solid var(--border);
 border-radius: 20px;
 background: #ffffff;
 display: grid;
 gap: 10px;
}

.problem-search-panel label {
 font-weight: 900;
 color: var(--text);
}

.problem-search-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 10px;
 align-items: center;
}

.problem-search-row input {
 min-height: 52px;
}

.problem-search-clear {
 min-height: 52px;
 white-space: nowrap;
}

.problem-search-help {
 color: var(--muted);
 font-size: 14px;
 margin: 0;
}

.problem-filter-button.active,
.filter-button.active,
.category-filter.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.problem-search-empty {
 display: none;
 margin: 18px 0;
 padding: 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
 color: var(--muted);
}

.problem-search-empty.show {
 display: block;
}

.problem-search-empty strong {
 color: var(--text);
}

@media (max-width: 650px) {
 .problem-search-row {
  grid-template-columns: 1fr;
 }

 .problem-search-clear {
  width: 100%;
  justify-content: center;
 }
}

/* ============================================================
  Problems Category Filter Rail
  Keeps category filters clean on one horizontal rail.
  ============================================================ */

.problem-filter-rail {
 display: flex;
 flex-wrap: nowrap;
 gap: 10px;
 align-items: center;
 overflow-x: auto;
 overflow-y: hidden;
 padding: 4px 0 12px;
 margin: 22px 0 28px;
 scrollbar-width: thin;
 -webkit-overflow-scrolling: touch;
}

.problem-filter-rail .button,
.problem-filter-rail button,
.problem-filter-rail a {
 flex: 0 0 auto;
 white-space: nowrap;
}

.problem-filter-rail::-webkit-scrollbar {
 height: 8px;
}

.problem-filter-rail::-webkit-scrollbar-track {
 background: transparent;
}

.problem-filter-rail::-webkit-scrollbar-thumb {
 background: rgba(24, 32, 28, 0.18);
 border-radius: 999px;
}

.problem-filter-rail::-webkit-scrollbar-thumb:hover {
 background: rgba(24, 32, 28, 0.28);
}

@media (max-width: 760px) {
 .problem-filter-rail {
  margin-top: 18px;
  padding-bottom: 10px;
 }
}

/* ============================================================
  Problems Category Filter Row Repair
  Compact, non-scrolling, consistent filter buttons.
  ============================================================ */

.problem-filter-rail {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 overflow: visible;
 padding: 0;
 margin: 20px 0 24px;
 scrollbar-width: none;
}

.problem-filter-rail::-webkit-scrollbar {
 display: none;
}

.problem-filter-rail .button,
.problem-filter-rail button,
.problem-filter-rail a {
 flex: 0 0 auto;
 min-height: 44px;
 padding: 10px 14px;
 border-radius: 999px;
 white-space: nowrap;
 font-size: clamp(13px, 0.82vw, 16px);
 line-height: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
}

.problem-filter-rail .problem-filter-button.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

@media (min-width: 1200px) {
 .problem-filter-rail {
  gap: 7px;
 }

 .problem-filter-rail .button,
 .problem-filter-rail button,
 .problem-filter-rail a {
  padding-left: 13px;
  padding-right: 13px;
 }
}

@media (max-width: 760px) {
 .problem-filter-rail {
  gap: 8px;
 }

 .problem-filter-rail .button,
 .problem-filter-rail button,
 .problem-filter-rail a {
  font-size: 14px;
 }
}

/* ============================================================
  Solutions Page Search + Filter Polish
  ============================================================ */

.solution-review-note {
 margin: 22px 0 24px;
 padding: 16px 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: rgba(255, 255, 255, 0.76);
 color: var(--muted);
 font-size: 15px;
 line-height: 1.45;
}

.solution-filter-rail {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin: 20px 0 24px;
}

.solution-filter-rail .button,
.solution-filter-rail button,
.solution-filter-rail a {
 flex: 0 0 auto;
 min-height: 44px;
 padding: 10px 14px;
 border-radius: 999px;
 white-space: nowrap;
 font-size: clamp(13px, 0.82vw, 16px);
 line-height: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
}

.solution-filter-button.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}

.solution-search-panel {
 margin: 0 0 18px;
 padding: 18px;
 border: 1px solid var(--border);
 border-radius: 20px;
 background: #ffffff;
 display: grid;
 gap: 10px;
}

.solution-search-panel label {
 font-weight: 900;
 color: var(--text);
}

.solution-search-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 10px;
 align-items: center;
}

.solution-search-row input {
 min-height: 52px;
}

.solution-search-clear {
 min-height: 52px;
 white-space: nowrap;
}

.solution-search-help {
 color: var(--muted);
 font-size: 14px;
 margin: 0;
}

.solution-search-empty {
 display: none;
 margin: 18px 0;
 padding: 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
 color: var(--muted);
}

.solution-search-empty.show {
 display: block;
}

.solution-search-empty strong {
 color: var(--text);
}

.solution-id-pill {
 display: none !important;
}

@media (max-width: 650px) {
 .solution-search-row {
  grid-template-columns: 1fr;
 }

 .solution-search-clear {
  width: 100%;
  justify-content: center;
 }
}

/* ============================================================
  Solutions Sorting
  Matches Problems sorting pattern.
  ============================================================ */

.solution-sort-panel {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 margin: 0 0 22px;
 padding: 16px 18px;
 border: 1px solid var(--border);
 border-radius: 18px;
 background: #ffffff;
}

.solution-sort-panel label {
 font-weight: 900;
 color: var(--text);
}

.solution-sort-panel select {
 max-width: 260px;
}

@media (max-width: 800px) {
 .solution-sort-panel {
  display: block;
 }

 .solution-sort-panel select {
  margin-top: 10px;
  max-width: 100%;
 }
}

/* ============================================================
  Start a Solution Flow Polish
  ============================================================ */

.start-solution-intro-card {
 margin: 22px 0 24px;
 padding: 20px 22px;
 border-radius: 22px;
 border: 1px solid var(--border);
 background: #ffffff;
}

.start-solution-intro-card strong {
 display: block;
 color: var(--text);
 margin-bottom: 6px;
}

.start-solution-intro-card p {
 margin: 0;
 color: var(--muted);
 line-height: 1.45;
}

.source-problem-notice {
 padding: 18px 20px;
 border: 1px solid rgba(15, 143, 104, 0.24);
 border-radius: 20px;
 background: var(--accent-soft);
 margin-bottom: 24px;
}

.source-problem-notice strong {
 display: block;
 color: var(--accent);
 margin-bottom: 6px;
}

.source-problem-notice p {
 color: var(--text);
 margin-bottom: 0;
 font-weight: 800;
}

.source-problem-notice.hidden {
 display: none;
}

.solution-privacy-note {
 margin: 18px 0;
 padding: 16px 18px;
 border-radius: 18px;
 border: 1px solid var(--border);
 background: rgba(255,255,255,0.78);
 color: var(--muted);
 line-height: 1.45;
}

.solution-privacy-note strong {
 color: var(--text);
}

.start-solution-submit-row .button,
.start-solution-submit-row button {
 justify-content: center;
}

/* ============================================================
  More Dropdown Close Behavior Repair
  Keeps More menu open only while cursor is realistically inside
  the trigger/menu area.
  ============================================================ */

.site-header .js-more-menu {
 display: none !important;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

.site-header .js-more-menu.is-open {
 display: block !important;
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}

.site-header .js-more-trigger {
 cursor: pointer;
}

.site-header .js-more-wrapper {
 position: relative;
}

/* ============================================================
  Problem Funding Status Badges
  Public status only. Exact funding totals stay private.
  ============================================================ */

.problem-funding-status {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 11px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 900;
 border: 1px solid var(--border);
 background: #ffffff;
 color: var(--muted);
}

.problem-funding-status.funding-open {
 background: #ffffff;
 color: var(--muted);
}

.problem-funding-status.funding-active {
 background: var(--accent-soft);
 color: var(--accent);
 border-color: rgba(15, 143, 104, 0.22);
}

.problem-funding-status.strong-funding-signal {
 background: #0F8F68;
 color: #ffffff;
 border-color: #0F8F68;
}

.problem-funding-status.funding-closed {
 background: rgba(24, 32, 28, 0.08);
 color: var(--muted);
}

/* ============================================================
  Help Fund a Fix Page Polish
  Trust-first, low-friction funding page.
  ============================================================ */

.help-fund-shell {
 max-width: 980px;
 margin: 0 auto;
}

.help-fund-panel {
 background: #ffffff;
 border: 1px solid var(--border);
 border-radius: 28px;
 padding: 32px;
 box-shadow: 0 18px 44px rgba(24, 32, 28, 0.045);
}

.help-fund-problem-box {
 padding: 18px 20px;
 border-radius: 20px;
 background: var(--accent-soft);
 border: 1px solid rgba(15, 143, 104, 0.18);
 margin-bottom: 22px;
}

.help-fund-problem-box strong {
 display: block;
 color: var(--accent);
 margin-bottom: 6px;
}

.help-fund-problem-box h2 {
 margin: 0;
}

.help-fund-private-note {
 margin: 18px 0 22px;
 padding: 17px 19px;
 border-radius: 18px;
 border: 1px solid var(--border);
 background: rgba(255,255,255,0.78);
 color: var(--muted);
 line-height: 1.45;
}

.help-fund-private-note strong {
 display: block;
 color: var(--text);
 margin-bottom: 6px;
}

.help-fund-terms-note {
 margin-top: 10px;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.4;
}

.help-fund-submit {
 margin-top: 20px;
 width: 100%;
 justify-content: center;
}

@media (max-width: 760px) {
 .help-fund-panel {
  padding: 24px;
 }
}

/* ============================================================
  Help Fund a Fix Trust Box Cleanup
  ============================================================ */

.help-fund-private-note {
 background: rgba(255,255,255,0.86);
}

.help-fund-private-note strong {
 font-size: 18px;
}

.bounty-disclosure {
 display: none !important;
}


/* ============================================================
   Auth Status Messages
   ============================================================ */

.auth-status {
  color: var(--muted);
  font-weight: 800;
}

.auth-status.error {
  color: #b42318;
}