/* ============ hero stage ============
   Split out of landing.css on 2026-08-17. The fold now has to hold a REAL form
   (it was a read-only replay theater, and the only working entry point was a
   form 13,000px below — a visitor on the fold had no way in) AND still fit a
   630px-tall viewport, which the theater alone already overflowed by 73px. */
.hero {
  /* svh, not vh: on a phone `vh` is the URL-bar-collapsed height, so the fold
     silently overflows by the size of the browser chrome. */
  min-height: 100svh;
  display: grid; place-items: center; text-align: center; position: relative;
  /* 5rem floor, not 4.5: the fixed nav is 77px tall and 8.5vh only clears that
     above ~906px, so on a 900px screen the h1 sat under it. */
  padding: clamp(5rem, 8.5vh, 7rem) 2rem clamp(2rem, 4.5vh, 4rem);
}
.hero-inner { width: min(100%, 54rem); min-width: 0; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, min(5.8vw, 8.6vh), 5rem); line-height: 1.05; letter-spacing: -.01em; }
.hero h1 em { font-style: italic; }
.hero .lede { margin: clamp(.8rem, 1.6vh, 1.2rem) auto 0; max-width: 40rem; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.45; color: var(--ink-soft); }

/* The bar: a real <form>. The typed demo is a ghost layer over the input, shown
   only while the field is empty and untouched — one keystroke and the theater
   hands the bar over. */
.stagebar {
  --bar-fs: 1.25rem;
  margin: clamp(1.4rem, 3.4vh, 3rem) auto 0; max-width: 40rem;
  background: #fff; border-radius: 18px; padding: 1.25rem 1.6rem;
  box-shadow: 0 24px 60px -24px rgba(25,23,19,.28), 0 0 0 1px var(--line);
  display: flex; align-items: center; gap: 1rem; text-align: left;
  transition: box-shadow .25s var(--ease);
}
.stagebar:focus-within { box-shadow: 0 24px 60px -24px rgba(25,23,19,.34), 0 0 0 2px var(--ink); }
.stagebar .text { position: relative; flex: 1; min-height: 1.5em; }
/* one knob for both layers: if the ghost and the input ever disagree on size,
   the demo text jumps the moment the user types */
.stagebar .text, .stagebar input, .stagebar .ghost { font-size: var(--bar-fs); line-height: 1.45; }
.stagebar input {
  width: 100%; border: 0; outline: none; background: none; padding: 0;
  font-family: inherit; font-weight: inherit; color: var(--ink);
}
.stagebar .ghost { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; color: var(--ink); }
.stagebar.engaged .ghost { display: none; }
.stagebar .caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: text-bottom; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.stagebar .go {
  flex: none; font-family: inherit; font-weight: 700; font-size: .85rem;
  color: var(--bone); background: var(--ink); border: 0; border-radius: 99px;
  padding: .68rem 1.25rem; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--spring), background .3s;
}
.stagebar .go:hover { transform: translateY(-2px); background: #000; }
.stagebar .go[disabled] { opacity: .55; cursor: default; transform: none; }
/* Starter chips: the first half of the sentence, ready to hand over. display:none
   until the visitor takes the bar — the un-engaged fold is height-budgeted (the
   940 ruling below) and the replay theater already shows worked examples. */
/* the route that product takes with us, so a chip answers "and then what?" */
/* ownership line under the bar: always visible, never grows the fold by more than one line */
.bar-aside { margin: .8rem auto 1.1rem; font-size: .82rem; color: var(--ink-faint); }
.bar-aside a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Submitting an empty bar used to only call input.focus() — no message, so the
   button read as dead. Reserved height, so saying it does not shift the fold.
   pointer-events gate: at opacity 0 the gallery link inside must not be a
   click target hovering over the stage. */

/* the plate must never push the materialize moment below the fold: its size and
   every gap above it answer to viewport HEIGHT, not just width */
.answer { margin: clamp(1.2rem, 2.9vh, 2.6rem) auto 0; position: relative; width: min(64vw, 380px, 46vh); }
.answer .halo { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, var(--halo, rgba(242,166,90,.3)) 0%, transparent 65%); opacity: 0; }
.answer .plate { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 36px 80px -30px rgba(25,23,19,.4), 0 0 0 1px var(--line); opacity: 0; }
.answer .plate img { display: block; width: 100%; height: auto; }
.answer .made {
  /* nowrap is load-bearing: this is absolutely positioned inside .answer, so it
     shrink-to-fits that width. Once the plate got smaller for short viewports
     the stamp wrapped to three lines and sat straight over the object. */
  position: absolute; top: -0.9rem; left: 50%; white-space: nowrap; transform: translateX(-50%) rotate(-3deg);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: var(--bone); border-radius: 6px; padding: .4rem .7rem; opacity: 0; z-index: 3;
}
.answer .react {
  position: absolute; z-index: 4; white-space: nowrap;
  font-weight: 700; font-size: .82rem; background: #fff; border-radius: 99px;
  padding: .5rem 1rem; box-shadow: 0 10px 24px -10px rgba(25,23,19,.35), 0 0 0 1px var(--line);
  opacity: 0;
}
.answer .react .h { color: var(--rust); }
/* six fixed slots, filled in order — replays carry 3-6 wants each, so the crowd
   size visibly differs per product. Left arc 22/45/68, right arc 16/56/82:
   clear of the top stamp and the chips row at every count. */
