/* ============================================================
   OutcomeDev landing page
   Visual system: single typeface (Manrope), Tailwind type scale,
   fixed spacing scale, flat backgrounds, custom easing only.
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --ink-2: #3d3d3d;
  --ink-3: #6b6b6b;
  --ink-4: #9b9b9b;
  --line: #e6e6e6;
  --line-2: #f1f1f1;
  --bg: #ffffff;
  --bg-2: #f7f7f7;
  --accent: #1a5cff;
  --accent-ink: #ffffff;
  --dark: #181818;
  --dark-2: #1f1f1f;
  --good: #0f7a4a;
  --hot: #b02a2a;
  --warm: #9a6206;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 { text-wrap: balance; margin: 0; }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }

/* ---------------------------------------------------------------- skip */

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  z-index: 100;
}
.skip:focus { left: 24px; }

/* ---------------------------------------------------------------- nav */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 24px auto 0;
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 8px 8px 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line);
  border-radius: 999px;
  z-index: 50;
  transition: all 700ms var(--ease);
}

.nav-brand { display: flex; align-items: center; gap: 8px; }

.nav-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.nav-word { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }

.nav-links { display: flex; gap: 4px; }

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: 999px;
  transition: all 700ms var(--ease);
}
.nav-links a:hover { background: var(--line-2); color: var(--ink); }
.nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}
.nav-burger span {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 700ms var(--ease);
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ---------------------------------------------------------------- sheet */

.sheet[hidden] { display: none; }

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  z-index: 49;
  display: grid;
  place-items: center;
  transition: all 700ms var(--ease);
}
.sheet-inner { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sheet-inner a {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  padding: 8px 12px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(48px);
  transition: all 700ms var(--ease);
}
.sheet.open .sheet-inner a { opacity: 1; transform: translateY(0); }
.sheet.open .sheet-inner a:nth-child(1) { transition-delay: 100ms; }
.sheet.open .sheet-inner a:nth-child(2) { transition-delay: 150ms; }
.sheet.open .sheet-inner a:nth-child(3) { transition-delay: 200ms; }
.sheet.open .sheet-inner a:nth-child(4) { transition-delay: 250ms; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav { gap: 8px; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 700ms var(--ease);
}
.btn:hover { background: var(--bg-2); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-sm { font-size: 14px; line-height: 20px; padding: 8px 12px; }

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

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-2); }

.btn-block { width: 100%; }

.arrow { transition: transform 700ms var(--ease); }
.btn-ghost:hover .arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------- hero */

.hero { padding: 96px 0 64px; }

.eyebrow {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 16px;
  text-transform: none;
}

.hero-h {
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -2px;
  max-width: 680px;
  background: linear-gradient(to right, #000000, #666666);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
  max-width: 680px;
  margin-bottom: 32px;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.risk { font-size: 14px; line-height: 20px; color: var(--ink-3); margin-top: 16px; }
.risk.center { text-align: center; }

.hero-proof { margin-top: 48px; max-width: 680px; }

.proof-stat {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.proof-num {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.proof-label { font-size: 14px; line-height: 20px; color: var(--ink-3); flex: 1; min-width: 240px; }

@media (max-width: 860px) {
  .hero { padding: 80px 0 48px; }
  .hero-h { font-size: 48px; letter-spacing: -1.4px; }
}

/* ---------------------------------------------------------------- frame */

.frame {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 32px rgba(10, 10, 10, 0.06);
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.frame-bar .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); }
.frame-url { font-size: 12px; line-height: 16px; color: var(--ink-4); margin-left: 8px; }

.frame-body { padding: 24px; }

.mock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.mock-title { font-size: 18px; line-height: 28px; font-weight: 700; }
.mock-meta { font-size: 12px; line-height: 16px; color: var(--ink-3); }

.mock-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: 8px;
}
.mock-row:last-child { margin-bottom: 0; }

.mock-score {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--line-2);
  color: var(--ink-2);
}
.mock-row.hot .mock-score { background: #fbeceb; color: var(--hot); }
.mock-row.warm .mock-score { background: #fdf3e2; color: var(--warm); }

.mock-t { font-size: 14px; line-height: 20px; font-weight: 600; }
.mock-s { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: 2px; }

.mock-tag {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-md);
  background: var(--line-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.mock-tag.good { background: #e8f5ee; color: var(--good); }

@media (max-width: 640px) {
  .mock-row { grid-template-columns: 40px 1fr; }
  .mock-tag { display: none; }
}

/* ---------------------------------------------------------------- tagline */

.tagline { padding: 96px 0; }

.tagline-text {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.2px;
  max-width: 680px;
}

.tagline-text .w {
  color: rgba(10, 10, 10, 0.28);
  transition: color 700ms var(--ease);
}
.tagline-text .w.on { color: var(--ink); }

@media (max-width: 860px) {
  .tagline { padding: 64px 0; }
  .tagline-text { font-size: 36px; line-height: 40px; letter-spacing: -0.8px; }
}

/* ---------------------------------------------------------------- sections */

.section { padding: 96px 0; }
.section.alt { background: var(--bg-2); }
.section.dark { background: var(--dark); color: #fff; }
.section.dark .eyebrow { color: var(--ink-4); }
.section.dark .lede { color: #9b9b9b; }

.section h2 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
  max-width: 680px;
}

.lede {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
  margin-bottom: 24px;
}

.muted { font-size: 14px; line-height: 20px; color: var(--ink-3); }

.plain-list { margin: 0 0 24px; padding: 0 0 0 24px; }
.plain-list li {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 24px;
  background: #fff;
  transition: all 700ms var(--ease);
}
.card:hover { transform: translateY(-2px); }

.ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.ico svg { width: 20px; height: 20px; color: var(--ink); }

.card h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* ---------------------------------------------------------------- steps */

.steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.steps li {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 24px;
}
.step-n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.steps h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 8px; }
.steps p { font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 32px 0;
}
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

.stat {
  border: 1px solid #313131;
  border-radius: var(--r-2xl);
  padding: 24px;
  background: var(--dark-2);
}
.stat-n {
  display: block;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}
.stat-l { font-size: 14px; line-height: 20px; color: #9b9b9b; }

.fine { font-size: 12px; line-height: 16px; color: var(--ink-4); }

/* ---------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 16px; }
.chips span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- faq */

.faq { margin-top: 32px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  padding: 16px 24px;
  margin-bottom: 8px;
  transition: all 700ms var(--ease);
}
.faq details:hover { border-color: #d8d8d8; }

.faq summary {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 20px;
  color: var(--ink-4);
  transition: transform 700ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }

.faq p {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  margin-top: 12px;
}

/* ---------------------------------------------------------------- cta */

.cta-final { padding: 96px 0; background: var(--bg-2); }

.audit-form { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; line-height: 20px; font-weight: 600; }

.field input,
.field select {
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  color: var(--ink);
  width: 100%;
  transition: all 700ms var(--ease);
}
.field input:hover,
.field select:hover { border-color: #d8d8d8; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.12);
}
.field input.invalid,
.field select.invalid { border-color: var(--hot); }

.err { font-size: 14px; line-height: 20px; color: var(--hot); }

.btn.loading { opacity: 0.7; cursor: default; }

.done {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  padding: 24px;
}
.done h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 8px; }
.done p { font-size: 14px; line-height: 20px; color: var(--ink-2); }

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

.footer { background: var(--dark); color: #fff; padding: 64px 0 32px; }

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.foot-brand .nav-mark { background: #fff; color: var(--ink); }

.foot-note { font-size: 14px; line-height: 20px; color: #9b9b9b; max-width: 380px; }

.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col h4 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 8px;
}
.foot-col a {
  font-size: 14px;
  line-height: 20px;
  color: #9b9b9b;
  transition: color 700ms var(--ease);
}
.foot-col a:hover { color: #fff; }
.foot-col a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.foot-base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #313131;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #6b6b6b;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- reveal */

.js .reveal {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .tagline-text .w { color: var(--ink); transition: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------------- feature */

.feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 24px;
  margin: 32px 0 24px;
  background: #fff;
}
.feature h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin: 12px 0 8px; }
.feature p { font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 560px; }

.tag-live {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--good);
  background: #e8f5ee;
  border-radius: var(--r-md);
  padding: 4px 8px;
}

/* ============================================================
   POLISH PASS
   Later rules deliberately override the earlier base where the
   design tightened up. Grouped by component.
   ============================================================ */

/* ---------------------------------------------------------------- nav */

/* The nav is a pill, so the button inside it has to be a pill too. */
.nav .btn-sm {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  line-height: 20px;
}

.nav-word { letter-spacing: -0.3px; }

/* ---------------------------------------------------------------- hero */

.hero { padding: 152px 0 80px; text-align: center; }

.hero .wrap { display: flex; flex-direction: column; align-items: center; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 24px;
}

.eyebrow-pill .pip {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--good);
}

.hero-h {
  font-size: 84px;
  letter-spacing: -3px;
  max-width: 820px;
  margin: 0 auto 24px;
}

.hero-sub {
  font-size: 20px;
  line-height: 30px;
  max-width: 560px;
  margin: 0 auto 32px;
}

.hero-cta { justify-content: center; }

.hero .risk { text-align: center; }

@media (max-width: 860px) {
  .hero { padding: 120px 0 56px; }
  .hero-h { font-size: 52px; letter-spacing: -1.6px; }
  .hero-sub { font-size: 18px; line-height: 28px; }
}

/* ------------------------------------------------- hero illustration */

.frame { margin-top: 56px; width: 100%; text-align: left; }

.progress {
  height: 3px;
  background: var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--good);
  border-radius: 999px;
  animation: progressFill 9s var(--ease) infinite;
}

@keyframes progressFill {
  0%        { width: 4%; }
  56%       { width: 100%; }
  88%       { width: 100%; }
  96%, 100% { width: 4%; }
}

.tasks { list-style: none; margin: 0; padding: 0; }

.tasks li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: 8px;
  background: #fff;
}
.tasks li:last-child { margin-bottom: 0; }

.tasks li:nth-child(1) { animation: taskA 9s var(--ease) infinite; }
.tasks li:nth-child(2) { animation: taskB 9s var(--ease) infinite; }
.tasks li:nth-child(3) { animation: taskC 9s var(--ease) infinite; }
.tasks li:nth-child(4) { animation: taskD 9s var(--ease) infinite; }
.tasks li:nth-child(5) { animation: taskE 9s var(--ease) infinite; }

@keyframes taskA { 0%,4%{opacity:.5} 13%,90%{opacity:1} 98%,100%{opacity:.5} }
@keyframes taskB { 0%,14%{opacity:.5} 23%,90%{opacity:1} 98%,100%{opacity:.5} }
@keyframes taskC { 0%,24%{opacity:.5} 33%,90%{opacity:1} 98%,100%{opacity:.5} }
@keyframes taskD { 0%,34%{opacity:.5} 43%,90%{opacity:1} 98%,100%{opacity:.5} }
@keyframes taskE { 0%,44%{opacity:.5} 53%,90%{opacity:1} 98%,100%{opacity:.5} }

.task-mark {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #e8f5ee;
  display: grid;
  place-items: center;
}
.task-mark svg { width: 15px; height: 15px; }
.task-mark path { stroke: var(--good); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.task-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.task-sub { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }

@media (max-width: 640px) {
  .tasks li { grid-template-columns: 26px 1fr; }
  .tasks .mock-tag { display: none; }
}

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

.footer { background: var(--dark); color: #fff; padding: 80px 0 0; overflow: hidden; }

.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 64px;
}
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } }

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}
.foot-brand svg { width: 28px; height: 28px; }

.foot-note { font-size: 14px; line-height: 20px; color: #9b9b9b; max-width: 320px; }

.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col h4 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 8px;
}
.foot-col a { font-size: 14px; line-height: 20px; color: #9b9b9b; transition: color 700ms var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-col a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Giant wordmark. textLength pins the width so it always fills the
   viewport exactly, whatever the font does. */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  color: #fff;
  margin-bottom: -1.4%;
}
.wordmark text {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  fill: currentColor;
}

.foot-base {
  padding: 24px 0 32px;
  border-top: 1px solid #313131;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #6b6b6b;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- polish */

.section h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
@media (max-width: 860px) { .section h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.8px; } }

.card { transition: transform 700ms var(--ease), border-color 700ms var(--ease); }
.card:hover { transform: translateY(-3px); border-color: #dcdcdc; }

.steps li { transition: border-color 700ms var(--ease); }
.steps li:hover { border-color: #dcdcdc; }

.btn-primary:hover { background: #232323; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Motion must never be the thing that hides content. */
@media (prefers-reduced-motion: reduce) {
  .tasks li, .progress span { animation: none; opacity: 1; }
  .progress span { width: 100%; }
}

.foot-base { display: block; }
.foot-base-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Label and sub line up vertically inside each task. */
.task-label { display: block; }
.task-sub { display: block; }

/* ============================================================
   DARK MODE
   Dark surfaces use only the permitted values: #000000, #181818,
   #1F1F1F, #272727, #313131. Light mode is the default; the
   attribute is set before first paint so there is no flash.
   ============================================================ */

[data-theme="dark"] {
  --ink: #ffffff;
  --ink-2: #b8b8b8;
  --ink-3: #8a8a8a;
  --ink-4: #6b6b6b;
  --line: #313131;
  --line-2: #272727;
  --bg: #000000;
  --bg-2: #181818;
  --card: #181818;
  --accent: #7aa2ff;
  --accent-soft: #1f1f1f;
  --good: #3ddc84;
  --good-soft: #16281d;
  --hot: #ff8a80;
  --bad: #ff8a80;
  --bad-soft: #2a1a1a;
  --warm: #ffb86b;
  --warn-soft: #2a2318;
  --dark: #000000;
  --dark-2: #181818;
  --shadow: none;
}

[data-theme="dark"] .hero-h {
  background: linear-gradient(to right, #ffffff, #9b9b9b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* glass surfaces */
[data-theme="dark"] .nav {
  background: rgba(0, 0, 0, 0.68);
  border-color: var(--line);
}
[data-theme="dark"] .sheet { background: rgba(0, 0, 0, 0.8); }

/* buttons invert: the primary becomes light on dark */
[data-theme="dark"] .btn { background: #181818; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .btn:hover { background: #272727; }
[data-theme="dark"] .btn-primary { background: #ffffff; border-color: #ffffff; color: #000000; }
[data-theme="dark"] .btn-primary:hover { background: #e6e6e6; }

/* components that carry an explicit light background */
[data-theme="dark"] .eyebrow-pill,
[data-theme="dark"] .card,
[data-theme="dark"] .steps li,
[data-theme="dark"] .faq details,
[data-theme="dark"] .frame,
[data-theme="dark"] .tasks li,
[data-theme="dark"] .done,
[data-theme="dark"] .stat { background: #181818; }

[data-theme="dark"] .section.alt { background: #181818; }
[data-theme="dark"] .section.dark { background: #1f1f1f; }
[data-theme="dark"] .cta-final { background: #181818; }
[data-theme="dark"] .footer { background: #181818; border-top: 1px solid var(--line); }

[data-theme="dark"] .frame-bar { background: #1f1f1f; }
[data-theme="dark"] .ico,
[data-theme="dark"] .mock-tag,
[data-theme="dark"] .chips span span,
[data-theme="dark"] .chips span { background: #1f1f1f; border-color: #313131; }
[data-theme="dark"] .chips span { background: transparent; }

[data-theme="dark"] .task-mark { background: #16281d; }
[data-theme="dark"] .mock-row { background: #181818; }

[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .search {
  background: #181818;
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .field input::placeholder { color: #6b6b6b; }

[data-theme="dark"] .progress { background: #272727; }
[data-theme="dark"] .mini-item:hover,
[data-theme="dark"] tr:hover td { background: #181818; }
[data-theme="dark"] .result pre { background: #181818; border-color: var(--line); }
[data-theme="dark"] .foot-base { border-top-color: #313131; }

/* ---------------------------------------------------------------- toggle */

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: background 700ms var(--ease), color 700ms var(--ease);
}
.theme-toggle:hover { background: var(--line-2); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* ============================================================
   DARK MODE CORRECTIONS
   The first dark pass used one surface value for both sections
   and cards, so nested elements lost their edges, and two
   components used var(--ink) as a background with hardcoded
   white text (white on white). Corrected here.

   Surface scale in dark:
     page #000000 · raised #181818 · card on raised #1F1F1F
     nested #272727 · border #313131
   ============================================================ */

:root { color-scheme: light; }

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #181818;
  --card: #181818;
}

/* --- section bands --- */
[data-theme="dark"] .section.alt,
[data-theme="dark"] .cta-final,
[data-theme="dark"] .footer,
[data-theme="dark"] .section.dark { background: #181818; }

/* --- raised surfaces on the page --- */
[data-theme="dark"] .card,
[data-theme="dark"] .steps li,
[data-theme="dark"] .faq details,
[data-theme="dark"] .frame,
[data-theme="dark"] .done,
[data-theme="dark"] .eyebrow-pill,
[data-theme="dark"] .proof-stat { background: #181818; }

/* --- raised again when they sit on an already raised band --- */
[data-theme="dark"] .section.alt .card,
[data-theme="dark"] .section.alt .faq details,
[data-theme="dark"] .section.alt .steps li,
[data-theme="dark"] .section.dark .stat,
[data-theme="dark"] .cta-final .done,
[data-theme="dark"] .cta-final .field input,
[data-theme="dark"] .cta-final .field select { background: #1f1f1f; }

/* --- nested one level deeper --- */
[data-theme="dark"] .tasks li { background: #1f1f1f; }
[data-theme="dark"] .frame-bar { background: #1f1f1f; }
[data-theme="dark"] .ico { background: #272727; }
[data-theme="dark"] .mock-tag { background: #272727; }

/* --- tinted chips --- */
[data-theme="dark"] .mock-tag.good,
[data-theme="dark"] .task-mark { background: #16281d; color: var(--good); }
[data-theme="dark"] .chips span { background: transparent; border-color: #313131; color: var(--ink-2); }

/* --- white on white bugs --- */
[data-theme="dark"] .skip { background: #ffffff; color: #000000; }
[data-theme="dark"] .step-n { background: #ffffff; color: #000000; }

/* --- the muted state of the tagline reveal was dark on dark --- */
[data-theme="dark"] .tagline-text .w { color: rgba(255, 255, 255, 0.3); }

/* --- ghost buttons must stay transparent on raised bands --- */
[data-theme="dark"] .btn-ghost { background: transparent; }
[data-theme="dark"] .btn-ghost:hover { background: #272727; }

/* --- text that was hardcoded for a light page --- */
[data-theme="dark"] .frame-url,
[data-theme="dark"] .foot-col h4,
[data-theme="dark"] .foot-base,
[data-theme="dark"] .foot-base span,
[data-theme="dark"] .fine { color: #8a8a8a; }

[data-theme="dark"] .foot-note,
[data-theme="dark"] .foot-col a,
[data-theme="dark"] .stat-l,
[data-theme="dark"] .section.dark .lede { color: #b8b8b8; }

/* --- hover states that used a light border --- */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .steps li:hover,
[data-theme="dark"] .faq details:hover,
[data-theme="dark"] .field input:hover,
[data-theme="dark"] .field select:hover { border-color: #3d3d3d; }

/* --- form controls --- */
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select { color-scheme: dark; }

/* ============================================================
   INTAKE AND PROPOSAL
   The first screen takes a website and answers with the work it
   would run. Everything shown is a proposal the user edits, never
   a claim about their business.
   ============================================================ */

.intake { width: 100%; max-width: 660px; margin: 0 auto; }

.intake-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 700ms var(--ease);
}
.intake-row:focus-within { border-color: var(--accent); }

.intake-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  color: var(--ink);
  outline: none;
}
.intake-row input::placeholder { color: var(--ink-4); }
.intake-row .btn { border-radius: 999px; flex: none; }
.intake-row .btn[disabled] { opacity: .6; cursor: default; }

@media (max-width: 620px) {
  .intake-row { flex-direction: column; border-radius: var(--r-2xl); padding: 12px; }
  .intake-row input { width: 100%; text-align: center; }
  .intake-row .btn { width: 100%; }
}

.proposal {
  width: 100%;
  max-width: 780px;
  margin: 40px auto 0;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 24px;
}

.proposal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.proposal-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--good);
  margin-bottom: 6px;
}
.proposal h3 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.3px; }
.proposal-close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-3); padding: 0 4px;
}
.proposal-close:hover { color: var(--ink); }

.proposal-note { font-size: 13px; line-height: 20px; color: var(--ink-3); margin-bottom: 16px; }

.outcomes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }

.outcomes li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: border-color 700ms var(--ease), background 700ms var(--ease);
}
.outcomes li:hover { border-color: #dcdcdc; }
.outcomes li input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--good); cursor: pointer; }
.outcomes li.off { opacity: .45; }
.outcomes .o-title { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.outcomes .o-why { display: block; font-size: 13px; line-height: 19px; color: var(--ink-3); margin-top: 2px; }

.proposal-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

[data-theme="dark"] .outcomes li:hover { border-color: #3d3d3d; }
[data-theme="dark"] .intake-row { background: #181818; }

/* ---------------------------------------------------------------- cta centring */

.cta-final { text-align: center; }
.cta-final .lede { margin-left: auto; margin-right: auto; }
/* The block is centred, but labels stay left aligned so the fields stay readable. */
.cta-final .audit-form {
  text-align: left;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.cta-final .done { max-width: 460px; margin-left: auto; margin-right: auto; text-align: left; }

/* ============================================================
   INDUSTRY BELT
   A continuously moving strip of the industries OutcomeDev
   serves. Two identical groups sit side by side and the track
   translates by exactly one group width, so the loop is seamless.
   ============================================================ */

.belt {
  padding: 80px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.belt-track {
  display: flex;
  width: max-content;
  animation: beltMove 52s linear infinite;
}

/* Trailing gap of exactly one gap keeps the two halves the same width. */
.belt-group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}

@keyframes beltMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.belt-tile {
  width: 168px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--card);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.belt-tile .belt-ico {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
}
.belt-tile .belt-ico svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-2);
}
.belt-tile span {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .belt-track { animation: none; }
  .belt { overflow-x: auto; }
}

[data-theme="dark"] .belt-tile { background: #181818; }
[data-theme="dark"] .belt-tile .belt-ico { background: #272727; }

/* The statement section reads as a moment, so it centres. */
.tagline { text-align: center; }
.tagline-text { margin-left: auto; margin-right: auto; }

/* The statement hands straight over to the belt, so the two read as one moment. */
.tagline { padding-bottom: 0; }
.tagline .belt { padding-top: 64px; padding-bottom: 96px; }

/* The closing call to action is a section heading like any other, so it takes
   the same scale as "Built to run unattended" and the rest. */
.cta-final h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; margin-bottom: 16px; }
@media (max-width: 860px) {
  .cta-final h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.8px; }
}

/* The wordmark is filtered, so its output must not be clipped by the SVG box.
   The footer still clips it, which keeps the bleed. */
.wordmark { overflow: visible; }

/* ---------------------------------------------------------------- mobile nav */

/* Buttons never wrap; a two line button is a layout failure, not a style. */
.btn { white-space: nowrap; }

@media (max-width: 700px) {
  /* The pill carries logo, theme and menu. The CTA lives in the sheet, so
     repeating it in the bar is what made it cramped. */
  .nav .btn-sm { display: none; }
  .nav {
    gap: 6px;
    padding: 7px 7px 7px 12px;
    margin-top: 16px;
  }
  .nav-word { font-size: 14px; }
  .theme-toggle { width: 34px; height: 34px; }
}

/* On a phone the pill should use the width it has rather than hug the middle. */
@media (max-width: 700px) {
  .nav {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    justify-content: space-between;
  }
}

/* The toggle has no outline and sits next to the menu, not floated centrally. */
.theme-toggle { border: 0; background: transparent; }
.theme-toggle:hover { background: var(--line-2); }

@media (max-width: 700px) {
  .nav { justify-content: flex-start; }
  .nav-brand { margin-right: auto; }
}

.wordmark { display: none; }

/* With the wordmark gone the footer no longer needs its travel. */
.footer { padding: 64px 0 0; }
.foot-top { padding-bottom: 40px; }

/* ============================================================
   THE MARK, ANIMATED
   The logo already means something: a ring whose opening is
   closed by a check. So the animation is that sentence — the
   ring draws itself, then the check threads through and
   completes it. Hover replays it.
   ============================================================ */

.od-ring {
  stroke-dasharray: 70.8 17;              /* 300 degrees drawn, 60 open */
  animation: odRingDraw 900ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.od-tick {
  stroke-dasharray: 25;                   /* the check is 24.2 long */
  animation: odTickDraw 460ms cubic-bezier(0.32, 0.72, 0, 1) 620ms both;
}

@keyframes odRingDraw {
  from { stroke-dasharray: 0 88; }
  to   { stroke-dasharray: 70.8 17; }
}
@keyframes odTickDraw {
  from { stroke-dashoffset: 25; }
  to   { stroke-dashoffset: 0; }
}

.od-logo:hover .od-ring { animation: odRingDraw 620ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.od-logo:hover .od-tick { animation: odTickDraw 380ms cubic-bezier(0.32, 0.72, 0, 1) 360ms both; }

@media (prefers-reduced-motion: reduce) {
  .od-ring, .od-tick,
  .od-logo:hover .od-ring, .od-logo:hover .od-tick { animation: none; }
  .od-tick { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ============================================================
   COMPARISON
   The positioning, stated as a table rather than as an adjective.
   ============================================================ */

.compare {
  margin-top: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg);
}

.cmp-row {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1.55fr;
  border-top: 1px solid var(--line);
}
.cmp-row:first-child { border-top: 0; }

.cmp-row > span {
  padding: 18px 20px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-2);
}
.cmp-row > span + span { border-left: 1px solid var(--line); }
.cmp-row > span:last-child { color: var(--ink); font-weight: 550; }

.cmp-head > span {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 14px;
  padding-bottom: 14px;
}
.cmp-head > span:last-child { color: var(--ink); font-weight: 700; }

.cmp-k {
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 600;
  color: var(--ink-3) !important;
  background: var(--bg-2);
}

@media (max-width: 820px) {
  .compare { border: 0; border-radius: 0; }
  .cmp-row { grid-template-columns: 1fr; padding: 16px 0; }
  .cmp-row.cmp-head { display: none; }
  .cmp-row > span { padding: 4px 0; }
  .cmp-row > span + span { border-left: 0; }
  .cmp-k { background: none; padding-top: 14px !important; }
  /* Stacked, so each value carries its own column label. */
  .cmp-row > span[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 2px;
  }
}

/* The one question the register will not answer by guessing. */
.jurisdiction { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.jurisdiction .btn { font-size: 13px; padding: 8px 14px; }

/* The second half of the place question: a country is not always the whole answer. */
.jurisdiction-input {
  flex: 1; min-width: 200px;
  padding: 9px 14px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--card); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.jurisdiction-input:focus { outline: none; border-color: var(--ink-4); }

/* ============================================================
   THE METAL BUTTON

   One button on this page is the one that matters, and it has
   to look like it. Everything else here is flat by rule; this
   is the exception, and it earns it by being the only surface
   on the page that is trying to catch the light.

   How it is made, so it can be changed rather than guessed at:

     · the body is a chrome sweep — dark, a bright band, dark,
       bright again — laid out on a 300% wide gradient so the
       light can travel across it without the button moving
     · `inset` shadows put a lit rim on the top edge and shade
       underneath, which is what makes a flat fill read as a
       solid object rather than a rectangle of colour
     · one soft shadow underneath lifts it off the section
     · an ::after carries a narrow white sliver that crosses the
       button when the pointer arrives — once per hover, not a
       loop, because a thing that glints forever is a thing
       nobody looks at twice

   It lives at the end of the stylesheet on purpose. The dark
   theme reaches `.btn-primary` with an attribute selector, which
   outranks a single class no matter how the class is written, so
   the only reliable place for this is after it.
   ============================================================ */

.btn.btn-metal,
[data-theme="dark"] .btn-metal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* No padding, size or line-height here. Two buttons wear this surface and one
     of them is larger than the other; a surface that also carried a size would
     resize whichever button it was put on. The size is `.btn-metal-lg`, and the
     border stays one pixel wide and simply goes transparent so that a button
     wearing this is exactly as big as it was before. */
  border-color: transparent;
  border-radius: 999px;
  /* Weight is a size too: 600 to 650 was three pixels of width on a button
     whose box is not allowed to move. The surface changes how a button looks,
     never how big it is. */
  color: #22262b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  background-color: #d9dde1;
  /* A narrow range, deliberately. The first version went from a dark slate to
     pure white and back, several times over — which is what chrome does, and
     what makes a button shout. This is the same idea held down: roughly fifty
     levels of light across the whole surface, so it reads as a brushed metal
     pill rather than a mirror. */
  background-image: linear-gradient(
    102deg,
    #ced3d8 0%,
    #e4e8eb 7%,
    #f8fafb 15%,
    #ffffff 23%,
    #eef1f3 31%,
    #dde1e5 39%,
    #d2d7dc 46%,
    #ced3d8 50%,
    #ced3d8 50%,
    #e4e8eb 57%,
    #f8fafb 65%,
    #ffffff 73%,
    #eef1f3 81%,
    #dde1e5 89%,
    #d2d7dc 96%,
    #ced3d8 100%
  );
  /* 200%, with the band pattern written twice inside it, so the loop closes:
     the window at 100% shows exactly what it showed at 0%, and the drift has
     no seam and never runs off the end into a flat colour. */
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 0 -1px 1px rgba(0, 0, 0, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 1px 2px rgba(10, 10, 10, .12),
    0 7px 20px -10px rgba(10, 10, 10, .30);
  animation: metal-drift 26s linear infinite;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

/* The one button on the page that is the whole ask, so it is bigger than a
   button in a row. Only the final call to action wears this. */
.btn-metal-lg,
[data-theme="dark"] .btn-metal-lg {
  padding: 20px 46px;
  border-width: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 650;
  letter-spacing: -.2px;
}

@keyframes metal-drift {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

/* The glint. Off the left edge until the pointer arrives. */
.btn.btn-metal::after,
[data-theme="dark"] .btn-metal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, .42) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
  transition: transform 1100ms var(--ease);
  pointer-events: none;
}

.btn.btn-metal:hover,
[data-theme="dark"] .btn-metal:hover {
  background-color: #dfe3e7;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 1px rgba(0, 0, 0, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .26),
    0 2px 3px rgba(10, 10, 10, .12),
    0 11px 26px -12px rgba(10, 10, 10, .36);
}
.btn.btn-metal:hover::after,
[data-theme="dark"] .btn-metal:hover::after { transform: translateX(130%); }

.btn.btn-metal:active,
[data-theme="dark"] .btn-metal:active {
  transform: translateY(0) scale(.985);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    0 1px 2px rgba(10, 10, 10, .14);
}

.btn.btn-metal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* A thumb is not a mouse: a taller pill on a phone, and one that does not
   shove the heading off the screen. */
@media (max-width: 700px) {
  .btn-metal-lg,
  [data-theme="dark"] .btn-metal-lg {
    padding: 17px 32px;
    font-size: 16px;
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-metal,
  [data-theme="dark"] .btn-metal { animation: none; }
  .btn.btn-metal::after,
  [data-theme="dark"] .btn-metal::after { display: none; }
}