/* Void Finance: site-hero.css, loaded after site.css by /portal and the 404 page only. Cut from site.css as it was (2026-10-22), so these pages look the same. */

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 64px);
  background:
    radial-gradient(50% 60% at -6% -8%, rgba(150, 192, 140, 0.22), transparent 70%),
    radial-gradient(45% 60% at 106% -10%, rgba(53, 147, 197, 0.26), transparent 70%),
    linear-gradient(#0A131A, var(--deep));
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; z-index: -1; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.emblem { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.hero h1 { font-size: clamp(2.75rem, 1.2rem + 4.8vw, 5rem); line-height: 1; letter-spacing: -0.04em; padding-bottom: 0.06em; }
.hero-sub { margin-top: 16px; color: var(--kicker); font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.hero .lede { max-width: 30em; margin-top: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Until the invite is ready: a quiet line under the buttons. */
.hero-note { display: flex; align-items: flex-start; gap: 10px; max-width: 32em; margin-top: 18px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.hero-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: currentColor; opacity: 0.8; }
.hero-note a { font-weight: 600; }

/* The live price above the headline (pulse.js). */
.live-chip {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 14px 7px 12px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: rgba(6, 11, 16, 0.6); font-size: 0.86rem; font-variant-numeric: tabular-nums;
}
.live-chip[hidden] { display: none; }
/* The chip's row: the X account on the right (on its own when the price hasn't loaded). */
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 20px; }
.hero-top .live-chip { margin-bottom: 0; }
.x-chip {
  display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 7px 14px 7px 12px; border-radius: 99px;
  border: 1px solid rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.07); color: var(--soft); font-size: 0.86rem; white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.x-chip svg { width: 15px; height: 15px; flex: none; fill: var(--white); }
.x-chip b { color: var(--white); font-weight: 600; }
.x-chip:hover { border-color: var(--sky); background: rgba(56, 189, 248, 0.14); color: var(--white); }
.live-chip .lc-l { color: var(--muted); font: 500 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.live-chip b { padding: 0 3px; border-radius: 4px; color: var(--white); font-weight: 600; line-height: 1.2; }

/* The three stock markets, open or closed right now (hero.js), beside A Day In Your Server: the rows of a
   split-flap departures board. Open is a green dot, closed a light red ring, as on the cards. */
.markets-now { position: relative; z-index: 1; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.markets-now .kicker { margin: 0; }
.markets {
  display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(6, 11, 16, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.markets[hidden] { display: none; }
.mkt {
  display: grid; grid-template-columns: 9px 5.8em auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.02);
}
.mkt-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--closed); }
.mkt.is-open .mkt-dot { border-color: var(--open); background: var(--open); }
.mkt-name { color: var(--white); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.flaps { display: inline-flex; align-items: center; gap: 3px; perspective: 300px; }
.flap {
  position: relative; display: grid; place-items: center; width: 1.2em; height: 1.65em; border-radius: 4px;
  background: linear-gradient(180deg, #16232E 0 49%, #0F1A23 51% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--white); font: 700 0.84rem/1 var(--mono); white-space: pre;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.7); }
.flap.is-flip { animation: flap-turn 70ms linear; }
@keyframes flap-turn { 50% { transform: rotateX(-80deg); } }
.flap-gap { width: 5px; }
.flap-sep { width: 0.5em; color: var(--muted); font: 700 0.84rem/1 var(--mono); text-align: center; }
.mkt-state .flap { color: var(--closed); overflow: hidden; }
.mkt.is-open .mkt-state .flap { color: var(--open); }
/* Phones: the name and OPEN or CLOSED on top, the day and time under them. */
@media (max-width: 519px) {
  .mkt { grid-template-columns: 9px minmax(0, 1fr) auto; row-gap: 8px; }
  .mkt-dot { grid-area: 1 / 1; }
  .mkt-name { grid-area: 1 / 2; }
  .mkt-state { grid-area: 1 / 3; justify-self: end; }
  .mkt-time { grid-area: 2 / 2 / 3 / 4; }
}

/* SITE-66, kept after the hero's own rules as it was in site.css: the X chip reaches 44px on touch screens. */
@media (pointer: coarse) { .x-chip { min-height: 44px; } }