/* RareTrace static commercial pages (/commercial, /commercial/connect).
   Plain CSS from the design tokens in src/app/globals.css. The partner's
   animation keeps its own scroll mechanics; only the look is ours. */

:root {
  --dark-bg: #07090D;
  --dark-text: #F6F7F9;
  --dark-muted: #8B93A1;
  --dark-line: #1C2029;
  --dark-elevated: #0F131A;
  --light-bg: #F7F6F2;
  --light-elevated: #FFFFFF;
  --light-text: #0B0D12;
  --light-muted: #5B6270;
  --light-line: #E3E1DA;
  --signal: #FFB020;
  --dark-btn-hover: #EAEBED;
  --light-btn-hover: #23262E;
  --dark-line-soft: rgba(246, 247, 249, 0.6);
  --light-line-soft: rgba(11, 13, 18, 0.6);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--light-bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--light-bg);
  color: var(--light-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
h2 { text-wrap: balance; }
::selection { background-color: var(--signal); color: var(--light-text); }
:focus-visible { outline: 1px solid var(--light-text); outline-offset: 2px; }
.zone-dark :focus-visible { outline-color: var(--dark-text); }
[id] { scroll-margin-top: 64px; }

.zone-light { background-color: var(--light-bg); color: var(--light-text); }
.zone-dark { background-color: var(--dark-bg); color: var(--dark-text); }

/* Layout ---------------------------------------------------------------- */
.gutter { margin: 0 auto; width: 100%; max-width: 1280px; padding-left: 24px; padding-right: 24px; }
.measure { margin: 0 auto; width: 100%; max-width: 760px; text-align: center; }
.section { padding: 56px 0; }
.band { padding: 112px 0; }

/* Type ------------------------------------------------------------------ */
.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
}
.h1 { font-size: 48px; }
.h2 { font-size: 40px; }
.h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.4; }
.lede { margin: 28px auto 0; max-width: 640px; text-align: center; font-size: 18px; line-height: 1.5; }
.muted-light { color: var(--light-muted); }
.muted-dark { color: var(--dark-muted); }
.ui-label { font-size: 15px; font-weight: 500; line-height: 1.4; }
.line { display: inline; }
.nobr { white-space: nowrap; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 16px 28px;
  white-space: nowrap;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-dark-primary { background-color: var(--dark-text); color: var(--dark-bg); border: 1px solid var(--dark-text); }
.btn-dark-primary:hover { background-color: var(--dark-btn-hover); border-color: var(--dark-btn-hover); }
.btn-dark-secondary { background-color: transparent; color: var(--dark-text); border: 1px solid var(--dark-line-soft); }
.btn-dark-secondary:hover { border-color: var(--dark-text); }
.btn-light-primary { background-color: var(--light-text); color: #FFFFFF; border: 1px solid var(--light-text); }
.btn-light-primary:hover { background-color: var(--light-btn-hover); border-color: var(--light-btn-hover); }
.btn-light-secondary { background-color: transparent; color: var(--light-text); border: 1px solid var(--light-line-soft); }
.btn-light-secondary:hover { border-color: var(--light-text); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }

/* A text button: no border, a signal hairline on hover. */
.text-link {
  display: inline-block;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 200ms ease-out;
}
.text-link:hover { border-bottom-color: var(--signal); }

/* Skip link for keyboard users. */
.skip-access {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 2px;
  background-color: var(--light-elevated);
  color: var(--light-text);
  border: 1px solid var(--light-line);
}
.skip-access:focus { top: 76px; }

/* Nav ------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 64px;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  color: var(--dark-text);
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.nav.is-light, .nav.is-open {
  background-color: var(--light-bg);
  color: var(--light-text);
  border-bottom-color: var(--light-line);
}
.nav-inner { display: flex; height: 64px; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a:not(.btn) { color: var(--dark-muted); transition: color 200ms ease-out; }
.nav.is-light .nav-links a:not(.btn) { color: var(--light-muted); }
.nav-links a:not(.btn):hover { color: inherit; }
.nav .nav-cta { padding: 11px 20px; font-size: 15px; background-color: transparent; color: inherit; border: 1px solid var(--dark-line-soft); }
.nav .nav-cta:hover { border-color: var(--dark-text); }
.nav.is-light .nav-cta { border-color: var(--light-line-soft); }
.nav.is-light .nav-cta:hover { border-color: var(--light-text); }

.burger { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: inherit; }
.burger-lines { position: relative; display: block; width: 22px; height: 11px; }
.burger-lines span { position: absolute; left: 0; display: block; width: 100%; height: 1px; background-color: currentColor; transition: transform 200ms ease-out, top 200ms ease-out; }
.burger-lines span:first-child { top: 0; }
.burger-lines span:last-child { top: 10px; }
.nav.is-open .burger-lines span:first-child { top: 5px; transform: rotate(45deg); }
.nav.is-open .burger-lines span:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
  background-color: var(--light-bg);
  color: var(--light-text);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
body.menu-open { overflow: hidden; }

/* Wordmark: the word, with the tail and dot of public/logo-mark.svg hung
   beneath it. Static. */
.wordmark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.wordmark svg { position: absolute; left: 0.066em; top: 0.916em; width: 4.7em; height: 0.198em; overflow: visible; }
.wordmark-footer { font-size: 26px; }
/* The trademark symbol at the top right of the final e: its ink 0.32 cap
   heights tall, its top on the cap line, 0.08 cap heights clear of the e.
   Offsets are in the word's em, from Bricolage Grotesque 800 metrics (cap
   0.66em, the glyph's ink 0.328em tall with its top 0.656em above its
   baseline), as in src/components/Wordmark.tsx. */
.wm-base { display: inline-block; width: 0; height: 0; }
.wm-tm { position: absolute; display: block; left: 4.8117em; top: 0.058em; }
.wm-tm > span { display: block; font-size: 0.6439em; line-height: 1; }

/* Footer ---------------------------------------------------------------- */
.footer { border-top: 1px solid var(--light-line); background-color: var(--light-bg); color: var(--light-text); }
.footer-inner { padding-top: 64px; padding-bottom: 64px; text-align: center; }
.footer-tag { margin-top: 16px; font-size: 18px; color: var(--light-muted); }
.footer-links { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; }
.footer-links a { color: var(--light-muted); transition: color 200ms ease-out; }
.footer-links a:hover { color: var(--light-text); }
.rule { height: 1px; width: 100%; background-color: var(--light-line); }
.footer .rule { margin-top: 40px; }
.footer-legal { margin-top: 24px; font-size: 13px; line-height: 1.5; color: var(--light-muted); }
.footer-credit { color: inherit; }
.footer-credit:hover { text-decoration: underline; }

/* Panels: hairline, 2px, like OutputPanel and Ways to connect ------------ */
.panel {
  margin: 56px auto 0;
  width: 100%;
  max-width: 720px;
  padding: 0 28px;
  border-radius: 2px;
  border: 1px solid var(--light-line);
  background-color: var(--light-elevated);
  text-align: left;
}
.row { display: flex; align-items: baseline; gap: 20px; padding: 24px 0; }
.row + .row { border-top: 1px solid var(--light-line); }
.row-digit { width: 16px; flex-shrink: 0; font-size: 20px; line-height: 1.4; color: var(--light-muted); }
.row h3 { color: var(--light-text); }
.row p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--light-muted); }
.panel-foot { border-top: 1px solid var(--light-line); padding: 24px 0; font-size: 16px; line-height: 1.5; color: var(--light-text); }

