/* landing.css: the front page (index.html) and credits.html.
   Loads after tokens.css, app.css and theme.css.
   v8: no boxes, few words. A headline and one button beside a photo, five phone screens
   with a short label each, three photos with one word each. Nothing moves on scroll. */

/* ---------- Column ---------- */
.lp-main { max-width: none; margin: 0; padding: 0; }
.lp-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }
.lp-main code { white-space: nowrap; }

.lp-arrow {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out);
}
a:hover > .lp-arrow { transform: translateX(2px); }

.lp-section { padding: 96px 0 0; }
.lp-section h2 { margin: 0 0 32px; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }

/* ---------- Hero ---------- */
.lp-hero { padding: 72px 0 24px; overflow-x: clip; }
.lp-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-hero h1 {
  margin: 0; max-width: 11ch;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 4.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.04em;
}
.lp-sub { margin: 20px 0 32px; font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); }
#lp-no-demo { margin: 0 0 20px; max-width: 30rem; }
.lp-also { margin: 16px 0 0; color: var(--ink-soft); }
.lp-also a { color: var(--ink-1); font-weight: 500; text-underline-offset: 3px; }
.lp-also a:hover { color: var(--green); }

/* Photo with the real app on a phone in front of its lower-left corner */
.lp-hero-art { position: relative; min-height: 540px; }
.lp-hero-photo { margin: 0 0 0 auto; width: 78%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; }
.lp-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-phone {
  position: absolute; left: 0; bottom: -10px; margin: 0; width: 42%; max-width: 230px;
  padding: 6px; border-radius: 32px; background: #fff;
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 24px 48px -20px rgba(24, 24, 27, .4);
}
.lp-phone img { display: block; width: 100%; height: auto; border-radius: 26px; }

/* ---------- Steps: five phone screens in a row, label underneath ---------- */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.lp-steps a { display: block; color: var(--ink-1); text-decoration: none; }
.lp-steps img {
  display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 0 0 1px var(--hairline), 0 12px 32px -16px rgba(24, 24, 27, .25);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.lp-steps a:hover img { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hairline-strong), 0 18px 36px -16px rgba(24, 24, 27, .3); }
.lp-step-label { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font-weight: 500; line-height: 1.35; }
.lp-step-label b { color: var(--green); font-weight: 600; }
.lp-steps a:hover .lp-step-label { color: var(--green); }

/* ---------- Photos: one word on each ---------- */
.lp-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-photos figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--surface-sunk); }
.lp-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-photos figcaption {
  position: absolute; inset: auto 0 0 0; padding: 48px 20px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  color: #fff; font-size: 1.25rem; font-weight: 600;
}
.lp-photo-note { margin: 12px 0 0; font-size: .8125rem; color: var(--ink-soft); }
.lp-photo-note a { color: inherit; }

.lp-main + .lp-footer { margin-top: 96px; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lp-hero-art { min-height: 0; max-width: 560px; width: 100%; margin-inline: auto; }
  /* Steps scroll sideways instead of shrinking */
  .lp-steps {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 200px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: -20px; padding-inline: 20px;
    scrollbar-width: none;
  }
  .lp-steps::-webkit-scrollbar { display: none; }
  .lp-steps li { scroll-snap-align: start; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .lp-wrap { padding-inline: 16px; }
  .lp-hero { padding: 40px 0 8px; }
  .lp-sub { font-size: 1.125rem; margin-bottom: 24px; }
  .lp-hero-copy .btn { width: 100%; }
  .lp-hero-photo { width: 80%; border-radius: 16px; }
  .lp-phone { width: 44%; border-radius: 24px; padding: 4px; }
  .lp-phone img { border-radius: 20px; }
  .lp-section { padding-top: 72px; }
  .lp-section h2 { margin-bottom: 24px; }
  .lp-steps { grid-auto-columns: 72%; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .lp-photos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-photos figure { aspect-ratio: 16 / 10; }
  .lp-main + .lp-footer { margin-top: 72px; }
}

/* ---------- Credits ---------- */
.credits-main { max-width: 1100px; margin: 0 auto; padding: 32px 16px 16px; }
.credits-main > section,
.credits-main > .page-head { max-width: 52rem; }
.credits-main code { white-space: nowrap; }
.credits-main > section + section { margin-top: 32px; }
.credits-main h2 { margin: 0 0 8px; }
.credits-main section p { margin: 0; max-width: 68ch; }
.credit-list { margin: 0; padding-left: 1.25rem; }
.credit-list li { margin: 6px 0; max-width: 72ch; }
.credits-main + .lp-footer { margin-top: 48px; }

/* ---------- Print: text only ---------- */
@media print {
  .lp-hero-art, .lp-steps img, .lp-photos { display: none; }
  .lp-steps { display: block; }
  .lp-section { padding-top: 24px; }
}