/* ============================================================
   Relativity6 — Marketing pages shared shell
   For: about, careers, contact, changelog, field-notes, etc.
   ============================================================ */

:root {
  --signal: #1C7AFE;
  --signal-dark: #0F5BC9;
  --signal-tint: #E8F0FE;
  --mainframe: #111E45;
  --ink: #111E45;
  --ink-2: #384366;
  --ink-3: #525D7E;
  --ink-4: #6C7694;
  --indigo-500: #1E1A4E;
  --matrix: #1FB879;
  --adverse: #DC3E3E;
  --caution: #E5A33A;

  --paper: #FAFAFA;
  --paper-warm: #F2F4F9;
  --paper-cool: #F7F9FD;
  --line: #E5E8EF;
  --line-cool: #E2E6EF;
  --line-warm: #DDE2EE;

  --core-plus-1: #0A8C82;
  --core-plus-2: #07685F;

  /* ── Core+ badge · unified component (mirrors workbench/style.css, landing.html) ── */
}
.core-plus {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Onest', sans-serif; font-weight: 900;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0A8C82;
  background: rgba(10,140,130,0.12);
  border: 1px solid rgba(10,140,130,0.26);
  border-radius: 100px; padding: 2px 7px;
  white-space: nowrap; vertical-align: middle;
}
.core-plus svg, .core-plus i { width: 9px; height: 9px; stroke-width: 2.5; flex-shrink: 0; }
.unlocked .core-plus { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.40); }
.source-name .core-plus { margin-left: 8px; }
:root {

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(17,30,69,0.06), 0 1px 1px rgba(17,30,69,0.04);
  --shadow: 0 4px 12px rgba(17,30,69,0.08), 0 1px 2px rgba(17,30,69,0.05);
  --shadow-lg: 0 16px 40px rgba(17,30,69,0.12), 0 2px 4px rgba(17,30,69,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
em, i { font-style: normal; font-weight: 300; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }
.container-prose { max-width: 720px; margin: 0 auto; padding: 0 32px; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,252,248,0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(230,227,216,0.6);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; max-width: 1400px; margin: 0 auto;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; color: var(--ink); text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
.nav-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--mainframe) 0%, #1A2E5F 100%);
  display: grid; place-items: center; color: #fff;
  font-size: 20px; font-weight: 700; padding-bottom: 3px;
}
.nav-brand-mark { font-weight: 700; }
.nav-brand-mark i { color: var(--signal); font-weight: 300; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link {
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  text-decoration: none; transition: color 0.15s;
}
.nav-link:hover { color: var(--ink); text-decoration: none; }
.nav-cta-wrap { display: flex; align-items: center; gap: 12px; }
.nav-cta-secondary {
  font-size: 14.5px; color: var(--ink); font-weight: 500;
  padding: 9px 14px; border-radius: 8px;
}
.nav-cta-secondary:hover { background: rgba(17,30,69,0.05); text-decoration: none; }
.nav-cta-tour {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--signal); font-weight: 600;
  background: linear-gradient(120deg, var(--signal-tint) 0%, #ECEAFE 100%);
  padding: 10px 16px; border-radius: 8px;
  border: 1px solid rgba(28,122,254,0.18);
  text-decoration: none; transition: box-shadow 0.18s, transform 0.1s, border-color 0.18s;
}
.nav-cta-tour:hover {
  text-decoration: none; transform: translateY(-1px);
  border-color: rgba(28,122,254,0.32);
  box-shadow: 0 4px 14px rgba(28,122,254,0.18);
}
.nav-cta-tour-icon { width: 15px; height: 15px; display: block; }
.nav-cta {
  font-size: 14.5px; color: #fff; font-weight: 500;
  background: var(--mainframe); padding: 10px 18px;
  border-radius: 8px; border: none; cursor: pointer;
}
.nav-cta:hover { background: #0A1636; text-decoration: none; }
@media (max-width: 768px) { .nav-links { display: none; } }

/* ── PAGE HEADER (eyebrow + title + lede) ── */
.page-head {
  padding: 80px 0 56px;
  background:
    radial-gradient(ellipse 80% 120% at 100% 50%, rgba(28,122,254,0.22)  0%, transparent 65%),
    radial-gradient(ellipse 75% 115% at 0% 50%,   rgba(91,79,206,0.20)   0%, transparent 65%),
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(181,99,58,0.14)   0%, transparent 65%),
    linear-gradient(180deg, var(--paper-warm) 0%, #EEF1F7 100%);
  border-bottom: 1px solid var(--line);
}
.page-head-inner { text-align: left; max-width: 820px; margin: 0 auto; padding: 0 32px; }
.page-eyebrow {
  display: inline-block;
  font-family: 'Onest', sans-serif;
  font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal);
  font-weight: 600; margin-bottom: 18px;
}
.page-title {
  font-family: 'Onest', sans-serif;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 20px;
}
.page-title em { color: var(--signal); font-weight: 300; }
.page-lede {
  font-size: 19px; line-height: 1.55;
  color: var(--ink-2); max-width: 680px;
}

/* ── BLOCK ── */
.block { padding: 80px 0; }
.block.warm {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}
.block.cool {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-cool) 100%);
}

