/*
 * Moon supplemental layer.
 *
 * Built on top of the reference design system (ref1.css fonts + ref2.css tokens,
 * utilities, and keyframe animations). No new palette or fonts are introduced:
 * every value references the reference's own CSS variables (--color-*, --font-*).
 * The pixel-art scenes, horizon strips, and clouds are the reference's own
 * background assets, mirrored under this site's paths.
 */

:root {
  --moon-hairline: #2020201a;
  --moon-page-max: 1200px;
  --moon-blue: #1c6fd9;      /* reference band blue */
  --moon-blue-deep: #1a63c2;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink-strong);
  font-family: var(--font-neoris), sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--color-surface-darker); color: var(--color-ink-strongest); }

.moon-wrap { width: 100%; max-width: var(--moon-page-max); margin-inline: auto; padding-inline: 28px; }
@media (max-width: 768px) { .moon-wrap { padding-inline: 20px; } }

.moon-mono { font-family: var(--font-mono), monospace; }
.moon-display { font-family: var(--font-neoris), sans-serif; }
.moon-body { font-family: var(--font-inter), sans-serif; }

/* Two-tone section heading, the way the reference does its centred titles */
.moon-h2 { font-family: var(--font-neoris), sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--color-ink-strongest); font-size: clamp(28px, 3.8vw, 42px); margin: 0; }
.moon-h2 .soft { color: var(--color-ink-faint); }
.moon-lead { font-family: var(--font-inter), sans-serif; font-size: 17px; line-height: 1.6; color: var(--color-ink-muted); }

