@font-face {
  font-family: "TWK Lausanne Pan";
  src: url("/fonts/TWKLausanne-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TWK Lausanne Pan";
  src: url("/fonts/TWKLausanne-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TWK Lausanne Pan";
  src: url("/fonts/TWKLausanne-500Italic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Georgia Pro Condensed";
  src: url("/fonts/GeorgiaPro-CondItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-ink: #dcd9db;
  --color-ink-strong: #dbe4e5;
  --color-ink-soft: #dcd9dba3;
  --color-ink-faint: #ffffff61;
  --color-line: #dcd9db29;
  --color-ground: oklab(11.4% 0.018 -0.005);
  --color-ground-lift: oklab(69.3% -0.0005 -0.008);
  --color-danger: #ffb8a8f2;
  --text-display: 72px;
  --text-title: 56px;
  --text-heading: 24px;
  --text-body: 16px;
  --text-eyebrow: 14px;
  --text-body-sm: 14px;
  --text-meta: 12px;
  --tracking-display: -0.06em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --radius-full: 9999px;
  --sunspell-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-serif: Georgia, "Times New Roman", serif;
  --font-display: "Georgia Pro Condensed", Georgia, "Times New Roman", serif;
  --font-sans: "TWK Lausanne Pan", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sp-ink: var(--color-ink);
  --sp-ink-strong: var(--color-ink-strong);
  --sp-ink-soft: var(--color-ink-soft);
  --sp-card-border: var(--color-line);
  --ink: var(--color-ground);
  --paper: var(--color-ink);
  --muted: var(--color-ink-faint);
  --soft: var(--color-ink-soft);
  --line: var(--color-line);
  --line-strong: rgba(220, 217, 219, 0.45);
  --accent: var(--color-ink);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  overflow-x: clip;
}

body.has-signature-overlay,
body.has-contract-overlay {
  overflow: hidden;
}

html.is-static-route,
body.is-static-route {
  height: 100%;
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  min-height: 100%;
  background: var(--ink);
}

.initial-loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  opacity: 1;
  pointer-events: none;
  transition:
    opacity 620ms var(--sunspell-ease),
    filter 620ms var(--sunspell-ease);
}

.loader-line {
  width: 92px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.loader-line::after {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.72);
  content: "";
  transform: translateX(-100%);
  animation: loader-line 900ms var(--sunspell-ease) infinite;
}

body.is-initial-loading .screen {
  animation: none;
  opacity: 0;
  filter: blur(6px);
}

body.is-initial-ready .initial-loader {
  opacity: 0;
  filter: blur(8px);
}

body.is-initial-ready .screen {
  animation: initial-page-in 920ms var(--sunspell-ease) both;
}

.app-shell.is-leaving .screen {
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity 280ms var(--sunspell-ease),
    filter 280ms var(--sunspell-ease);
}

.screen {
  width: 100%;
  margin: 0 auto;
  background: var(--ink);
  animation: sunspell-page-in 720ms var(--sunspell-ease) both;
  will-change: opacity, filter;
}

.screen.has-loaded {
  animation: none;
  opacity: 1;
  filter: none;
}

.summary-screen {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100dvh;
  justify-content: space-between;
  overflow: visible;
  padding: 160px 24px 48px;
}

.summary-content {
  width: min(980px, 100%);
  min-height: min(579px, calc(100dvh - 208px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

.summary-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 60px;
  width: min(690px, 100%);
}

.summary-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: min(690px, 100%);
}

.summary-title-frame {
  width: min(708px, 100%);
  height: 92px;
  flex-shrink: 0;
  padding-top: 7px;
}

.summary-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  padding: 20px 0;
}

.summary-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.summary-meta-option {
  width: 260px;
}

.summary-meta-label {
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-meta-value {
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 29.76px;
}

.summary-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 32px;
  width: min(690px, 100%);
}

.open-proposal-frame {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 9px;
  min-height: 35px;
  padding: 9px 20px;
  border-radius: 100px;
}

.open-proposal-frame:hover,
.open-proposal-frame:focus-within {
  background: transparent;
}

.open-proposal-frame .text-link {
  transition: opacity 180ms ease;
}

.open-proposal-frame:hover .text-link,
.open-proposal-frame:focus-within .text-link,
.open-proposal-frame .text-link:hover,
.open-proposal-frame .text-link:focus-visible {
  opacity: 0.9;
}

.open-proposal-frame .text-link:focus-visible {
  outline: none;
}

.hero-heading {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 56px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 60.48px;
  text-align: center;
}

.kicker {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 16px;
  text-transform: uppercase;
}

.summary-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.0001em;
  line-height: 22px;
}

.summary-copy-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.summary-copy-block h2 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.0006em;
  line-height: 22px;
}

.summary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.summary-screen .hero-heading {
  line-height: 70px;
}

.text-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 16px;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pill-button {
  appearance: none;
  border: 1px solid #dcd9db;
  border-radius: 999px;
  background: transparent;
  color: #dcd9db;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 16px;
  padding: 10px 14px;
  text-transform: capitalize;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.pill-button:hover,
.pill-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: none;
  outline: none;
}

.pill-button:disabled {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
  transform: none;
}

.pill-button:disabled:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.34);
  transform: none;
}

.contract-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 100dvh;
  justify-content: flex-start;
  overflow: visible;
  padding: 160px 24px 48px;
}

.contract-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: min(701px, 100%);
}

.contract-doc {
  width: min(701px, 100%);
  flex-shrink: 0;
  margin: 0;
}

.doc-head {
  border-bottom: 1px solid rgba(220, 217, 219, 0.4);
  height: 181px;
  text-align: center;
}

.doc-title {
  height: 48px;
  margin: 0;
  padding-top: 25px;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 56px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 48px;
}

.doc-subtitle {
  width: min(640px, 100%);
  margin: 48px auto 0;
  color: rgba(244, 244, 242, 0.54);
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 22px;
}

.recital {
  width: min(646px, 100%);
  margin: 24px 0 0;
  color: rgba(220, 217, 219, 0.64);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 20px;
}

.section {
  height: auto;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contract-doc > .section:nth-of-type(2) {
  height: auto;
}

.contract-doc > .section:nth-of-type(3) {
  height: auto;
}

.contract-doc > .section:nth-of-type(4) {
  height: auto;
}

.contract-doc > .section:nth-of-type(5) {
  height: auto;
}

.contract-doc > .section:nth-of-type(6) {
  height: auto;
}

.contract-doc > .section:nth-of-type(7) {
  height: auto;
}

.contract-doc > .section:nth-of-type(8) {
  height: auto;
}

.contract-doc > .section:nth-of-type(9) {
  height: auto;
}

.contract-doc > .section:nth-of-type(10) {
  height: auto;
}

.contract-doc > .section:nth-of-type(11) {
  height: auto;
}

.contract-doc > .section:nth-of-type(12) {
  height: auto;
}

.contract-doc > .section:nth-of-type(13) {
  height: auto;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 13px;
}

.section-number {
  flex: 0 0 32px;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  line-height: 30px;
}

.section-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 30px;
}

.section-body {
  width: 100%;
  padding-left: 33px;
  padding-top: 9px;
}

.section-body p {
  margin: 0;
  color: var(--soft);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.section-body p + p {
  margin-top: 6px;
}

.contract-doc > .section:nth-of-type(10) .section-body p {
  width: min(651px, 100%);
  color: var(--soft);
  font-size: 16px;
  line-height: 24px;
}

.contract-doc > .section:nth-of-type(11) .section-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}

.contract-doc > .section:nth-of-type(11) .section-body p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  width: min(666px, 100%);
}

.contract-doc > .section:nth-of-type(11) .section-body p:first-child {
  width: min(751px, 100%);
}

.contract-doc > .section:nth-of-type(11) .section-body p:last-child {
  width: min(666px, 100%);
}

.section-body strong {
  color: var(--paper);
  font-weight: 550;
}

.quiet {
  color: var(--soft) !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

.exhibit {
  border-top: 1px solid rgba(244, 244, 242, 0.13);
  height: auto;
  margin-top: 30px;
  padding-top: 28px;
}

.exhibit-intro {
  width: 100%;
  margin: 3px 0 0;
  padding-left: 45px;
  color: var(--soft);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.exhibit-rows {
  width: 100%;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exhibit-row {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid rgba(244, 244, 242, 0.07);
  padding: 9px 0;
}

.exhibit-row:last-child {
  border-bottom: 0;
}

.exhibit-label {
  flex: 0 0 96px;
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 20px;
}

.exhibit-value {
  flex: 1 1 0;
  min-width: 0;
  color: var(--soft);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.signatures {
  display: flex;
  gap: 22px;
  width: 100%;
  height: 94px;
  margin-top: 0;
  padding-top: 28px;
}

.signature-block {
  flex: 1 1 0;
  min-width: 0;
}

.signature-line {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 5px;
  text-align: left;
}

.signature-line:hover,
.signature-line:focus-within {
  border-bottom-color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.fill-tag-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.fill-in-tag {
  position: absolute;
  min-width: 58px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 217, 219, 0.42);
  border-radius: 3px;
  background: rgba(220, 217, 219, 0.1);
  color: rgba(220, 217, 219, 0.9);
  cursor: pointer;
  font-size: 9px;
  font-weight: 550;
  letter-spacing: 0.1em;
  line-height: 10px;
  padding: 5px 7px;
  pointer-events: auto;
  text-transform: uppercase;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.fill-in-tag:hover,
.fill-in-tag:focus-visible {
  border-color: rgba(220, 217, 219, 0.72);
  background: rgba(220, 217, 219, 0.18);
  outline: none;
}

.fill-in-tag.is-complete {
  opacity: 0.38;
}

.fill-in-tag[hidden] {
  display: none;
}

.signature-display {
  width: 100%;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-display.is-signed {
  font-family: "Yellowtail", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 24px;
  line-height: 28px;
}

.signature-placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.signature-image {
  max-width: 100%;
  max-height: 30px;
  object-fit: contain;
  object-position: left bottom;
}

.signature-meta {
  padding-top: 7px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.13em;
  line-height: 12px;
  text-transform: uppercase;
}

.doc-foot {
  margin-top: 42px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 300;
  line-height: 17px;
}

.doc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px;
  margin-top: 72px;
  padding-bottom: 32px;
}

.continue-button {
  min-width: 0;
  padding: 10px 14px;
}

.continue-button:not(:disabled) {
  border-color: #ffffff;
  color: #ffffff;
}

.continue-button:not(:disabled):hover,
.continue-button:not(:disabled):focus-visible {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.continue-button:disabled,
.continue-button:disabled:hover,
.continue-button:disabled:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
}

.form-note {
  display: none;
  margin: 0;
  color: rgba(255, 184, 168, 0.95);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 18px;
  text-align: center;
}

.form-note-visible {
  display: block;
}

.success-screen {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100dvh;
  justify-content: center;
  overflow: visible;
  padding: 24px;
}

.loading-screen {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100dvh;
  min-height: 720px;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(804px, 100%);
  text-align: center;
}

.loading-heading {
  margin: 0;
  width: 100%;
  font-size: 56px;
  line-height: 60.48px;
  letter-spacing: -0.06em;
}

.loading-copy {
  width: min(484px, 100%);
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.loading-ellipsis {
  display: inline-flex;
  width: 26px;
  justify-content: flex-start;
}

.loading-ellipsis span {
  animation: loadingDot 900ms ease-in-out infinite;
  opacity: 0.2;
}

.loading-ellipsis span:nth-child(2) {
  animation-delay: 150ms;
}

.loading-ellipsis span:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes loadingDot {
  0%,
  100% {
    opacity: 0.18;
  }

  45% {
    opacity: 0.86;
  }
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 56px;
  min-height: min(377px, calc(100dvh - 48px));
  width: min(804px, 100%);
}

.success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(804px, 100%);
}

.success-title-frame {
  width: min(500px, 100%);
  padding-top: 20px;
}

.success-copy-frame {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  padding-top: 18px;
  text-align: center;
}

.success-heading {
  width: 100%;
  font-size: 56px;
  line-height: 60.48px;
  letter-spacing: -0.06em;
}

.success-copy {
  width: min(393px, 100%);
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding-top: 56px;
  width: 100%;
}

#download-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 9px;
  min-height: 35px;
  padding: 9px 20px;
  border-radius: 100px;
  transition: background-color 180ms ease;
}

#download-pdf:hover,
#download-pdf:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
  outline: none;
}

.contract-field-trigger {
  appearance: none;
  display: inline;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-style: inherit;
  line-height: inherit;
  padding: 1px 5px 2px;
  text-align: inherit;
  vertical-align: baseline;
  white-space: normal;
}

.contract-field-trigger.is-filled {
  border-color: rgba(255, 255, 255, 0.24);
}

.contract-field-trigger:hover,
.contract-field-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.contract-field-output {
  display: inline;
  max-width: 100%;
  color: inherit;
  font: inherit;
  font-style: inherit;
  line-height: inherit;
  vertical-align: baseline;
  white-space: normal;
}

.contract-field-output.is-filled {
  color: inherit;
}

.contract-signing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.contract-overlay,
.signature-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.contract-backdrop,
.signature-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 6, 0.54);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contract-modal,
.signature-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 542px;
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 52px);
  overflow: auto;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #dcd9db;
  padding: 0;
}

