/* ============================================================
   STAGE HERO — /domains/whois/ and /domains/domain-cleaner/
   Loaded on these two pages only.

   A centred, tool-first hero: the label, headline and lead sit
   stacked and centred above ONE wide card that is the page's
   primary action — the lookup bar itself, or the cleaner's
   textarea. It exists to break the site's "copy left, art
   right" repetition: on a tool page there is no art column,
   and hiding the tool in a narrow side card wasted the band.

   Structure:
     breadcrumb (centred) -> label -> h1 -> lead
     -> .stage-card (max 880px, white, raised)
     -> trust pills row (centred)

   Inherits from components.css: .page-hero--ink (band colour,
   breadcrumb/h1/lead tints), .page-hero__label/.page-hero__icon,
   .domain-search--hero (the search bar skin), .whois__* and
   .cleaner__* (the tools' own components, unchanged).

   Entrance: the same data-hero-enter ladder as every other hero
   (0 / 80 / 220 / 320ms), CSS-only, keyed off html.js and
   gated on no-preference.
   ============================================================ */

.page-hero--stage .page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-6);
}

/* A tool page's headline is short by design, so it runs one step
   above the standard hero cap. */
.page-hero--stage h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.page-hero--stage .lead {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--slate-300);
}

/* The h1's second half runs the product-accent gradient, whose
   defaults (brand-600 → brand-800) are tuned for light bands and
   go almost black on ink. Swap in the light stops the ink hero
   uses for its solid fallback. */
.page-hero--stage .accent {
  --product-accent-from: var(--brand-300);
  --product-accent-to: var(--brand-500);
}

/* The stage itself: the tool, full width of the card, as the
   focal point. Bright surface on the ink band. */
.stage-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin-top: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 64px -24px rgba(6, 12, 24, 0.55);
}

/* The cleaner's card is taller by nature (it holds a textarea);
   same shell, more room inside. */
.stage-card--tall {
  padding: var(--sp-6);
}

/* A heading inside the card labels the action without repeating
   the h1. */
.stage-card__label {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--slate-500);
}

/* ---------- Search bar (WHOIS) ----------
   A 64px field+button row stretched across the card, the same
   skin the domains hero uses so the site reads as one system. */
.page-hero--stage .domain-search--hero {
  width: 100%;
}

.page-hero--stage .domain-search--hero input[type="search"],
.page-hero--stage .domain-search--hero .btn {
  height: 60px;
}

/* The base `.domain-search--hero` input hides its native placeholder
   because a decorative `.domain-search__typed` overlay normally stands
   in for it — but the overlay is toggled by the domains page's stage
   script, which this page does not load. Keep the overlay out of the
   way and let the native placeholder do the work. */
.page-hero--stage .domain-search--hero .domain-search__typed {
  display: none;
}

.page-hero--stage .domain-search--hero input[type="search"]::placeholder {
  color: var(--slate-400);
}

/* The chips sit under the bar, on one row. */
.page-hero--stage .whois__examples {
  justify-content: flex-start;
  margin-top: var(--sp-4);
}

/* The chip colour was tuned for the mint band; on the ink band's
   white card it flips to ink-on-white so it stays legible. */
.page-hero--stage .whois__chip {
  color: var(--slate-600);
  background: var(--slate-100);
  border-color: var(--slate-200);
}

.page-hero--stage .whois__chip:hover {
  color: var(--brand-700);
  border-color: var(--brand-300);
}

/* Results render inside the card, under the bar. */
.page-hero--stage .whois__out {
  margin-top: var(--sp-5);
}

/* Results lay out in two columns on wide screens so the record
   reads like a record instead of a long list. */
@media (min-width: 760px) {
  .page-hero--stage .whois__card .whois__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}

/* ---------- Trust pills ---------- */
.stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.stage-pills li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate-400);
}

.stage-pills svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--brand-300);
}

/* ---------- Entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-hero--stage [data-hero-enter] {
    animation: stageEnter 900ms var(--ease-out) var(--enter-delay, 0ms) both;
  }
}

@keyframes stageEnter {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Phones: the card drops its outer padding so the tool keeps
   every pixel, and the pills stack closer. */
@media (max-width: 560px) {
  .stage-card {
    padding: var(--sp-4);
  }

  .page-hero--stage .domain-search--hero {
    flex-direction: column;
  }

  .page-hero--stage .domain-search--hero .btn {
    width: 100%;
  }
}