.ui-hero-wrap { padding-top: 36px; padding-bottom: 72px; }
.ui-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 980px) { .ui-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }
.ui-display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.04em; font-weight: 900; margin: 0; }
.ui-hero__sub { margin: 22px 0 0; font-size: var(--t-lead); line-height: 1.4; font-weight: 500; max-width: 30ch; }
.ui-hero__third { margin: 12px 0 0; color: var(--ink-2); max-width: 46ch; }
.ui-hero__actions { margin-top: 28px; }
.ui-hero__boat { max-width: 420px; margin: 0 auto -6px; }

.ui-stats { margin: 22px 0 0; font: 0.875rem var(--mono); color: var(--ink-2); }
.ui-stats strong { color: var(--ink); font-weight: 600; }

.ui-example { border: 1px solid var(--hairline); background: var(--card); border-radius: var(--radius-card); padding: 16px 18px; margin: 0; }
.ui-example__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ui-example__source { font: 0.75rem var(--mono); color: var(--ink-2); }
.ui-example__title { margin: 6px 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.ui-example__row { padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 0.9375rem; }
.ui-example__why { display: block; font-size: 0.875rem; color: var(--ink-2); }
.ui-example__row--quiet { color: var(--ink-2); }

.ui-connect { padding-top: 72px; padding-bottom: 72px; }
.ui-stepshead { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 20px; }
.ui-stepshead .ui-cameo { width: 58px; }
@media (max-width: 759px) { .ui-stepshead { gap: 10px; } .ui-stepshead .ui-cameo { width: 40px; } }

.ui-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.ui-steps__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.ui-steps__n { font: 600 0.875rem var(--mono); color: var(--ink-2); }
.ui-steps__name { font-size: var(--t-h5); font-weight: 700; letter-spacing: -0.01em; }
.ui-steps__sub { grid-column: 2; font: 0.8125rem var(--mono); color: var(--ink-2); }
.ui-steps__time { font: 600 0.875rem var(--mono); }

.ui-promptbox {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-menu);
}
.ui-promptbox__text { margin: 0; flex: 1 1 300px; font: 0.875rem var(--mono); }
.ui-connect__go { margin-top: 24px; }

.ui-quickfilters { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 8px; }
.ui-sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ui-sechead--tight { margin-bottom: 10px; }

.ui-chero-wrap { padding-top: 36px; padding-bottom: 80px; }
.ui-chero { max-width: 960px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ui-chero__boat { width: 220px; max-width: 60%; margin: 0 auto 18px; }
.ui-chero__eyebrow { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ui-chero__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-size: clamp(1.875rem, 8.6vw, 2.5rem);   text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}
@media (min-width: 760px) {
  .ui-chero__title { font-size: 3.25rem; }   .ui-chero__line { display: block; white-space: nowrap; } }
@media (min-width: 860px) { .ui-chero__title { font-size: 3.5rem; } } @media (min-width: 1100px) { .ui-chero__title { font-size: 4rem; } } .ui-chero__sub { margin: 22px auto 0; font-size: 1.25rem; line-height: 1.45; font-weight: 500; max-width: 60ch; color: var(--ink-soft); }
.ui-chero__actions { display: flex; align-items: center; justify-content: center; gap: 12px 22px; flex-wrap: wrap; margin-top: 28px; }
.ui-chero__browse { font-weight: 600; text-decoration: underline; text-decoration-color: var(--highlight); text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--ink); }
@media (max-width: 759px) {
  .ui-chero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .ui-chero__actions .ui-btn { justify-content: center; }
  .ui-chero__browse { align-self: center; padding: 10px 0; }
}
.ui-chero .ui-stats { margin-top: 18px; font: 0.875rem var(--sans); color: var(--ink-2); }
.ui-stats__n { font: 600 0.8125rem var(--mono); color: var(--ink); }

.ui-connect__note { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.ui-stats__part { white-space: nowrap; }