/* =============================================================================
   / — homepage layout only.
   Every component, token, colour and type style comes from core.css. Nothing
   here restyles a component; these rules arrange this page's sections and
   nothing else. No token is redeclared, no font-family is declared, and no
   length, colour, radius, duration or easing is written by hand.
   ============================================================================= */

/* 1 · Hero ------------------------------------------------------------------
   Copy left, live workflow canvas right. The split waits until there is room
   for both a masked six-line H1 and a six-node canvas: below that the canvas
   drops under the CTA in source order, which is where it belongs on a phone.
   58/42 rather than the brief's 46/54: the H1 is masked line by line, and a
   masked line that wraps reveals as one block, so the copy column has to hold
   the longest line whole. At 1120 the longest line measures 528px against a
   566px column — 38px of slack. At 46% it would wrap at every desktop width. */
.page-home .hero-grid{
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1120px){
  .page-home .hero-grid{ grid-template-columns: 58fr 42fr; }
}

/* Hero content stands 1100px tall unaided, so it takes the small top pad:
   --section-lg put 220px of empty paper under the nav and pushed the primary
   CTA below the fold on a 900px laptop. */
.page-home .home-hero{ padding-top: var(--section-sm); }

/* The H1 size steps down with the column, because a masked line that wraps
   reveals as one block. Longest line vs column, measured: 528/566 at 1120,
   294/335 at 375, 242/280 at 320. --fs-5xl wraps three of the six at 375;
   --fs-4xl bottoms out at its 2.20rem floor and wraps them again below 375. */
@media (max-width: 1119px){
  .page-home .hero-copy h1{ font-size: var(--fs-4xl); }
}
@media (max-width: 374px){
  .page-home .hero-copy h1{ font-size: var(--fs-3xl); }
}

/* The proof line sits under a hairline so it reads as a footnote to the offer
   rather than a fourth sentence of it. */
.page-home .hero-proof{
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

/* 2 · Trust strip — four short claims, icon above label. */
.page-home .trust-item{
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.page-home .trust-item svg{
  width: var(--space-6);
  height: var(--space-6);
  color: var(--ink-muted);
}

/* 4 · Dark stage — annotated screenshots.
   Desktop: three frames offset vertically so they read as a stack of real
   windows rather than a strip of thumbnails.
   Mobile: a snap rail, because a full-width screenshot at phone width is a
   grey smear and a rail invites the swipe instead. */
.page-home .shot-rail{ --gap: var(--space-8); }
@media (min-width: 980px){
  .page-home .shot-rail > :nth-child(2){ margin-top: var(--space-10); }
  .page-home .shot-rail > :nth-child(3){ margin-top: var(--space-16); }
}
@media (max-width: 979px){
  .page-home .shot-rail{
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Fixed, not minmax(0, 78vw): a length max is only a growth LIMIT, so the
       three tracks split the free space and land at 90px instead of railing. */
    grid-auto-columns: 78vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
  }
  .page-home .shot-rail > *{ scroll-snap-align: start; }
}
.page-home .shot-key{
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* 5 · Cutting Edge — the one real client. Text first on a phone, image first
   on desktop is wrong here: the three beats are the argument. */
.page-home .case-media{ --ratio: 16 / 9; }
.page-home .case-beats{ margin-top: var(--space-10); }

/* 6 · Founder strip — portrait left at 42/58, signature under the paragraphs. */
.page-home .founder-grid{
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 860px){
  .page-home .founder-grid{ grid-template-columns: 42fr 58fr; }
}
.page-home .founder-portrait{ --ratio: 4 / 5; }
.page-home .founder-signature{
  width: calc(var(--space-16) * 3);
  height: auto;
  margin-top: var(--space-2);
}

/* 9 · Process — the connecting rule draws itself as the list passes through
   the viewport, and each numeral marks as it crosses the middle. Both are
   scroll-driven CSS, so there is no scroll listener and no page module. Where
   scroll timelines are unsupported the rule is simply already drawn, which is
   the state core.css ships by default. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .page-home .process-steps::before{
      animation: home-rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 80% cover 65%;
    }
    .page-home .process-steps .step-num{
      animation: home-step-mark linear both;
      animation-timeline: view();
      animation-range: cover 42% cover 52%;
    }
  }
}
@keyframes home-rule-draw{
  from{ transform: scaleY(0); }
  to{ transform: scaleY(1); }
}
@keyframes home-step-mark{
  to{
    border: 1px solid var(--gold-surface);
    color: var(--gold-text);
  }
}

.page-home .not-for-note{ margin-top: var(--space-10); }
.page-home .not-for{ margin-top: var(--space-16); }

/* 10 · Data and stack — the stack list keeps its tool name on its own line. */
.page-home .stack-list dt{
  font-weight: 600;
  color: var(--ink);
}
.page-home .stack-list dd{
  margin-top: var(--space-1);
  color: var(--ink-body);
}
.page-home .stack-list div + div{ margin-top: var(--space-5); }

/* 12 · Final CTA — the three paths, then the form beside the face. */
.page-home .next-steps{ margin-bottom: var(--space-14); }
.page-home .close-grid{
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 900px){
  .page-home .close-grid{ grid-template-columns: 62fr 38fr; }
}
.page-home .close-face{
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--r-pill);
  object-fit: cover;
}
.page-home .close-aside > * + *{ margin-top: var(--space-6); }
.page-home .close-direct{
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}