/* Landing — tripsplit.ventureapp.world/ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: clamp(24px, 3vw, 40px) var(--space-2xl);
}
@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .hero-example { position: sticky; top: var(--space-lg); margin-top: var(--space-lg); isolation: isolate; }
  .hero-example::before {
    content: ''; position: absolute; inset: -80px -60px; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 55% at 50% 40%, rgba(212, 165, 116, 0.10), transparent 70%);
  }
}
/* Laptops with short screens: keep "Start the split" above the fold. */
@media (min-width: 960px) and (max-height: 800px) {
  .hero { padding-top: var(--space-md); }
  .hero-copy { gap: var(--space-sm); }
  .hero-title { font-size: clamp(2.5rem, 7.4vh, 3.6rem); }
  .start { gap: var(--space-sm); padding-top: var(--space-sm); }
}
.hero-copy { display: grid; gap: var(--space-md); align-content: start; }
.hero-title { font-size: clamp(2.5rem, 1.6rem + 3.3vw, 4rem); max-width: 15.5ch; }
.hero-copy .lead { max-width: 44ch; }
.hero-copy .eyebrow { margin-bottom: calc(-1 * var(--space-xs)); }

.start {
  display: grid; gap: var(--space-md);
  margin-top: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  max-width: 560px;
}
.start-row { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .start-row { grid-template-columns: minmax(0, 1fr) 132px; align-items: start; }
}
.start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.start .form-error:empty { display: none; }

.example-note { margin-top: var(--space-sm); max-width: 44ch; }

/* sections below the fold */
.band {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--rule);
}
.section-title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-2xl);
  line-height: 1.15; letter-spacing: -0.01em; margin: var(--space-2xs) 0 var(--space-sm);
  text-wrap: balance;
}
.band-copy { max-width: 52ch; margin: 0; color: var(--text-2); }

.recent { padding-bottom: var(--space-2xl); }
.recent .section-title { font-size: var(--t-xl); }
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 640px; }
.recent-list li + li { border-top: 1px solid var(--rule); }
.recent-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-xs) 0; text-decoration: none; color: var(--text);
}
.recent-list a:hover .recent-title { color: var(--gold-bright); }
.recent-title { font-family: var(--font-display); font-size: var(--t-lg); overflow-wrap: anywhere; }
.recent-when { font-size: var(--t-sm); color: var(--text-3); white-space: nowrap; }

/* the app the tool belongs to */
.venture-band { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 860px) {
  .venture-band { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(48px, 6vw, 96px); }
}
.venture-copy { display: grid; gap: var(--space-md); justify-items: start; }
.venture-copy .section-title { margin: 0; }
.store-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.venture-shot { margin: 0; justify-self: center; width: min(100%, 300px); }
.venture-shot img {
  width: 100%; height: auto; border-radius: 28px;
  border: 1px solid var(--rule-strong); background: var(--card);
  box-shadow: 0 40px 80px -40px #000, inset 0 1px 0 color-mix(in oklab, var(--gold-bright) 8%, transparent);
}
.code-form { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--rule); width: 100%; max-width: 520px; }
.code-label { font-size: var(--t-sm); color: var(--text-2); }
.code-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.code-input {
  width: 152px; height: 48px; min-height: 0; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: 0.2em;
  text-align: center; padding-inline: var(--space-sm);
}
.code-form .form-error:empty { display: none; }

.method-list {
  list-style: none; margin: var(--space-lg) 0 0; padding: 0; counter-reset: m;
  display: grid; gap: var(--space-lg) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.method-list li { counter-increment: m; display: grid; gap: var(--space-2xs); align-content: start; }
.method-list li::before {
  content: counter(m, decimal-leading-zero);
  font-family: var(--font-display); font-style: italic; font-size: var(--t-xl);
  color: var(--gold); line-height: 1; margin-bottom: var(--space-2xs);
}
.method-list h3 { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--text); }
.method-list p { margin: 0; color: var(--text-2); max-width: 40ch; }

.faq-list { margin: var(--space-md) 0 0; display: grid; gap: 0; max-width: 760px; }
.faq-list > div { padding: var(--space-sm) 0; border-top: 1px solid var(--rule); display: grid; gap: var(--space-3xs); }
.faq-list > div:last-child { border-bottom: 1px solid var(--rule); }
.faq-list dt { font-weight: 600; color: var(--text); }
.faq-list dd { margin: 0; color: var(--text-2); max-width: 62ch; }

.colophon { margin-top: 0; }