/* ── hero ───────────────────────────────────────────────────────
   Centred, against the street photo. One of two centred blocks on
   the page; the closing CTA is the other. Everything between them
   sits on the left axis.
   ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(820px, 100svh);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ground);
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 54%;
  transform: scale(1.06);
}

/* The photo is texture, not subject: one lit shopfront in the fog,
   the same burnt orange as --accent. Scrimmed hard so the headline
   and the prompt bar own the contrast. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Nav chrome. Black rather than --ground, and shallow enough
       to be spent by the time the headline starts: it is there to
       hold the logo, the ticker and the links off the photo, which
       is at its brightest exactly where they sit. */
    linear-gradient(180deg,
      rgba(0, 0, 0, .2) 0%,
      rgba(0, 0, 0, 0) 180px),
    radial-gradient(ellipse 60% 50% at 50% 52%,
      rgba(15, 14, 13, .92), rgba(15, 14, 13, 0) 100%),
    linear-gradient(180deg,
      rgba(15, 14, 13, .24) 0%,
      rgba(15, 14, 13, 0) 32%,
      rgba(15, 14, 13, .04) 64%,
      var(--ground) 98%),
    rgba(15, 14, 13, 0);
}

.hero-inner {
  width: 100%;
  padding-block: 120px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  font-family: var(--display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  margin-bottom: 28px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .55);
}

.hero-sub {
  font-size: var(--t-hero-sub);
  line-height: 1.5;
  color: var(--ink-2);
  /* held to roughly the headline's own width so the two read as one
     block — without it the sentence runs the full wrap and drops a
     single orphaned word onto the second line */
  max-width: 56ch;
  text-wrap: balance;
  margin-bottom: 44px;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .6);
}

/* ── the prompt bar ──────────────────────────────────────────────
   The one bold element on the page. It is the product's actual
   first interaction, so it gets the glass, the lift and the only
   real shadow anywhere in the design.
   ─────────────────────────────────────────────────────────────── */

.intake {
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 8px 8px 8px 22px;
  border: 1px solid rgba(243, 239, 233, .16);
  border-radius: var(--r-pill);
  background: rgba(22, 20, 18, .62);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .1s var(--ease),
              box-shadow .1s var(--ease);
}

/* hover picks up the accent outline; focus adds the glow on top */
.intake:hover {
  border-color: var(--accent-text);
}

.intake:focus-within {
  border-color: var(--accent-text);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 3px rgba(227, 112, 60, .32),
    0 0 28px -2px rgba(227, 112, 60, .45);
}

/* The bar itself shows focus, so the input inside it needn't. */
.intake-input:focus-visible { outline: none; }

.intake-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding-block: 0;
  border: 0;
  background: none;
  font-size: 17px;
}
.intake-input::placeholder { color: var(--ink-2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 44px;
  padding-inline: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.pill:hover {
  color: var(--ink);
  border-color: var(--ink-2);
}
.pill .icon { width: 13px; height: 13px; }

/* ── chips ──────────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-2);
}

/* One slot rotates at a time (see app.js), so the row's height has
   to be reserved for the worst case at each breakpoint rather than
   left to size to whatever three labels happen to be showing — a
   longer one rotating in would otherwise push the row to a second
   or third line and shove the whole hero down. These are measured,
   not estimated: rendered all three longest labels ("weekly power
   rankings for a fantasy league" / "a site that redraws your kid's
   drawings" / "a habit league with weekly trash talk") into the row
   at each width and read back .chips' actual height, then added a
   safety margin. A guessed-at value here undershot by roughly half
   in testing — measure again if the labels or type scale change. */
.chips-list {
  display: contents;
}
.chips-list li { display: contents; }

.chips { min-height: 200px; }   /* measured 187px @320px wide */

@media (min-width: 481px) {
  .chips { min-height: 150px; } /* measured 135px @480px wide */
}

@media (min-width: 640px) {
  .chips { min-height: 100px; } /* measured 87px @640px wide */
}

/* "Desktop width" per spec: forced onto one line, not just usually
   fitting one line. max-width widens past the 860px mobile/tablet
   cap — comfortably more than three long labels plus "Try one:"
   ever need — specifically so nowrap never crops or forces a
   scrollbar. */
@media (min-width: 900px) {
  .chips {
    flex-wrap: nowrap;
    max-width: 1080px;
    min-height: 40px;
  }
  .chip { white-space: nowrap; }
}

/* Buttons, not spans — the original's were unreachable by keyboard. */
.chip {
  padding: 8px 15px;
  line-height: 1.45;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .03);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              opacity var(--fast) var(--ease);
}
.chip:hover {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--ink);
}

/* The crossfade for a rotating slot (see app.js). Instant unless the
   viewer allows motion — a chip is a short label, not worth a
   reduced-motion exception the way the hero's one-time settle-in is. */
@media (prefers-reduced-motion: no-preference) {
  .chip[data-turn] { transition: opacity .2s var(--ease); }
  .chip[data-turn="out"] { opacity: 0; }
}

/* ── the one motion moment ───────────────────────────────────────
   The page settles in once, on load, top to bottom. There are no
   scroll-triggered reveals anywhere else — everything below the
   fold is simply there when you reach it.
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .hero-title,
  .hero-sub,
  .intake,
  .chips {
    animation: settle .85s var(--ease) backwards;
  }
  .hero-title { animation-delay: .05s; }
  .hero-sub   { animation-delay: .16s; }
  .intake     { animation-delay: .27s; }
  .chips      { animation-delay: .38s; }

  .hero-bg img {
    animation: drift 1.6s var(--ease) backwards;
  }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes drift {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 820px) {
  .hero { min-height: auto; }
  .hero-inner { padding-block: 128px 72px; }

  /* The desktop break — "Your next company / is an idea away." —
     leaves a first line wider than a phone, so hand the breaking
     back to the browser and let it balance the lines instead. The
     space before the <br> in the markup is what keeps "company" and
     "is" apart once the break itself is gone. */
  .hero-title br { display: none; }
  .hero-title { text-wrap: balance; }

  .intake {
    flex-wrap: wrap;
    padding: 14px;
    border-radius: var(--r-lg);
  }
  .intake-input {
    flex-basis: 100%;
    padding: 4px 8px 12px;
  }
  .pill { flex: 1; justify-content: center; }
  .intake .btn { flex: 1; }
}