/* ============================================================
   Landing page. base.css holds the shared system; this file is
   only the single-screen hero composition.
   ============================================================ */

html, body { height: 100%; overflow: hidden; }

.hero {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  width: 100%; height: 100vh; height: 100dvh;
  pointer-events: none;                 /* only interactive children opt back in */
}
.hero > .nav { pointer-events: none; }

/* The rules sit inside the hero here, not fixed to the page. */
.hero .rule { position: absolute; }

.hero-bottom {
  position: relative; z-index: 2;
  margin-top: auto;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 0 1.25rem 1.5rem;
}
@media (min-width: 640px) { .hero-bottom { padding: 0 1.5rem 2rem; } }
@media (min-width: 768px) {
  .hero-bottom {
    flex: 1; margin-top: 0;
    flex-direction: row; align-items: stretch; justify-content: space-between;
    gap: 3rem; padding: 2rem 3rem 3rem;
  }
  .lede { align-self: flex-start; }
  .card { align-self: flex-end; }
}

/* ---------- left column ---------- */
.lede { max-width: 24rem; }
.lede__title { font-size: 1.25rem; font-weight: 300; line-height: 1.25; letter-spacing: -0.025em; }
.lede__body  { margin: 0.75rem 0 0; max-width: 34ch; font-size: 0.75rem; line-height: 1.625; color: var(--ink-2); }

@media (min-width: 640px)  { .lede__title { font-size: 1.5rem; }   .lede__body { font-size: 0.875rem; } }
@media (min-width: 768px)  { .lede__title { font-size: 1.875rem; } .lede__body { margin-top: 1rem; } }
@media (min-width: 1024px) { .lede__title { font-size: 2.25rem; } }

/* The lede's button is sized to the composition, and its frosted backing
   exists only below 640px — above that the hairline outline carries it alone. */
.lede .chamfer { width: 220px; margin-top: 1.5rem; }
@media (min-width: 640px) {
  .lede .chamfer { width: 260px; }
  .lede .chamfer__glass { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
}
@media (min-width: 768px) { .lede .chamfer { margin-top: 2rem; } }

/* ---------- the glass card ---------- */
.card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 340px; max-width: 100%; height: 460px;
  padding: 2rem;
  border-radius: 48px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--panel-line);
  pointer-events: auto;
  animation: fade-slide-up-card 900ms var(--ease) both;
}
/* On a short phone the full 460px pushes the copy off the top, and the page
   never scrolls, so the card gives up height before the lede does. */
@media (max-width: 767px) { .card { height: min(460px, 52vh); min-height: 300px; } }

@keyframes fade-slide-up-card {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card__head, .card__body, .card__wave { position: relative; z-index: 2; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
              padding-bottom: 0.75rem; border-bottom: 1px solid var(--hair); }
.card__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.025em; }
.card__index { font-size: 0.75rem; color: var(--ink-3); }
.card__body { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.finding__title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.025em; }
.finding__text { margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 1.625; color: var(--ink-2); max-width: 40ch; }
.card__wave { display: block; width: 100%; height: auto; margin-top: 1.25rem; }
.card__wave path { stroke: var(--ink); }

@media (min-width: 640px) { .card__title { font-size: 1.125rem; } }
@media (min-width: 768px) {
  .card__head { padding-bottom: 1rem; }
  .card__title { font-size: 1.25rem; }
  .card__body { gap: 1.25rem; margin-top: 1.25rem; }
  .finding__title { font-size: 1rem; }
  .finding__text { font-size: 0.875rem; margin-top: 0.375rem; }
  .card__wave { margin-top: 1.5rem; }
}