/* Hallmark · macrostructure: Narrative Workflow · mobile app first, scroll chapters.
   References: JADAKA typography/paper, Numetrik product choreography,
   Apple 48px spacing + touch-first controls. Brand: Handwerk One cobalt.
   Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4.
   Contrast: pass (40–41) · nav: N1b · footer: Ft1 · honest: pass (46)
   · chrome: pass (47) · responsive: pass (49) · mobile: pass (34, 49–57). */
@font-face {
  font-family: Archivo;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #f7f5f0;
  --white: #fff;
  --ink: #1a1815;
  --muted: #666761;
  --line: #d8d7d1;
  --dark: #101317;
  --dark-raised: #1b2027;
  --dark-text: #f0f2f5;
  --dark-muted: #a3aab5;
  --dark-line: #343b45;
  --cobalt: #2457c5;
  --cobalt-hover: #1b46a0;
  --blue-light: #91b6ff;
  --blue-wash: #edf2fd;
  --green: #c2dfa5;
  --amber: #9f6100;
  --amber-bg: #fff2d9;
  --display: Archivo, Arial, sans-serif;
  --body: "Libre Franklin", Arial, sans-serif;
  --mono: "Geist Mono", monospace;
  --focus: var(--cobalt);
  --gutter: 20px;
  --max: 1280px;
  --section: 80px;
  --ease: cubic-bezier(0.2, 0.72, 0.16, 1);
  --radius: 24px;
  --touch: 48px;
  --float-shadow: 0 32px 64px -28px rgb(0 0 0/0.5);
  --page-progress: 0;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--body);
  overflow-x: clip;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.06;
}
h2 {
  font-size: clamp(36px, 5vw, 64px);
}
h3 {
  font-size: 28px;
}
button,
input,
select {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
input:focus,
select:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}
input,
select {
  scroll-margin-block: 100px;
}
[hidden] {
  display: none !important;
}
::selection {
  color: var(--white);
  background: var(--cobalt);
}
.wrap {
  width: min(calc(100% - var(--gutter) * 2), var(--max));
  margin-inline: auto;
}
.skip {
  position: fixed;
  z-index: 100;
  top: -100px;
  left: 20px;
  padding: 12px 20px;
  background: var(--white);
}
.skip:focus {
  top: 12px;
}
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  height: 100%;
  background: var(--blue-light);
  transform: scaleX(var(--page-progress));
  transform-origin: left;
}
.dark-opening {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--dark);
  color: var(--dark-text);
  --focus: var(--blue-light);
}
.hero-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: 1100px;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(#000 60%, transparent);
}
.hero-atmosphere span {
  position: absolute;
  width: 95%;
  height: 85%;
  top: -15%;
  left: 28%;
  background: radial-gradient(ellipse at center, rgb(2 82 215 / .28), rgb(36 87 197 / .12) 35%, transparent 67%);
  animation: hero-light-drift 22s ease-in-out infinite alternate;
}
.hero-atmosphere span + span {
  top: 25%;
  left: -38%;
  opacity: .45;
  animation-duration: 28s;
  animation-delay: -12s;
  animation-direction: alternate-reverse;
}
@keyframes hero-light-drift {
  from { transform: translate3d(-7%, -4%, 0) rotate(-12deg) scale(.9); }
  to { transform: translate3d(8%, 9%, 0) rotate(12deg) scale(1.15); }
}
.atmosphere-paused .hero-atmosphere span { animation-play-state: paused; }
@media (max-width: 599px) {
  .hero-atmosphere { height: 900px; opacity: .65; }
  .hero-atmosphere span { width: 160%; left: -10%; }
}
.wordmark img {
  display: block;
  width: clamp(124px, 35vw, 180px);
  height: auto;
  object-fit: contain;
}
.module-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 65ch;
}
.module-note h3 { font-family: var(--body); font-size: 18px; letter-spacing: -.02em; line-height: 1.5; }
.module-note p { margin-top: 8px; color: var(--muted); }
.header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--dark-line);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  white-space: nowrap;
  font-size: 23px;
  letter-spacing: -1.4px;
}
.wordmark > span {
  margin-left: 4px;
  background: var(--cobalt);
  padding: 8px 10px 9px 7px;
  font-weight: 700;
  color: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 84% 100%, 0 100%);
  line-height: 1;
}
.header nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-about {
  display: none;
}
.nav-cta {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  font-size: 12px;
}
.nav-cta > span {
  color: var(--blue-light);
  font-size: 20px;
}
.eyebrow,
.tiny-label,
.section-label {
  font: 11px/1.6 var(--mono);
  letter-spacing: 0.04em;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-light);
  box-shadow: 0 0 0 4px rgb(145 182 255/0.08);
  flex-shrink: 0;
}
.section-label,
.tiny-label {
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 6px;
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.button > span:last-child {
  font-size: 22px;
  line-height: 1;
}
.button:active {
  transform: scale(0.98);
}
.button-blue {
  background: var(--cobalt);
  color: var(--white);
}
.button-blue:hover {
  background: var(--cobalt-hover);
}
.text-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  border-bottom: 1px solid currentColor;
}
.text-link > span {
  font-size: 20px;
}
.hero {
  padding-top: 36px;
}
.hero-heading {
  display: grid;
  gap: 48px;
}
.hero h1 {
  font-size: clamp(46px, 12vw, 64px);
  line-height: 1;
  letter-spacing: -0.06em;
  margin-top: 24px;
}
.hero h1 > span {
  color: var(--blue-light);
}
.hero-lead {
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  margin-top: 28px;
}
.hero-description {
  font-size: 15px;
  color: var(--dark-muted);
  max-width: 38ch;
  margin-top: 16px;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
}
.hero-foot {
  display: none;
}
.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 24px 0;
  margin-top: 40px;
  border-top: 1px solid var(--dark-line);
  font: 10px var(--mono);
}
.hero-bottom > a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}
.hero-bottom > a > span {
  color: var(--blue-light);
  font-size: 22px;
}
.hero-edition {
  display: none;
}
.motion-toggle {
  padding: 8px 0;
  min-height: 48px;
  color: var(--dark-muted);
  background: transparent;
  font: 11px var(--body);
}
.demo-orbit {
  position: relative;
  max-width: 400px;
  width: 100%;
  margin: auto;
  isolation: isolate;
  scroll-margin-top: 24px;
}
.orbit-plane {
  position: absolute;
  inset: 80px -15px 100px;
  background: var(--cobalt);
  z-index: -1;
  transform: rotate(-6deg);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 82% 100%, 0 100%);
}
.orbit-line {
  position: absolute;
  inset: 45px -18px 115px;
  border: 1px solid var(--dark-line);
  transform: rotate(6deg);
  z-index: -2;
}
.demo-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font: 10px var(--mono);
  color: var(--dark-muted);
  margin-bottom: 20px;
}
.mini-app {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--float-shadow);
  padding: 20px;
  --focus: var(--cobalt);
  position: relative;
  min-width: 0;
  transition: transform 0.6s var(--ease);
}
.mini-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.app-brand {
  font: 700 26px/1 var(--display);
  letter-spacing: -1.6px;
}
.app-brand > span {
  color: var(--cobalt);
}
.demo-badge {
  font: 10px var(--mono);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  color: var(--muted);
}
.icon-button {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  color: var(--cobalt);
  font-size: 24px;
  margin-left: auto;
}
.demo-view h2 {
  font-size: 32px;
  line-height: 1.08;
}
.app-greeting > p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.app-project {
  margin-top: 28px;
}
.app-project > .tiny-label {
  font-size: 12px;
}
.app-project > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.project-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 22px;
  color: var(--cobalt);
}
.app-project p {
  font-size: 15px;
  line-height: 1.4;
}
.app-project strong {
  display: block;
  font-weight: 500;
}
.app-project p > span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.app-task {
  margin-top: 24px;
  background: var(--cobalt);
  color: var(--white);
  border-radius: 16px;
  padding: 20px;
  --focus: var(--white);
}
.task-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12px var(--mono);
}
.agent-symbol {
  font-size: 22px;
}
.task-count {
  margin-left: auto;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255/0.4);
  border-radius: 4px;
  padding: 3px 5px;
  font: 12px var(--body);
}
.app-task h3 {
  font-size: 28px;
  line-height: 1.05;
  margin: 16px 0 12px;
}
.app-task p {
  font-size: 13px;
  line-height: 1.6;
}
.demo-open {
  background: var(--white);
  color: var(--cobalt);
  width: 100%;
  margin-top: 20px;
}
.demo-open:hover {
  background: var(--blue-wash);
}
.app-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 12px;
  color: var(--muted);
}
.app-day > span {
  border: 1px solid var(--line);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cobalt);
}
.app-day strong {
  font-weight: 500;
  color: var(--ink);
}
.app-progress {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 24px;
  font: 12px var(--mono);
  color: var(--muted);
}
.app-progress > span {
  position: relative;
  padding-top: 8px;
}
.app-progress i {
  font: 12px var(--body);
  font-style: normal;
}
.app-progress .current {
  color: var(--cobalt);
}
.app-progress .current:before {
  content: "";
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cobalt);
}
.demo-caption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--dark-muted);
  text-align: center;
  margin-top: 24px;
}
.demo-back {
  background: transparent;
  color: var(--muted);
  padding: 0;
  min-height: 48px;
  font-size: 13px;
  margin-top: -12px;
}
.comparison-heading > .tiny-label {
  font-size: 12px;
}
.comparison-heading h2 {
  font-size: 28px;
  margin: 10px 0 12px;
}
.comparison-heading p {
  font-size: 12px;
  color: var(--muted);
}
.price-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.price-pair > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
.price-pair > div:last-child {
  background: var(--blue-wash);
  border-color: var(--cobalt);
}
.price-pair span {
  display: block;
  font-size: 12px;
}
.price-pair strong {
  display: block;
  font: 500 27px/1.2 var(--display);
  letter-spacing: -0.04em;
  margin-block: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-pair small {
  font-size: 12px;
  color: var(--muted);
}
.demo-source summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: 12px;
  color: var(--cobalt);
  list-style: none;
  cursor: pointer;
}
.demo-source summary::-webkit-details-marker {
  display: none;
}
.demo-source p {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0 16px;
}
.quantity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.quantity-row label {
  font-size: 12px;
}
.quantity-row label > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.stepper {
  display: flex;
  gap: 8px;
  align-items: center;
}
.stepper button {
  width: 48px;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 20px;
  color: var(--ink);
}
.stepper button:hover {
  background: var(--blue-wash);
}
.stepper input {
  width: 40px;
  min-height: 48px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
  background: transparent;
  border: 1px solid transparent;
  font: 16px var(--body);
  border-radius: 4px;
  color: var(--ink);
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-error {
  font-size: 12px;
  color: var(--amber);
  min-height: 20px;
  margin-top: 4px;
}
.delta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 20px;
  font-size: 12px;
}
.delta-line output {
  color: var(--cobalt);
  font: 500 28px var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.demo-apply {
  width: 100%;
  font-size: 13px;
  padding-inline: 14px;
}
.app-disclaimer {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}
.done-symbol {
  display: grid;
  place-items: center;
  border: 1px solid var(--cobalt);
  color: var(--cobalt);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 32px;
  margin: 32px 0;
}
.demo-view[data-view-panel="done"] > .tiny-label {
  font-size: 12px;
}
.demo-view[data-view-panel="done"] h2 {
  margin: 16px 0;
}
.demo-view[data-view-panel="done"] > p {
  font-size: 14px;
  color: var(--muted);
}
.done-totals {
  margin: 28px 0;
  display: grid;
  gap: 16px;
}
.done-totals > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.done-totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.done-totals > div:last-child {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--cobalt);
}
.done-totals > div:last-child dd {
  font: 500 24px var(--display);
}
.demo-view[data-view-panel="done"] > .button {
  width: 100%;
  font-size: 13px;
}
.demo-again {
  display: block;
  margin: 12px auto 0;
  background: transparent;
  color: var(--muted);
  min-height: 48px;
  font-size: 12px;
}
.manifesto {
  padding: var(--section) 0;
  background: var(--paper);
  position: relative;
}
.manifesto-grid {
  display: grid;
  gap: 32px;
}
.crosshair {
  color: var(--cobalt);
  font-size: 24px;
  display: inline-block;
  margin-right: 12px;
}
.manifesto h2 {
  font-size: clamp(40px, 10vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.05em;
}
.scroll-word {
  color: var(--ink);
  transition: color 0.5s var(--ease);
}
.scroll-word.accent-word {
  color: var(--cobalt);
}
.enhanced-motion .scroll-word:not(.lit) {
  color: var(--muted);
}
.manifesto-copy {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
.manifesto-copy p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
}
.workflow {
  position: relative;
  padding-bottom: var(--section);
}
.workflow-heading {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  z-index: 5;
}
.workflow-heading h2 {
  font-size: 32px;
  margin-top: 20px;
}
.workflow-heading > p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
}
.workflow-list {
  position: relative;
}
.workflow-rail {
  position: absolute;
  left: 0;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: var(--line);
}
.workflow-rail > span {
  display: block;
  height: 100%;
  background: var(--cobalt);
  transform: scaleY(var(--workflow-progress, 0));
  transform-origin: top;
}
.workflow-row {
  position: relative;
  padding: 40px 0 40px 24px;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 24px;
}
.step-number {
  font: 12px var(--mono);
  color: var(--cobalt);
}
.step-number:before {
  content: "";
  position: absolute;
  left: -3px;
  margin-top: 5px;
  width: 7px;
  height: 7px;
  background: var(--paper);
  border: 1px solid var(--cobalt);
  border-radius: 50%;
  transition: background 0.3s;
}
.workflow-row.is-current .step-number:before {
  background: var(--cobalt);
}
.workflow-row h3 {
  font-size: 34px;
  margin-bottom: 20px;
}
.workflow-row p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 45ch;
}
.workflow-art {
  position: relative;
  height: 160px;
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
}
.mini-doc {
  position: absolute;
  width: 116px;
  height: 140px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 9px var(--mono);
  padding: 20px 16px;
  box-shadow: 0 8px 16px rgb(26 24 21/0.06);
  transition: transform 0.7s var(--ease);
}
.mini-doc > span {
  display: block;
  color: var(--line);
  margin-top: 20px;
  line-height: 1.7;
  font-size: 13px;
}
.mini-doc.back {
  left: 16px;
  top: 4px;
  transform: rotate(-8deg);
}
.mini-doc.front {
  left: 110px;
  top: 8px;
  transform: rotate(6deg);
}
.is-current .mini-doc.front {
  transform: translateX(12px) rotate(0);
}
.art-tag {
  position: absolute;
  right: 0;
  bottom: 8px;
  font: 11px var(--mono);
  color: var(--cobalt);
}
.art-comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.art-comparison > div > span {
  font: 10px var(--mono);
  display: block;
  color: var(--muted);
  margin-bottom: 12px;
}
.art-comparison b {
  font: 500 40px var(--display);
  letter-spacing: -0.04em;
}
.art-comparison > div:nth-of-type(2) b {
  color: var(--cobalt);
}
.comparison-arrow {
  font-size: 24px;
  color: var(--muted);
}
.comparison-line {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.is-current .comparison-line {
  transform: scaleX(1);
}
.art-approval {
  display: flex;
  align-items: center;
  gap: 24px;
}
.approval-ring {
  border: 1px solid var(--cobalt);
  color: var(--cobalt);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  display: grid;
  place-items: center;
  font-size: 36px;
  transition: transform 0.6s var(--ease);
}
.is-current .approval-ring {
  transform: rotate(-8deg) scale(1.05);
}
.art-approval > span:last-child {
  font: 11px var(--mono);
  color: var(--cobalt);
}
.principles {
  background: var(--cobalt);
  color: var(--white);
  padding: 64px 0;
  --focus: var(--white);
}
.principles-inner {
  display: grid;
  gap: 32px;
}
.principle-mark {
  font: 700 96px/0.85 var(--display);
  letter-spacing: -0.1em;
  color: var(--blue-light);
}
.principles .section-label {
  color: var(--white);
  margin-bottom: 24px;
}
.principles h2 {
  font-size: 38px;
}
.principles h2 > span {
  color: var(--blue-light);
}
.principles-copy p {
  font-size: 16px;
  line-height: 1.8;
}
.principles-copy .text-link {
  margin-top: 24px;
}
.product-vision {
  padding-block: var(--section);
  border-bottom: 1px solid var(--line);
}
.product-vision .workflow-heading {
  position: static;
}
.vision-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.vision-list li {
  display: flex;
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.vision-list .step-number {
  flex: 0 0 40px;
}
.vision-list .step-number::before {
  content: none;
}
.vision-list li > div {
  min-width: 0;
}
.vision-list h3 {
  font-size: clamp(24px, 4vw, 32px);
}
.vision-list p {
  max-width: 60ch;
  margin-top: 12px;
  color: var(--muted);
}
.pilot-section {
  background: var(--dark);
  color: var(--dark-text);
  padding: var(--section) 0;
  --focus: var(--blue-light);
}
.pilot-grid {
  display: grid;
  gap: 40px;
}
.pilot-copy h2 {
  font-size: clamp(46px, 11vw, 72px);
  margin-top: 24px;
}
.pilot-copy h2 > span {
  color: var(--blue-light);
}
.pilot-copy > p {
  font-size: 16px;
  color: var(--dark-muted);
  line-height: 1.8;
  margin-top: 24px;
  max-width: 42ch;
}
.pilot-benefits {
  padding: 0;
  margin: 32px 0;
  list-style: none;
  font-size: 14px;
}
.pilot-benefits li {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.pilot-benefits li > span {
  color: var(--blue-light);
}
.pilot-copy .pilot-fit {
  font-size: 13px;
  border-top: 1px solid var(--dark-line);
  padding-top: 24px;
}
.signup-panel {
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  padding: 24px 20px;
  --focus: var(--cobalt);
}
#pilot-form {
  scroll-margin-top: 24px;
}
.form-heading h3 {
  font-size: 28px;
  line-height: 1.1;
  margin: 16px 0;
}
.form-heading p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.field {
  margin-top: 24px;
  min-width: 0;
}
.field label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 500;
}
.field label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.field input,
.field select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.field input::placeholder {
  font-size: 13px;
  color: var(--muted);
}
.form-row {
  display: grid;
  gap: 0;
}
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.consent {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-top: 24px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  cursor: pointer;
}
.consent input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--cobalt);
}
.consent a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-submit {
  width: 100%;
  margin-top: 28px;
}
.form-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}
.form-status {
  font-size: 13px;
  color: var(--amber);
  min-height: 20px;
  margin-top: 12px;
}
.success-panel {
  padding-block: 32px;
}
.success-panel:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: 12px;
}
.success-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--cobalt);
  border-radius: 50%;
  color: var(--cobalt);
  font-size: 28px;
  margin-bottom: 28px;
}
.success-panel p {
  color: var(--muted);
  font-size: 16px;
  margin: 24px 0;
}
.success-panel .text-link {
  color: var(--cobalt);
}
.faq {
  display: grid;
  gap: 32px;
  padding-block: var(--section);
}
.faq h2 {
  font-size: 38px;
  margin-top: 20px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-child {
  border-top: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  min-height: 64px;
  font-size: 15px;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary > span {
  color: var(--cobalt);
  font: 20px var(--mono);
  transition: transform 0.2s;
}
.faq details[open] summary > span {
  transform: rotate(45deg);
}
.faq details p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  padding-bottom: 24px;
}
.footer {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.footer .wordmark {
  color: var(--ink);
}
.footer > p {
  display: none;
}
.footer > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  font-size: 12px;
}
.footer > div > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.footer > div > span {
  margin-left: auto;
}
.mobile-cta {
  position: fixed;
  z-index: 40;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px max(20px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgb(0 0 0/0.06);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease);
  visibility: hidden;
}
.mobile-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
}
.mobile-cta > span {
  font-size: 12px;
  max-width: 12ch;
  line-height: 1.4;
}
.mobile-cta .button {
  font-size: 13px;
  min-height: 48px;
  padding-inline: 16px;
}
.legal-page {
  max-width: 760px;
  padding: 64px 0 100px;
}
.legal-page h1 {
  font-size: 46px;
  overflow-wrap: anywhere;
  margin: 32px 0;
}
.legal-page h2 {
  font-size: 26px;
  margin: 32px 0 16px;
}
.legal-page p {
  font-size: 16px;
  margin-top: 16px;
}
.legal-page a {
  text-decoration: underline;
}
.legal-page .notice {
  background: var(--blue-wash);
  padding: 20px;
  border-left: 2px solid var(--cobalt);
}
.legal-page .eyebrow {
  margin-top: 24px;
  color: var(--cobalt);
}
.contact-form {
  display: grid;
  gap: 12px;
  margin: 24px 0 32px;
}
.contact-form label {
  font-size: 14px;
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: 16px/1.5 var(--body);
}
.contact-form input { min-height: 52px; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.contact-form .button {
  min-height: 52px;
  justify-self: start;
  border: 0;
  background: var(--ink);
  color: var(--white);
}
.contact-form .button:disabled { opacity: .6; cursor: wait; }
.contact-form .contact-status { min-height: 24px; margin: 0; }
.contact-form p:last-child { font-size: 14px; margin: 0; }
@media (min-width: 600px) {
  :root {
    --gutter: 32px;
  }
  .hero h1 {
    font-size: 72px;
  }
  .hero-heading {
    gap: 64px;
  }
  .hero-intro {
    max-width: 720px;
  }
  .hero h1 br:last-of-type {
    display: none;
  }
  .hero h1 > span:before {
    content: " ";
  }
  .hero-actions {
    gap: 32px;
  }
  .mini-app {
    padding: 24px;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .signup-panel {
    padding: 32px;
  }
  .manifesto-copy {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .workflow-row {
    grid-template-columns: 36px minmax(0, 1fr) 220px;
    gap: 24px;
    padding: 48px 0 48px 24px;
    align-items: center;
  }
  .workflow-row h3 {
    font-size: 32px;
  }
  .workflow-row p {
    font-size: 14px;
  }
  .step-number {
    align-self: start;
    margin-top: 8px;
  }
  .workflow-art {
    margin: 0;
    height: 160px;
  }
  .mini-doc {
    width: 100px;
    height: 128px;
    font-size: 8px;
  }
  .mini-doc.front {
    left: 90px;
  }
  .art-comparison b {
    font-size: 32px;
  }
  .art-approval {
    gap: 16px;
  }
  .approval-ring {
    width: 64px;
    height: 64px;
  }
  .principles-inner {
    grid-template-columns: 100px 1fr;
    gap: 32px;
  }
  .principles-copy {
    grid-column: 2;
  }
  .mobile-cta {
    display: none;
  }
}
@media (min-width: 960px) {
  :root {
    --gutter: 48px;
    --section: 112px;
  }
  .header {
    height: 96px;
  }
  .wordmark {
    font-size: 27px;
  }
  .nav-about {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-size: 14px;
    color: var(--dark-muted);
  }
  .nav-cta {
    font-size: 14px;
  }
  .hero {
    padding-top: 56px;
  }
  .hero-heading {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  .hero h1 {
    font-size: clamp(78px, 6.7vw, 104px);
    margin-top: 32px;
  }
  .hero h1 br:last-of-type {
    display: inline;
  }
  .hero h1 > span:before {
    content: none;
  }
  .hero-lead {
    font-size: 25px;
  }
  .hero-description {
    font-size: 16px;
    max-width: 40ch;
  }
  .hero-actions {
    gap: 24px;
  }
  .hero-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--dark-muted);
    line-height: 1.7;
    margin-top: 36px;
  }
  .hero-foot .crosshair {
    color: var(--blue-light);
    font-size: 30px;
  }
  .demo-orbit {
    max-width: 390px;
  }
  .orbit-plane {
    inset: 70px -40px 100px;
    transform: translateY(var(--plane-y, 0px)) rotate(-9deg);
  }
  .orbit-line {
    inset: 30px -50px 125px;
    transform: rotate(10deg);
  }
  .mini-app {
    transform: translateY(var(--demo-y, 0px))
      rotate(var(--demo-rotation, -2deg));
    transform-origin: 50% 65%;
  }
  .mini-app:focus-within,
  .mini-app:hover {
    transform: none;
  }
  .hero-bottom {
    margin-top: 64px;
  }
  .hero-edition {
    display: block;
    color: var(--dark-muted);
  }
  .hero-bottom .motion-toggle {
    margin-left: auto;
    margin-right: 48px;
  }
  .manifesto-grid {
    grid-template-columns: 1fr 3fr;
    gap: 64px;
  }
  .manifesto h2 {
    font-size: clamp(64px, 6.2vw, 92px);
  }
  .manifesto-grid > .section-label {
    position: sticky;
    top: 32px;
    align-self: start;
  }
  .workflow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 64px;
    padding-top: 32px;
  }
  .workflow-heading {
    position: sticky;
    top: 32px;
    align-self: start;
    border-bottom: 0;
    padding-top: 24px;
  }
  .workflow-heading h2 {
    font-size: 42px;
    line-height: 1.08;
  }
  .workflow-heading > p {
    font-size: 15px;
    margin-top: 24px;
  }
  .workflow-row {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 48px 0 56px 32px;
    min-height: 420px;
  }
  .workflow-row h3 {
    font-size: 42px;
  }
  .workflow-row p {
    font-size: 16px;
  }
  .workflow-art {
    grid-column: 2;
    max-width: 360px;
    height: 160px;
  }
  .mini-doc {
    width: 120px;
    height: 144px;
    font-size: 10px;
  }
  .mini-doc.front {
    left: 124px;
  }
  .art-comparison b {
    font-size: 48px;
  }
  .approval-ring {
    width: 80px;
    height: 80px;
  }
  .principles-inner {
    grid-template-columns: 1fr 2fr 1fr;
    gap: 32px;
    align-items: center;
  }
  .principle-mark {
    font-size: 160px;
  }
  .principles h2 {
    font-size: clamp(38px, 3.3vw, 50px);
  }
  .principles-copy {
    grid-column: auto;
  }
  .principles-copy p {
    font-size: 14px;
  }
  .pilot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .pilot-copy {
    position: sticky;
    top: 32px;
    align-self: start;
    padding-top: 16px;
  }
  .pilot-copy h2 {
    font-size: clamp(56px, 5vw, 72px);
  }
  .signup-panel {
    padding: 40px;
  }
  .faq {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .footer {
    flex-wrap: nowrap;
  }
  .footer > p {
    display: block;
  }
  .footer > div {
    width: auto;
    margin-left: auto;
    gap: 24px;
  }
}
@media (max-width: 359px) {
  .wordmark {
    font-size: 20px;
  }
  .nav-cta {
    font-size: 11px;
    gap: 8px;
  }
  .hero h1 {
    font-size: 42px;
  }
  .hero-lead {
    font-size: 20px;
  }
  .hero-actions {
    display: grid;
    gap: 12px;
  }
  .hero-actions .text-link {
    justify-self: start;
  }
  .mini-app {
    padding: 16px;
  }
  .app-task {
    padding: 16px;
  }
  .app-task h3 {
    font-size: 27px;
  }
  .price-pair {
    gap: 8px;
  }
  .price-pair > div {
    padding: 10px;
  }
  .price-pair strong {
    font-size: 24px;
  }
  .quantity-row {
    flex-wrap: wrap;
  }
  .quantity-row label {
    width: 100%;
  }
  .stepper {
    justify-content: space-between;
    width: 100%;
  }
  .stepper button {
    width: 48px;
  }
  .mini-doc.front {
    left: 96px;
  }
  .workflow-row h3 {
    font-size: 30px;
  }
  .art-tag {
    display: none;
  }
  .signup-panel {
    padding-inline: 16px;
  }
  .pilot-copy h2 {
    font-size: 42px;
  }
  .button {
    font-size: 14px;
  }
  .form-submit {
    font-size: 13px;
  }
  .footer > div > span {
    margin-left: 0;
  }
}
@media (max-height: 700px) {
  .workflow-heading,
  .pilot-copy,
  .manifesto-grid > .section-label {
    position: static;
  }
}
@media (hover: hover) {
  .text-link:hover {
    color: var(--cobalt);
  }
  .dark-opening .text-link:hover {
    color: var(--blue-light);
  }
  .principles .text-link:hover {
    color: var(--white);
  }
}
.motion-off {
  scroll-behavior: auto;
}
.motion-off *,
.motion-off *:before,
.motion-off *:after {
  animation: none !important;
  transition: none !important;
}
.motion-off .mini-app,
.motion-off .orbit-plane,
.motion-off .orbit-line,
.motion-off .approval-ring,
.motion-off .mini-doc {
  transform: none !important;
}
.motion-off .scroll-word {
  color: var(--ink);
}
.motion-off .scroll-word.accent-word {
  color: var(--cobalt);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .mini-app,
  .orbit-plane,
  .orbit-line,
  .approval-ring,
  .mini-doc {
    transform: none !important;
  }
  .scroll-word {
    color: var(--ink) !important;
  }
  .scroll-word.accent-word {
    color: var(--cobalt) !important;
  }
}
.mini-app {
  scroll-margin-top: 20px;
}
.stepper button {
  min-width: 48px;
}
.quantity-row label {
  max-width: 100px;
}
.quantity-error {
  overflow-wrap: anywhere;
}
.demo-view[data-view-panel="done"] h2:focus,
.demo-view h2:focus {
  outline: none;
}
.mini-app[data-view="compare"] {
  transform: none;
}
.mini-app[data-view="done"] {
  transform: none;
}
@media (max-width: 599px) {
  .footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  .hero h1 {
    overflow-wrap: normal;
  }
  .mini-app {
    padding-bottom: 24px;
  }
}
/* Decorative planes stay within the opening; content never gets a side scroll. */
.dark-opening {
  overflow: clip;
}
.stepper input {
  width: 48px;
}

/* Editorial review: existing Archivo / Libre Franklin and cobalt retained.
   Linear precedent: flat product surface, 1px rules, 8px controls, 16px panels.
   Hallmark pre-emit critique: P4 H4 E4 S5 R4 V4. */
.hero-context { color:var(--dark-muted); font:400 16px/1.5 var(--body); }
.hero h1 { max-width:none; font-size:clamp(38px,9vw,76px); line-height:1.04; letter-spacing:-.055em; margin-top:20px; text-wrap:balance; }
.hero-lead { font-size:clamp(20px,2vw,26px); }
.hero-description {font-size:16px;max-width:43ch;}
.hero-availability {margin-top:20px;font-size:13px;line-height:1.6;color:var(--dark-muted);max-width:36ch;}
.eyebrow,.section-label,.hero-bottom {font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;}
.hero-bottom {border-top:0;}
.hero-atmosphere span {animation-iteration-count:1;animation-fill-mode:forwards;}
.demo-orbit {max-width:540px;}
.job-demo {border-radius:16px;padding:24px;box-shadow:none;transform:none!important;min-height:0!important;}
.job-demo-top {display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:24px;font-size:13px;color:var(--muted);}
.job-demo .demo-reset {font:inherit;color:var(--cobalt);background:transparent;min-height:48px;padding:0;white-space:nowrap;}
.job-demo h2 {font-size:clamp(26px,4vw,34px);line-height:1.13;letter-spacing:-.035em;max-width:22ch;}
.job-demo h3 {font:600 16px/1.5 var(--body);letter-spacing:0;}
.demo-intro {font-size:15px;line-height:1.6;color:var(--muted);margin:16px 0 24px;}
.source-note {border-top:1px solid var(--line);padding:16px 0;}
.source-label {font-size:12px;color:var(--muted);margin-bottom:8px;}
.source-note blockquote {margin:0;font-size:16px;line-height:1.6;}
.source-missing {color:var(--muted);font-size:14px;}
.job-demo .button {width:100%;min-height:48px;margin-top:16px;font-size:14px;padding:12px 14px;white-space:nowrap;border-radius:8px;}
.job-demo .demo-open {background:var(--cobalt);color:var(--white);}
.job-demo .demo-open:hover {background:var(--cobalt-hover);}
.job-demo .demo-back {font:400 13px var(--body);min-height:48px;padding:0;background:transparent;color:var(--cobalt);margin-bottom:16px;}
.job-facts {margin:24px 0;}
.job-facts > div {padding:14px 0;border-bottom:1px solid var(--line);}
.job-facts dt {font-size:12px;color:var(--muted);margin-bottom:4px;}
.job-facts dd {margin:0;font-size:16px;line-height:1.5;}
.job-facts small {display:block;color:var(--muted);font-size:12px;margin-top:4px;}
.job-gap {padding:16px;border-left:2px solid var(--cobalt);background:var(--blue-wash);}
.job-gap p {font-size:14px;margin-top:8px;line-height:1.6;}
.job-choice {border:0;padding:0;margin:24px 0 8px;min-width:0;}
.job-choice legend {font-size:14px;margin-bottom:8px;}
.job-choice label {display:flex;align-items:center;gap:12px;min-height:48px;font-size:14px;line-height:1.5;padding:8px 0;cursor:pointer;}
.job-choice input {flex:0 0 20px;width:20px;height:20px;margin:0;accent-color:var(--cobalt);}
.reply-label {display:block;margin:24px 0 8px;font-size:14px;}
#demo-reply {font:400 16px/1.6 var(--body);width:100%;min-height:280px;resize:vertical;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);}
.demo-step {border-top:1px solid var(--line);margin-top:24px;padding-top:16px;color:var(--muted);font-size:12px;}
.demo-caption {font:400 12px/1.6 var(--body);max-width:52ch;text-align:left;margin:16px 0 0;}
.saved-reply summary {min-height:48px;cursor:pointer;color:var(--cobalt);font-size:14px;}
.saved-reply p {white-space:pre-wrap;font-size:15px;padding-bottom:16px;}
.job-demo .demo-again {display:block;min-height:48px;margin:8px auto 0;font-size:14px;}
.workflow-example {font-size:15px!important;color:var(--muted);border-left:1px solid var(--line);padding-left:20px;}
.workflow-example strong {display:block;color:var(--ink);font-weight:500;margin-top:8px;}
.principles-inner {grid-template-columns:1fr;}
@media(min-width:960px) {
 .hero-heading {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;}
 .hero-intro {padding-top:48px;}
 .hero h1 {font-size:clamp(60px,5vw,80px);}
 .demo-orbit {max-width:540px;}
 .principles-inner {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;}
}
@media(max-width:374px) {
 .job-demo {padding:16px;}
 .job-demo .button {font-size:13px;padding-inline:8px;}
 .hero-actions .button {font-size:13px;}
}
.principles-copy {grid-column:auto;}

/* Scroll choreography: reveal actual product content; keep controls stationary. */
.hero-atmosphere {transform:translate3d(0,var(--hero-shift,0px),0);}
.enhanced-motion .scroll-reveal {opacity:.35;transform:translate3d(0,32px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.enhanced-motion .scroll-reveal.has-entered,
.enhanced-motion .scroll-reveal:focus-within {opacity:1;transform:none;}
.vision-list li:nth-child(2) {transition-delay:80ms;}
.vision-list li:nth-child(3) {transition-delay:160ms;}
.vision-list li:nth-child(4) {transition-delay:240ms;}
.workflow-rail {width:2px;}
.workflow-row h3 {transition:color .35s var(--ease);}
.workflow-row.is-current h3 {color:var(--cobalt);}
.workflow-row .step-number {font-family:var(--display);font-size:32px;letter-spacing:-.04em;}
.workflow-example {transition:border-color .4s var(--ease);}
.workflow-row.is-current .workflow-example {border-color:var(--cobalt);}
@media(min-width:960px) and (min-height:701px) {
 .product-vision {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px 64px;align-items:start;}
 .product-vision .workflow-heading {position:sticky;top:40px;border:0;padding:0;}
 .product-vision .vision-list {display:block;margin:0;}
 .product-vision .vision-list li {padding:36px 0;min-height:180px;}
 .product-vision .module-note {grid-column:2;margin-top:0;}
}
@media(max-width:599px) {
 .enhanced-motion .scroll-reveal {transform:translate3d(0,16px,0);transition-duration:.45s;transition-delay:0s;}
 .enhanced-motion .scroll-reveal.has-entered {transform:none;}
}
.motion-off .scroll-reveal {opacity:1;transform:none;}
.motion-off .hero-atmosphere {transform:none;}
@media(prefers-reduced-motion:reduce) {
 .enhanced-motion .scroll-reveal {opacity:1;transform:none;}
 .hero-atmosphere {transform:none;}
}

/* Hero scene: typographic opening, then source-to-job assembly on native scroll. */
.hero {padding-top:48px;}
.hero-heading {display:block;}
.hero-intro {padding:0;position:relative;z-index:2;}
.hero h1 {font-size:clamp(52px,11.5vw,164px);line-height:.94;letter-spacing:-.065em;max-width:none;margin:0;}
.hero-lead {font-size:clamp(17px,2vw,24px);margin-top:28px;}
.hero-actions {margin-top:24px;}
.hero-availability {max-width:none;font-size:12px;}
.hero-scene {position:relative;isolation:isolate;min-height:480px;margin-top:56px;--assemble:0;}
.scene-grid {position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--dark-line) 1px,transparent 1px),linear-gradient(90deg,var(--dark-line) 1px,transparent 1px);background-size:64px 64px;opacity:.3;mask-image:radial-gradient(ellipse,black,transparent 72%);}
.scene-note {position:absolute;width:220px;background:var(--dark-raised);border:1px solid var(--dark-line);padding:20px;border-radius:8px;transform:translate3d(calc(var(--assemble) * var(--travel-x)),calc(var(--assemble) * 80px),0) rotate(calc(var(--tilt) * (1 - var(--assemble))));opacity:calc(1 - var(--assemble) * .7);}
.scene-note > span {font-size:12px;color:var(--dark-muted);display:block;margin-bottom:12px;}
.scene-note strong {display:block;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.025em;}
.scene-note p {font-size:13px;color:var(--dark-muted);margin-top:10px;}
.scene-message {left:0;top:0;--travel-x:60px;--tilt:-8deg;}
.scene-site {right:0;top:65px;--travel-x:-60px;--tilt:7deg;}
.scene-job {position:relative;top:155px;margin:0 auto;width:min(100%,360px);padding:24px;background:var(--paper);color:var(--ink);border-radius:12px;transform:translate3d(0,calc((1 - var(--assemble)) * 35px),0);box-shadow:var(--float-shadow);}
.scene-job-top {display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:20px;}
.scene-job-top img {object-fit:contain;}
.scene-job h2 {font-size:28px;line-height:1.12;margin-bottom:20px;}
.scene-row {display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:12px 0;border-top:1px solid var(--line);}
.scene-row strong {font-weight:500;color:var(--cobalt);}
.scene-job a {display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:12px;border-top:1px solid var(--line);font-size:13px;}
.scene-caption {position:relative;margin-top:180px;text-align:center;color:var(--dark-muted);font-size:12px;}
.hero-bottom {margin-top:24px;}
.demo-section {padding-block:var(--section);display:grid;gap:32px;}
.demo-section-heading h2 {font-size:clamp(32px,4vw,56px);margin-top:20px;}
.demo-section-heading > p:last-child {color:var(--muted);font-size:16px;margin-top:24px;max-width:34ch;}
.demo-section .demo-caption {color:var(--muted);}
@media(min-width:960px) {
 .hero {padding-top:64px;}
 .hero-intro {max-width:none;}
 .hero h1 br {display:block!important;}
 .hero-actions {position:absolute;right:0;bottom:32px;max-width:250px;gap:16px;}
 .hero-scene {margin-top:64px;min-height:510px;}
 .scene-note {width:290px;padding:24px;}
 .scene-message {left:7%;top:24px;--travel-x:220px;}
 .scene-site {right:7%;top:64px;--travel-x:-220px;}
 .scene-job {top:70px;width:420px;padding:32px;}
 .scene-caption {margin-top:100px;}
 .demo-section {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;}
 .demo-section-heading {position:sticky;top:48px;}
}
@media(max-width:374px) {
 .hero h1 {font-size:46px;}
 .scene-note {width:195px;}
 .scene-row {font-size:11px;}
 .scene-job {padding:20px;}
}
.motion-off .scene-note,.motion-off .scene-job {transform:none;}
@media(prefers-reduced-motion:reduce) {.scene-note,.scene-job {transform:none!important;}}
@media(min-width:960px) {
 .hero-intro {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:start;}
 .hero h1 {grid-column:1 / -1;}
 .hero-lead {grid-column:1;grid-row:2;}
 .hero-actions {position:static;grid-column:2;grid-row:2 / 4;margin-top:28px;}
 .hero-availability {grid-column:1;grid-row:3;margin-top:12px;}
}
@media(max-height:700px) {.demo-section-heading {position:static;}}

#estimate-hours {width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:16px var(--body);}

.product-details {margin-block:0 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.product-details > summary {display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:16px 0;font-size:16px;cursor:pointer;}
.product-details > summary::marker {content:'';}
.product-details .wrap {width:100%;}
.product-details .manifesto {padding-block:32px;}
.product-details .product-vision {padding-block:32px;}
.product-details .principles {margin-bottom:32px;}
@media(max-width:599px) {.product-details > summary {font-size:14px;}}

.hero-positioning {font-size:16px;line-height:1.6;color:var(--dark-muted);margin-top:12px;}
@media(min-width:960px) {.hero-positioning {grid-column:1;grid-row:3;} .hero-availability {grid-row:4;} .hero-actions {grid-row:2 / 5;}}

/* Companion pages use the same Apple-derived neutrals as the beta landing. */
body:has(.legal-page) {
  --paper: #f5f5f7;
  --ink: #1d1d1f;
  --line: #e0e0e0;
  --cobalt: #1d1d1f;
  --cobalt-hover: #39352f;
  --blue-wash: #fafafc;
  --focus: var(--ink);
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --body: var(--display);
}
.legal-page .wordmark img { filter: grayscale(1) brightness(0); }
.legal-page .button { border-radius: 8px; }