.home-page { color: var(--ink); }

.home-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.home-main { flex: 1; }

/* ---- hero ---- */

.hero {
  /* Top air recreates Feed's: 4rem from <PageChrome>.page-chrome-main
     (var(--space-16)) + 2rem from the canonical h1 margin-top = 6rem
     total. /home doesn't use PageChrome, so we put the combined
     value on .hero directly. The result is that navigating between
     /home and /feed shows the page title at the same Y on both. */
  padding: 6rem 0 2.5rem;
}

.hero-title {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  /* Floor 40px (2.5rem) — same as the canonical page-h1 mobile
     scale, so inner-page titles never exceed the hero. On phones
     this overflows the 312-432px container width, so the headline
     wraps to two lines ("The stack for / web apps.") which is fine
     and actually feels more present at small sizes than a single
     squeezed line. 8vw lifts mid-range phones above the floor;
     desktop caps at 68px (practical max before the headline bumps
     the 820px container's inner edge). */
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* The subtitle used to carry the breathing room between title and
     CTAs. Without it the CTA row crowds the headline — bump the
     bottom margin so the hero stays balanced. */
  margin: 0 0 3rem;
}

.hero-sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.35;
  /* More breathing room before the CTA row — the previous 2rem read
     as cramped against the heavy hero title above. */
  margin: 0 0 3.25rem;
  font-weight: var(--font-semibold);
  letter-spacing: -0.015em;
}

.hero-sub .accent-phrase {
  color: var(--accent);
  font-weight: var(--font-bold);
}

/* one-time sky shimmer through the accent phrase on load — bright white
   highlight at the peak for a more pronounced sweep than sky→sky-deep */
.home-shimmer {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--sky) 0%,
    var(--sky) 40%,
    #bfd7ef 50%,
    var(--sky) 60%,
    var(--sky) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: home-shimmer 700ms ease-in-out 0ms forwards;
}

@keyframes home-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position:   0% 50%; }
}

.hero-sub-two {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 34rem;
}

.cta-row {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

/* The secondary CTA pairs with the ink-filled primary — the default
   `--rule` border (light gray) reads wispy next to that weight, like
   primary + ghost rather than two siblings. Bump the border to ink
   at low opacity so both buttons feel anchored in the same color
   family without giving the secondary fill weight. */
/* Secondary CTA — the outlined "Watch the intro" button next to the
   ink-filled primary. The `--rule` border (light gray) reads wispy
   next to the ink weight, so bump to ink at low opacity. */
.cta-row .button:not(.is-primary) {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.cta-row .button:not(.is-primary):hover {
  border-color: color-mix(in srgb, var(--ink) 38%, transparent);
}

/* <VideoPlay/> sits on the RIGHT of the secondary CTA label. Tight
   left margin so the icon hugs the text, not floating in the
   button's padding. */
.cta-row .button .video-play {
  margin-left: 0.375rem;
}
.cta-row .button .video-play svg {
  stroke: var(--ink);
}
.cta-row .button .video-play svg path {
  fill: var(--ink);
}

.cta-row .duration {
  color: var(--ink-dim);
  font-weight: var(--font-regular);
  margin-left: 0.25rem;
}

/* ---- feed ---- */

/* No top rule between hero and feed and no FEED label — the feed
   reads as a continuation of the page, not a separate band. The
   hero's bottom margin + the feed's first row carry the visual
   transition on their own. */
.feed-wrap {
  width: 100%;
}

/* Tighter shell than .shell-marketing so the feed rows pick up more
   horizontal space than the hero copy above. The hero stays at
   shell-marketing's narrower column for readable lines; the feed
   uses the wider container so titles + meta breathe. */
.home-feed-shell {
  width: 100%;
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-4);
}


.feed-section {
  /* Top padding shrunk now that the FEED label is gone — the hero
     bottom edge sets the band. Bottom keeps the deep air before
     the footer. */
  padding: 0.5rem 0 10rem;
}

.section-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2.5rem;
}

/* ---- mobile ---- */

@media (max-width: 700px) {
  /* Top padding matches the canonical 48px above-h1 air on the
     other pages: <PageChrome>.page-chrome-main contributes 24px of
     chrome padding on mobile and the canonical h1 adds 24px of
     margin-top. Home doesn't use PageChrome, so we recreate the
     combined 48px in the hero element directly. */
  .hero { padding: 3rem 0 2.25rem; }
  .hero-title {
    max-width: none;
    /* Title-to-CTA spacing on mobile — 0.75rem read as cramped, the
       two blocks visually touched. Bumped to 1.75rem so the H1 has
       breathing room before the install + intro stack. */
    margin-bottom: 1.75rem;
  }
  .hero-sub {
    font-size: 1.125rem;
    margin-bottom: 2rem;
  }

  .hero-sub-two { margin-bottom: 1rem; }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .cta-row .button { width: 100%; }

  /* Tight air between the hero CTAs and the first feed row. The
     feed is the center of gravity on the home page — don't bury
     it under whitespace. */
  .home-feed-shell { padding: 0 var(--space-3); }
  .feed-section { padding: 0.5rem 0 2rem; }
  .section-foot { margin-top: 3rem; }
}

/* ---- landscape phones ---- */

/* Phones in landscape exceed the 700px max-width above (iPhone 14
   Pro = 844px wide rotated) but the viewport height collapses to
   ~390px. The desktop hero padding of 8rem 0 6rem leaves only a
   thin strip of content visible above the fold. Compress to phone-
   like padding when the viewport is short and wide. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding: 1.5rem 0 1.25rem; }
  .hero-title { max-width: none; margin-bottom: 0.75rem; }
  .hero-sub { margin-bottom: 1.25rem; }
  .feed-section { padding: 1rem 0 2rem; }
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .home-shimmer {
    animation: none !important;
  }
  .home-shimmer {
    background: var(--sky);
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--sky);
    -webkit-text-fill-color: currentColor;
  }
}