/* Homepage light restyle. The light sibling of landing-home-dark.css — imported
   only by public/home-light-preview.html. Same page, same display face, same
   hero loop; the ink is simply not inverted.

   landing-v2.css is already a complete light world (light canvas, white cards,
   washed panels, one dark ink CTA band as the page's heaviest object, and a
   photo hero whose `.hero-rail-line` was written as "the hand-off line back to
   the light page below"). So this file adds only what the dark overlay
   contributed that was never *about* darkness: the Syne display face, the hero
   entrance, and the video-loop machinery.

   Do not @import this from landing-v2.css or marketing-layout.css — those leak
   into the SPA and the light marketing shell. */

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/syne-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/syne-latin-700-normal.woff2') format('woff2');
}

body.home-light {
  --display: 'Syne', var(--sans);
  color-scheme: light;
}

/* Browser surfaces the palette should own, not the UA. The dark page themed
   these; the light one has the same obligation. */
body.home-light ::selection {
  background: rgba(15, 129, 199, 0.18);
  color: var(--v-fg);
}
body.home-light :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Display face: homepage headlines and labels only. Nav/body/buttons stay Geist. */
body.home-light .kicker,
body.home-light .eyebrow,
body.home-light h1,
body.home-light h2,
body.home-light h3 {
  font-family: var(--display);
}

body.home-light .kicker,
body.home-light .eyebrow {
  letter-spacing: 0.18em;
}

/* ---- hero ---- */
/* The mirror of the dark rail hero, and it earns the same full-bleed treatment
   because there is now light art to carry it: a silver train coming out of a
   tunnel of paper, nose right, open space left. The dark crop kept a dark
   tunnel where the headline sits; this one keeps a bright one.

   Measured, not guessed: the frame runs 83-87% luminance everywhere, so ink
   type on it clears 15:1 and the scrim is not carrying contrast. What it
   carries is calm — the paper texture behind the headline is busy, and type
   over pattern reads as noise however good the ratio is. */