.contract-modal.is-legal-name {
  height: 413px;
}

.contract-modal.is-address {
  height: 869px;
}

.contract-modal.is-signature {
  height: 799px;
}

.modal-close,
.signature-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(220, 217, 219, 0.24);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible,
.signature-close:hover,
.signature-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.modal-close span,
.modal-close span::after,
.signature-close span,
.signature-close span::after {
  position: absolute;
  top: 17px;
  left: 10px;
  width: 14px;
  height: 1px;
  background: #dcd9db;
  content: "";
  transform: rotate(45deg);
}

.modal-close span::after,
.signature-close span::after {
  top: 0;
  left: 0;
  transform: rotate(90deg);
}

.contract-modal-inner,
.signature-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(406px, calc(100% - 48px));
  margin: 0 auto;
}

.signature-modal-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-bottom: 26px;
  text-align: center;
}

.signature-modal-head h2 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 48px;
}

.signature-modal-head p {
  margin: 0;
  color: rgba(244, 244, 242, 0.4);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.modal-field,
.typed-signature-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.modal-field span,
.modal-label {
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 20px;
}

.modal-field input,
.modal-field select,
.typed-signature-panel input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  background: transparent;
  color: #dcd9db;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0;
  outline: none;
  transition:
    border-color 350ms var(--sunspell-ease),
    color 180ms var(--sunspell-ease);
}

.modal-field input::placeholder,
.typed-signature-panel input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  transition: color 180ms var(--sunspell-ease);
}

.modal-field input:hover,
.modal-field input:focus,
.modal-field select:hover,
.modal-field select:focus,
.typed-signature-panel input:hover,
.typed-signature-panel input:focus {
  background: transparent;
}

.modal-field select {
  appearance: none;
  color: rgba(220, 217, 219, 0.78);
  cursor: pointer;
}

.modal-field option {
  background: var(--ink);
  color: #dcd9db;
}

.state-select {
  position: relative;
  width: 100%;
}

.state-select-button {
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0;
  text-align: left;
}

.state-select-button.is-filled {
  color: rgba(220, 217, 219, 0.78);
}

.state-select-button:hover,
.state-select-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.state-select-button::after {
  position: absolute;
  top: 18px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  content: "";
  transform: rotate(45deg);
  transition: transform 160ms ease, top 160ms ease, border-color 160ms ease;
}

.state-select-button.is-filled::after {
  border-color: rgba(220, 217, 219, 0.62);
}

.state-select-button[aria-expanded="true"]::after {
  top: 21px;
  transform: rotate(225deg);
}

.state-options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 4;
  max-height: 187px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #080306;
}

.state-options.is-open {
  display: block;
}

.state-option {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: rgba(220, 217, 219, 0.72);
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 12px;
  text-align: left;
}

.state-option:last-child {
  border-bottom: 0;
}

.state-option:hover,
.state-option:focus-visible,
.state-option.is-selected {
  background: rgba(255, 255, 255, 0.08);
  color: #dcd9db;
  outline: none;
}

.address-field {
  position: relative;
}

.address-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #080306;
}

.address-suggestions.is-open {
  display: flex;
  flex-direction: column;
}

.address-suggestion {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #dcd9db;
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
}

.address-suggestion:last-child {
  border-bottom: 0;
}

.address-suggestion:hover,
.address-suggestion:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.address-suggestion span {
  font-size: 14px;
  line-height: 18px;
}

.address-suggestion small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  line-height: 16px;
}

.address-suggestion-status {
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 18px;
  padding: 10px 12px;
}

.address-preview-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-top: 4px;
}

.address-preview {
  min-height: 45px;
  border: 1px solid rgba(220, 217, 219, 0.16);
  color: rgba(220, 217, 219, 0.72);
  font-size: 14px;
  line-height: 20px;
  padding: 12px;
}

.modal-signature-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 2px;
}

.signature-mode-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.signature-mode {
  border: 1px solid rgba(220, 217, 219, 0.16);
  border-radius: 999px;
  background: transparent;
  color: rgba(220, 217, 219, 0.64);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 18px;
  padding: 6px 10px;
}

.signature-mode.is-active {
  border-color: #dcd9db;
  color: #dcd9db;
}

.signature-mode:hover,
.signature-mode:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.draw-signature-panel {
  width: 100%;
  height: 131px;
  border: 1px solid rgba(220, 217, 219, 0.16);
}

#signature-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.signature-preview-panel,
.upload-signature-panel {
  width: 100%;
  height: 131px;
  border: 1px solid rgba(220, 217, 219, 0.16);
  background: transparent;
}

.signature-preview-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}

.signature-preview-label {
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  line-height: 20px;
}

.signature-preview-name {
  color: #dcd9db;
  font-family: "Yellowtail", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 36px;
  line-height: 42px;
}

.upload-signature-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
}

.upload-signature-panel:hover {
  background: rgba(255, 255, 255, 0.08);
}

.upload-signature-panel input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  position: relative;
}

.upload-icon::before,
.upload-icon::after {
  position: absolute;
  content: "";
  background: rgba(255, 255, 255, 0.58);
}

.upload-icon::before {
  width: 10px;
  height: 1px;
  top: 12px;
  left: 7px;
}

.upload-icon::after {
  width: 1px;
  height: 10px;
  top: 7px;
  left: 12px;
}

.upload-copy {
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  line-height: 18px;
}

.upload-preview {
  max-width: 80%;
  max-height: 56px;
  object-fit: contain;
}

.signature-save {
  margin-top: 40px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 16px;
}

