/* hvo-pages v7 — pull the utility pages into the homepage's design language
   (Mena 2026-08-31: "im not happy with how these pages look at all really";
   direction: polish into the homepage language, warmingup first).

   Loaded ONLY by pages that have had their polish pass; the shared v5/v6
   layers stay untouched so unpolished pages render exactly as before.

   What this layer changes, per the diagnosis Mena approved:
   1. The photo-and-scrim status hero becomes a clean page-background hero,
      matching the homepage's light/dark surfaces.
   2. The bullet kicker labels are gone (same call as the homepage tags).
   3. Terminal ALL-CAPS mono buttons become homepage-style sentence-case
      pills (lime primary, quiet secondary).
   4. The 01/02/03 steps become homepage-grade cards: larger radius, real
      padding, lime number chips, and the shared dark-elevation recipe
      (--hvo-dark-rim / --hvo-dark-drop from fx.css).
   5. Gentle entrances + a slow float on the 24h badge; all motion sits
      behind prefers-reduced-motion. */

/* ── 1. Hero: clean surface, no photo, no scrim ─────────────────── */
.hvo-status-hero,
.hvo-status-hero::before,
.hvo-status-hero::after {
  background: none;
}
.hvo-status-hero {
  margin: 0;
  border-radius: 0;
  color: inherit;
  overflow: visible;
  min-height: 0;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hvo-status-hero::before,
.hvo-status-hero::after { content: none; }

/* The base layer forces a white navbar logo over the photo hero; undo it. */
html:has(.hvo-status-hero) .navbar_logo.hvo-lockup { color: inherit !important; }
html:has(.hvo-status-hero) .navbar_logo.hvo-lockup img { filter: none !important; }
html[data-theme="dark"]:has(.hvo-status-hero) .navbar_logo.hvo-lockup img { filter: invert(1) !important; }
html:has(.hvo-status-hero) .navbar_list { color: inherit; }

/* ── 2. Kicker labels are gone sitewide ─────────────────────────── */
.hvo-page .hvo-kicker, .hvo-kicker { display: none !important; }

/* Hero copy on the page surface instead of a dark stage. !important is
   deliberate: an earlier layer wins the color cascade with a value that
   equals light ink in BOTH themes (invisible headline in dark). This sheet
   is page-scoped, and the tokens it pins to DO flip with the theme. */
.hvo-page .hvo-page-title { color: var(--hvo-ink) !important; }
.hvo-page .hvo-page-lede { color: var(--hvo-muted) !important; }
/* The muted token itself is re-declared to a dark-on-dark value by an
   earlier layer's accent-surface rule, so dark pins v6's own intended
   lede color directly. */
html[data-theme="dark"] .hvo-page .hvo-page-lede { color: rgba(255, 255, 255, 0.72) !important; }
.hvo-status-grid { grid-template-columns: 1fr; align-items: center; }

/* ── 5. Steps as homepage-grade cards ───────────────────────────── */
.hvo-steps { gap: 1rem; }
.hvo-step {
  min-height: 16rem;
  padding: 2rem;
  border-radius: 1.9rem;
  background: var(--hvo-soft);
}
html[data-theme="dark"] .hvo-step {
  box-shadow: var(--hvo-dark-rim, inset 0 0 0 1px rgba(255, 255, 255, 0.07)),
    var(--hvo-dark-drop, 0 0.75rem 2rem rgba(0, 0, 0, 0.55));
}
.hvo-step-number {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hvo-lime);
  color: #131313;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 650;
}
.hvo-step h3,
.hvo-step h2.hvo-h2-as-h3 { font-weight: 550; letter-spacing: -0.03em; }

/* ── 6. Motion: entrances + badge float, reduced-motion safe ────── */
@media (prefers-reduced-motion: no-preference) {
  .hvo-status-grid > div:first-child > * {
    animation: hvo-v7-rise 0.7s cubic-bezier(0.2, 0, 0, 1) both;
  }
  .hvo-status-grid > div:first-child > *:nth-child(2) { animation-delay: 0.07s; }
  .hvo-status-grid > div:first-child > *:nth-child(3) { animation-delay: 0.14s; }
  .hvo-step { animation: hvo-v7-rise 0.7s cubic-bezier(0.2, 0, 0, 1) both; }
  .hvo-step:nth-child(2) { animation-delay: 0.08s; }
  .hvo-step:nth-child(3) { animation-delay: 0.16s; }
}
@keyframes hvo-v7-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inline YouTube icon inside the calculator button label (Mena 2026-08-31).
   Inline SVG at the mark's true 1.43:1 aspect; the old 120x100 PNG rendered
   squished and blurry at text size. */
