/* Revling apex site — Arbiter / Trace design tokens plus the page's own styles.
   Committed static CSS: what is here is what ships.

   Carried over from the design system: the color / typography / spacing tokens and the
   class-first component styles. As with the page this one replaces, only the tokens and
   classes this page actually uses are kept.

   FONTS: the design system loads IBM Plex from Google Fonts. This site makes no
   third-party requests, so the families are named first and fall back to the system
   stack. */

/* ============================================================
   Tokens — color
   Two themes from one token source. Light is the warm-neutral default; dark is
   graphite. Orange = action / current state, never severity.
   ============================================================ */

:root {
  --canvas: #F5F3ED;
  --surface: #FCFBF7;
  --surface-raised: #FFFFFF;
  --ink: #171A1F;
  --muted: #5C6470;
  --line: #8A857B;
  --line-soft: #C8C4BA;
  --accent: #C2410C;
  --accent-hover: #9A3412;
  --accent-ink: #FFFFFF;        /* text on accent */

  color-scheme: light;
}

/* The head script and app.js write this attribute from the OS preference. */
:root[data-theme="dark"] {
  --canvas: #111316;
  --surface: #191C21;
  --surface-raised: #22262D;
  --ink: #F2F0E8;
  --muted: #A8AFB8;
  --line: #747D89;
  --line-soft: #59616C;
  --accent: #FB923C;
  --accent-hover: #FDBA74;
  --accent-ink: #1A1005;

  color-scheme: dark;
}

/* No JavaScript, so no attribute: follow the OS directly. The inline script in
   index.html resolves the theme before first paint, so this block is what carries the
   page without JavaScript. Values duplicate the block above because CSS cannot alias one
   rule's declarations into another. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #111316;
    --surface: #191C21;
    --surface-raised: #22262D;
    --ink: #F2F0E8;
    --muted: #A8AFB8;
    --line: #747D89;
    --line-soft: #59616C;
    --accent: #FB923C;
    --accent-hover: #FDBA74;
    --accent-ink: #1A1005;

    color-scheme: dark;
  }
}

/* ============================================================
   Tokens — typography
   IBM Plex Sans for interface and prose; IBM Plex Mono for status labels, counts and
   machine-like text. Uppercase only for compact labels.
   ============================================================ */

:root {
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-body-lg: 17px;
  --text-body-size: 15px;
  --text-small: 13px;
  --text-micro: 11px;

  --leading-body: 1.5;

  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-label: 0.08em;    /* uppercase mono labels */
}

/* ============================================================
   Tokens — spacing, shape, depth, motion
   4px base. Borders establish grouping; background changes establish hierarchy;
   shadows are reserved for overlays that physically cover content.
   ============================================================ */

:root {
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius: 4px;
  --radius-overlay: 8px;

  --shadow-overlay: 0 8px 24px rgba(17, 19, 22, 0.18);

  --content-max: 1200px;       /* landing 12-col max width */

  --motion-control: 150ms;     /* control feedback */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   Design system components (only the classes this page uses)
   ============================================================ */

.arbiter-base {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.mono { font-family: var(--font-mono); }

:where(.arbiter-base) :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 0 var(--space-4);
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-control) var(--ease),
              border-color var(--motion-control) var(--ease),
              color var(--motion-control) var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface-raised); border-color: var(--ink); }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-small); }

/* trace line — signature motif. The vertical rule and the step dots come from the
   design system; the column layout is this page's use of it. */
.trace {
  position: relative;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.trace::before {
  content: "";
  position: absolute;
  left: 6px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.trace-step { position: relative; }
.trace-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) + 3px);
  top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--line);
}
.trace-step.trace-active::before {
  background: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   Page
   ============================================================ */

html { scroll-behavior: smooth; }

/* The page toggles state with the `hidden` attribute, and several of the elements it
   hides carry a `display` of their own — which would otherwise win over the user agent's
   `[hidden] { display: none }`. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Shared page container. */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .bar {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 64px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.logo:hover { color: var(--ink); }

/* The dotless ı carries the brand dot, so the dot can be accent-colored. */
.logo-dotless { position: relative; display: inline-block; }
.logo-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* The header row is logo + call to action, and neither wraps. On a phone they only fit
   once the gutters, the gaps and the button are tightened. */
@media (max-width: 560px) {
  .site-header .bar {
    gap: var(--space-2);
    padding: 0 var(--space-4);
  }
  .header-actions { gap: var(--space-2); }
  .header-actions .btn {
    padding: 0 var(--space-2);
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .site-header .bar { padding: 0 var(--space-2); }
  .header-actions .btn { font-size: 11px; }
}

/* ---------- animated scene ---------- */

.scene-section { padding: var(--space-6) 0 0; }

.scene {
  width: 100%;
  aspect-ratio: 1080 / 700;
  background: var(--canvas);
}

/* ---------- explainer ---------- */

.pitch { padding: 48px 0 96px; }

/* Also the page's h1: every UA heading default (size, weight, margin) is overridden
   here, so the element renders exactly as the paragraph it replaced. */
.kicker {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 36px;
}

.explainer {
  display: grid;
  grid-template-columns: minmax(320px, 6fr) minmax(320px, 6fr);
  gap: 48px;
  align-items: start;
}

/* Each column has a 320px minimum, so below roughly a tablet the two no longer fit
   side by side and stack instead. */
@media (max-width: 767px) {
  .explainer {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.prose {
  font-size: var(--text-body-lg);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  line-height: 1.55;
  text-wrap: pretty;
}
.prose-last { margin: 0; }

.step-title {
  margin: 0 0 4px;
  font-size: var(--text-small);
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.step-title-active { color: var(--accent); }

.step-body {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 60ch;
}

/* ---------- waitlist ---------- */

.join {
  scroll-margin-top: 88px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

.join-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.join-input {
  height: 42px;
  min-width: 260px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline-color: var(--accent);
}

.join-noscript {
  font-size: var(--text-small);
  color: var(--muted);
  margin: 10px 0 0;
}

.join-error {
  font-size: var(--text-small);
  color: var(--accent);
  margin: 10px 0 0;
}

.join-done {
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  line-height: 1.55;
}

/* ---------- consent banner ---------- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface-raised);
  border-top: 1px solid var(--line);
  animation: rl-rise 0.22s var(--ease) both;
}

.consent-bar {
  padding: 14px var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.consent-text {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
  flex: 1;
  min-width: 260px;
  text-wrap: pretty;
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.link-button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }

@keyframes rl-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 48px 0 56px;
}

/* The banner is fixed to the bottom edge and can wrap to two rows on a narrow viewport,
   which at maximum scroll covers the footer's own controls with no scroll left to
   reveal them. While it is up, the footer reserves room for the tallest wrap. */
body.consent-open .site-footer { padding-bottom: 180px; }

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.talk { position: relative; }

.talk-popover {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  padding: 14px var(--space-4);
  min-width: 220px;
}

.talk-text {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

.talk-link {
  font-size: var(--text-small);
  color: var(--accent);
  text-decoration: none;
}
.talk-link:hover { color: var(--accent-hover); }

.talk-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.talk-toggle:hover { color: var(--ink); }
.talk-toggle img { display: block; }

.colophon {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   Reduced motion — the scene renders a single static frame (see app.js) and nothing
   else on the page moves.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}