@keyframes sunspell-page-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes initial-page-in {
  from {
    opacity: 0;
    filter: blur(7px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes loader-line {
  0% {
    transform: translateX(-105%);
  }

  48%,
  58% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(105%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen {
    animation: none;
  }

  .app-shell.is-leaving .screen {
    transition: none;
    opacity: 1;
    filter: none;
  }

  .initial-loader {
    display: none;
  }

  body.is-initial-loading .screen,
  body.is-initial-ready .screen {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 900px) {
  .summary-screen {
    min-height: 0;
    justify-content: center;
    padding: 96px 32px 56px;
  }

  .summary-content {
    height: auto;
    min-height: 0;
    gap: 54px;
  }

  .summary-hero {
    gap: 52px;
  }

  .summary-head {
    min-height: 0;
  }

  .summary-title-frame {
    height: 92px;
  }

  .contract-screen {
    padding: 96px 32px 48px;
  }

  .contract-doc {
    width: min(701px, 100%);
  }

  .section,
  .contract-doc > .section:nth-of-type(2),
  .contract-doc > .section:nth-of-type(3),
  .contract-doc > .section:nth-of-type(4),
  .contract-doc > .section:nth-of-type(5),
  .contract-doc > .section:nth-of-type(6),
  .contract-doc > .section:nth-of-type(7),
  .contract-doc > .section:nth-of-type(8),
  .contract-doc > .section:nth-of-type(9),
  .contract-doc > .section:nth-of-type(10),
  .contract-doc > .section:nth-of-type(11),
  .contract-doc > .section:nth-of-type(12),
  .contract-doc > .section:nth-of-type(13) {
    height: auto;
  }

  .section {
    padding-top: 30px;
  }

  .exhibit {
    height: auto;
    min-height: 346px;
  }

  .success-screen {
    min-height: 0;
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .summary-screen {
    justify-content: center;
    padding: 40px 20px;
  }

  .summary-content {
    justify-content: center;
    gap: 24px;
    height: auto;
    min-height: 0;
  }

  .summary-hero {
    gap: 24px;
  }

  .summary-title-frame {
    height: auto;
    padding-top: 12px;
  }

  .hero-heading {
    font-size: 40px;
    line-height: 43.2px;
    letter-spacing: -0.06em;
  }

  .summary-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .summary-head,
  .summary-body {
    width: 100%;
  }

  .summary-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
  }

  .summary-meta-item,
  .summary-meta-option {
    width: 100%;
    gap: 4px;
  }

  .summary-meta-label {
    font-size: 12px;
    line-height: 16px;
  }

  .summary-meta-value,
  .summary-copy-block h2 {
    font-size: 20px;
    line-height: 24.8px;
  }

  .summary-copy-block h2 {
    font-size: 24px;
    line-height: 29.76px;
  }

  .summary-body {
    gap: 20px;
  }

  .summary-copy-block {
    gap: 8px;
  }

  .pill-button {
    padding: 10px 14px;
  }

  .contract-screen {
    padding: 40px 20px 44px;
  }

  .contract-stack {
    gap: 44px;
  }

  .doc-head {
    height: auto;
    padding-bottom: 28px;
  }

  .doc-title {
    height: auto;
    padding-top: 10px;
    font-size: 34px;
    line-height: 37px;
  }

  .doc-subtitle {
    margin-top: 44px;
    font-size: 13px;
    line-height: 20px;
  }

  .recital,
  .section-body p,
  .exhibit-intro,
  .exhibit-value {
    font-size: 16px;
    line-height: 24px;
  }

  .recital {
    width: 100%;
    margin-top: 22px;
  }

  .section-head {
    gap: 10px;
  }

  .section-number {
    flex-basis: 18px;
    font-size: 18px;
    line-height: 24px;
  }

  .section-title {
    min-width: 0;
    font-size: 17px;
    line-height: 21px;
  }

  .section-body {
    padding-left: 26px;
  }

  .exhibit {
    min-height: 0;
    margin-top: 28px;
  }

  .exhibit-intro {
    padding-left: 28px;
  }

  .exhibit-row {
    flex-direction: column;
    gap: 6px;
    padding: 13px 0;
  }

  .exhibit-label {
    flex-basis: auto;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
  }

  .exhibit-value {
    width: 100%;
    padding-left: 26px;
  }

  .signatures {
    flex-direction: column;
    gap: 20px;
    height: auto;
    margin-top: 24px;
    padding-top: 22px;
  }

  .contract-signing {
    gap: 0;
  }

  .doc-actions {
    margin-top: 40px;
  }

  .signature-input.is-signed {
    font-size: 22px;
  }

  .signature-display.is-signed {
    font-size: 22px;
  }

  .contract-modal,
  .signature-modal {
    width: min(542px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
  }

  .contract-modal.is-legal-name {
    height: min(413px, calc(100dvh - 32px));
  }

  .contract-modal.is-address {
    height: min(869px, calc(100dvh - 32px));
  }

  .contract-modal.is-signature {
    height: min(799px, calc(100dvh - 32px));
  }

  .contract-modal-inner,
  .signature-modal-inner {
    width: min(406px, calc(100% - 36px));
    gap: 15px;
  }

  .signature-modal-head {
    padding-bottom: 8px;
  }

  .signature-modal-head h2 {
    font-size: 29px;
    line-height: 35px;
  }

  .modal-close,
  .signature-close {
    top: 16px;
    right: 16px;
  }

  .modal-signature-section {
    gap: 12px;
  }

  .draw-signature-panel,
  .signature-preview-panel,
  .upload-signature-panel {
    height: 118px;
  }

  .signature-save {
    margin-top: 14px;
  }

  .doc-foot {
    margin-top: 34px;
  }

  .success-screen {
    justify-content: center;
    padding: 48px 20px;
  }

  .success-content {
    flex: 0 1 auto;
    justify-content: center;
    gap: 32px;
    width: 100%;
    height: auto;
  }

  .success-heading {
    font-size: 40px;
    line-height: 43.2px;
    letter-spacing: -0.06em;
  }

  .success-title-frame {
    width: min(330px, 100%);
  }

  .success-copy-frame {
    padding-top: 12px;
  }

  .success-copy {
    max-width: 310px;
    font-size: 16px;
    line-height: 24px;
  }

  .success-actions {
    padding-top: 12px;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  .summary-screen {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .summary-content {
    gap: 18px;
  }

  .summary-hero {
    gap: 18px;
  }

  .hero-heading {
    font-size: 40px;
    line-height: 43.2px;
  }

  .success-heading {
    font-size: 40px;
    line-height: 43.2px;
  }

  .summary-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .success-screen {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

.status {
  min-height: 18px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 18px;
}

.status:empty {
  display: none;
}

.kickoff-intro-screen,
.dashboard-screen,
.kickoff-screen,
.readout-screen {
  min-height: 100dvh;
  overflow: visible;
  padding-left: 40px;
  padding-right: 40px;
}

.kickoff-intro-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 160px;
  padding-bottom: 160px;
}

.kickoff-intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  width: min(701px, 100%);
  text-align: center;
}

.kickoff-intro-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.kickoff-intro-head .hero-heading {
  line-height: 44px;
}

.kickoff-intro-head p,
.kickoff-intro-actions p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
}

.kickoff-intro-head p {
  width: min(460px, 100%);
}

.kickoff-topic-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(500px, 100%);
  margin-top: -58px;
}

.kickoff-topic-pills span {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 12px;
  padding: 8px 12px;
  text-transform: uppercase;
}

.kickoff-intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.kickoff-intro-actions p {
  width: min(390px, 100%);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-style: italic;
  line-height: 19px;
}

.dashboard-screen {
  position: relative;
  min-height: 100dvh;
  padding-top: 99px;
  padding-bottom: 48px;
}

.dashboard-board {
  display: flex;
  align-items: flex-start;
  gap: 21px;
}

.dashboard-card {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 90px;
  min-width: 90px;
  height: 90px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  outline: 1px solid rgba(255, 255, 255, 0.37);
  overflow: hidden;
  padding: 8px 5px;
  text-align: left;
  text-decoration: none;
  transition: background-color 180ms ease, outline-color 180ms ease;
}

.dashboard-card:hover,
.dashboard-card:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline-color: rgba(255, 255, 255, 0.62);
}

.dashboard-card-title {
  display: block;
  color: #ffffff;
  font-size: 12px;
  font-weight: 300;
  line-height: 14px;
}

.dashboard-card-state {
  position: absolute;
  top: 8px;
  left: 8px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 12px;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 180ms ease;
}

.dashboard-card:hover .dashboard-card-state,
.dashboard-card:focus-visible .dashboard-card-state {
  opacity: 1;
}

.dashboard-card-detail {
  display: none;
}

.kickoff-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
  padding-top: 100px;
  padding-bottom: 48px;
}

.kickoff-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 320px;
  height: 22px;
}

.kickoff-progress span {
  display: none;
}

.kickoff-progress strong,
.kickoff-progress em {
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.24em;
  line-height: 14px;
}

.kickoff-progress strong {
  color: #f4f7f8;
  font-weight: 500;
}

.kickoff-progress em {
  color: #6b6266;
  font-weight: 400;
}

.kickoff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(820px, 100%);
  border-radius: 6px;
  padding: 0 72px 60px;
  text-align: center;
}

.kickoff-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(698px, 100%);
}

.kickoff-eyebrow {
  width: 100%;
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
}

.kickoff-head h1,
.readout-report h1 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 38px;
  text-align: center;
}

.kickoff-collaborative.kickoff-step-1 .kickoff-head h1 {
  width: min(540px, 100%);
}

.kickoff-head p {
  width: min(500px, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
}

.kickoff-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(520px, 100%);
  min-height: 252px;
  padding-top: 42px;
}

.kickoff-diagram svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  overflow: visible;
}

.kickoff-diagram line,
.kickoff-diagram path,
.kickoff-diagram rect,
.kickoff-diagram circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.2;
}

.kickoff-diagram .strong {
  stroke: rgba(255, 255, 255, 0.78);
}

.kickoff-diagram .dash {
  stroke-dasharray: 5 6;
}

.kickoff-diagram .dot {
  stroke-dasharray: 1 5;
}

.kickoff-diagram .fill {
  fill: #f0e8dc;
  stroke: none;
}

.kickoff-diagram .dim {
  color: rgba(255, 255, 255, 0.46);
  fill: rgba(255, 255, 255, 0.46);
  stroke: rgba(255, 255, 255, 0.38);
}

.kickoff-diagram text {
  fill: rgba(255, 255, 255, 0.76);
  font-family: Menlo, monospace;
  font-size: 9px;
  font-style: normal;
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: 1.5px;
  paint-order: fill;
  stroke: none;
  stroke-width: 0;
}

.kickoff-diagram .customer-dot-label {
  font-size: 7px;
}

.kickoff-diagram .script {
  font-family: Menlo, monospace;
  font-size: 9px;
  font-style: normal;
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: 1.5px;
  paint-order: fill;
  stroke: none;
  stroke-width: 0;
}

.kickoff-diagram text.dim,
.kickoff-diagram text.script,
.kickoff-diagram text[font-weight],
.kickoff-diagram text[font-family] {
  font-family: Menlo, monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  paint-order: fill !important;
  stroke: none !important;
  stroke-width: 0 !important;
}

.kickoff-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: min(676px, 100%);
}

.kickoff-rule {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.kickoff-instruction {
  width: min(560px, 100%);
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 124%;
  text-align: center;
}

.kickoff-prompts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(640px, 100%);
}

.kickoff-prompt {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  text-align: left;
}

.kickoff-prompt h2 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 124%;
}

.kickoff-prompt-helper {
  width: 100%;
  min-height: 18px;
  margin: 0;
  color: #dcd9dba3;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
  text-shadow: #00000033 0 2px 3px;
}

.kickoff-answer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 0;
}

.kickoff-thought {
  appearance: none;
  width: 100%;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  padding: 0;
  text-align: left;
  transition: color 180ms ease;
}

.kickoff-thought:focus-visible {
  color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.kickoff-helper {
  display: none;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
}

.kickoff-answer.is-focused .kickoff-helper {
  display: flex;
}

.kickoff-suggestions {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-top: 1px;
}

.kickoff-prompt.is-focused .kickoff-suggestions {
  display: flex;
}

.kickoff-suggestions .kickoff-helper {
  display: flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 5px 12px;
}

.kickoff-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.kickoff-add-row {
  align-self: flex-start;
  margin-top: 14px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 16px;
  color: rgba(220, 217, 219, 0.6);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}

.kickoff-add-row:hover {
  border-color: rgba(220, 217, 219, 0.45);
  color: #dcd9db;
}

.kickoff-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  margin-right: 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-style: normal;
  color: #d6b49a;
}

.kickoff-rank:empty {
  display: none;
}

.helper-star {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: rgba(255, 255, 255, 0.4);
}

.kickoff-page-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.kickoff-page-nav span {
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
  padding: 4px 6px;
  border: 1px solid var(--sp-card-border);
  border-radius: 4px;
}

.kickoff-page-nav span.is-on {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.3);
}

.kickoff-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-top: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 18px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.kickoff-drop:hover,
.kickoff-drop.is-drag {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.03);
}

.kickoff-drop.has-files {
  border-style: solid;
  border-color: rgba(220, 217, 219, 0.4);
}

.kickoff-drop-text {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
}

.kickoff-drop.has-files .kickoff-drop-text {
  color: #dcd9db;
}

.kickoff-persona-pair {
  display: flex;
  gap: 16px;
  width: 100%;
}

.kickoff-persona-pair .kickoff-answer {
  flex: 1 1 0;
}

@media (max-width: 620px) {
  .kickoff-persona-pair {
    flex-direction: column;
    gap: 0;
  }
}

.kickoff-reflect {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  text-align: left;
}

.kickoff-reflect-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid rgba(220, 217, 219, 0.3);
  padding-left: 16px;
}

.kickoff-reflect-row span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.5);
}