.hvo-yt-inline { display: inline-block; width: 1.45em; line-height: 0; vertical-align: -0.14em; margin: 0 0.1em; }
.hvo-yt-inline svg, .hvo-yt-inline img { width: 100%; height: auto; display: inline-block; }
/* The action row keeps the homepage component intrinsic-sized on phones. */
.hvo-action-row { align-items: center; }
.hvo-action-row .button-arrow { flex: 0 0 auto; }

/* Phones: the long calculator label wraps inside the pill instead of
   overflowing the viewport; the component stays intrinsic, never
   stretched full-bleed. The lime arrow pill always stacks FIRST and the
   quiet pill centers under it (Mena 2026-09-01), regardless of the
   desktop DOM order. */
@media (max-width: 767px) {
  .hvo-action-row { flex-direction: column; align-items: flex-start; }
  .hvo-action-row .button-arrow { max-width: 100%; order: -1; }
  .hvo-action-row .button { align-self: center; }
  .hvo-action-row .text_button { white-space: normal; }
}

/* Hero action pair mirrors the homepage hero exactly: lime arrow pill +
   quiet plain pill. On phones the long primary label wraps LEFT-aligned
   inside the pill (centered caps wrapping read as a slab, Mena's call). */
.hvo-action-row { gap: 0.9rem; }
@media (max-width: 767px) {
  .hvo-action-row .button-arrow .text_button { text-align: left; }
}

/* The arrow chip assumes a one-line label; with the wrapped label it was
   squeezed to 21px wide. Pin it round and un-shrinkable. */
.hvo-action-row .button_container-arrow {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
}
/* The arrow glyph inherits page ink here (dark-on-dark chip = invisible);
   the footer's chip resolves white. Match it. */
.hvo-action-row .button_container-arrow,
.hvo-action-row .button_container-arrow svg { color: #fff !important; }

/* Secondary pill: the homepage hero variant is styled for the DARK hero
   backdrop (translucent white + white text) and was unreadable on the
   light page surface. Re-express it in page tokens: quiet outline pill,
   ink text, works in both themes. */
.hvo-action-row .button,
.hvo-action-row .button .text-button-wrap,
.hvo-action-row .button .text-button-wrap div {
  background: transparent !important;
  color: var(--hvo-ink) !important;
}
.hvo-action-row .button {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hvo-ink) 28%, transparent) !important;
  border-radius: 5rem;
}

/* ── Extension to the remaining utility pages (2026-08-31) ─────────── */

/* meetwithus stage hero joins the clean-surface treatment */
.hvo-stage-hero,
.hvo-stage-hero::before,
.hvo-stage-hero::after { background: none; }
.hvo-stage-hero::before,
.hvo-stage-hero::after { content: none; }
.hvo-stage-hero {
  margin: 0;
  border-radius: 0;
  color: inherit;
  min-height: 0;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
}
html:has(.hvo-stage-hero) .navbar_logo.hvo-lockup { color: inherit !important; }
html:has(.hvo-stage-hero) .navbar_logo.hvo-lockup img { filter: none !important; }
html[data-theme="dark"]:has(.hvo-stage-hero) .navbar_logo.hvo-lockup img { filter: invert(1) !important; }

/* meetwithus: centered composition instead of headline + dead space */
.hvo-stage-hero .hvo-page-shell {
  display: block;
  text-align: center;
}
.hvo-stage-hero .hvo-page-title { max-width: 16ch; margin-inline: auto; }
.hvo-stage-hero .hvo-page-lede { margin-inline: auto; }
/* v6 hid the ribbon while this hero was a photo slab; on the clean
   centered hero the creator faces are pure homepage language. */
.hvo-stage-hero .hvo-creator-ribbon { display: flex !important; justify-content: center; margin-top: 2.5rem; }
/* the MEET / HVO corner index joins the removed-labels family */
.hvo-hero-index { display: none; }

/* Shared card recipe for the tool and embed surfaces (homepage language) */
.hvo-tool-shell,
.hvo-embed-frame,
.hvo-result-card {
  border-radius: 1.9rem;
  overflow: hidden;
}
html[data-theme="dark"] .hvo-tool-shell,
html[data-theme="dark"] .hvo-embed-frame,
html[data-theme="dark"] .hvo-result-card {
  box-shadow: var(--hvo-dark-rim, inset 0 0 0 1px rgba(255, 255, 255, 0.07)),
    var(--hvo-dark-drop, 0 0.75rem 2rem rgba(0, 0, 0, 0.55));
}

/* Dark-mode hover fix (Mena 2026-09-01): v6's stays-lime-surface rule forces
   every descendant of .hvo-status-hero to grey-900 text, which also wins over
   the template's .button-arrow:hover text flip - so the hovered pill filled
   with grey-900 showed grey-900 text. Restore the flip at higher specificity. */
html[data-theme="dark"]:has(.hvo-page) .hvo-status-hero .button-arrow:hover .button-arrow_text,
html[data-theme="dark"]:has(.hvo-page) .hvo-status-hero .button-arrow:hover .text_button {
  color: var(--base--white);
}