/* Landing page sections. Values come from tokens.css only. */

.icon-success { color: var(--icon-success); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--spacing-900); padding-bottom: var(--spacing-700); }
.hero-copy { padding-top: var(--spacing-800); display: grid; justify-items: center; text-align: center; }
.hero-title {
  max-width: 680px;
  margin-inline: auto;
  background-image: linear-gradient(90deg, var(--text-hero-start), var(--text-hero-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: var(--spacing-50);
}
.hero-sub { max-width: 680px; margin-top: var(--spacing-300); }
.hero-actions { margin-top: var(--spacing-400); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-100); }
.hero-proof { margin-top: var(--spacing-200); max-width: 680px; }
.hero-proof i { display: inline-block; vertical-align: -2px; margin-right: var(--spacing-50); color: var(--icon-success); font-size: 1rem; }

.hero-preview { margin-top: var(--spacing-700); }
.preview-tabs { display: flex; gap: var(--spacing-25); padding: var(--spacing-25); border: 1px solid var(--border-primary); border-radius: var(--radius-8); }
/* Nested radius: 8 outer minus 2 gap = 6 */
.preview-tabs span { white-space: nowrap; padding: var(--spacing-25) var(--spacing-75); border-radius: var(--radius-6); color: var(--text-tertiary); }
.preview-tabs .is-on { background-color: var(--surface-secondary); color: var(--text-primary); }
.preview-wallet { display: flex; flex-direction: column; }
.preview-note { display: flex; align-items: center; gap: var(--spacing-50); margin-top: auto; padding-top: var(--spacing-200); }
.preview-frame {
  display: grid; grid-template-columns: 320px 1fr; gap: var(--spacing-75);
  padding: var(--spacing-75);
  max-width: 1040px; margin-inline: auto;
  background-color: var(--surface-primary-subtle);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-16);
}
.preview-bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200);
  padding: var(--spacing-50) var(--spacing-100);
}
/* Nested radius: 16 outer minus 8 gap = 8 */
.preview-wallet, .preview-results {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-8);
  padding: var(--spacing-300);
}
.preview-list, .mini-wallet { display: grid; margin-top: var(--spacing-100); }
.preview-list li, .mini-wallet li, .preview-options li {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200);
  padding-block: var(--spacing-100);
}
/* Row dividers are 1px rectangles, not one sided borders */
.preview-list li + li::before, .mini-wallet li + li::before, .preview-options li + li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--border-primary);
}
.preview-route { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); flex-wrap: wrap; }
.preview-route p { display: flex; align-items: center; gap: var(--spacing-75); }
.preview-options { display: grid; margin-top: var(--spacing-200); }
.preview-options li { padding-block: var(--spacing-200); }
.preview-right { display: flex; align-items: center; gap: var(--spacing-200); }
.hero-preview figcaption { margin-top: var(--spacing-100); text-align: center; }

/* ---------- Problem to solution ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-300); }
.compare-card { padding: var(--spacing-400); display: grid; gap: var(--spacing-300); align-content: start; }
.compare-card-good { border-color: var(--border-action-primary); }
.compare-list { display: grid; gap: var(--spacing-200); }
.compare-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--spacing-100); align-items: start; }
.compare-list i { font-size: 1.25rem; margin-top: var(--spacing-25); }

/* ---------- Benefits bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--spacing-300); }
.bento-card { padding: var(--spacing-400); display: flex; flex-direction: column; gap: var(--spacing-400); }
.bento-wide { grid-column: span 7; }
.bento-narrow { grid-column: span 5; }
.bento-text { display: grid; gap: var(--spacing-75); max-width: 440px; }
.bento-card > :last-child { margin-top: auto; }
.mini-wallet {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-12);
  padding: var(--spacing-50) var(--spacing-200);
}
.mini-yes, .mini-no, .mini-info { display: inline-flex; align-items: center; gap: var(--spacing-50); white-space: nowrap; }
.mini-yes { color: var(--text-success); }
.mini-no { color: var(--text-secondary); }
.mini-no i { color: var(--icon-subtle); }
.mini-info { color: var(--text-info); }
.transfer-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-75); align-self: flex-start;
  padding: var(--spacing-100) var(--spacing-200);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-12);
}
.transfer-pill i { color: var(--icon-subtle); }
.route-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
.route-chips .chip {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  padding: var(--spacing-75) var(--spacing-100);
  border: 1px solid var(--border-primary-light);
  border-radius: var(--radius-full);
  background-color: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), transform 200ms var(--ease);
}
.route-chips .chip:hover { background-color: var(--surface-primary-hover); }
.route-chips .chip:active { transform: scale(0.97); }
.route-chips .chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.route-chips .chip[aria-pressed="true"] { background-color: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-action); }
.route-demo { display: grid; gap: var(--spacing-200); }
.route-results { margin-top: 0; min-height: 168px; }
.route-results li { transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.route-results li.is-entering { opacity: 0; transform: translateY(8px); }
.route-results .badge { white-space: nowrap; }
.route-results .rr-right { display: flex; align-items: center; gap: var(--spacing-100); }


/* ---------- Tagline reveal ---------- */
.tagline { min-height: 64vh; display: flex; align-items: center; }
.tagline-text { max-width: 680px; margin-inline: auto; text-align: center; }
.tagline-text [data-line] { display: block; }
.tagline-text br { display: none; }
/* 50% keeps unlit words at 3:1 or better on both grounds (large text) */
.word { color: color-mix(in srgb, var(--text-primary) 50%, var(--surface-primary)); transition: color 500ms var(--ease); }
.word.is-active { color: var(--text-primary); }

/* ---------- How it works ---------- */
.step-num {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border-primary-light);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

/* ---------- Programs ---------- */
.programs { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-300); }
.program-group {
  display: grid; gap: var(--spacing-200); align-content: start;
  padding: var(--spacing-300);
  background-color: var(--surface-primary-subtle);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-16);
}
.program-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-75); }
.program-list li {
  padding: var(--spacing-100) var(--spacing-200);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-8);
}
.programs-note { margin-top: var(--spacing-200); }

/* ---------- Quotes ---------- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-300); }
.quote { padding: var(--spacing-400); display: grid; gap: var(--spacing-200); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: 5fr 7fr; gap: var(--spacing-700); align-items: start; }
.faq-layout .section-head { position: sticky; top: var(--spacing-900); margin-bottom: 0; }
.faq details { position: relative; }
.faq details + details::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--border-primary); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200);
  padding-block: var(--spacing-300);
  cursor: pointer; list-style: none;
  border-radius: var(--radius-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex-shrink: 0; font-size: 1.25rem; color: var(--icon-subtle); transition: transform 500ms var(--ease); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--spacing-300); max-width: 600px; }

/* ---------- Final CTA ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; gap: var(--spacing-400); }
  .faq-layout .section-head { position: static; }
  .programs { grid-template-columns: 1fr; }
  .bento-wide, .bento-narrow { grid-column: span 12; }
}
@media (max-width: 760px) {
  .preview-frame { grid-template-columns: 1fr; }
  .compare, .quotes { grid-template-columns: 1fr; }
  .preview-options li { flex-direction: column; align-items: flex-start; gap: var(--spacing-75); }
  .bento-card { min-height: 0; }
}
@media (max-width: 640px) {
  .hero-copy { padding-top: var(--spacing-600); }
  .compare-card, .bento-card, .quote { padding: var(--spacing-300); }
    .preview-wallet, .preview-results { padding: var(--spacing-200); }
  .preview-tabs { display: none; }
  .tagline { min-height: 0; }
}