.kickoff-reflect-row strong {
  color: #dcd9db;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
}

.kickoff-reflect-row strong.is-empty {
  color: rgba(220, 217, 219, 0.34);
}

.kickoff-prose {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
  text-align: left;
}

.kickoff-prose p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  font-weight: 300;
  line-height: 28px;
}

.kickoff-prose p:nth-child(4),
.kickoff-prose p:last-child {
  color: #dcd9db;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 30px;
}

.kickoff-points {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  text-align: left;
}

.kickoff-point {
  display: flex;
  gap: 20px;
}

.kickoff-point > span {
  flex-shrink: 0;
  width: 28px;
  color: rgba(220, 217, 219, 0.4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
}

.kickoff-point h3 {
  margin: 0 0 4px;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
}

.kickoff-point p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.kickoff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  text-align: left;
}

.kickoff-grid-cell {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 18px 20px;
}

.kickoff-grid-cell h3 {
  margin: 0 0 6px;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
}

.kickoff-grid-cell p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 19px;
}

@media (max-width: 620px) {
  .kickoff-grid {
    grid-template-columns: 1fr;
  }
}

.kickoff-continue {
  width: 110px;
  margin-top: 6px;
}

.readout-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 80px;
}

.readout-report {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: min(820px, 100%);
  text-align: center;
}

.readout-report header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(620px, 100%);
}

.readout-report p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
}

.readout-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(640px, 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 28px 0;
  text-align: left;
}

.readout-grid section {
  display: flex;
  gap: 18px;
}

.readout-grid span {
  flex: 0 0 28px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 18px;
}

.readout-grid h2 {
  margin: 0 0 6px;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

@media (max-width: 760px) {
  .kickoff-intro-screen,
  .dashboard-screen,
  .kickoff-screen,
  .readout-screen {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kickoff-intro-screen {
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .kickoff-intro-card {
    gap: 46px;
  }

  .kickoff-intro-head {
    gap: 32px;
  }

  .kickoff-intro-head .hero-heading {
    line-height: 43px;
  }

  .kickoff-topic-pills {
    margin-top: -22px;
  }

  .dashboard-screen {
    padding-top: 56px;
  }

  .dashboard-board {
    flex-wrap: wrap;
    gap: 14px;
  }

  .kickoff-screen {
    gap: 42px;
    padding-top: 56px;
  }

  .kickoff-card {
    gap: 34px;
    padding: 0 0 44px;
  }

  .kickoff-head h1,
  .readout-report h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .kickoff-diagram {
    min-height: 184px;
    padding-top: 16px;
  }

  .kickoff-below {
    gap: 34px;
  }

  .kickoff-instruction {
    font-size: 22px;
    line-height: 124%;
  }

  .kickoff-prompts {
    gap: 20px;
  }

  .kickoff-answer {
    min-height: 52px;
  }

  .readout-screen {
    padding-top: 64px;
  }

  .readout-grid section {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 420px) {
  .kickoff-progress {
    width: 260px;
  }

  .kickoff-progress span {
    width: 40px;
  }

  .kickoff-head p,
  .readout-report p {
    font-size: 15px;
  }

  .kickoff-prompt h2 {
    font-size: 17px;
  }

  .kickoff-helper,
  .kickoff-thought {
    font-size: 13px;
  }
}

.summary-screen-paper {
  gap: 28px;
  justify-content: center;
  min-height: 100dvh;
  padding: 48px 20px 44px;
}

.summary-variation-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(1040px, 100%);
}

.summary-variation-tab,
.summary-pager-button {
  appearance: none;
  border: 1px solid rgba(220, 217, 219, 0.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(220, 217, 219, 0.64);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 18px;
  padding: 8px 12px;
  transition:
    background-color 180ms var(--sunspell-ease),
    border-color 180ms var(--sunspell-ease),
    color 180ms var(--sunspell-ease);
}

.summary-variation-tab:hover,
.summary-variation-tab:focus-visible,
.summary-pager-button:hover,
.summary-pager-button:focus-visible {
  border-color: rgba(220, 217, 219, 0.44);
  background: rgba(220, 217, 219, 0.08);
  color: #dcd9db;
  outline: none;
}

.summary-variation-tab.is-active {
  border-color: #dcd9db;
  background: #dcd9db;
  color: #090306;
}

.summary-variation-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(220, 217, 219, 0.64);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.summary-paper-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
  width: min(682px, 100%);
}

.summary-variant {
  min-height: 0;
  justify-content: center;
}

.summary-variant-classic,
.summary-variant-compact,
.summary-variant-lead {
  width: min(682px, 100%);
}

.summary-variant-compact .summary-paper-head {
  height: 136px;
}

.summary-variant-compact .summary-paper-deck p {
  height: auto;
  color: rgba(220, 217, 219, 0.64);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-variant-lead .summary-paper-head {
  height: 112px;
}

.summary-variant-lead .summary-paper-deck {
  display: none;
}

.summary-paper-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 20px;
  width: 100%;
  height: 164px;
  text-align: center;
}

.summary-paper-kicker,
.summary-paper-meta span {
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-paper-head .hero-heading {
  font-size: 56px;
  line-height: 70px;
  width: 100%;
}

.summary-paper-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.summary-paper-deck p {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 124%;
  text-align: center;
}

.summary-paper-deck span {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  color: rgba(220, 217, 219, 0.64);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
}

.summary-paper-row h2 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.summary-paper-meta {
  display: flex;
  align-self: stretch;
  gap: 96px;
  justify-content: center;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  padding: 16px 0;
}

.summary-paper-meta div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.summary-paper-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 450px;
  max-width: 100%;
}

.summary-paper-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 36px 0;
  width: min(737px, calc(100vw - 40px));
}

.summary-paper-label-lane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 280px;
  gap: 16px;
}

.summary-paper-row p {
  width: min(680px, 100%);
  max-width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.0001em;
  line-height: 24px;
}

.summary-paper-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: 36px;
}

.summary-paper-actions.is-stacked {
  flex-direction: column-reverse;
  gap: 12px;
  padding-top: 0;
}

.summary-paper-actions .pill-button {
  min-height: 40px;
  padding: 11px 18px;
}

.summary-row-index {
  width: 180px;
  flex-shrink: 0;
  color: #f2c94c;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-variant-ledger {
  width: min(920px, 100%);
}

.summary-variant-ledger .summary-paper-body {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
}

.summary-variant-ledger .summary-paper-row {
  flex-direction: row;
  gap: 56px;
  width: 100%;
  padding: 34px 0;
  border-bottom: 1px solid rgba(220, 217, 219, 0.12);
}

.summary-variant-ledger .summary-paper-row:last-child {
  border-bottom: 0;
}

.summary-variant-ledger .summary-paper-row + .summary-paper-row,
.summary-variant-split .summary-paper-row + .summary-paper-row,
.summary-variant-rail .summary-paper-row + .summary-paper-row {
  transform: none;
}

.summary-variant-ledger .summary-paper-label-lane {
  width: 280px;
}

.summary-variant-split {
  width: min(1030px, 100%);
}

.summary-split-body {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  width: 100%;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  padding-top: 42px;
}

.summary-split-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 38px;
  min-width: 0;
}

.summary-split-copy .summary-paper-row,
.summary-rail-copy .summary-paper-row {
  width: 100%;
  padding: 0;
}

.summary-proof-rail,
.summary-action-rail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  gap: 26px;
  width: 300px;
  border-left: 1px solid rgba(220, 217, 219, 0.16);
  padding-left: 36px;
}

.summary-proof-rail div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-proof-rail strong {
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 42px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 46px;
}

.summary-proof-rail span,
.summary-action-rail > span {
  color: rgba(220, 217, 219, 0.64);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-variant-centered {
  width: min(760px, 100%);
  text-align: center;
}

.summary-centered-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  padding: 38px 0;
}

.summary-centered-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.summary-centered-row h2,
.summary-document-body h2 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 34px;
}

.summary-centered-row p {
  width: min(690px, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 18px;
  font-weight: 300;
  line-height: 29px;
  text-align: center;
}

.summary-centered-row span {
  width: 64px;
  height: 1px;
  background: rgba(220, 217, 219, 0.16);
}

.summary-variant-document {
  width: min(880px, 100%);
}

.summary-document-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  padding-bottom: 34px;
  text-align: center;
}

.summary-document-head span,
.summary-document-body > section > span {
  color: rgba(220, 217, 219, 0.64);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-document-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.summary-document-body section {
  display: flex;
  gap: 42px;
  padding: 30px 0;
}

.summary-document-body section > span {
  width: 44px;
  flex-shrink: 0;
}

.summary-document-body section > div {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
}

.summary-document-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.summary-document-foot {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding-top: 30px;
}

.summary-document-terms {
  display: flex;
  gap: 48px;
  width: 100%;
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  padding: 22px 0 24px;
}

.summary-document-terms > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.summary-document-terms span {
  color: rgba(220, 217, 219, 0.5);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
}

.summary-document-terms strong {
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 22px;
}

.summary-actions-c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.summary-proposal-line {
  margin: 0;
  color: rgba(220, 217, 219, 0.55);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 20px;
}

.summary-proposal-link {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(220, 217, 219, 0.32);
  background: transparent;
  padding: 0 0 1px;
  cursor: pointer;
  color: rgba(220, 217, 219, 0.85);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  letter-spacing: -0.02em;
  transition: color 180ms ease, border-color 180ms ease;
}

.summary-proposal-link:hover,
.summary-proposal-link:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
  outline: none;
}

.summary-variant-rail {
  width: min(1030px, 100%);
}

.summary-rail-stage {
  display: flex;
  align-items: center;
  gap: 72px;
  width: 100%;
}

.summary-rail-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 34px;
  min-width: 0;
}

.summary-action-rail {
  width: 260px;
  padding-left: 46px;
}

.summary-system-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  border-bottom: 1px solid rgba(220, 217, 219, 0.16);
  padding: 15px 0;
  color: rgba(220, 217, 219, 0.64);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-system-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.summary-system-rows section {
  display: flex;
  gap: 40px;
  border-bottom: 1px solid rgba(220, 217, 219, 0.12);
  padding: 30px 0;
}

.summary-system-rows section:last-child {
  border-bottom: 0;
}