body.home-light header.hero.hero-bright {
  /* also the letterbox around the art, so it matches the frame's own paper */
  background: #eef1f5;
  color: var(--v-fg);
  min-height: clamp(600px, 80vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.home-light .hero-bright-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
body.home-light .hero-bright-art img,
body.home-light header.hero.hero-bright .home-loop-layer {
  /* The frame comes out of the generator flat — bright everywhere, so the
     silver has no metal in it. A small lift is what separates the train from
     the tunnel; it is not a look, it is the render's missing contrast. */
  filter: contrast(1.07) saturate(1.08);
}
body.home-light .hero-bright-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* The hero is wider than the frame's 16:9, so cover fills the width and
     spills vertically — 90px of it at 1440x900, 260px at 1920x1080. Anchoring
     nearer the top shows more of the tunnel roof and drops the train into the
     lower half, off the headline's line. */
  object-position: 62% 26%;
}
/* the grain sits over the art, not under it — keeps the still from reading as
   dropped-in stock */
body.home-light header.hero.hero-bright::after {
  opacity: 0.28;
}
body.home-light .hero-bright-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* bottom fade into the page's own canvas, so the hero hands off to the
       light body the way the dark one resolved into ink. Kept off the train:
       the veil that made the frame read washed out was this layer sitting over
       the whole picture, so it starts later and lands softer. */
    linear-gradient(180deg, rgba(250,250,250,.16) 0%, rgba(250,250,250,0) 26%, rgba(250,250,250,.26) 84%, #fafafa 100%),
    /* The calm-down over the copy column, and the thing that makes the left
       side read pale. Dropping the train lower bought headroom this layer did
       not have before, so it comes down from .88/.74/.20.
       Ink gets its contrast FROM the paleness here, so this is the axis that
       runs out first, and which element binds moves as the wash thins:

         wash          blue  sub   kicker   binding
         .78/.62/.16   4.69  6.32   5.58    —
         .68/.51/.13   4.31  5.74   5.08    — (here)
         .58/.40/.10   4.00  5.30   4.68    —
         .48/.30/.08   3.64  4.93   4.31    kicker chip
         .38/.22/.05   3.39  4.57   3.97    kicker chip

       At .78 the wash was carrying two elements that could carry themselves
       instead, so both were deepened (see the `.b` and .hero-sub rules). That
       made .58 legal; this sits a step back from it, which is where the picture
       and the copy balance. .58 remains available, and below it the next move is
       the kicker chip's own fill, not this gradient. */
    linear-gradient(90deg, rgba(252,253,254,.68) 0%, rgba(252,253,254,.51) 34%, rgba(252,253,254,.13) 58%, rgba(252,253,254,0) 74%);
}

/* Loop above the still, scrim and copy above the loop, rail on top. */
body.home-light header.hero.hero-bright .home-loop {
  z-index: 1;
}
body.home-light header.hero.hero-bright .hero-in {
  z-index: 3;
}
body.home-light header.hero.hero-bright .hero-rail-line {
  z-index: 4;
}
body.home-light header.hero.hero-bright .hero-in {
  width: 100%;
  grid-template-columns: 1fr;
}
body.home-light header.hero.hero-bright .hero-text {
  max-width: 640px;
}
body.home-light header.hero.hero-bright h1 {
  font-size: clamp(40px, 4.9vw, 68px);
}
body.home-light header.hero.hero-bright .hero-sub {
  max-width: 520px;
  /* One step down from --v-fg-muted, which is tuned for flat paper. This
     paragraph sits on a moving picture: the loop changes what is behind it
     every frame, so a ratio measured on one frame is not a guarantee. The
     token left it at 4.5:1 exactly once the veil came off the art; this puts
     real margin under it. The dark hero does the same thing in reverse, using
     rgba(255,255,255,.78) rather than its muted token. */
  color: #3f3f3f;
}
/* "Next stop." was the element the wash was really protecting: brand blue on
   near-white is a ~3.4:1 where the black headline beside it is 10:1, so it hit
   its floor first and pinned the whole gradient. --brand-ink is the palette's
   own deeper blue — same hue, already used for hover and active states — and it
   reads better on a bright picture anyway. Worth 4.69:1 where --brand gave
   3.41, which is what let the wash drop two steps instead of one. */
body.home-light header.hero.hero-bright h1 .b {
  color: var(--brand-ink);
}
/* The 40px floor needs ~321px of line and a 360px phone has a 328px column —
   seven pixels of slack, and the sentence breaks to four lines by 320px. Give
   the floor somewhere to go. */
@media (max-width: 560px) {
  body.home-light header.hero.hero-bright h1 {
    font-size: clamp(30px, 7.2vw, 40px);
  }
}

/* Base .hero-rail-line is a white sweep for an ink hero; on paper it has to be
   the brand line instead or it is invisible. */
body.home-light header.hero.hero-bright .hero-rail-line {
  background: rgba(16, 38, 56, 0.10);
}
body.home-light header.hero.hero-bright .hero-rail-line span {
  background: linear-gradient(90deg, rgba(15,129,199,0) 0%, rgba(15,129,199,.85) 50%, rgba(15,129,199,0) 100%);
}

body.home-light .hero-text > * {
  animation: home-rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.home-light .hero-text > *:nth-child(1) { animation-delay: 80ms; }
body.home-light .hero-text > *:nth-child(2) { animation-delay: 160ms; }
body.home-light .hero-text > *:nth-child(3) { animation-delay: 240ms; }
body.home-light .hero-text > *:nth-child(4) { animation-delay: 340ms; }

@keyframes home-rise-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* The hero already closes with its own bottom padding, its fade into the page
   canvas and the rail line, so a full --pad-section above the first section
   stacks a second gap on top of an ending that has already happened. Step it
   to the tight token — an existing rhythm in the system, not a new number.
   122px -> 86px at desktop, 76px -> 56px on a phone. Only the section that
   meets the hero; the rest of the page keeps its spacing. */
body.home-light #features {
  padding-top: var(--pad-section-tight);
}

/* The capsule sits on the art at rest. Base opacity (.82) is tuned for the flat
   wash and lets the tunnel read through the links; firm it up. */
body.home-light .nav-in {
  background: rgba(255, 255, 255, 0.92);
}

/* ---- loops ---- */
.home-loop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-loop-poster,
.home-loop-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.home-light header.hero.hero-bright .home-loop-layer {
  object-position: 62% 26%;
}

.home-loop-layer {
  opacity: 0;
  transition: opacity 0.56s linear;
}

.home-loop-layer.is-live {
  opacity: 1;
}

/* Stacked, the stage is a wide plate under the copy rather than a tall panel
   beside it, so the crop has to give the locomotive the width instead. */
/* Stacked, there is no column of open art beside the copy — the train would sit
   directly under the headline. On ink that was survivable: white type over a
   dark photo keeps its contrast. Here it is not. Measured over the art at
   390px, the headline fell to 1.87:1 and "Next stop." to 1.02:1 against the
   train's own cyan glow, so the art becomes a band ABOVE the copy and the words
   get clean canvas. Image, then message — the honest order on a phone. */
@media (max-width: 920px) {
  body.home-light header.hero.hero-bright {
    min-height: auto;
    padding-top: calc(var(--nav-total) + var(--hero-band) + clamp(20px, 4vw, 34px));
    --hero-band: clamp(230px, 34vh, 360px);
  }
  body.home-light header.hero.hero-bright .home-loop,
  body.home-light .hero-bright-art {
    bottom: auto;
    height: calc(var(--nav-total) + var(--hero-band));
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  body.home-light .hero-bright-art img,
  body.home-light header.hero.hero-bright .home-loop-layer {
    object-position: 62% 44%;
  }
  /* the horizontal calm-down has nothing left to calm; keep only the dissolve
     into the canvas so the band does not end on a hard edge */
  body.home-light .hero-bright-scrim {
    background: linear-gradient(180deg, rgba(250,250,250,.30) 0%, rgba(250,250,250,0) 34%, rgba(250,250,250,.55) 72%, #fafafa 86%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-light .hero-text > * {
    animation: none;
  }
  .home-loop-layer {
    transition: none;
  }
}