/* =========================================================
   About page (night theme). Shared bar/signal/close: night.css.
   Night banner opener, Daylight story, night standout rows,
   Daylight numbers, green close.
   ========================================================= */

.ax-h2 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -0.04em; }

/* ---------- Opener: the banner (256x144) blurred into a night backdrop ---------- */
.ax-hero { position: relative; isolation: isolate; min-height: 58svh; display: grid; align-items: end; overflow: clip; background: var(--night); color: #fff; }
.ax-hero-bg { position: absolute; inset: 0; z-index: -1; }
.ax-hero-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(16px) saturate(1.15); transform: scale(1.15); }
.ax-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 15, 20, 0.95) 0%, rgba(11, 15, 20, 0.7) 45%, rgba(11, 15, 20, 0.55) 100%); }
.ax-hero-copy { padding-block: clamp(96px, 18svh, 180px) clamp(44px, 8svh, 80px); }
.ax-since { margin: 0 0 1rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent); }
.ax-title { margin: 0; max-width: 13ch; font-size: clamp(3rem, 7.6vw, 6.8rem); line-height: 0.96; letter-spacing: -0.045em; color: #fff; }
.ax-title span { color: var(--sc-accent); }

/* ---------- Story (Daylight) ---------- */
.ax-story { background: var(--bg); padding-block: clamp(64px, 10vw, 120px); }
.ax-story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ax-story-copy .ax-h2 { margin-bottom: 1.4rem; }
.ax-lede { margin: 0; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; letter-spacing: -0.01em; max-width: 38ch; }
.ax-body { margin: 1.1rem 0 0; color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
.ax-story-img { margin: 0; justify-self: end; width: 100%; max-width: 460px; }
.ax-story-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 48px -28px rgba(60, 45, 30, 0.5), 0 0 0 1px var(--border); }
@media (max-width: 860px) { .ax-story-grid { grid-template-columns: 1fr; } .ax-story-img { justify-self: start; } }

/* ---------- Standout (night): full-width rows that wipe in ---------- */
.ax-standout { background: var(--night); color: var(--night-ink); padding-block: clamp(64px, 10vw, 110px) 0; }
.ax-standout .ax-h2 { color: #fff; margin-bottom: clamp(28px, 5vw, 56px); }
.ax-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ax-row { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ax-row:nth-child(even) { background: #0f141b; }
.ax-row-inner { display: grid; grid-template-columns: auto 1.3fr 1fr; gap: 12px clamp(20px, 4vw, 56px); align-items: center; padding-block: clamp(32px, 6svh, 60px); }
.ax-row-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(236, 109, 77, 0.14); color: var(--sc-accent); font-size: 1.6rem; }
.ax-claim { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; color: #fff; }
.ax-detail { margin: 0; color: var(--night-soft); font-size: 1.05rem; max-width: 40ch; }
@media (max-width: 860px) {
  .ax-row-inner { grid-template-columns: auto 1fr; }
  .ax-detail { grid-column: 2; }
}

/* ---------- Numbers (Daylight) ---------- */
.ax-numbers { background: var(--bg); padding-block: clamp(64px, 10vw, 120px); }
.ax-num-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px clamp(24px, 5vw, 64px); align-items: end; }
.ax-num { display: flex; align-items: center; gap: 0.3em; margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.4rem, 9vw, 7.5rem); line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.ax-num--sm { font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -0.035em; }
.ax-num .live-dot { width: 0.26em; height: 0.26em; }
.ax-num-label { margin: 0.6rem 0 0; color: var(--muted); }
@media (max-width: 760px) { .ax-num-grid { grid-template-columns: 1fr 1fr; } .ax-num-grid > :first-child { grid-column: 1 / -1; } }