/* ---------- Buttons (flat, no gradient / no glow) ---------- */
.moon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-neoris), sans-serif; font-weight: 500; font-size: 14px; line-height: 1;
  padding: 12px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out;
  text-decoration: none; white-space: nowrap;
}
.moon-btn-cream { background: #f4f4ef; color: #1d1b1b; border-color: #00000012; }
.moon-btn-cream:hover { background: #fff; }
.moon-btn-dark { background: var(--color-ink-ui-solid); color: #fff; }
.moon-btn-dark:hover { background: #333; }
.moon-btn-light { background: #f1f1ee; color: var(--color-ink-strongest); border-color: var(--moon-hairline); }
.moon-btn-light:hover { background: var(--color-surface-darker); }
.moon-btn-blue { background: #ffffff26; color: #fff; border-color: #ffffff40; }
.moon-btn-blue:hover { background: #ffffff33; }
.moon-btn-ghost { background: transparent; color: var(--color-ink-muted); }
.moon-btn-ghost:hover { color: var(--color-ink-strongest); background: #2020200a; }
.moon-btn-lg { padding: 14px 22px; font-size: 15px; }

/* ---------- Surfaces ---------- */
.moon-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-card); border-radius: 16px; }
.moon-card-hover { transition: border-color .18s ease-out, background-color .18s ease-out; }
.moon-card-hover:hover { border-color: #cdd2cd; background: #fff; }

.moon-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #f3f3f0; border: 1px solid var(--color-border-card); color: var(--color-ink-strong); flex-shrink: 0;
}
.moon-icon-tile svg { width: 22px; height: 22px; }
.moon-folder { width: 46px; height: auto; display: block; }

.moon-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono), monospace; font-size: 11px; padding: 3px 9px; border-radius: 6px; letter-spacing: .02em; }
.moon-status .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.moon-status-ok   { background: #dff0d5; color: #2b6b34; } .moon-status-ok .dot { background: var(--color-feature-success); }
.moon-status-warn { background: #f0ddd5; color: #8a4635; } .moon-status-warn .dot { background: var(--color-accent-brown); }
.moon-status-live { background: #dae9fb; color: #1a4f8a; } .moon-status-live .dot { background: var(--moon-blue); animation: 1.6s ease-in-out infinite badge-blink; }

/* ---------- Dark console panel ---------- */
.moon-panel { background: var(--color-ink-ui-solid); border: 1px solid #383838; border-radius: 16px; color: rgba(255,255,255,.9); overflow: hidden; }
.moon-panel-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #ffffff14; }
.moon-panel-dot { width: 9px; height: 9px; border-radius: 999px; background: #ffffff26; }
.moon-chat-row { display: flex; gap: 10px; padding: 9px 16px; font-family: var(--font-mono), monospace; font-size: 13px; align-items: center; }
.moon-chat-row .who { color: rgba(255,255,255,.5); }
.moon-chat-row.flagged { background: #ffffff08; }

/* Light product card (for record / queue mocks) */
.moon-uicard { background: var(--color-surface-raised); border: 1px solid var(--color-border-card); border-radius: 14px; overflow: hidden; }
.moon-uicard-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--color-border-card); font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-faint); }
.moon-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--color-border-card); font-size: 13.5px; }
.moon-row:last-child { border-bottom: 0; }

/* ---------- Section rhythm ---------- */
.moon-section { padding-block: 104px; }
@media (max-width: 768px) { .moon-section { padding-block: 68px; } }
.moon-rule { height: 2px; background: #e8e7e6; box-shadow: 0 -1px #fff, 0 1px #fff; border: 0; }

/* ---------- Scroll reveal (reuses the hero-enter easing) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive grids ---------- */
.moon-grid { display: grid; gap: 20px; }
.moon-grid-2 { grid-template-columns: repeat(2, 1fr); }
.moon-grid-3 { grid-template-columns: repeat(3, 1fr); }
.moon-grid-footer { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.moon-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.moon-split.rev .col-text { order: 2; }
@media (max-width: 860px) {
  .moon-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .moon-grid-footer { grid-template-columns: 1fr 1fr; }
  .moon-split, .moon-split.rev { grid-template-columns: 1fr; gap: 28px; }
  .moon-split.rev .col-text { order: 0; }
}
@media (max-width: 560px) { .moon-grid-2, .moon-grid-3, .moon-grid-footer { grid-template-columns: 1fr; } }

/* ---------- Header (transparent over hero, solid after scroll) ---------- */
.moon-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border-card);
  transition: background-color .25s ease-out, border-color .25s ease-out, color .25s ease-out;
}
.moon-header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.moon-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-ink-strongest); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.moon-brand img { width: 27px; height: 27px; display: block; }
.moon-navgroup { display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--color-border-pill); border-radius: 12px; background: var(--color-surface-raised); }
.moon-navgroup a { font-size: 13.5px; color: var(--color-ink-muted); text-decoration: none; padding: 7px 12px; border-radius: 8px; transition: color .16s ease-out, background-color .16s ease-out; }
.moon-navgroup a:hover { color: var(--color-ink-strongest); background: #2020200d; }
.moon-header-cta { display: flex; align-items: center; gap: 10px; }
.moon-nav-toggle { display: none; }

/* Over-hero state: light text, no chrome, until scrolled */
.moon-header[data-over-hero]:not([data-scrolled]) { background: transparent; border-bottom-color: transparent; }
.moon-header[data-over-hero]:not([data-scrolled]) .moon-brand { color: #fff; }
.moon-header[data-over-hero]:not([data-scrolled]) .moon-navgroup { background: #ffffff1f; border-color: #ffffff33; }
.moon-header[data-over-hero]:not([data-scrolled]) .moon-navgroup a { color: #ffffffd0; }
.moon-header[data-over-hero]:not([data-scrolled]) .moon-navgroup a:hover { color: #fff; background: #ffffff26; }
.moon-header[data-over-hero]:not([data-scrolled]) .moon-nav-toggle { color: #fff; border-color: #ffffff40; background: #ffffff1f; }

/* ---------- Hero (pixel-art scene) ----------
   The box is locked to the scene's aspect ratio so the artwork shows in full
   and never crops at a random spot. Because nothing crops, the laptop always
   sits at the same fraction of the box, so the chips can track it. */
.moon-hero { position: relative; display: flex; align-items: flex-start;
  aspect-ratio: 1920 / 1122; width: 100%; overflow: hidden;
  background: #2f8fe0 url('/hero/moon-hero-scene.webp') center / cover no-repeat; }
.moon-hero-inner { position: relative; z-index: 3; width: 100%; padding-top: clamp(96px, 12vw, 150px); }
.moon-hero h1 { font-family: var(--font-neoris); font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.03;
  font-size: clamp(34px, 4.6vw, 60px); margin: 0; max-width: 14ch; text-shadow: 0 2px 16px rgba(10,32,60,.45), 0 1px 3px rgba(10,32,60,.4); }
.moon-hero p { font-family: var(--font-inter); color: #fff; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; margin: 20px 0 0; max-width: 40ch; text-shadow: 0 1px 10px rgba(10,32,60,.5); }
.moon-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 32px); }

/* Floating action chips, sitting just above the laptop. The stack is anchored
   by its bottom edge to the laptop's screen top (a fixed fraction of the box),
   and grows upward, so the gap above the laptop stays constant at any width. */
.moon-notifs { position: absolute; z-index: 3; bottom: 52%; left: calc(62% - 150px); width: 300px;
  display: flex; flex-direction: column; gap: 11px; }
.moon-notif { display: flex; align-items: center; gap: 10px; background: #1e2a1ee6; border: 1px solid #ffffff26; border-radius: 12px; padding: 10px 13px; color: #fff; box-shadow: 0 6px 16px rgba(10,25,10,.28); }
.moon-notif .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-feature-success); flex-shrink: 0; }
.moon-notif .lbl { font-family: var(--font-inter); font-size: 12px; color: #ffffffb8; }
.moon-notif .val { font-family: var(--font-inter); font-size: 13px; font-weight: 500; margin-left: auto; }
@media (max-width: 1000px) {
  .moon-notifs { display: none; }
  .moon-hero { aspect-ratio: auto; min-height: 600px; align-items: center; background-position: center bottom; }
  .moon-hero-inner { padding-top: 96px; padding-bottom: 72px; }
}

/* ---------- Blue band with pixel horizon ----------
   Each horizon strip straddles an edge of the band. The top strip's solid-blue
   side is at its bottom, so it sits ABOVE the band with its bottom on the seam
   and the dither dissolving up into the light section. The bottom strip's
   dither is at its top, so it sits BELOW the band and dissolves down. This
   blends the band into its neighbours instead of cutting a hard line. */
.moon-band { position: relative; background: var(--moon-blue); color: #fff;
  padding-block: 128px; margin-block: 0; }
.moon-band::before, .moon-band::after { content: ""; position: absolute; left: 0; right: 0; height: 96px; background-repeat: repeat-x; background-size: auto 96px; pointer-events: none; z-index: 2; }
.moon-band::before { bottom: 100%; background-image: url('/build-ui-bits/carousel-top-blue.png'); background-position: bottom; }
.moon-band::after { top: 100%; background-image: url('/build-ui-bits/carousel-bottom.png'); background-position: top; }
.moon-band .clouds-l, .moon-band .clouds-r { position: absolute; top: 70px; z-index: 1; opacity: .9; pointer-events: none; }
.moon-band .clouds-l { left: 0; width: 280px; }
.moon-band .clouds-r { right: 0; width: 280px; }
.moon-band-inner { position: relative; z-index: 3; text-align: center; }
.moon-band h2 { font-family: var(--font-neoris); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(28px, 3.8vw, 44px); margin: 0; color: #fff; }
.moon-band h2 .soft { color: #ffffff87; }
.moon-band .sub { font-family: var(--font-inter); font-size: 17px; color: #ffffffcc; margin: 16px auto 0; max-width: 46ch; }
@media (max-width: 860px) { .moon-band { padding-block: 118px; } .moon-band .clouds-l, .moon-band .clouds-r { display: none; } }

/* ---------- Footer ---------- */
.moon-footer { position: relative; padding-top: 72px; }
.moon-footer .grass { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: url('/footer/footer-grass.png') left bottom / auto 100% repeat-x; pointer-events: none; z-index: 0; }
.moon-flink { color: var(--color-ink-muted); text-decoration: none; font-size: 14px; transition: color .16s ease-out; }
.moon-flink:hover { color: var(--color-ink-strongest); }
.moon-foot-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: 14px; }
.moon-foot-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end;
  background: #2f8fe0 url('/hero/moon-hero-scene.webp') center / cover; border: 1px solid var(--color-border-card); }
.moon-foot-card .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,20,0) 30%, rgba(18,32,18,.72) 100%); }
.moon-foot-card .inner { position: relative; z-index: 2; padding: 20px; color: #fff; }

/* ---------- Mobile nav ---------- */
.moon-mobile-nav { display: none; }
@media (max-width: 860px) {
  .moon-navgroup, .moon-header-cta { display: none; }
  .moon-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--moon-hairline); border-radius: 10px; background: #f1f1ee; color: var(--color-ink-strong); }
  .moon-mobile-nav { display: none; position: fixed; inset: 68px 0 auto 0; z-index: 199; background: var(--color-surface); border-bottom: 1px solid var(--color-border-card); padding: 12px 24px 20px; flex-direction: column; gap: 4px; }
  .moon-mobile-nav[data-open] { display: flex; }
  .moon-mobile-nav a { padding: 12px 8px; color: var(--color-ink-strong); text-decoration: none; border-bottom: 1px solid var(--color-border-card); font-size: 15px; }
  .moon-mobile-nav .moon-btn { margin-top: 12px; }
}

/* ---------- Legal page pixel band (same theme as landing) ---------- */
.moon-legal-hero { position: relative; background: var(--moon-blue); color: #fff; padding: 128px 0 84px; margin-bottom: 96px; }
.moon-legal-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 96px; background: url('/build-ui-bits/carousel-bottom.png') top repeat-x; background-size: auto 96px; pointer-events: none; z-index: 2; }
.moon-legal-hero .clouds-r { position: absolute; right: 0; top: 60px; width: 260px; opacity: .9; pointer-events: none; z-index: 1; }
.moon-legal-hero-inner { position: relative; z-index: 3; }
.moon-legal-hero .crumb { font-family: var(--font-mono); font-size: 12px; color: #ffffffc4; text-decoration: none; }
.moon-legal-hero .crumb:hover { color: #fff; }
.moon-legal-hero h1 { font-family: var(--font-neoris); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(32px, 5vw, 48px); color: #fff; margin: 16px 0 0; }
.moon-legal-hero .updated { font-family: var(--font-mono); font-size: 12.5px; color: #ffffffb0; margin: 14px 0 0; }

/* ---------- Legal / prose ---------- */
.moon-prose { font-family: var(--font-inter), sans-serif; color: var(--color-ink-strong); font-size: 15.5px; line-height: 1.7; }
.moon-prose h2 { font-family: var(--font-neoris), sans-serif; font-size: 20px; font-weight: 600; color: var(--color-ink-strongest); margin: 40px 0 12px; letter-spacing: -0.01em; }
.moon-prose h3 { font-family: var(--font-neoris), sans-serif; font-size: 16px; font-weight: 600; color: var(--color-ink-strongest); margin: 24px 0 8px; }
.moon-prose p { margin: 0 0 14px; }
.moon-prose ul { margin: 0 0 16px; padding-left: 20px; }
.moon-prose li { margin: 0 0 8px; }
.moon-prose a { color: var(--color-accent-brown); text-decoration: underline; text-underline-offset: 2px; }
.moon-prose strong { color: var(--color-ink-strongest); font-weight: 600; }