.summary-system-rows section > span {
  width: 42px;
  flex-shrink: 0;
  color: rgba(220, 217, 219, 0.5);
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.summary-system-rows section > div,
.summary-system-copy-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-system-rows h2,
.summary-system-copy-block h2 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.summary-system-rows p,
.summary-system-copy-block p {
  width: min(680px, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.0001em;
  line-height: 24px;
}

.summary-variant-ledger {
  width: min(760px, 100%);
}

.summary-variant-ledger .summary-paper-head {
  height: 132px;
}

.summary-variant-ledger .summary-paper-deck p,
.summary-variant-split .summary-paper-deck p,
.summary-variant-centered .summary-paper-deck p,
.summary-variant-rail .summary-paper-deck p {
  height: auto;
  color: rgba(220, 217, 219, 0.64);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}

.summary-variant-split {
  width: min(980px, 100%);
}

.summary-variant-split .summary-paper-head,
.summary-variant-rail .summary-paper-head {
  height: 132px;
}

.summary-split-body {
  gap: 64px;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  padding-top: 38px;
}

.summary-split-copy,
.summary-rail-copy {
  gap: 34px;
}

.summary-proof-rail,
.summary-action-rail {
  gap: 22px;
  width: 282px;
  border-left: 1px solid rgba(220, 217, 219, 0.16);
  padding-left: 34px;
}

.summary-proof-rail div {
  gap: 8px;
}

.summary-proof-rail span,
.summary-action-rail > span {
  color: rgba(220, 217, 219, 0.64);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 16px;
  text-transform: uppercase;
}

.summary-proof-rail strong {
  color: #dcd9db;
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.summary-variant-centered {
  width: min(720px, 100%);
}

.summary-variant-centered .summary-paper-head {
  height: 132px;
}

.summary-centered-body {
  gap: 26px;
  padding: 34px 0;
}

.summary-centered-row h2,
.summary-document-body h2 {
  font-size: 24px;
  line-height: 28px;
}

.summary-centered-row p {
  font-size: 16px;
  line-height: 25px;
}

.summary-variant-document {
  width: min(820px, 100%);
}

.summary-document-head {
  gap: 16px;
  padding-bottom: 30px;
}

.summary-document-head .hero-heading {
  width: 100%;
}

.summary-document-body section {
  gap: 36px;
  padding: 24px 0;
}

.summary-document-body section > span {
  width: 132px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.summary-document-foot {
  padding-top: 22px;
}

.summary-variant-rail {
  width: min(980px, 100%);
}

.summary-rail-stage {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 320px;
  border-top: 1px solid rgba(220, 217, 219, 0.16);
  padding-top: 38px;
}

.summary-variant-rail .summary-rail-copy {
  width: min(620px, 100%);
  flex: 0 1 620px;
  text-align: center;
}

.summary-variant-rail .summary-system-copy-block {
  align-items: center;
}

.summary-variant-rail .summary-system-copy-block p {
  text-align: center;
}

.summary-action-rail {
  position: absolute;
  right: 0;
  top: calc(100% + 24px);
  width: 260px;
}

.summary-action-note {
  color: rgba(255, 255, 255, 0.42);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 20px;
}

.summary-paper-actions.is-system {
  gap: 14px;
  padding-top: 18px;
}

.summary-paper-actions.is-system.is-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.summary-paper-actions.is-system .pill-button {
  min-width: 134px;
  min-height: 40px;
}

.summary-paper-actions.is-system.is-stacked .pill-button {
  width: 100%;
}

.summary-paper-actions.is-system .proposal-inline-button {
  justify-content: center;
  min-height: 36px;
  color: rgba(220, 217, 219, 0.54);
}

.proposal-inline-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: rgba(220, 217, 219, 0.64);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 16px;
  padding: 11px 4px;
  transition: color 180ms ease;
}

.proposal-inline-button path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.8;
}

.proposal-inline-button:hover,
.proposal-inline-button:focus-visible {
  color: #dcd9db;
  outline: none;
}

/* Storybook design-system alignment */
.pill-button,
.continue-button,
.signature-save,
.modal-action {
  border-color: var(--sp-ink);
  border-radius: var(--radius-pill);
  color: var(--sp-ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 16px;
  transition:
    background-color 180ms var(--sunspell-ease),
    border-color 180ms var(--sunspell-ease),
    color 180ms var(--sunspell-ease),
    opacity 180ms var(--sunspell-ease);
}

.pill-button:hover,
.pill-button:focus-visible,
.modal-action:hover,
.modal-action:focus-visible {
  border-color: var(--sp-ink-strong);
  background: rgba(220, 217, 219, 0.08);
  color: var(--sp-ink-strong);
}

.fill-in-tag,
.kickoff-eyebrow,
.dashboard-card-state,
.readout-grid span,
.signature-meta,
.modal-field span,
.signature-preview-label {
  color: var(--sp-ink-soft);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 16px;
  text-transform: uppercase;
}

.fill-in-tag,
.kickoff-topic-pills span {
  border: 1px solid var(--sp-card-border);
  border-radius: 4px;
  padding: 4px 6px;
}

.contract-modal,
.dashboard-card,
.kickoff-card,
.kickoff-intro-card,
.readout-doc,
.readout-report,
.success-content {
  border-color: var(--sp-card-border);
}

.dashboard-card,
.kickoff-card,
.kickoff-intro-card,
.readout-doc,
.readout-report {
  border-radius: 24px;
}

.contract-field-trigger,
.modal-field input,
.modal-field select,
.typed-signature-panel input,
.state-select-button,
.signature-mode,
.draw-signature-panel,
.signature-preview-panel,
.upload-signature-panel,
.kickoff-answer {
  border-color: var(--sp-card-border);
  border-radius: var(--radius-sm);
}

.modal-field input,
.modal-field select,
.typed-signature-panel input,
.kickoff-thought {
  color: var(--sp-ink);
  font-family: var(--font-sans);
  font-weight: 400;
}

.dashboard-card:hover,
.dashboard-card:focus-visible,
.kickoff-helper:hover,
.kickoff-helper:focus-visible {
  border-color: rgba(220, 217, 219, 0.42);
  background: rgba(220, 217, 219, 0.08);
}

.fill-in-tag {
  width: 58px;
  height: 22px;
  min-width: 58px;
  min-height: 22px;
  border: 0;
  border-radius: 0;
  background: var(--sp-card-border);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  color: var(--sp-ink-soft);
  font-size: 9px;
  line-height: 10px;
  overflow: hidden;
  padding: 0 11px 0 5px;
  isolation: isolate;
}

.fill-in-tag::before {
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: rgba(220, 217, 219, 0.1);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  content: "";
}

.fill-in-tag:hover,
.fill-in-tag:focus-visible {
  background: rgba(220, 217, 219, 0.42);
}

.fill-in-tag:hover::before,
.fill-in-tag:focus-visible::before {
  background: rgba(220, 217, 219, 0.18);
}

/* Targeted rollback requested after DS pass */
.dashboard-card {
  border-radius: 8px;
}

.kickoff-answer {
  border-radius: 0;
}

.kickoff-thought {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
}

.summary-paper-row + .summary-paper-row {
  transform: translateY(-8px);
}

.contract-field-trigger {
  border-radius: 0;
}

.readout-entry p {
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.success-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: 36px;
}

.success-actions .pill-button {
  min-height: 40px;
  padding: 11px 18px;
}

.success-actions #download-pdf {
  min-height: 40px;
  border-radius: 0;
  background: transparent;
  color: rgba(220, 217, 219, 0.64);
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 16px;
  padding: 11px 4px;
  text-decoration: none;
}

.success-actions #download-pdf:hover,
.success-actions #download-pdf:focus-visible {
  background: transparent;
  color: #dcd9db;
  outline: none;
}

.success-actions #download-status {
  flex-basis: 100%;
  text-align: center;
}

.kickoff-diagram {
  width: 520px;
  height: 252px;
  transform: translateY(-8px);
}

.kickoff-diagram svg {
  width: 520px;
  height: 190px;
  max-width: 100%;
  flex: 0 0 auto;
}

.kickoff-answer {
  transition: border-color 180ms ease, opacity 180ms ease;
}

.kickoff-answer.is-input-focused {
  border-bottom-color: #ffffff;
}

.kickoff-thought {
  display: block;
  resize: none;
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: 300;
}

.kickoff-answer.has-value .kickoff-thought {
  color: #ffffff;
}

.kickoff-thought::placeholder {
  color: rgba(255, 255, 255, 0.3);
  opacity: 1;
  transition: color 180ms ease;
}

.kickoff-thought:hover,
.kickoff-thought:hover::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.kickoff-answer:not(.is-input-focused) .kickoff-thought:placeholder-shown:hover,
.kickoff-answer:not(.is-input-focused) .kickoff-thought:placeholder-shown:hover::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.kickoff-answer.is-input-focused .kickoff-thought::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.kickoff-helper {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 300;
  padding: 0;
  text-align: left;
  opacity: 1;
  transition: color 180ms ease, opacity 180ms ease;
}

.kickoff-helper:hover,
.kickoff-helper:focus-visible,
.kickoff-prompt:hover .kickoff-helper,
.kickoff-answer.is-focused .kickoff-helper,
.kickoff-answer.has-value .kickoff-helper {
  color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.kickoff-answer.is-input-focused .kickoff-thought,
.kickoff-answer.has-value .kickoff-thought,
.kickoff-thought:focus-visible {
  color: #ffffff;
  outline: none;
}

.kickoff-answer.is-input-focused .kickoff-thought::placeholder,
.kickoff-thought:focus-visible::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.kickoff-helper:hover,
.kickoff-helper:focus-visible,
.kickoff-helper:active,
.kickoff-answer.is-focused .kickoff-helper,
.kickoff-answer.has-value .kickoff-helper {
  color: rgba(255, 255, 255, 0.45);
}

.kickoff-helper.is-selected,
.kickoff-helper.is-selected:hover,
.kickoff-helper.is-selected:focus-visible {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.64);
}

.kickoff-prompt h2 {
  font-size: 20px;
  line-height: 124%;
}

.kickoff-prompt-helper {
  font-size: 14px;
}

.kickoff-thought {
  font-size: 16px;
}

.kickoff-helper,
.kickoff-suggestions .kickoff-helper {
  font-size: 14px;
}

.modal-field input,
.modal-field select,
.typed-signature-panel input,
.state-select-button,
.state-options,
.state-option,
.signature-mode,
.draw-signature-panel,
.signature-preview-panel,
.upload-signature-panel,
.upload-icon {
  border-radius: 0;
}

.signature-mode {
  min-width: 32px;
  border-radius: 100px;
  padding: 4px 8px;
}

.kickoff-head p {
  color: rgba(255, 255, 255, 0.64);
}

