/* Hero: the claim, centered, under a light from above. No product UI:
   the type, one line on why, the way in, and the institutions below. */

/* The foot tops the band's own 38 (beside its caption; 28 once it
   stacks) up to a section's space, so the gap down to Dashboards matches
   the gap between any two sections. */
.hero { padding-top: 120px; padding-bottom: calc(var(--sec-y) - 38px); isolation: isolate; text-align: center; }

/* The ground: the app's dot field, gathered into a soft oval around the
   headline, and a light falling from above it whose rays drift a few
   degrees over a long breath. Clipped to the hero by its own box, so the
   frame's joints stay whole. */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-light {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 1600px;
  height: 1100px;
  margin-left: -800px;
  transform-origin: 50% 0;
  background:
    radial-gradient(34% 40% at 50% 18%, oklch(1 0 0 / 0.13), transparent 72%),
    conic-gradient(from 180deg at 50% 0%, transparent 146deg, oklch(1 0 0 / 0.075) 166deg, transparent 173deg, oklch(1 0 0 / 0.05) 181deg, transparent 188deg, oklch(1 0 0 / 0.065) 196deg, transparent 214deg);
  /* It starts at the hero's top edge, under the bar, and fades in over
     the first 200px, so the bar never cuts it in a hard line. */
  -webkit-mask: linear-gradient(transparent 40px, #000 240px, transparent 82%);
  mask: linear-gradient(transparent 40px, #000 240px, transparent 82%);
  animation: hero-sway 16s ease-in-out infinite alternate;
}
@keyframes hero-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
/* The phone's horizon (responsive.css shows it). Desktop keeps just
   the light. */
.hero-horizon { display: none; }

.hero-copy { display: flex; flex-direction: column; align-items: center; }

/* The announcement, in the app's pill and badge. */
.launch-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px 0 6px;
  border-radius: 96px;
  background: oklch(0.153 0 0 / 0.85);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14);
  color: oklch(0.985 0 0);
  transition: background-color 140ms var(--ease);
}
.launch-pill:hover { background: oklch(0.2 0 0 / 0.9); }
.launch-pill .ico { color: oklch(0.709 0 0); stroke-width: 2; transition: transform 240ms var(--spring), color 140ms var(--ease); }
.launch-pill:hover .ico { transform: translateX(2px); color: oklch(0.985 0 0); }

/* Two lines, on purpose, in a white that cools toward its foot. The
   padding keeps the descenders inside the clipped fill.
   The stack steps evenly, 36 a gap, read as the eye reads it: from the
   pill's edge to the headline's capitals, from the headline's baseline to
   the subhead's capitals, and on down. The headline's box stands 0.16em
   above its capitals and 0.255em below its baseline; its margins take
   that back, so each gap is set by the margin under it alone. */
.hero-title { margin-top: calc(36px - 0.16em); margin-bottom: -0.255em; padding-bottom: 0.06em; font-size: 96px; line-height: 0.98; letter-spacing: -0.036em; background: linear-gradient(180deg, #fff 38%, oklch(0.76 0 0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ht-ln { display: block; }
.keep { white-space: nowrap; }
.hero-lead { margin-top: 36px; max-width: 600px; font-size: 19px; line-height: 29px; text-wrap: balance; }
/* The ways in: equal columns, each as wide as the wider label, so the
   pair always reads as a matched set. */
.hero-ctas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }

/* ---------- The way in ---------- */
/* Plaid first: the app's own Connect button (its welcome screen's), the
   label and Plaid's wordmark in the button's ink, the mark 22 tall and
   tucked 2px toward the words. Claude second, as an outline pill with
   Claude's mark. Under them, the welcome screen's three facts. */
.cta-plaid { gap: 8px; }
.cta-plaid .plaid-mark { display: block; flex: none; width: 58.39px; height: 22px; margin-left: -2px; fill: currentColor; }
.cta-claude { gap: 8px; border-color: var(--ui-line); color: var(--ui-ink); background: oklch(1 0 0 / 0.02); }
.cta-claude .brand { width: 16px; height: 16px; }
@media (hover: hover) {
  .cta-claude:hover { background: oklch(0.239 0 0 / 0.9); border-color: var(--ui-line-strong); }
}
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: 31px; font-size: 13px; line-height: 18px; color: var(--ui-ink-3); }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-trust .ico { width: 13px; height: 13px; stroke-width: 2; }

/* On a phone, Claude's way in is a link under the one button. */
.tl-short { display: none; }

/* ---------- Institutions, through Plaid ---------- */
/* The hero's floor: Plaid's lockup and what it connects on the left, two
   rows of the institutions' own marks drifting opposite ways on the
   right. Hovering holds them still. */
.trustband {
  position: relative;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  margin: 112px calc(-1 * var(--pad)) 0;
  text-align: left;
}
.tb-head { display: flex; flex-direction: column; justify-content: center; padding: 32px 32px 34px var(--pad); }
.tb-lock { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.011em; color: var(--ink); }
.tb-lock .plaid-mark { flex: none; width: 58.39px; height: 22px; fill: var(--ink); }
.tb-sub { margin-top: 8px; font-size: 13.5px; line-height: 20px; letter-spacing: -0.003em; color: var(--ink-3); text-wrap: pretty; }

.marquee {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 28px 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.mq-row { display: flex; overflow: hidden; }
.mq-track { display: flex; flex: none; animation: mq-drift 52s linear infinite; }
.mq-row.rev .mq-track { animation-duration: 60s; animation-direction: reverse; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq-drift { to { transform: translateX(-50%); } }
.mq-set { display: flex; flex: none; gap: 12px; padding-right: 12px; }
.mq-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 8px;
  border-radius: 12px;
  background: oklch(0.153 0 0 / 0.85);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink-2);
  white-space: nowrap;
}
.mq-logo { display: block; flex: none; width: 28px; height: 28px; border-radius: 7px; background: #fff; object-fit: cover; }