@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

body {
  background:
    radial-gradient(circle at 84% 2%, oklch(94% 0.055 38), transparent 30rem),
    var(--paper);
  font-weight: 400;
  letter-spacing: -0.006em;
}

body::before,
.studio-page::before {
  display: none;
}

h1,
h2,
h3,
h4,
.wordmark,
.offer-line strong,
.guarantee-band strong,
.ledger-heading h4,
.review-block h4,
.desk-heading h4,
.generated-quote h4 {
  font-weight: 400;
}

h1,
h2,
h3 {
  letter-spacing: -0.055em;
}

h1 {
  max-width: 9.5ch;
  line-height: 0.88;
}

h1 em {
  color: var(--orange-dark);
}

h1 em::after {
  left: 0.02em;
  right: 0.01em;
  bottom: 0.035em;
  height: 0.025em;
  background: var(--orange);
  transform: none;
}

.shell {
  width: min(100% - 2rem, 78rem);
}

.preview-bar {
  min-height: 2.5rem;
  background: var(--ink);
  border-bottom: 0;
  color: var(--paper-bright);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.preview-dot {
  background: var(--orange);
  box-shadow: 0 0 0 0.25rem oklch(66% 0.18 28 / 0.16);
}

.site-header {
  min-height: 5.4rem;
  border-bottom-color: var(--rule);
}

.wordmark {
  gap: 0.4rem;
  font-size: 1.45rem;
  letter-spacing: -0.045em;
}

.site-header nav {
  font-weight: 550;
}

.site-header nav a {
  text-decoration: none;
}

.site-header nav a:not(.nav-cta) {
  position: relative;
}

.site-header nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.65rem;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms var(--ease-out);
}

.nav-cta {
  padding-inline: 1.1rem;
  border-radius: var(--radius-sm);
}