.contract-overlay .contract-modal {
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.contract-overlay .modal-field input,
.contract-overlay .modal-field select,
.contract-overlay .typed-signature-panel input,
.contract-overlay .state-select-button {
  background: transparent;
}

.contract-overlay .modal-field input:hover,
.contract-overlay .modal-field input:focus,
.contract-overlay .modal-field select:hover,
.contract-overlay .modal-field select:focus,
.contract-overlay .typed-signature-panel input:hover,
.contract-overlay .typed-signature-panel input:focus,
.contract-overlay .state-select-button:hover,
.contract-overlay .state-select-button:focus-visible {
  background: transparent;
}

.contract-overlay .draw-signature-panel,
.contract-overlay .signature-preview-panel,
.contract-overlay .upload-signature-panel {
  border-color: rgba(220, 217, 219, 0.16);
  background: transparent;
}

.contract-overlay .modal-field,
.contract-overlay .modal-signature-section {
  transition: color 180ms var(--sunspell-ease);
}

.contract-overlay .modal-field:hover span,
.contract-overlay .modal-field:focus-within span,
.contract-overlay .modal-signature-section:hover .modal-label,
.contract-overlay .modal-signature-section:focus-within .modal-label {
  color: #dcd9db;
}

.contract-overlay .required-mark {
  color: #dcd9db;
}

.contract-overlay .modal-field:hover input,
.contract-overlay .modal-field:focus-within input,
.contract-overlay .modal-field:hover select,
.contract-overlay .modal-field:focus-within select,
.contract-overlay .typed-signature-panel:hover input,
.contract-overlay .typed-signature-panel:focus-within input,
.contract-overlay .state-select:hover .state-select-button,
.contract-overlay .state-select:focus-within .state-select-button {
  border-color: rgba(255, 255, 255, 0.64);
  color: rgba(255, 255, 255, 0.64);
}

.contract-overlay .modal-field:hover input::placeholder,
.contract-overlay .modal-field:focus-within input::placeholder,
.contract-overlay .typed-signature-panel:hover input::placeholder,
.contract-overlay .typed-signature-panel:focus-within input::placeholder {
  color: rgba(255, 255, 255, 0.64);
}

.contract-overlay #signature-first-name,
.contract-overlay #signature-last-name {
  padding-left: 0;
}

.contract-overlay .modal-action:not(:disabled),
.contract-overlay .signature-save:not(:disabled) {
  border-color: #ffffff;
  color: #ffffff;
}

.contract-overlay .modal-action:not(:disabled):hover,
.contract-overlay .modal-action:not(:disabled):focus-visible,
.contract-overlay .signature-save:not(:disabled):hover,
.contract-overlay .signature-save:not(:disabled):focus-visible {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.contract-overlay .modal-action:disabled,
.contract-overlay .modal-action:disabled:hover,
.contract-overlay .modal-action:disabled:focus-visible,
.contract-overlay .signature-save:disabled,
.contract-overlay .signature-save:disabled:hover,
.contract-overlay .signature-save:disabled:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
}

.readout-screen {
  align-items: center;
  padding-top: 120px;
  padding-bottom: 74px;
}

.readout-doc {
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  border-radius: 12px;
  padding: 26px 48px 74px;
}

.readout-cover {
  border-bottom: 1px solid rgba(244, 244, 242, 0.13);
  padding-bottom: 30px;
  text-align: center;
}

.readout-cover h1 {
  margin: 0 0 20px;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 56px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 48px;
}

.readout-cover p {
  margin: 0;
  color: rgba(244, 244, 242, 0.54);
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 22px;
}

.readout-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 44px;
}

.readout-section:first-of-type {
  padding-top: 24px;
}

.readout-section > h2 {
  margin: 0 0 8px;
  color: rgba(220, 217, 219, 0.64);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.2em;
  line-height: 18px;
  text-transform: uppercase;
}

.readout-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 26px;
}

.readout-label {
  color: rgba(220, 217, 219, 0.64);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.16em;
  line-height: 16px;
  text-transform: uppercase;
}

.readout-entry h3 {
  margin: 0;
  color: #dcd9db;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 28px;
}

.readout-entry p {
  width: 100%;
  margin: 0;
  border-left: 1px solid #e3d8c3;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 18px;
}

.readout-reaction {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 21px;
  color: var(--color-ink-soft);
  opacity: 0.92;
}

.readout-reaction-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e3d8c3;
  flex: 0 0 auto;
}

.readout-reaction-from {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(227, 216, 195, 0.72);
}

.ctl-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.ctl-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: rgba(12, 9, 12, 0.94);
  border: 1px solid rgba(220, 217, 219, 0.2);
  border-radius: 999px;
  color: #dcd9db;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.ctl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dcd9db;
  flex: 0 0 auto;
}