/* Method: four steps, centred, split by hairlines. */
.steps {
  margin: 56px auto 0;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--light-line);
  border-bottom: 1px solid var(--light-line);
  text-align: center;
}
.steps article { padding: 32px 8px; }
.steps article + article { border-top: 1px solid var(--light-line); }
.steps p { margin: 12px auto 0; max-width: 420px; font-size: 16px; line-height: 1.5; color: var(--light-muted); }
.steps-foot { margin: 28px auto 0; max-width: 640px; text-align: center; font-size: 16px; line-height: 1.5; color: var(--light-text); }

/* Forms ----------------------------------------------------------------- */
.form-panel {
  margin: 56px auto 0;
  width: 100%;
  max-width: 720px;
  padding: 24px;
  border-radius: 2px;
  border: 1px solid var(--light-line);
  background-color: var(--light-elevated);
  color: var(--light-text);
  text-align: left;
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.field label { display: block; font-size: 13px; line-height: 1.4; color: var(--light-muted); }
.field-control { margin-top: 8px; position: relative; }
.form-field {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 2px;
  border: 1px solid var(--light-line);
  background-color: var(--light-elevated);
  color: var(--light-text);
  font-size: 16px;
  outline: none;
  box-shadow: none;
  transition: border-color 200ms ease-out;
}
textarea.form-field { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.5; }
select.form-field { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-chevron { pointer-events: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.form-field:focus, .form-field:focus-visible { border-color: var(--light-text); outline: none; box-shadow: none; }
.form-field.form-field-error { border-color: var(--signal); }
.field-error { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--light-text); }
.form-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.form-actions .btn { width: 100%; }
.form-status { font-size: 15px; line-height: 1.5; color: var(--light-muted); }
.form-status.is-error { color: var(--light-text); }
.form-status:empty { display: none; }
.form-success { padding: 40px 0; text-align: center; font-size: 18px; line-height: 1.5; }

/* The animation -------------------------------------------------------- */
/* Heights, stickiness and the meter are what the partner's script reads to
   map scroll to the story. They are kept as he set them. */
.experience { height: 920svh; position: relative; overflow-anchor: none; background-color: var(--dark-bg); color: var(--dark-text); }
.viewport { position: sticky; top: 0; height: 100svh; min-height: 600px; overflow: hidden; background-color: var(--dark-bg); overflow-anchor: none; }
#space { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewport-meter { position: fixed; top: 0; left: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; overflow: hidden; contain: strict; }

.scene-text { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow-anchor: none; }
.scene {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 48px);
  max-width: 760px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.scene.active { visibility: visible; pointer-events: auto; }
.scene h1, .scene h2 { text-align: center; }
.scene p { margin: 20px auto 0; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--dark-text); }
.scene p.support { margin-top: 8px; font-size: 16px; color: var(--dark-muted); }
.scene .text-link { margin-top: 20px; }
.scene.hero { max-width: 1040px; }
.scene.hero p { color: var(--dark-muted); }
.start { display: none; }

.diagram-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: calc(100% - 48px);
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dark-muted);
}
#diagram-label { color: var(--dark-text); }