.hero {
  gap: clamp(3rem, 7vw, 6rem);
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.eyebrow {
  margin-bottom: 1.2rem;
  color: var(--orange-dark);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.13em;
}

.hero-lede,
.section-intro > p:last-child {
  max-width: 54ch;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.offer-line {
  gap: var(--space-lg);
  border-color: var(--rule);
  font-weight: 500;
}

.offer-line span {
  min-width: auto;
  padding-inline: 0;
  border-right: 0;
  text-align: left;
}

.offer-line span:last-child {
  text-align: left;
}

.offer-line strong {
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-size: 1.65rem;
}

.button {
  min-height: 3.2rem;
  padding: 0.76rem 1.3rem;
  border-width: 1px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: none;
  transition: transform 160ms var(--ease-out), background-color 160ms linear, color 160ms linear, border-color 160ms linear, box-shadow 160ms linear;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  box-shadow: none;
}

.button-acid {
  background: var(--paper-bright);
  border-color: var(--paper-bright);
  box-shadow: none;
}

.text-link {
  font-weight: 600;
  text-decoration-thickness: 1px;
}

.microcopy,
.privacy-inline {
  font-size: 0.8rem;
}

.quote-sheet {
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  transform: none;
}

.sheet-heading {
  border-bottom-width: 1px;
  font-weight: 650;
}

.sheet-client {
  font-weight: 600;
}

.line-items strong {
  font-weight: 600;
}

.sheet-note {
  background: var(--acid);
}

.sheet-note p {
  font-weight: 500;
}

.sheet-stamp {
  right: 1.5rem;
  bottom: -1rem;
  width: auto;
  aspect-ratio: auto;
  padding: 0.65rem 0.85rem;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--paper-bright);
  font-size: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.25;
  box-shadow: 0 0.6rem 1.4rem oklch(24% 0.055 325 / 0.16);
  transform: none;
}

.problem-strip {
  padding-block: 0.85rem;
  background: var(--ink);
  border-block: 0;
  color: var(--paper-bright);
}

.ticker {
  gap: 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.ticker i {
  color: var(--orange);
  font-size: 1.35em;
}

.scope-form {
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.form-step legend {
  font-weight: 400;
}

.form-step legend span {
  color: var(--orange-dark);
  font-weight: 650;
}

.choice-card,
.scope-chip {
  border-color: var(--rule);
  border-radius: var(--radius-sm);
}

.choice-card:has(input:checked),
.scope-chip:has(input:checked) {
  background: var(--acid);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
  transform: none;
}

.choice-card strong,
.scope-chip {
  font-weight: 600;
}

.conditional-field {
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
}

.conditional-field label {
  font-weight: 600;
}

select {
  border-color: var(--rule);
  border-radius: var(--radius-sm);
}

.fit-result {
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.result-kicker,
.share-kicker,
.share-status,
.checkout-status {
  font-weight: 650;
}

.fit-result li::before {
  color: var(--orange);
}

.fit-result .button-primary {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: var(--paper-bright);
}

.share-panel {
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.share-panel h4 {
  font-weight: 400;
}

.final-cta {
  background: var(--ink);
}

.final-cta .eyebrow {
  color: oklch(80% 0.12 28);
}

.process-steps article {
  border-top: 1px solid var(--rule);
}

.process-steps article > span {
  font-weight: 650;
}

.guarantee-band {
  background: var(--acid);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.guarantee-mark {
  border-width: 1px;
  font-weight: 400;
}

.guarantee-band p {
  font-weight: 450;
}

.boundaries {
  background: oklch(92% 0.055 38);
  border-block: 0;
}

.boundaries ul {
  font-weight: 550;
}

.boundaries li {
  border-bottom-color: oklch(78% 0.07 32);
}

.faq summary {
  font-weight: 600;
}

.faq summary::after {
  border-color: var(--rule);
  border-radius: 50%;
  font-weight: 400;
}

.faq details[open] summary::after {
  background: var(--acid);
}

.site-footer {
  font-weight: 500;
}

.studio-page {
  background:
    radial-gradient(circle at 8% 0%, oklch(94% 0.055 38), transparent 28rem),
    var(--paper);
}

.studio-hero h1 {
  font-size: clamp(3.6rem, 7.4vw, 6.8rem);
}

.offer-ledger {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.offer-ledger div {
  border-right-color: var(--rule);
}

.offer-ledger dt {
  font-weight: 650;
}

.offer-ledger dd {
  font-weight: 400;
}

.demo-boundary {
  background: var(--acid);
  border-block: 1px solid var(--rule);
}

.boundary-index {
  border-width: 1px;
  font-weight: 650;
}

.demo-boundary h2 {
  font-weight: 650;
}

.demo-boundary p {
  font-weight: 450;
}

.step-list {
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.step-list li > span,
.step-list strong {
  font-weight: 650;
}

.step-list li.is-current {
  background: var(--acid);
}

.system-state {
  border-color: var(--rule);
  border-radius: var(--radius-sm);
}

.system-state dd {
  font-weight: 600;
}

#intake-form {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.step-heading {
  border-bottom-width: 1px;
}

.step-heading > p:first-child,
.field > label,
.compact-field > label {
  font-weight: 650;
}

.studio-page input[type="text"],
.studio-page input[type="email"],
.studio-page input[type="date"],
.studio-page input[type="number"],
.studio-page textarea,
.studio-page select {
  background: var(--paper-bright);
  border-color: var(--rule);
  border-radius: var(--radius-sm);
}

.consent-row {
  background: var(--acid);
  border: 1px solid oklch(77% 0.08 32);
  border-radius: var(--radius-sm);
}

.consent-row-approval {
  background: oklch(91% 0.07 34);
}

.scope-ledger {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ledger-heading,
.fulfillment-preview {
  background: var(--ink);
}

.ledger-heading .eyebrow,
.desk-heading .eyebrow,
.fulfillment-header .eyebrow {
  color: oklch(80% 0.12 28);
}

.scope-row-copy strong,
.scope-toggle strong,
.review-block dt,
.generated-quote th,
.qa-checklist legend {
  font-weight: 600;
}

.studio-page .amount-field input {
  font-weight: 600;
}

.review-block {
  border-block-width: 1px;
}

#intake-review dt {
  font-weight: 650;
}

#intake-review dd {
  font-weight: 500;
}

.step-actions {
  border-top-color: var(--rule);
}

#step-status {
  font-weight: 600;
}

.fulfillment-preview {
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.draft-status {
  border-color: oklch(80% 0.12 28);
  color: oklch(80% 0.12 28);
  font-weight: 650;
}

.generated-quote {
  border-color: var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: 0 1.4rem 3rem oklch(12% 0.03 325 / 0.18);
}

.quote-watermark {
  background: var(--acid);
  border-block-color: var(--rule);
  font-weight: 650;
}

.generated-quote-header {
  border-bottom-width: 1px;
}

.generated-quote-header > div,
.quote-section-label,
.generated-quote tfoot th,
.generated-quote tfoot td {
  font-weight: 650;
}

.quote-table-wrap {
  border-block-width: 1px;
}

.fulfillment-desk {
  background: oklch(29% 0.055 325);
  border-color: oklch(40% 0.05 325);
  border-radius: var(--radius-sm);
}

.sla-clock dd,
.qa-status {
  color: oklch(80% 0.12 28);
  font-weight: 600;
}

.qa-checklist label:has(input:checked) {
  background: var(--acid);
  border-color: var(--acid);
}

.text-button {
  font-weight: 550;
}

@media (pointer: fine) and (hover: hover) {
  .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem oklch(24% 0.055 325 / 0.1);
  }

  .button-primary:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
  }

  .fit-result .button-primary:hover {
    background: oklch(47% 0.13 27);
    border-color: oklch(47% 0.13 27);
    color: var(--paper-bright);
  }

  .button-acid:hover {
    background: var(--acid);
  }

  .choice-card:hover,
  .scope-chip:hover {
    border-color: var(--orange);
    transform: none;
  }

  .site-header nav a:not(.nav-cta):hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .quote-sheet {
    animation-name: polished-sheet-reveal;
  }

  @keyframes polished-sheet-reveal {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (min-width: 48rem) {
  .shell {
    width: min(100% - 4rem, 78rem);
  }
}

@media (max-width: 47.99rem) {
  .hero {
    padding-top: 3.75rem;
  }

  .offer-line {
    gap: var(--space-md);
  }

  .offer-line span {
    min-width: 28%;
  }
}