.answer .react.p1 { left: -34%; top: 22%; rotate: -5deg; }
.answer .react.p2 { right: -30%; top: 56%; rotate: 4deg; }
.answer .react.p3 { left: -28%; top: 68%; rotate: 3deg; }
.answer .react.p4 { right: -26%; top: 16%; rotate: -4deg; }
.answer .react.p5 { left: -38%; top: 45%; rotate: 2deg; }
.answer .react.p6 { right: -20%; top: 82%; rotate: 5deg; }
.specchips { margin-top: 1.2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; min-height: 2rem; }
.specchip {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: .45rem .95rem;
  color: var(--ink-soft); opacity: 0; transform: scale(.6);
}
/* Short viewports — a 1293x630 laptop window overflowed the fold by 73px, which
   cut the spec chips in half and pushed the note line off-screen entirely.
   Everything below tightens; padding-top stays above the fixed nav's height.
   The threshold is measured, not guessed, and it moved twice: 760 still
   overflowed by 65px, 820 still overflowed by 59. Swept viewport by viewport,
   the untightened layout only fits from ~907px up — so the switch sits at 940,
   above the tallest height that failed rather than at the one first reported. */
@media (max-height: 940px) {
  /* Top-anchored, not centred. With place-items:center the top padding is only
     a floor — centring pulls the h1 back up toward the fixed nav, and at 673px
     it landed 3px UNDER it. Anchoring makes the nav clearance exact and sends
     any leftover room to the bottom, below the last line. */
  .hero { align-content: start; padding: 5.4rem 2rem 1rem; }
  .hero h1 { font-size: clamp(2rem, min(5vw, 7.4vh), 3.4rem); }
  .stagebar { --bar-fs: 1.05rem; margin-top: clamp(.9rem, 2.4vh, 1.6rem); padding: .95rem 1.15rem; }
  .stagebar .go { padding: .6rem 1.05rem; font-size: .8rem; }
  .answer { margin-top: clamp(.7rem, 1.8vh, 1.4rem); width: min(58vw, 300px, 36vh); }
  .specchips { margin-top: .7rem; min-height: 1.6rem; }
  .specchip { font-size: .68rem; padding: .35rem .8rem; }
}

/* Narrow screens: the button was sharing the row and squeezing the text lane
   to ~150px — replay sentences wrapped to three lines and printed straight
   through the bar's bottom edge. Stack instead: full-width two-line text lane
   (every replay sentence fits), full-width button under it. */
@media (max-width: 760px) {
  .stagebar { flex-direction: column; align-items: stretch; gap: .7rem; border-radius: 22px; }
  .stagebar .text { min-height: calc(2 * 1.45em); }
  .stagebar .ghost { align-items: flex-start; }
  .stagebar .go { width: 100%; padding: .75rem 1rem; }
}