.scene-bottom {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.scene-bottom .text-link { color: var(--dark-muted); min-height: 44px; display: inline-flex; align-items: center; }
.scene-bottom .text-link:hover { color: var(--dark-text); }
#motion > span[aria-hidden="true"] { display: none; }
.scene-nav { display: none; }
.progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 20; background-color: var(--dark-line); }
.progress span { display: block; height: 100%; width: 0; background-color: var(--signal); }

/* Short windows: the script drops the pin and stacks the story. */
.reading-mode .experience { height: auto; }
.reading-mode .viewport { position: relative; height: auto; min-height: 0; overflow: visible; }
.reading-mode .scene-text { position: relative; padding: 112px 24px 56px; }
.reading-mode .scene { position: relative; top: auto; left: auto; right: auto; margin: 0 auto 80px; width: 100%; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; }
.reading-mode #space, .reading-mode .diagram-caption, .reading-mode .scene-bottom, .reading-mode .progress { display: none; }
.reduced-motion * { transition: none !important; animation: none !important; }

/* Stat band: StatBand.tsx in static form. Hairline grid, two up on
   phones, four across from 1024px. */
.stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--light-line);
  background-color: var(--light-line);
}
.stat { padding: 40px 16px; background-color: var(--light-bg); text-align: center; }
.stat-figure {
  min-height: 2.15em;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.stat-label { margin: 16px auto 0; max-width: 28ch; font-size: 15px; line-height: 1.5; color: var(--light-muted); }
.stat-label sup { margin-left: 2px; font-size: 10px; }
.sources { margin: 32px auto 0; max-width: 760px; text-align: left; }
.sources-title { font-size: 13px; font-weight: 500; color: var(--light-muted); }
.sources ol { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sources li { font-size: 13px; line-height: 1.55; color: var(--light-muted); }
.source-link { color: var(--light-text); border-bottom: 1px solid transparent; transition: border-color 200ms ease-out; }
.source-link:hover { border-bottom-color: var(--light-text); }

/* The canvas caption already reads "Illustrative workflow" on phones at
   steps 5 and 6; rt.js marks those moments so the note shows once. */
.diagram-caption.is-workflow .caption-note { display: none; }

/* Breakpoints ------------------------------------------------------------ */
@media (min-width: 640px) {
  .form-actions { flex-direction: row; align-items: center; justify-content: flex-end; }
  .form-actions .form-status { margin-right: auto; }
  .form-actions .btn { width: auto; }
}

@media (min-width: 768px) {
  .line { display: block; }
  .gutter { padding-left: 40px; padding-right: 40px; }
  .h1 { font-size: 72px; }
  .h2 { font-size: 56px; }
  .section { padding: 72px 0; }
  .band { padding: 144px 0; }
  .panel { padding: 0 40px; }
  .form-panel { padding: 40px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}

/* The script lays the story out for phones at 800px and below. */
@media (min-width: 801px) {
  .scene { top: 112px; }
  .scene.hero, .scene[data-scene="1"] { top: 51%; }
  .diagram-caption { bottom: 96px; flex-direction: row; gap: 16px; }
  .diagram-caption span + span { border-left: 1px solid var(--dark-line); padding-left: 16px; }
  .scene-bottom { left: 40px; right: 40px; bottom: 28px; }
}

@media (min-width: 1024px) {
  .gutter { padding-left: 48px; padding-right: 48px; }
  body { font-size: 20px; }
  .h3 { font-size: 24px; }
  .lede, .scene p { font-size: 20px; }
  .nav-links { display: flex; }
  .burger { display: none; }
  .mobile-menu, .mobile-menu.is-open { display: none; }
  .section { padding: 90px 0; }
  .band { padding: 180px 0; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .stats { margin-top: 64px; grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 40px 24px; }
  .stat-figure { min-height: 0; font-size: 32px; }
  .steps article { padding: 32px 24px; }
  .steps article + article { border-top: 0; border-left: 1px solid var(--light-line); }
  .btn { font-size: 16px; }
}

@media (min-width: 1280px) {
  .h1 { font-size: 96px; }
  .h2 { font-size: 72px; }
  .stat-figure { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; scroll-behavior: auto !important; }
}