.ctl-body {
  display: none;
  order: -1;
  flex-direction: column;
  gap: 14px;
  width: 262px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 15px;
  background: rgba(12, 9, 12, 0.97);
  border: 1px solid rgba(220, 217, 219, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

.ctl-panel.is-open .ctl-body {
  display: flex;
}

.ctl-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ctl-h {
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.42);
}

.ctl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 9px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: rgba(220, 217, 219, 0.74);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 15px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ctl-item:hover {
  background: rgba(220, 217, 219, 0.08);
  color: #fff;
}

.ctl-item.is-current {
  background: rgba(220, 217, 219, 0.14);
  color: #fff;
}

.ctl-toggle.is-on {
  background: rgba(220, 217, 219, 0.16);
  color: #fff;
}

.readout-back {
  align-self: center;
  width: auto;
  margin-top: 64px;
}

@media (max-width: 760px) {
  .summary-screen-paper {
    gap: 22px;
    padding: 32px 20px 48px;
  }

  .summary-variation-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 2px;
  }

  .summary-variation-tab {
    flex-shrink: 0;
  }

  .summary-variant {
    min-height: 0;
  }

  .summary-paper-head .hero-heading,
  .readout-cover h1 {
    font-size: 42px;
    line-height: 48px;
  }

  .summary-paper-meta {
    flex-direction: column;
    gap: 16px;
  }

  .summary-paper-body,
  .summary-paper-row {
    gap: 16px;
  }

  .summary-paper-row h2 {
    flex-basis: auto;
  }

  .summary-paper-label-lane {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .summary-paper-label-lane span {
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-left: 0;
    line-height: 18px;
    text-align: left;
  }

  .summary-paper-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .summary-paper-actions.is-system,
  .summary-paper-actions.is-system.is-stacked {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .summary-rail-stage {
    min-height: 0;
  }

  .summary-action-rail {
    position: static;
  }

  .summary-variant-ledger .summary-paper-row,
  .summary-split-body,
  .summary-document-body section,
  .summary-document-foot,
  .summary-rail-stage {
    flex-direction: column;
    gap: 18px;
  }

  .summary-system-meta {
    flex-direction: column;
    gap: 8px;
  }

  .summary-system-rows section {
    flex-direction: column;
    gap: 12px;
    padding: 24px 0;
  }

  .summary-row-index,
  .summary-system-rows section > span,
  .summary-document-body section > span {
    width: 100%;
  }

  .summary-proof-rail,
  .summary-action-rail {
    width: 100%;
    border-left: 0;
    border-top: 1px solid rgba(220, 217, 219, 0.16);
    padding-top: 24px;
    padding-left: 0;
  }

  .summary-centered-row p {
    font-size: 16px;
    line-height: 25px;
  }

  .summary-document-foot {
    align-items: flex-start;
  }

  .kickoff-diagram {
    width: min(520px, 100%);
    height: 220px;
  }

  .kickoff-diagram svg {
    width: min(520px, 100%);
    height: 190px;
  }

  .readout-doc {
    padding: 26px 20px 56px;
  }
}


/* ===== Audit + Directions report screens ===== */
.report-card { max-width: 760px; }
.report-screen .kickoff-below { text-align: left; }
.report-screen .kickoff-head { text-align: center; }
.rep-h2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 17px; color: #f6f5f3; margin: 30px 0 14px; }
.rep-h2:first-child { margin-top: 2px; }
.rep-score { display: flex; align-items: baseline; gap: 8px; }
.rep-score strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 56px; color: #f6f5f3; line-height: 1; }
.rep-score em { font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 16px; color: rgba(220,217,219,.4); }
.rep-score span { font-size: 12px; color: rgba(220,217,219,.55); margin-left: 8px; }
.rep-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rep-mini { display: flex; gap: 22px; }
.rep-mini div { text-align: right; }
.rep-mini span { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(220,217,219,.4); }
.rep-mini strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 22px; color: #dcd9db; }
.rep-bars { display: flex; flex-direction: column; gap: 13px; }
.rep-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rep-bar-top span { font-size: 13px; color: #dcd9db; }
.rep-bar-top strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; color: #f6f5f3; }
.rep-track { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.rep-track i { display: block; height: 100%; background: #d6b49a; border-radius: 2px; }
.rep-gap { display: flex; flex-direction: column; gap: 12px; }
.rep-gap-row { display: flex; gap: 13px; align-items: flex-start; }
.rep-tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #d6b49a; border: 1px solid rgba(214,180,154,.4); border-radius: 4px; padding: 3px 8px; flex-shrink: 0; min-width: 60px; text-align: center; }
.rep-gap-row p { margin: 0; font-size: 13px; color: rgba(220,217,219,.7); line-height: 1.5; }
.rep-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.rep-tiles div { background: rgba(255,255,255,.03); border-radius: 9px; padding: 14px 16px; }
.rep-tiles span { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(220,217,219,.45); margin-bottom: 6px; }
.rep-tiles strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 30px; color: #f6f5f3; }
.rep-prompts { display: flex; flex-direction: column; gap: 9px; }
.rep-prompt { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 9px; }
.rep-prompt span { font-size: 13px; color: #dcd9db; }
.rep-prompt em { font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 11px; color: rgba(220,217,219,.5); flex-shrink: 0; }
.rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-chips span { font-size: 12px; color: rgba(220,217,219,.8); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 6px 13px; }
.rep-p { font-size: 13px; color: rgba(220,217,219,.7); line-height: 1.6; margin: 0; }
.rep-field { display: flex; flex-direction: column; gap: 14px; }
.rep-frow { display: grid; grid-template-columns: 140px 1fr 44px; gap: 14px; align-items: center; }
.rep-frow span { font-size: 13px; color: rgba(220,217,219,.6); }
.rep-frow strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; color: #dcd9db; text-align: right; }
.rep-frow.is-you span, .rep-frow.is-you strong { color: #f6f5f3; }
.rep-frow.is-you .rep-track i { background: #f6f5f3; }
.rep-gaplead { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 18px; }
.rep-gaplead span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(220,217,219,.45); }
.rep-gaplead strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 34px; color: #d6b49a; }
.rep-gaplead em { font-style: normal; font-size: 12px; color: rgba(220,217,219,.45); }
.rep-actions { display: flex; flex-direction: column; gap: 12px; }
.rep-action { display: flex; gap: 12px; align-items: flex-start; }
.rep-action i { width: 5px; height: 5px; border-radius: 50%; background: #d6b49a; margin-top: 8px; flex-shrink: 0; }
.rep-action p { margin: 0; font-size: 13px; color: rgba(220,217,219,.78); line-height: 1.5; }
.rep-ba-overall { display: flex; align-items: center; gap: 22px; justify-content: center; margin-bottom: 24px; }
.rep-ba-overall div { text-align: center; }
.rep-ba-overall span { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(220,217,219,.45); margin-bottom: 6px; }
.rep-ba-overall strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 46px; color: #f6f5f3; }
.rep-ba-overall i { font-style: normal; font-size: 22px; color: rgba(214,180,154,.7); }
.rep-ba { display: flex; flex-direction: column; gap: 11px; }
.rep-ba-row { display: grid; grid-template-columns: 1fr 40px 22px 40px 50px; gap: 10px; align-items: baseline; }
.rep-ba-row span { font-size: 13px; color: #dcd9db; }
.rep-ba-row em { font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 13px; color: rgba(220,217,219,.45); text-align: right; }
.rep-ba-row i { font-style: normal; color: rgba(214,180,154,.6); text-align: center; }
.rep-ba-row strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; color: #f6f5f3; text-align: right; }
.rep-delta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: #d6b49a; text-align: right; }
.rep-dsum { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.rep-dsum-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 14px 16px; }
.rep-dsum-l span { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(220,217,219,.45); margin-bottom: 4px; }
.rep-dsum-l strong { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 17px; color: #f6f5f3; }
.rep-dsum-s { display: flex; gap: 20px; }
.rep-dsum-s div { text-align: right; }
.rep-dsum-s span { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(220,217,219,.4); }
.rep-dsum-s em { font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 20px; color: #dcd9db; }
.rep-rec { border-left: 2px solid rgba(214,180,154,.5); padding: 8px 0 8px 14px; margin-bottom: 20px; }
.rep-rec span { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(220,217,219,.4); margin-bottom: 4px; }
.rep-rec p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 14px; color: #dcd9db; }
.rep-dirs { display: flex; flex-direction: column; gap: 14px; }
.rep-dir { border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 16px 18px; }
.rep-dir.lead { border-color: rgba(214,180,154,.45); }
.rep-dir-top { display: flex; align-items: baseline; gap: 10px; }
.rep-dir-id { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: #d6b49a; }
.rep-dir-top strong { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 18px; color: #f6f5f3; }
.rep-vb { margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.15); border-radius: 4px; padding: 3px 8px; color: rgba(220,217,219,.55); }
.rep-vb.lead { border-color: rgba(214,180,154,.5); color: #d6b49a; }
.rep-dir-hero { font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: #dcd9db; margin: 10px 0 12px; }
.rep-wire { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.rep-wblock { border: 1px solid rgba(255,255,255,.1); border-left: 2px solid rgba(220,217,219,.4); border-radius: 0 5px 5px 0; padding: 7px 10px; font-size: 11px; color: rgba(220,217,219,.6); }
.rep-dir-scores { display: flex; gap: 22px; margin-bottom: 13px; }
.rep-dir-scores span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(220,217,219,.4); margin-right: 7px; }
.rep-dir-scores strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 18px; color: #f6f5f3; }
.rep-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rep-pros div, .rep-cons div { font-size: 11.5px; line-height: 1.5; margin-bottom: 5px; }
.rep-pros div { color: rgba(157,180,201,.9); }
.rep-cons div { color: rgba(220,217,219,.5); }
.report-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; gap: 14px; }
.report-prev { background: transparent; border: none; color: rgba(220,217,219,.5); font-size: 13px; cursor: pointer; padding: 8px 0; }
.report-prev:hover { color: #dcd9db; }
@media (max-width: 620px) {
  .rep-two, .rep-pc { grid-template-columns: 1fr; gap: 14px; }
  .rep-frow { grid-template-columns: 100px 1fr 38px; }
}

.kickoff-zone-or { text-align: center; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 12px 0 10px; }
.kickoff-zone-notes { width: 100%; }

.kickoff-info { display: none; font-size: 12.5px; color: rgba(255,255,255,0.42); line-height: 1.55; max-width: 460px; margin-top: 2px; }
.kickoff-info::before { content: "WHY WE ASK"; display: block; font-family: Menlo, ui-monospace, monospace; font-size: 9px; letter-spacing: 0.14em; color: rgba(214,180,154,0.72); margin-bottom: 5px; }
.kickoff-prompt.is-focused .kickoff-info { display: block; }


/* ============ Visual + motion gloss (2026-06-22) ============ */
@keyframes kfRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes kfFade { from { opacity: 0; } to { opacity: 1; } }

.kickoff-answer {
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.016);
  padding: 9px 14px !important;
  min-height: 44px;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.kickoff-answer.is-input-focused {
  border-color: rgba(214,180,154,0.55) !important;
  background: rgba(214,180,154,0.05);
}
.kickoff-answer.has-value { border-color: rgba(255,255,255,0.2) !important; }

.kickoff-prompts { gap: 30px !important; }
.kickoff-prompt { gap: 10px !important; }
.kickoff-info { margin-top: 7px; }

.kickoff-suggestions { gap: 8px !important; padding-top: 7px !important; }
.kickoff-suggestions .kickoff-helper {
  min-height: 32px !important;
  padding: 6px 14px !important;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.kickoff-suggestions .kickoff-helper:hover { transform: translateY(-1px); }

.kickoff-prompt.is-focused .kickoff-info { animation: kfRise 0.3s ease both; }
.kickoff-prompt.is-focused .kickoff-suggestions { animation: kfRise 0.32s ease 0.03s both; }

.kickoff-head { animation: kfRise 0.5s cubic-bezier(0.2,0.7,0.2,1) both; }
.kickoff-diagram { animation: kfFade 0.6s ease 0.08s both; }
.kickoff-below { animation: kfRise 0.5s cubic-bezier(0.2,0.7,0.2,1) 0.12s both; }

.kickoff-continue { transition: transform 0.16s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important; }
.kickoff-continue:hover { transform: translateY(-1px); }
.kickoff-add-row { transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important; }
.kickoff-add-row:hover { transform: translateY(-1px); }
.kickoff-drop { border-radius: 10px !important; transition: border-color 0.18s ease, background 0.18s ease !important; }

@media (prefers-reduced-motion: reduce) {
  .kickoff-head, .kickoff-diagram, .kickoff-below,
  .kickoff-prompt.is-focused .kickoff-info,
  .kickoff-prompt.is-focused .kickoff-suggestions { animation: none !important; }
}


/* ---------- response input (kr-) ---------- */
.kickoff-response{--kreo:cubic-bezier(.22,1,.36,1)}
.kickoff-response .kr-input{margin-top:14px}
.kr-box{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:14px 16px;border:1px solid transparent;border-radius:12px;background:transparent;color:rgba(220,217,219,.55);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;outline:none;transition:border-color .3s var(--kreo),background .3s var(--kreo),color .3s var(--kreo),transform .14s var(--kreo)}
.kr-box:active{transform:scale(.992)}
.kr-box:focus-visible .kr-dash rect{stroke:#f6f5f3}
.kickoff-response.is-open .kr-box{border-color:rgba(220,217,219,.32);background:rgba(220,217,219,.03);color:#dcd9db}
.kr-box.is-filled{border-color:rgba(220,217,219,.3);background:rgba(246,245,243,.022);color:#dcd9db}
.kr-box.kr-settle{animation:krSettle .52s var(--kreo)}
@keyframes krSettle{0%{transform:scale(1.016)}55%{transform:scale(.997)}100%{transform:scale(1)}}
.kr-dash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0;transition:opacity .3s var(--kreo)}
.kr-dash rect{fill:none;stroke:rgba(220,217,219,.2);stroke-width:.5;stroke-dasharray:8 6;stroke-linecap:butt;transition:stroke .3s var(--kreo)}
.kr-box:hover .kr-dash rect{stroke:rgba(220,217,219,.4)}
.kickoff-response.is-open .kr-dash,.kr-box.is-filled .kr-dash{opacity:0}
.kr-label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;flex:1}
.kickoff-response.is-open .kr-label,.kr-box.is-filled .kr-label{align-items:flex-start}
.kr-ph{color:#dcd9db;opacity:.8;transition:opacity .3s var(--kreo)}
.kr-box:hover .kr-ph{opacity:1}
.kr-sumtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kr-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kr-mini{font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(246,245,243,.06);color:#f6f5f3;border:1px solid rgba(220,217,219,.22);white-space:nowrap}
.kr-noteln{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:rgba(220,217,219,.55);line-height:1.5;text-align:left}
.kr-noteic{flex:0 0 auto;margin-top:2px;color:rgba(220,217,219,.4);display:inline-flex}
.kr-noteic svg{width:14px;height:14px;display:block}
.kr-sumck{flex:0 0 auto;display:inline-flex}
.kr-sumck svg{width:15px;height:15px;display:block}
.kr-sumck svg path{fill:none;stroke:#f6f5f3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .42s var(--kreo)}
.kr-sumck svg.drawn path{stroke-dashoffset:0}
.kr-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s var(--kreo),opacity .3s ease}
.kickoff-response.is-open .kr-panel{grid-template-rows:1fr;opacity:1}
.kr-panel-inner{overflow:hidden;min-height:0}
.kr-panel-pad{padding:16px 2px 2px;transform-origin:top;transform:translateY(-7px);transition:transform .42s var(--kreo)}
.kickoff-response.is-open .kr-panel-pad{transform:translateY(0)}
.kr-meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(220,217,219,.32);margin-bottom:13px}
.kr-opt{color:rgba(220,217,219,.24)}
.kr-cnt{display:inline-flex;align-items:center;transition:color .3s}
.kr-cnt.is-full{color:#dcd9db}
.kr-roll-wrap{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom}
.kr-roll{display:flex;flex-direction:column;transition:transform .46s var(--kreo)}
.kr-roll b{height:1em;line-height:1;font-weight:400}
.kr-cnt-ck{display:inline-flex;margin-left:7px;opacity:0;transform:scale(.5);transition:opacity .3s var(--kreo),transform .34s var(--kreo)}
.kr-cnt-ck svg{width:12px;height:12px;display:block}
.kr-cnt-ck svg path{fill:none;stroke:#dcd9db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kr-cnt.is-full .kr-cnt-ck{opacity:1;transform:scale(1)}
.kr-chips{display:flex;flex-wrap:wrap;gap:8px}
.kr-chip{position:relative;display:inline-flex;align-items:center;gap:0;padding:8px 14px;border:1px solid rgba(220,217,219,.14);border-radius:999px;background:transparent;color:#dcd9db;font:inherit;font-size:13px;line-height:1;cursor:pointer;user-select:none;outline:none;transition:background .24s var(--kreo),border-color .24s,color .24s,transform .26s var(--kreo),opacity .26s}
.kr-chip:hover{border-color:rgba(220,217,219,.38);transform:translateY(-1px)}
.kr-chip:active{transform:scale(.97)}
.kr-chip:focus-visible{box-shadow:0 0 0 2px rgba(220,217,219,.5)}
.kr-chip::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid rgba(246,245,243,.55);opacity:0;pointer-events:none}
.kr-chip.kr-pop{animation:krPop .44s var(--kreo)}
.kr-chip.kr-pop::after{animation:krRing .55s var(--kreo)}
@keyframes krPop{0%{transform:scale(1)}32%{transform:scale(1.06)}68%{transform:scale(.984)}100%{transform:scale(1)}}
@keyframes krRing{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
.kr-ck{display:inline-flex;width:0;opacity:0;margin-right:0;overflow:visible;transition:width .28s var(--kreo),opacity .2s,margin-right .28s var(--kreo)}
.kr-ck svg{width:14px;height:14px;display:block}
.kr-ck svg path{fill:none;stroke:#f6f5f3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .34s var(--kreo) .06s}
.kr-chip.is-sel{background:rgba(246,245,243,.07);border-color:rgba(246,245,243,.5);color:#f6f5f3}
.kr-chip.is-sel .kr-ck{width:14px;opacity:1;margin-right:8px}
.kr-chip.is-sel .kr-ck svg path{stroke-dashoffset:0}
.kr-rank{width:0;opacity:0;overflow:hidden;font-style:normal;font-family:var(--font-mono);font-size:11px;color:#f6f5f3;transition:width .28s var(--kreo),opacity .2s,margin-right .28s var(--kreo)}
.kr-chip.is-sel .kr-rank{width:10px;opacity:1;margin-right:8px}
.kr-chips.is-max .kr-chip:not(.is-sel){opacity:.36;transform:scale(.96)}
.kr-chips.is-max .kr-chip:not(.is-sel):hover{transform:scale(.96)}
.kr-actions{display:flex;gap:20px;margin-top:16px}
.kr-act{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:4px 0;color:rgba(220,217,219,.55);font:inherit;font-size:12.5px;cursor:pointer;outline:none;transition:color .22s}
.kr-act:hover{color:#dcd9db}
.kr-act.is-on{color:#f6f5f3}
.kr-aic{display:inline-flex}
.kr-aic svg{width:15px;height:15px;display:block}
.kr-note-wrap,.kr-why-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--kreo)}
.kr-note-wrap>div,.kr-why-wrap>div{overflow:hidden;min-height:0}
.kickoff-response.kr-note-open .kr-note-wrap{grid-template-rows:1fr}
.kickoff-response.kr-why-open .kr-why-wrap{grid-template-rows:1fr}
.kr-note{width:100%;margin-top:13px;min-height:62px;background:rgba(220,217,219,.022);border:1px solid rgba(220,217,219,.13);border-radius:11px;padding:11px 13px;color:#dcd9db;font:inherit;font-size:14px;line-height:1.5;resize:vertical;outline:none;transition:border-color .22s}
.kr-note::placeholder{color:rgba(220,217,219,.32)}
.kr-note:focus{border-color:rgba(220,217,219,.34)}
.kr-why{margin-top:13px;display:flex;gap:10px;padding:11px 13px;background:rgba(246,245,243,.02);border:1px solid rgba(220,217,219,.11);border-radius:11px}
.kr-gi{flex:0 0 auto;margin-top:1px;color:rgba(220,217,219,.55);display:inline-flex}
.kr-gi svg{width:15px;height:15px;display:block}
.kr-wbody{min-width:0}
.kr-wlab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,217,219,.55)}
.kr-why p{margin:5px 0 0;font-size:13px;line-height:1.62;color:rgba(220,217,219,.55)}
.kr-foot{display:flex;align-items:center;justify-content:flex-end;margin-top:15px}
.kr-kbd{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:rgba(220,217,219,.32);opacity:0;transition:opacity .4s var(--kreo) .15s}
.kickoff-response.is-open .kr-kbd{opacity:1}
.kr-kbd .kr-aic svg{width:13px;height:13px}
@media (prefers-reduced-motion: reduce){
  .kr-box,.kr-dash,.kr-panel,.kr-panel-pad,.kr-note-wrap,.kr-why-wrap,.kr-roll,.kr-chip,.kr-cnt-ck,.kr-ck,.kr-rank{transition-duration:.001s !important}
  .kr-box.kr-settle,.kr-chip.kr-pop{animation-duration:.001s !important}
  .kr-panel-pad{transform:none}
}


/* zone (materials) note toggle */
.kickoff-zone-prompt{--kreo:cubic-bezier(.22,1,.36,1)}
.kz-actions{margin-top:12px}
.kickoff-zone-prompt.kz-note-open .kr-note-wrap{grid-template-rows:1fr}


/* zone note hint visible when open */
.kickoff-zone-prompt.kz-note-open .kr-kbd{opacity:1}
.kz-foot{margin-top:10px}


/* before-we-meet lifecycle states (monochrome) */
.kintro-review .kickoff-intro-card,
.kintro-readout .kickoff-intro-card{gap:46px}
.kintro-review .kickoff-intro-head,
.kintro-readout .kickoff-intro-head{gap:20px}
.kintro-body{display:flex;flex-direction:column;align-items:center;gap:26px}
.kintro-status{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-soft)}
.kintro-dot{width:7px;height:7px;border-radius:50%;background:var(--color-ink-soft);animation:kintroPulse 1.7s ease-in-out infinite}
@keyframes kintroPulse{0%,100%{opacity:.38;transform:scale(.82)}50%{opacity:.92;transform:scale(1.12)}}
.kintro-ck{width:14px;height:14px;display:block}
.kintro-ck path{fill:none;stroke:var(--color-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:kintroDraw .6s cubic-bezier(.22,1,.36,1) .25s forwards}
@keyframes kintroDraw{to{stroke-dashoffset:0}}
.kintro-status .kintro-ck-wrap{display:inline-flex}
.kickoff-topic-pills.is-done{margin-top:0}
.kickoff-topic-pills.is-done span{display:inline-flex;align-items:center;gap:6px;border-color:rgba(220,217,219,.18)}
.kickoff-topic-pills.is-done .kintro-ck{width:11px;height:11px}
.kickoff-topic-pills.is-done .kintro-ck path{animation:none;stroke-dashoffset:0;stroke:var(--color-ink-soft);stroke-width:2.4}
.kintro-preview{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;width:min(330px,100%)}
.kintro-preview li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:300;color:var(--color-ink-soft);text-align:left}
.kintro-preview li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-ink-faint);flex:0 0 auto}
.pill-button.is-quiet{opacity:.65}
@media (prefers-reduced-motion: reduce){.kintro-dot{animation:none}.kintro-ck path{animation:none;stroke-dashoffset:0}}


/* ---------- kickoff nav (title + back/forward) ---------- */
.kickoff-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%;padding:22px 34px 18px}
.knav-brand{justify-self:start;background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:var(--font-serif);font-style:italic;font-size:18px;letter-spacing:-.01em;color:#dcd9db;transition:opacity 160ms ease}
.knav-brand:hover{opacity:.62}
.knav-flow{justify-self:end;font-family:"IBM Plex Mono",var(--font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(220,217,219,.45)}
.knav-center{justify-self:center;display:flex;align-items:center;gap:16px}
.kickoff-nav .kickoff-progress{width:auto;height:auto;display:inline-flex;align-items:baseline;gap:4px}
.knav-arrows{display:flex;align-items:center;gap:18px}
.knav-arrow{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:rgba(220,217,219,.55);font:inherit;cursor:pointer;padding:2px;outline:none;transition:color .2s,transform .15s}
.knav-arrow svg{width:21px;height:21px;display:block}
.knav-arrow:hover:not(:disabled){color:#f4f7f8}
.knav-back:active:not(:disabled){transform:translateX(-2px)}
.knav-fwd:active:not(:disabled){transform:translateX(2px)}
@media (max-width: 560px){
  .kickoff-nav{padding:16px 16px 12px;gap:8px}
  .knav-brand{font-size:15px;white-space:nowrap;min-width:0}
  .knav-flow{font-size:8px;letter-spacing:.16em;line-height:11px;min-width:0;text-align:right}
  .knav-center{gap:11px}
  .knav-arrow svg{width:18px;height:18px}
  .kickoff-nav .kickoff-progress strong,.kickoff-nav .kickoff-progress em{font-size:11px;letter-spacing:.18em}
}
@media (max-width: 384px){
  .knav-brand{font-size:13px}
  .knav-center{gap:8px}
  .knav-arrow svg{width:16px;height:16px}
  .kickoff-nav .kickoff-progress strong,.kickoff-nav .kickoff-progress em{font-size:10px;letter-spacing:.12em}
  .knav-flow{font-size:7.5px;letter-spacing:.1em}
}
@media (max-width: 340px){
  .knav-brand{font-size:11.5px}
  .kickoff-nav{gap:6px;padding:14px 12px 11px}
}
.knav-arrow:disabled{opacity:.2;cursor:default}
.knav-arrow:focus-visible{outline:1px solid rgba(220,217,219,.5);outline-offset:3px}

/* gate hint + locked continue */
.kickoff-gate-hint{margin:9px 0 0;font-family:"IBM Plex Mono",var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,217,219,.42);opacity:0;transition:opacity .25s;pointer-events:none}
.kickoff-gate-hint.is-on{opacity:1}
.kickoff-gate-hint.shake{animation:kgShake .42s}
@keyframes kgShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.kickoff-continue.is-locked{opacity:.4}
.kickoff-drop.is-maxed .kickoff-drop-text::after{content:" · max 10";color:rgba(220,217,219,.4)}

/* ---------- tighten padding (per call feedback) ---------- */
.kickoff-screen{gap:34px;padding-top:0}
.kickoff-card{gap:30px;padding:0 56px 44px}
.kickoff-head{gap:16px}
.kickoff-below{gap:32px}
.kickoff-prompts{gap:20px !important}
.kickoff-diagram{min-height:200px;padding-top:26px}
.kickoff-instruction{font-size:21px}
.kickoff-intro-card{gap:56px}
.kickoff-intro-head{gap:30px}
.kickoff-topic-pills{margin-top:-34px}

/* merged-grid sublabel */
.kickoff-subhead{width:100%;margin:6px 0 2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,217,219,.45);text-align:center}

/* ---------- agreement summary: match the "Before we meet" aesthetic ---------- */
.summary-variant-document {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
  width: min(640px, 100%);
  text-align: center;
}
.summary-document-head {
  align-items: center;
  gap: 26px;
  border-bottom: 0;
  padding-bottom: 0;
}
.summary-document-head span {
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.5);
}
.summary-variant-document .hero-heading { line-height: 44px; }
.summary-document-sub {
  margin: 0;
  width: min(460px, 100%);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
}
.summary-document-terms {
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 44px;
  border-bottom: 0;
  padding: 0;
}
.summary-document-terms > div { align-items: center; gap: 8px; }
.summary-document-terms span {
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(220, 217, 219, 0.42);
}
.summary-document-terms strong { letter-spacing: -0.01em; }
.summary-document-body { align-items: center; width: min(528px, 100%); gap: 4px; }
.summary-document-body section {
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 22px 0;
}
.summary-document-body section > span {
  width: auto;
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(220, 217, 219, 0.4);
}
.summary-document-body section > div {
  width: 100%;
  flex: none;
  align-items: center;
  text-align: center;
  gap: 11px;
}
.summary-document-body h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #f4f1f2;
}
.summary-document-body p {
  font-size: 15px;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.6);
}
.summary-document-foot {
  justify-content: center;
  padding-top: 6px;
}
.summary-document-foot .summary-actions-c {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 22px;
}
.summary-document-foot .summary-proposal-line {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 19px;
}