/* ── PROSE ── */
.prose { color: var(--ink); }
.prose h2 {
  font-family: 'Onest', sans-serif;
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 56px 0 16px;
}
.prose h3 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.012em; margin: 32px 0 10px;
}
.prose p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin-bottom: 18px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 6px 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--signal); font-weight: 300; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  background: var(--mainframe); color: #fff;
  border-radius: 10px; font-size: 15px; font-weight: 500;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(17,30,69,0.2);
  transition: transform 0.1s, background 0.15s;
  font-family: inherit;
}
.btn-primary:hover {
  background: #0A1636; transform: translateY(-1px); text-decoration: none;
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: var(--paper-cool); border-color: var(--ink-4); text-decoration: none; }

/* ── FORMS ── */
.form-field { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 13px; color: var(--ink); font-weight: 500;
  margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); background: #fff;
  border-radius: 8px;
  font-family: 'Onest', sans-serif; font-size: 14.5px; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(28,122,254,0.12);
}
.form-textarea { resize: vertical; min-height: 100px; }

/* ── FOOTER (basic, full footer lives in landing.html template) ── */
.footer-basic {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3);
  background: var(--paper-cool);
}
.footer-basic-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-basic a { color: var(--ink-2); }
.footer-basic a:hover { color: var(--ink); }

/* ── EMPTY / NULL STATE ── */
.empty-state {
  max-width: 560px; margin: 0 auto;
  text-align: center; padding: 64px 32px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.empty-state-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--signal-tint); color: var(--signal);
  display: grid; place-items: center; font-size: 24px;
  margin: 0 auto 22px;
}
.empty-state-title {
  font-size: 24px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.empty-state-text {
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
  margin-bottom: 24px;
}

/* ── ICON ARROW (consistent across all CTAs) ── */
.arrow {
  display: inline-block;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") no-repeat center / contain;
  vertical-align: -3px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.btn-primary:hover .arrow,
.btn-secondary:hover .arrow,
.btn-primary-light:hover .arrow,
.btn-ghost-light:hover .arrow,
.dna-footer-cta:hover .arrow,
.newsletter-strip-submit:hover .arrow,
.sticky-pilot-cta:hover .arrow,
.nav-cta:hover .arrow { transform: translateX(3px); }

/* ── NEWSLETTER STRIP (shared via components.js footer) ── */
.newsletter-strip {
  background:
    radial-gradient(ellipse 80% 120% at 100% 50%, rgba(28,122,254,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 75% 115% at 0% 50%,   rgba(91,79,206,0.20)  0%, transparent 65%),
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(181,99,58,0.14)  0%, transparent 65%),
    linear-gradient(180deg, var(--paper-warm) 0%, #EEF1F7 100%);
  color: var(--ink);
  padding: 44px 0;
  border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.newsletter-strip-inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 48px; align-items: center;
}
@media (max-width: 820px) {
  .newsletter-strip-inner { grid-template-columns: 1fr; gap: 20px; }
}
.newsletter-strip-title {
  font-family: 'Onest', sans-serif;
  font-size: 20px;
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink); font-weight: 600;
  margin: 0;
}
.newsletter-strip-title em {
  color: var(--signal); font-weight: 400; font-style: normal;
}
.newsletter-strip-sub {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  margin: 6px 0 0;
  max-width: 540px;
}
.newsletter-strip-form {
  display: flex; gap: 8px; align-items: center;
}
.newsletter-strip-form > input { flex: 1; }
.newsletter-strip-submit-wrap {
  position: relative;
  display: inline-flex;
}
.newsletter-strip-marvin {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 56px; height: auto;
  transform: translate(-50%, 32%) rotate(-6deg);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 10px 16px rgba(28,122,254,0.18));
}
@media (max-width: 820px) {
  .newsletter-strip-marvin { display: none; }
}
.newsletter-strip-submit { position: relative; z-index: 1; }
.newsletter-strip-input {
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink); font-family: 'Onest', sans-serif;
  font-size: 14px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.newsletter-strip-input::placeholder { color: var(--ink-4); }
.newsletter-strip-input:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(28,122,254,0.12);
}
.newsletter-strip-submit {
  padding: 11px 18px;
  background: var(--mainframe); color: #fff;
  border: none; border-radius: 8px;
  font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.newsletter-strip-submit:hover { background: #0A1636; }

/* ── FOOTER (shared via components.js) ── */
.footer {
  padding: 64px 0 100px;
  background: #0E1835;
  color: rgba(255,255,255,0.75);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col-title {
  font-family: 'SUSE Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Onest', sans-serif;
  font-size: 24px;
  color: #fff;
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.footer-brand .nav-logo {
  background: linear-gradient(135deg, #2A3D6F 0%, #1A2E5F 100%);
  border: 1px solid rgba(255,255,255,0.1);
}
.footer-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  max-width: 300px;
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'SUSE Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.35); transition: color 0.15s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.8); }