:root {
  color: #17252d;
  background: #fff8ed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #17252d;
  --muted: #625c55;
  --quiet: #978b7f;
  --line: rgba(23, 37, 45, 0.13);
  --indigo: #c9573f;
  --indigo-deep: #963c2a;
  --lime: #d9a036;
  --paper: #fffbf4;
  --mist: #f0dfcc;
  --night: #17252d;
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --page-shell-width: min(calc(100vw - 64px), 1380px);
  --shadow-glass: 0 28px 80px rgba(23, 37, 45, 0.11),
    0 5px 18px rgba(23, 37, 45, 0.05);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #fff8ed;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff8ed;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

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

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid rgba(201, 87, 63, 0.38);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.liquid-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.section-shell {
  width: var(--page-shell-width);
  margin-inline: auto;
}

.section-heading {
  max-width: 840px;
  margin-bottom: 62px;
}

.section-heading--centred {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading h2,
.outcomes-heading h2,
.final-cta h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(48px, 5.1vw, 82px);
  font-weight: 510;
  line-height: 0.98;
  letter-spacing: -0.062em;
}

.section-heading > p:last-child,
.final-cta__panel > div > p:last-child {
  max-width: 690px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.section-heading--centred > p:last-child {
  margin-right: auto;
  margin-left: auto;
}

/* Header */

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding: 20px 0 0;
  pointer-events: none;
}

.nav-shell {
  --glass-x: 50%;
  --glass-y: -20%;
  position: relative;
  isolation: isolate;
  display: grid;
  width: var(--page-shell-width);
  height: 96px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  overflow: hidden;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 20px 50px rgba(27, 24, 21, 0);
  pointer-events: auto;
  transform: scale(var(--pill-scale, 1));
  transform-origin: top center;
  transition:
    width 120ms ease-out,
    height 120ms ease-out,
    padding 120ms ease-out,
    transform 120ms ease-out,
    border-color 360ms ease,
    border-radius 480ms cubic-bezier(0.2, 0.75, 0.2, 1),
    background-color 360ms ease,
    box-shadow 480ms ease;
}

.nav-shell::before,
.nav-shell::after {
  position: absolute;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity 320ms ease;
}

.nav-shell::before {
  inset: -9px;
  background:
    radial-gradient(460px circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.06) 38%, transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(225, 232, 255, 0.1));
  filter: url("#liquid-glass-refraction");
  transform: translateZ(0) scale(1.025);
  backdrop-filter: blur(10px) saturate(225%) contrast(1.075);
  -webkit-backdrop-filter: blur(10px) saturate(225%) contrast(1.075);
}

.nav-shell::after {
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    radial-gradient(130px 34px at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.78), transparent 74%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.32), transparent 28%, transparent 72%, rgba(102, 103, 240, 0.14));
  box-shadow: inset 0 0 19px rgba(255, 255, 255, 0.1), inset 0 -8px 18px rgba(102, 103, 240, 0.035);
}

.nav-shell > * {
  position: relative;
  z-index: 1;
}

.site-header.is-scrolled .nav-shell {
  width: var(--pill-width, var(--page-shell-width));
  height: var(--pill-height, 96px);
  padding: 0 var(--pill-inline-padding, 14px);
  border-color: rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: rgba(244, 247, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(102, 103, 240, 0.1),
    0 18px 46px rgba(31, 32, 47, 0.13),
    0 3px 11px rgba(31, 32, 47, 0.05);
}

.site-header.is-scrolled .nav-shell::before {
  opacity: 0.84;
}

.site-header.is-scrolled .nav-shell::after {
  opacity: 1;
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-self: start;
  gap: 12px;
  color: #20222b;
}

.brand-mark {
  display: block;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  transition: width 420ms ease, height 420ms ease;
}

.brand-name {
  font-size: 38px;
  font-weight: 480;
  line-height: 1;
  letter-spacing: -0.06em;
  transition: font-size 420ms ease;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 650;
}

.primary-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #292b35;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.82), 0 0 9px rgba(255, 255, 255, 0.5);
  transition: 180ms ease;
}

.primary-nav a:hover {
  transform: translateY(-1px);
}

.primary-nav a[aria-current="page"] {
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  background: rgba(41, 38, 45, 0.9);
  box-shadow: 0 6px 16px rgba(40, 35, 42, 0.12);
  text-shadow: none;
}

.demo-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 12px;
  padding: 0 22px;
  border: 1px solid #29262d;
  border-radius: 999px;
  color: #ffffff;
  background: #29262d;
  box-shadow: 0 8px 20px rgba(45, 39, 47, 0.12);
  font-size: 17px;
  font-weight: 560;
  transition: 180ms ease;
}

.demo-button:hover:not([aria-disabled="true"]) {
  transform: translateY(-1px);
}

.button-arrow {
  color: var(--lime);
  font-size: 22px;
  line-height: 1;
}

[data-demo-link][aria-disabled="true"] {
  cursor: help;
}

[data-demo-link][data-demo-pending="true"] {
  cursor: pointer;
}

.demo-button[aria-disabled="true"] {
  opacity: 1;
}

.nav-menu-button {
  display: none;
  width: 41px;
  height: 41px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(39, 40, 52, 0.1);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 14px rgba(31, 32, 47, 0.08);
}

.nav-menu-button > span,
.nav-menu-button > span::before,
.nav-menu-button > span::after {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-menu-button > span { position: relative; }
.nav-menu-button > span::before,
.nav-menu-button > span::after { position: absolute; top: 0; left: 0; }
.nav-menu-button > span::before { transform: translateY(-5px); }
.nav-menu-button > span::after { transform: translateY(5px); }

.site-header.is-menu-open .nav-menu-button > span {
  background: transparent;
}

.site-header.is-menu-open .nav-menu-button > span::before {
  transform: translateY(0) rotate(45deg);
}

.site-header.is-menu-open .nav-menu-button > span::after {
  transform: translateY(0) rotate(-45deg);
}

.demo-booking-notice {
  position: fixed;
  z-index: 220;
  right: 24px;
  bottom: 24px;
  max-width: min(360px, calc(100% - 32px));
  padding: 14px 18px;
  border: 1px solid #3a3c49;
  border-radius: 999px;
  opacity: 0;
  color: #ffffff;
  background: #1d1f2c;
  box-shadow: 0 18px 45px rgba(22, 23, 35, 0.22);
  font-size: 13px;
  font-weight: 620;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.demo-booking-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero */

.hero {
  position: relative;
  min-height: 790px;
  overflow: clip;
  padding-top: 178px;
  padding-bottom: 112px;
}

.hero::before {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background:
    radial-gradient(circle at 79% 32%, rgba(201, 87, 63, 0.18), transparent 32%),
    radial-gradient(circle at 14% 66%, rgba(217, 160, 54, 0.13), transparent 26%),
    linear-gradient(180deg, #fffaf2, #f8ead9 74%, #fff8ed);
  transform: translateX(-50%);
  content: "";
}

.hero-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero-orb--one {
  top: 120px;
  right: -7vw;
  width: 34vw;
  height: 34vw;
  background: rgba(201, 87, 63, 0.15);
}

.hero-orb--two {
  bottom: 20px;
  left: 31%;
  width: 280px;
  height: 280px;
  background: rgba(217, 160, 54, 0.13);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(470px, 0.94fr);
  align-items: center;
  gap: clamp(42px, 4.5vw, 72px);
}

.hero-copy h1 {
  max-width: 800px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(58px, 5.25vw, 88px);
  font-weight: 520;
  line-height: 0.95;
  letter-spacing: -0.068em;
}

.hero-copy h1 span {
  color: var(--indigo);
}

.hero-lede {
  max-width: 620px;
  margin: 31px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.64;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 22px;
  border: 1px solid rgba(32, 34, 48, 0.1);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.button:hover:not([aria-disabled="true"]) {
  transform: translateY(-2px);
}

.button--primary {
  color: #ffffff;
  border-color: #17252d;
  background: #17252d;
  box-shadow: 0 10px 24px rgba(23, 37, 45, 0.18);
}

.button--primary span {
  color: var(--lime);
  font-size: 18px;
}

.button--primary[aria-disabled="true"] {
  opacity: 1;
}

.button--secondary {
  color: #3f414d;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(34, 36, 55, 0.06);
}

.button--secondary span {
  color: var(--indigo);
  font-size: 17px;
}

.hero-footnote {
  margin: 18px 0 0;
  color: #93949d;
  font-size: 11px;
  font-weight: 620;
}

.hero-control-tower {
  min-height: 504px;
  overflow: hidden;
  border: 1px solid #d9bfae;
  border-radius: 34px;
  background: #f2dfcc;
  box-shadow: 0 24px 60px rgba(23, 37, 45, 0.11);
}

.hero-control-tower p,
.hero-control-tower h2,
.hero-control-tower h3,
.hero-control-tower b,
.hero-control-tower small,
.hero-control-tower strong {
  margin: 0;
}

.control-tower__header {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(23, 37, 45, 0.1);
  background: rgba(255, 251, 244, 0.28);
}

.control-tower__header > div:first-child > p {
  color: #8b695a;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.control-tower__header h2 {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.035em;
}

.control-tower__team {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-tower__team > span {
  color: #796b61;
  font-size: 8px;
  font-weight: 700;
}

.control-tower__team > div {
  display: flex;
  padding-left: 10px;
}

.control-tower__team i,
.deal-owner {
  display: grid;
  width: 29px;
  height: 29px;
  border: 2px solid #f2dfcc;
  border-radius: 50%;
  color: #fffaf2;
  background: #17252d;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  place-items: center;
}

.control-tower__team i + i {
  margin-left: -10px;
}

.control-tower__team i:nth-child(2),
.deal-owner--james {
  background: #c9573f;
}

.control-tower__team i:nth-child(3),
.deal-owner--aisha {
  color: #17252d;
  background: #d9a036;
}

.control-tower__body {
  display: grid;
  min-height: 338px;
  grid-template-columns: minmax(0, 1.45fr) minmax(178px, 0.8fr);
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(circle at 78% 18%, rgba(201, 87, 63, 0.13), transparent 34%),
    linear-gradient(145deg, #f6e8d9, #ecd2bc);
}

.deal-board,
.activity-panel {
  min-width: 0;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 20px;
  background: #fffbf4;
  box-shadow: 0 12px 28px rgba(23, 37, 45, 0.06);
}

.deal-board {
  padding: 9px 11px;
}

.deal-board__heading,
.deal-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 94px 29px;
  align-items: center;
  gap: 8px;
}

.deal-board__heading {
  min-height: 29px;
  padding: 0 7px;
  color: #9a8a7e;
  font-size: 6px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.deal-board__heading span:last-child {
  text-align: center;
}

.deal-row {
  min-height: 66px;
  padding: 8px 7px;
  border-top: 1px solid rgba(23, 37, 45, 0.08);
}

.deal-row__name {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.deal-row__name > i {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #963c2a;
  background: #f3d7cc;
  font-size: 7px;
  font-style: normal;
  font-weight: 780;
  place-items: center;
}

.deal-row:nth-of-type(3) .deal-row__name > i {
  color: #6d531b;
  background: #f1e0b7;
}

.deal-row:nth-of-type(4) .deal-row__name > i {
  color: #345c53;
  background: #d9e8dc;
}

.deal-row:nth-of-type(5) .deal-row__name > i {
  color: #645b83;
  background: #e7dff0;
}

.deal-row__name p {
  min-width: 0;
}

.deal-row__name b,
.deal-row__name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-row__name b {
  font-size: 8px;
  font-weight: 720;
}

.deal-row__name small {
  margin-top: 3px;
  color: #8e8177;
  font-size: 6px;
}

.deal-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 6px;
  font-weight: 750;
  white-space: nowrap;
}

.deal-status > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.deal-status--ready {
  color: #315e50;
  background: #dceade;
}

.deal-status--running {
  color: #8b3f30;
  background: #f2d8cf;
}

.deal-status--running > i,
.activity-panel header span > i {
  animation: control-tower-pulse 1.8s ease-in-out infinite;
}

.deal-status--waiting {
  color: #765919;
  background: #f3e5bd;
}

.deal-status--organised {
  color: #5d547d;
  background: #e9e1f0;
}

.deal-owner {
  width: 27px;
  height: 27px;
  border: 0;
  font-size: 6px;
}

.activity-panel {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.activity-panel > header {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(23, 37, 45, 0.08);
}

.activity-panel h3 {
  font-size: 10px;
  font-weight: 720;
}

.activity-panel header span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4f715c;
  font-size: 6px;
  font-weight: 760;
  text-transform: uppercase;
}

.activity-panel header span > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6e9a74;
}

.activity-list {
  display: grid;
  gap: 2px;
  padding: 10px 0;
}

.activity-list article {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.activity-list article > i {
  display: grid;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: #963c2a;
  background: #f2d8cf;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

.activity-list article:nth-child(2) > i {
  color: #6f5215;
  background: #f2e2b9;
}

.activity-list article:nth-child(3) > i {
  color: #5c537c;
  background: #e8e0ef;
}

.activity-list b,
.activity-list small {
  display: block;
}

.activity-list b {
  overflow: hidden;
  font-size: 7px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-list small {
  margin-top: 3px;
  color: #93867c;
  font-size: 6px;
}

.activity-panel__note {
  display: grid;
  min-height: 67px;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: auto !important;
  padding: 11px;
  border-radius: 14px;
  color: #fff8ed;
  background: #17252d;
}

.activity-panel__note > i {
  display: grid;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: #17252d;
  background: #d9a036;
  font-size: 10px;
  font-style: normal;
  place-items: center;
}

.activity-panel__note b,
.activity-panel__note small {
  display: block;
}

.activity-panel__note b {
  font-size: 7px;
}

.activity-panel__note small {
  margin-top: 3px;
  color: #c4bdb2;
  font-size: 6px;
  line-height: 1.35;
}

.control-tower__footer {
  display: grid;
  min-height: 74px;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(23, 37, 45, 0.1);
  background: rgba(255, 251, 244, 0.3);
}

.control-tower__footer p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
}

.control-tower__footer p + p {
  border-left: 1px solid rgba(23, 37, 45, 0.09);
}

.control-tower__footer strong {
  color: #c9573f;
  font-size: 20px;
  font-weight: 680;
}

.control-tower__footer span {
  max-width: 70px;
  color: #776b62;
  font-size: 7px;
  font-weight: 680;
  line-height: 1.3;
}

@keyframes control-tower-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

.hero-brand-sculpture {
  position: relative;
  display: grid;
  min-height: 504px;
  margin: 0;
  isolation: isolate;
  place-items: center;
}

.brand-sculpture {
  position: relative;
  width: min(100%, 500px);
  height: 500px;
}

.brand-sculpture__halo {
  position: absolute;
  z-index: -3;
  top: 50%;
  left: 50%;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(235, 196, 170, 0.72) 0 36%, rgba(239, 213, 190, 0.4) 52%, transparent 72%);
  transform: translate(-50%, -50%);
}

.brand-sculpture__vertical,
.brand-sculpture__horizontal,
.brand-sculpture__orb {
  position: absolute;
  display: block;
}

.brand-sculpture__vertical {
  z-index: 2;
  top: 76px;
  left: 82px;
  width: 148px;
  height: 350px;
  border-radius: 74px;
  background: #c9573f;
  box-shadow:
    17px -15px 0 #e8ae95,
    33px -27px 0 #f5deca,
    0 30px 54px rgba(150, 60, 42, 0.18);
}

.brand-sculpture__vertical::before,
.brand-sculpture__vertical::after,
.brand-sculpture__horizontal::before,
.brand-sculpture__horizontal::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  display: none;
}

.brand-sculpture__horizontal {
  z-index: 3;
  top: 306px;
  left: 83px;
  width: 350px;
  height: 122px;
  border-radius: 61px;
  background: #17252d;
  box-shadow:
    12px 13px 0 #526068,
    23px 25px 0 #d8c8b8,
    0 30px 55px rgba(23, 37, 45, 0.2);
}

.brand-sculpture__orb {
  z-index: 4;
  top: 64px;
  right: 50px;
  width: 104px;
  height: 104px;
  border: 13px solid rgba(255, 248, 237, 0.72);
  border-radius: 50%;
  background: #d9a036;
  box-shadow:
    0 0 0 12px rgba(217, 160, 54, 0.12),
    0 21px 38px rgba(112, 77, 18, 0.16);
}

.hero-throughput {
  position: relative;
  width: min(100%, 540px);
  min-height: 500px;
  margin: 0;
  justify-self: end;
  isolation: isolate;
}

.throughput-stage {
  position: relative;
  width: 540px;
  height: 430px;
  margin-top: 35px;
}

.throughput-halo {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 50%, rgba(231, 180, 151, 0.46), rgba(242, 223, 204, 0.2) 51%, transparent 73%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
}

.throughput-team {
  position: absolute;
  z-index: 6;
  top: 166px;
  left: 0;
  display: flex;
  width: 124px;
  height: 98px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 49px;
  background: #fffbf4;
  box-shadow:
    10px 11px 0 rgba(216, 200, 184, 0.78),
    0 20px 40px rgba(23, 37, 45, 0.11);
}

.throughput-team__people {
  display: flex;
  padding-left: 14px;
}

.throughput-team__people i {
  position: relative;
  width: 43px;
  height: 43px;
  overflow: hidden;
  border: 4px solid #fffbf4;
  border-radius: 50%;
  background: #17252d;
}

.throughput-team__people i::before {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff8ed;
  transform: translateX(-50%);
  content: "";
}

.throughput-team__people i::after {
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 30px;
  height: 25px;
  border-radius: 50% 50% 0 0;
  background: #fff8ed;
  transform: translateX(-50%);
  content: "";
}

.throughput-team__people i + i { margin-left: -15px; }
.throughput-team__people i:nth-child(2) { background: #c9573f; }
.throughput-team__people i:nth-child(3) { background: #d9a036; }

.throughput-input-line {
  position: absolute;
  z-index: 0;
  top: 214px;
  left: 113px;
  width: 78px;
  height: 2px;
  overflow: hidden;
  background: rgba(23, 37, 45, 0.13);
}

.throughput-input-line::after {
  display: block;
  width: 100%;
  height: 100%;
  background: #c9573f;
  animation: throughput-input-line 2.6s ease-in-out infinite;
  content: "";
  transform-origin: left;
}

.throughput-input-card,
.throughput-card {
  position: absolute;
  display: block;
  width: 38px;
  height: 48px;
  border: 1px solid rgba(23, 37, 45, 0.12);
  border-radius: 10px;
  background: #fffbf4;
  box-shadow: 0 10px 20px rgba(23, 37, 45, 0.11);
}

.throughput-input-card > i,
.throughput-card > i {
  position: absolute;
  top: 14px;
  right: 8px;
  left: 8px;
  height: 2px;
  border-radius: 99px;
  background: #c9573f;
  box-shadow:
    0 6px 0 rgba(201, 87, 63, 0.55),
    0 12px 0 rgba(201, 87, 63, 0.28);
}

.throughput-input-card {
  z-index: 4;
  top: 191px;
  left: 104px;
  animation: throughput-input-card 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.throughput-core {
  position: absolute;
  z-index: 5;
  top: 157px;
  left: 176px;
  display: grid;
  width: 116px;
  height: 116px;
  border: 9px solid rgba(255, 251, 244, 0.78);
  border-radius: 50%;
  background: #17252d;
  box-shadow:
    0 0 0 14px rgba(201, 87, 63, 0.1),
    0 24px 44px rgba(23, 37, 45, 0.2);
  place-items: center;
  animation: throughput-core-pulse 2.8s ease-in-out infinite;
}

.throughput-core img {
  width: 57px;
  height: 57px;
  padding: 8px;
  border-radius: 17px;
  background: #fff8ed;
}

.throughput-paths {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
  stroke: rgba(201, 87, 63, 0.34);
  stroke-linecap: round;
  stroke-width: 2;
}

.throughput-paths path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.throughput-paths path:nth-child(2),
.throughput-paths path:nth-child(3) {
  animation: throughput-path-inner 2.8s cubic-bezier(0.25, 0.75, 0.2, 1) infinite;
}

.throughput-paths path:nth-child(1),
.throughput-paths path:nth-child(4) {
  animation: throughput-path-outer 2.8s cubic-bezier(0.25, 0.75, 0.2, 1) infinite;
}

.throughput-lane {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 540px;
  height: 430px;
  pointer-events: none;
}

.throughput-lane--one { --lane-y: -150px; --mid-y: -63px; }
.throughput-lane--two { --lane-y: -50px; --mid-y: -21px; }
.throughput-lane--three { --lane-y: 50px; --mid-y: 21px; }
.throughput-lane--four { --lane-y: 150px; --mid-y: 63px; }

.throughput-card {
  top: 191px;
  left: 278px;
  opacity: 0;
  will-change: opacity, transform;
}

.throughput-card--first { --end-x: 186px; }
.throughput-card--second { --end-x: 132px; }
.throughput-lane--one .throughput-card--first,
.throughput-lane--four .throughput-card--first {
  animation: throughput-card-outer 2.8s cubic-bezier(0.18, 0.72, 0.22, 1) infinite both;
}
.throughput-lane--two .throughput-card--first,
.throughput-lane--three .throughput-card--first {
  animation: throughput-card-inner 2.8s cubic-bezier(0.18, 0.72, 0.22, 1) infinite both;
}
.throughput-card--second {
  animation: throughput-card-second-wave 2.8s cubic-bezier(0.18, 0.72, 0.22, 1) infinite both;
}
.throughput-lane--two .throughput-card { background: #f1d5ca; }
.throughput-lane--three .throughput-card { background: #f1dfb6; }

@keyframes throughput-input-line {
  0%, 4% { transform: scaleX(0); }
  20%, 90% { transform: scaleX(1); }
  97%, 100% { transform: scaleX(0); transform-origin: right; }
}

@keyframes throughput-input-card {
  0%, 4% { opacity: 0; transform: translateX(-10px) scale(0.82); }
  9% { opacity: 1; }
  22% { opacity: 1; transform: translateX(72px) scale(0.9); }
  27%, 100% { opacity: 0; transform: translateX(84px) scale(0.62); }
}

@keyframes throughput-core-pulse {
  0%, 17%, 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(201, 87, 63, 0.07), 0 24px 44px rgba(23, 37, 45, 0.2); }
  27% { transform: scale(1.08); box-shadow: 0 0 0 20px rgba(201, 87, 63, 0.15), 0 28px 52px rgba(23, 37, 45, 0.23); }
  38% { transform: scale(1); box-shadow: 0 0 0 14px rgba(201, 87, 63, 0.1), 0 24px 44px rgba(23, 37, 45, 0.2); }
}

@keyframes throughput-path-inner {
  0%, 28% { opacity: 0; stroke-dashoffset: 1; }
  48%, 92% { opacity: 1; stroke-dashoffset: 0; }
  98%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes throughput-path-outer {
  0%, 40% { opacity: 0; stroke-dashoffset: 1; }
  60%, 92% { opacity: 1; stroke-dashoffset: 0; }
  98%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes throughput-card-inner {
  0%, 29% { opacity: 0; transform: translate(0, 0) scale(0.72); }
  34% { opacity: 1; transform: translate(0, 0) scale(0.82); }
  49% { opacity: 1; transform: translate(64px, var(--mid-y)) scale(0.9); }
  62%, 92% { opacity: 1; transform: translate(var(--end-x), var(--lane-y)) scale(1); }
  98%, 100% { opacity: 0; transform: translate(calc(var(--end-x) + 15px), var(--lane-y)) scale(0.92); }
}

@keyframes throughput-card-outer {
  0%, 41% { opacity: 0; transform: translate(0, 0) scale(0.72); }
  45% { opacity: 1; transform: translate(0, 0) scale(0.82); }
  58% { opacity: 1; transform: translate(64px, var(--mid-y)) scale(0.9); }
  70%, 92% { opacity: 1; transform: translate(var(--end-x), var(--lane-y)) scale(1); }
  98%, 100% { opacity: 0; transform: translate(calc(var(--end-x) + 15px), var(--lane-y)) scale(0.92); }
}

@keyframes throughput-card-second-wave {
  0%, 58% { opacity: 0; transform: translate(0, 0) scale(0.72); }
  62% { opacity: 1; transform: translate(0, 0) scale(0.82); }
  76%, 92% { opacity: 1; transform: translate(var(--end-x), var(--lane-y)) scale(1); }
  98%, 100% { opacity: 0; transform: translate(calc(var(--end-x) + 15px), var(--lane-y)) scale(0.92); }
}

.hero-capacity-comparison {
  position: relative;
  width: min(100%, 540px);
  min-height: 500px;
  margin: 0;
  justify-self: end;
  isolation: isolate;
}

.capacity-comparison {
  position: relative;
  width: 540px;
  height: 450px;
  margin-top: 25px;
  transition: opacity 320ms ease;
}

.capacity-comparison.is-resetting { opacity: 0; }
.capacity-comparison.is-restarting *,
.capacity-comparison.is-restarting *::before,
.capacity-comparison.is-restarting *::after { animation: none !important; }

.capacity-comparison__halo {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 530px;
  height: 430px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(231, 180, 151, 0.38), rgba(242, 223, 204, 0.18) 54%, transparent 74%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
}

.capacity-case {
  position: absolute;
  top: 12px;
  width: 250px;
  height: 410px;
  overflow: hidden;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 28px;
  box-shadow: 0 20px 45px rgba(23, 37, 45, 0.09);
}

.capacity-case--without {
  left: 0;
  background: rgba(255, 251, 244, 0.66);
}

.capacity-case--with {
  right: 0;
  border-color: rgba(201, 87, 63, 0.17);
  background: rgba(246, 226, 209, 0.72);
}

.capacity-case__label {
  position: absolute;
  z-index: 6;
  top: 18px;
  left: 50%;
  color: #8b7f75;
  font-size: 7px;
  font-weight: 780;
  letter-spacing: 0.14em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.capacity-case--with .capacity-case__label { color: #c9573f; }

.capacity-queue,
.capacity-completed {
  position: absolute;
  z-index: 4;
  left: 50%;
  display: grid;
  width: 112px;
  grid-template-columns: repeat(3, 32px);
  grid-auto-rows: 40px;
  gap: 7px 8px;
  transform: translateX(-50%);
}

.capacity-queue {
  top: 54px;
  min-height: 94px;
  padding: 3px;
  border-radius: 16px;
  background: rgba(23, 37, 45, 0.025);
}

.capacity-completed { top: 280px; }

.capacity-card {
  position: relative;
  display: block;
  width: 32px;
  height: 40px;
  border: 1px solid rgba(23, 37, 45, 0.11);
  border-radius: 8px;
  background: #fffbf4;
  box-shadow: 0 6px 12px rgba(23, 37, 45, 0.08);
  will-change: opacity, transform;
}

.capacity-queue .capacity-card > i {
  position: absolute;
  top: 12px;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: 99px;
  background: #c9573f;
  box-shadow:
    0 5px 0 rgba(201, 87, 63, 0.48),
    0 10px 0 rgba(201, 87, 63, 0.22);
}

.capacity-queue .capacity-card:nth-child(2),
.capacity-queue .capacity-card:nth-child(5),
.capacity-completed .capacity-card:nth-child(2),
.capacity-completed .capacity-card:nth-child(5) {
  background: #f1d5ca;
}

.capacity-queue .capacity-card:nth-child(3),
.capacity-queue .capacity-card:nth-child(6),
.capacity-completed .capacity-card:nth-child(3),
.capacity-completed .capacity-card:nth-child(6) {
  background: #f1dfb6;
}

.capacity-completed .capacity-card {
  display: grid;
  opacity: 0;
  place-items: center;
}

.capacity-completed .capacity-card > i {
  display: grid;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff8ed;
  background: #c9573f;
  font-size: 8px;
  font-style: normal;
  font-weight: 820;
  place-items: center;
}

.capacity-case__team {
  position: absolute;
  z-index: 5;
  top: 180px;
  left: 50%;
  display: flex;
  width: 120px;
  height: 68px;
  align-items: center;
  justify-content: center;
  padding-left: 14px;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 34px;
  background: #fffbf4;
  box-shadow:
    7px 8px 0 rgba(216, 200, 184, 0.72),
    0 14px 28px rgba(23, 37, 45, 0.1);
  transform: translateX(-50%);
}

.capacity-case__team i {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 3px solid #fffbf4;
  border-radius: 50%;
  background: #17252d;
}

.capacity-case__team i::before {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff8ed;
  transform: translateX(-50%);
  content: "";
}

.capacity-case__team i::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 25px;
  height: 21px;
  border-radius: 50% 50% 0 0;
  background: #fff8ed;
  transform: translateX(-50%);
  content: "";
}

.capacity-case__team i + i { margin-left: -12px; }
.capacity-case__team i:nth-child(2) { background: #c9573f; }
.capacity-case__team i:nth-child(3) { background: #d9a036; }

.capacity-case__single-path {
  position: absolute;
  z-index: 1;
  top: 142px;
  left: 50%;
  width: 1px;
  height: 140px;
  overflow: hidden;
  background: rgba(23, 37, 45, 0.11);
}

.capacity-case__single-path::after {
  display: block;
  width: 100%;
  height: 44px;
  background: #c9573f;
  animation: compare-single-flow 12s ease-in-out infinite;
  content: "";
  transform: translateY(-48px);
}

.capacity-case__paths {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
  stroke: rgba(201, 87, 63, 0.35);
  stroke-linecap: round;
  stroke-width: 1.4;
}

.capacity-case__paths path {
  animation: compare-path-flow 4s ease-in-out infinite;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.capacity-case__core {
  position: absolute;
  z-index: 7;
  top: 188px;
  right: 25px;
  display: grid;
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 251, 244, 0.76);
  border-radius: 50%;
  background: #17252d;
  box-shadow: 0 8px 20px rgba(23, 37, 45, 0.16);
  place-items: center;
  animation: compare-core-pulse 4s ease-in-out infinite;
}

.capacity-case__core img {
  width: 26px;
  height: 26px;
  padding: 3px;
  border-radius: 7px;
  background: #fff8ed;
}

.capacity-case--without .capacity-queue .capacity-card:nth-child(1),
.capacity-case--without .capacity-queue .capacity-card:nth-child(2),
.capacity-case--with .capacity-queue .capacity-card:nth-child(1),
.capacity-case--with .capacity-queue .capacity-card:nth-child(2) {
  animation: compare-queue-process 6s ease-in-out infinite;
}

.capacity-case--without .capacity-queue .capacity-card:nth-child(n + 3) {
  animation: compare-queue-wait 6s ease-in-out infinite;
}

.capacity-case--with .capacity-queue .capacity-card:nth-child(3),
.capacity-case--with .capacity-queue .capacity-card:nth-child(4) {
  animation: compare-queue-process 6s 2s ease-in-out infinite;
}

.capacity-case--with .capacity-queue .capacity-card:nth-child(5),
.capacity-case--with .capacity-queue .capacity-card:nth-child(6) {
  animation: compare-queue-process 6s 4s ease-in-out infinite;
}

.capacity-case--without .capacity-completed .capacity-card:nth-child(-n + 2),
.capacity-case--with .capacity-completed .capacity-card:nth-child(1),
.capacity-case--with .capacity-completed .capacity-card:nth-child(2) {
  animation: compare-done-pulse 6s ease-in-out infinite;
}

.capacity-case--with .capacity-completed .capacity-card:nth-child(3),
.capacity-case--with .capacity-completed .capacity-card:nth-child(4) {
  animation: compare-done-pulse 6s 2s ease-in-out infinite;
}

.capacity-case--with .capacity-completed .capacity-card:nth-child(5),
.capacity-case--with .capacity-completed .capacity-card:nth-child(6) {
  animation: compare-done-pulse 6s 4s ease-in-out infinite;
}

.capacity-comparison__divider {
  position: absolute;
  top: 32px;
  bottom: 48px;
  left: 50%;
  width: 1px;
  background: rgba(23, 37, 45, 0.09);
  transform: translateX(-50%);
}

@keyframes compare-queue-process {
  0%, 10% { opacity: 1; transform: translateY(0) scale(1); }
  18% { opacity: 0; transform: translateY(22px) scale(0.76); }
  22% { opacity: 0; transform: translateY(-18px) scale(0.82); }
  30%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes compare-queue-wait {
  0%, 28% { transform: translateY(0); }
  42%, 91% { transform: translateY(6px); box-shadow: 0 0 0 2px rgba(201, 87, 63, 0.18), 0 8px 16px rgba(23, 37, 45, 0.09); }
  98%, 100% { transform: translateY(0); }
}

@keyframes compare-done-pulse {
  0%, 18% { opacity: 0; transform: translateY(-12px) scale(0.8); }
  30%, 60% { opacity: 1; transform: translateY(0) scale(1); }
  72%, 100% { opacity: 0; transform: translateY(10px) scale(0.88); }
}

@keyframes compare-single-flow {
  0%, 12% { opacity: 0; transform: translateY(-48px); }
  23%, 70% { opacity: 1; }
  88%, 100% { opacity: 0; transform: translateY(144px); }
}

@keyframes compare-path-flow {
  0%, 20% { opacity: 0.25; stroke-dashoffset: 14; }
  50%, 91% { opacity: 1; stroke-dashoffset: 0; }
  98%, 100% { opacity: 0.25; stroke-dashoffset: -14; }
}

@keyframes compare-core-pulse {
  0%, 22%, 78%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(23, 37, 45, 0.16); }
  48% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(201, 87, 63, 0.11), 0 10px 24px rgba(23, 37, 45, 0.18); }
}

.capacity-refill-stack,
.capacity-processed-stack {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: 112px;
  height: 94px;
  transform: translateX(-50%);
}

.capacity-refill-stack { top: 54px; }
.capacity-processed-stack { top: 280px; }

.capacity-queue .capacity-card {
  opacity: 1 !important;
  box-shadow: 0 6px 12px rgba(23, 37, 45, 0.08) !important;
  transform: none !important;
  animation: none !important;
  transition: opacity 440ms ease, transform 560ms ease, background-color 440ms ease;
}

.capacity-queue .capacity-card.is-empty {
  opacity: 0.2 !important;
  border-style: dashed;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(5px) scale(0.9) !important;
}

.capacity-queue .capacity-card.is-empty > i { opacity: 0; }

.capacity-slot {
  display: block;
  width: 32px;
  height: 40px;
  border: 1px dashed rgba(23, 37, 45, 0.12);
  border-radius: 8px;
  background: rgba(255, 251, 244, 0.18);
}

.capacity-stack-card {
  position: absolute;
  top: var(--stack-top);
  left: var(--stack-left);
  display: block;
  width: 32px;
  height: 40px;
  opacity: 0;
  border: 1px solid rgba(23, 37, 45, 0.12);
  border-radius: 8px;
  background: #fffbf4;
  box-shadow: 0 6px 12px rgba(23, 37, 45, 0.1);
  transform: translate(var(--stack-x), calc(var(--stack-y) + 12px)) scale(0.82);
  transition: opacity 480ms ease, transform 640ms cubic-bezier(0.2, 0.78, 0.2, 1);
}

.capacity-processed-stack .capacity-stack-card {
  transform: translate(var(--stack-x), calc(var(--stack-y) - 12px)) scale(0.82);
}

.capacity-stack-card:nth-child(3n + 2) { background: #f1d5ca; }
.capacity-stack-card:nth-child(3n) { background: #f1dfb6; }

.capacity-stack-card.is-visible {
  opacity: 1;
  transform: translate(var(--stack-x), var(--stack-y)) scale(1);
}

.capacity-stack-card > i {
  position: absolute;
  top: 12px;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: 99px;
  background: #c9573f;
  box-shadow:
    0 5px 0 rgba(201, 87, 63, 0.48),
    0 10px 0 rgba(201, 87, 63, 0.22);
}

.capacity-processed-stack .capacity-stack-card::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  color: #fff8ed;
  background: #c9573f;
  font-size: 7px;
  font-weight: 820;
  content: "✓";
  place-items: center;
}

.capacity-transit-card {
  position: absolute;
  z-index: 9;
  top: var(--transit-top);
  left: var(--transit-left);
  display: block;
  width: 32px;
  height: 40px;
  border: 1px solid rgba(23, 37, 45, 0.12);
  border-radius: 8px;
  background: #fffbf4;
  box-shadow: 0 8px 16px rgba(23, 37, 45, 0.14);
  animation: capacity-card-to-team 720ms cubic-bezier(0.32, 0.04, 0.2, 1) forwards;
  pointer-events: none;
}

.capacity-transit-card > i {
  position: absolute;
  top: 12px;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: 99px;
  background: #c9573f;
  box-shadow:
    0 5px 0 rgba(201, 87, 63, 0.48),
    0 10px 0 rgba(201, 87, 63, 0.22);
}

.capacity-transit-pulse {
  position: absolute;
  z-index: 10;
  top: 165px;
  left: 120px;
  width: 10px;
  height: 10px;
  opacity: 0;
  border: 2px solid #fff8ed;
  border-radius: 50%;
  background: #c9573f;
  box-shadow: 0 0 0 5px rgba(201, 87, 63, 0.12);
  animation: capacity-signal-to-output 880ms 520ms cubic-bezier(0.28, 0.04, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes capacity-card-to-team {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate(var(--to-team-x), var(--to-team-y)) scale(0.38);
  }
  100% {
    opacity: 0;
    transform: translate(var(--to-team-x), var(--to-team-y)) scale(0.12);
  }
}

@keyframes capacity-signal-to-output {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }
  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  76% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--pulse-x), var(--pulse-y)) scale(0.45);
  }
}

.hero-capacity-concept {
  position: relative;
  width: min(100%, 540px);
  min-height: 530px;
  margin: 0;
  justify-self: end;
  isolation: isolate;
}

.hero-capacity-concept::before {
  position: absolute;
  z-index: -2;
  top: 38px;
  left: 50%;
  width: 500px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 180, 151, 0.42), rgba(242, 223, 204, 0.24) 52%, transparent 72%);
  filter: blur(7px);
  transform: translateX(-50%);
  content: "";
}

.capacity-orbit {
  position: relative;
  width: 540px;
  height: 474px;
  margin-left: auto;
}

.capacity-meter {
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 50%;
  display: grid;
  width: 190px;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 12px 15px 11px;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 15px;
  background: rgba(255, 251, 244, 0.86);
  box-shadow: 0 12px 28px rgba(23, 37, 45, 0.08);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.capacity-meter > span {
  color: #776b62;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.capacity-meter > div {
  display: flex;
  grid-column: 1 / -1;
  gap: 4px;
  margin-top: 8px;
}

.capacity-meter i {
  width: 35px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(23, 37, 45, 0.09);
}

.capacity-meter i::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #c9573f;
  transform: scaleX(0);
  transform-origin: left;
  animation: capacity-meter-fill 8s cubic-bezier(0.3, 0.7, 0.2, 1) infinite;
  content: "";
}

.capacity-meter i:nth-child(2)::after { animation-delay: 0.55s; }
.capacity-meter i:nth-child(3)::after { animation-delay: 1.1s; }
.capacity-meter i:nth-child(4)::after { animation-delay: 1.65s; background: #d9a036; }

.capacity-meter strong {
  grid-column: 2;
  grid-row: 1;
  color: #c9573f;
  font-size: 7px;
  font-weight: 760;
}

.capacity-orbit__ring {
  position: absolute;
  z-index: 0;
  top: 76px;
  left: 50%;
  display: block;
  border: 1px solid rgba(201, 87, 63, 0.2);
  border-radius: 50%;
  transform: translateX(-50%);
}

.capacity-orbit__ring--outer {
  width: 434px;
  height: 340px;
  border-style: dashed;
  background: rgba(255, 251, 244, 0.13);
  animation: capacity-ring-expand 8s cubic-bezier(0.3, 0.75, 0.2, 1) infinite;
}

.capacity-orbit__ring--inner {
  top: 112px;
  width: 304px;
  height: 264px;
  border-color: rgba(23, 37, 45, 0.1);
  background: rgba(255, 251, 244, 0.2);
}

.capacity-orbit__sweep {
  position: absolute;
  z-index: 1;
  top: 76px;
  left: 53px;
  display: block;
  width: 434px;
  height: 340px;
  border-radius: 50%;
  animation: capacity-sweep 12s linear infinite;
}

.capacity-orbit__sweep::before {
  position: absolute;
  top: 21px;
  left: 80px;
  width: 12px;
  height: 12px;
  border: 4px solid rgba(255, 248, 237, 0.78);
  border-radius: 50%;
  background: #d9a036;
  box-shadow: 0 5px 14px rgba(129, 89, 20, 0.18);
  content: "";
}

.capacity-core {
  position: absolute;
  z-index: 3;
  top: 228px;
  left: 50%;
  display: flex;
  width: 148px;
  height: 148px;
  align-items: center;
  justify-content: center;
  border: 9px solid rgba(255, 251, 244, 0.76);
  border-radius: 50%;
  color: #fff8ed;
  background: #17252d;
  box-shadow:
    0 0 0 16px rgba(201, 87, 63, 0.09),
    0 22px 42px rgba(23, 37, 45, 0.19);
  text-align: center;
  transform: translate(-50%, -50%);
  flex-direction: column;
  animation: capacity-core-pulse 4s ease-in-out infinite;
}

.capacity-core > span {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 7px;
  border-radius: 12px;
  background: #fff8ed;
  place-items: center;
}

.capacity-core img { width: 29px; height: 29px; }

.capacity-core b {
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.03em;
}

.capacity-core small {
  margin-top: 5px;
  color: #cfc4b8;
  font-size: 5px;
  font-weight: 720;
  letter-spacing: 0.13em;
}

.capacity-deal {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 82px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(23, 37, 45, 0.11);
  border-radius: 15px;
  color: #5f554e;
  background: rgba(255, 251, 244, 0.92);
  box-shadow: 0 12px 25px rgba(23, 37, 45, 0.1);
  animation: capacity-deal-flow 8s cubic-bezier(0.3, 0.72, 0.2, 1) infinite;
}

.capacity-deal > i {
  position: relative;
  width: 15px;
  height: 19px;
  border: 1.5px solid #c9573f;
  border-radius: 3px;
}

.capacity-deal > i::after {
  position: absolute;
  right: 2px;
  bottom: 3px;
  left: 2px;
  height: 1px;
  background: #c9573f;
  box-shadow: 0 -4px 0 rgba(201, 87, 63, 0.55);
  content: "";
}

.capacity-deal b {
  font-size: 8px;
  font-weight: 740;
}

.capacity-deal em {
  display: grid;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff8ed;
  background: #c9573f;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
  transform: scale(0.7);
  animation: capacity-check 8s ease-in-out infinite;
}

.capacity-deal--one { top: 72px; left: calc(50% - 41px); animation-delay: -1.8s; }
.capacity-deal--two { top: 130px; right: 18px; animation-delay: -1.35s; }
.capacity-deal--three { top: 270px; right: 5px; animation-delay: -0.9s; }
.capacity-deal--four { top: 350px; right: 86px; animation-delay: -0.45s; }
.capacity-deal--five { top: 350px; left: 86px; animation-delay: 0s; }
.capacity-deal--six { top: 150px; left: 8px; animation-delay: 0.45s; }

.capacity-deal--one em { animation-delay: -1.8s; }
.capacity-deal--two em { animation-delay: -1.35s; }
.capacity-deal--three em { animation-delay: -0.9s; }
.capacity-deal--four em { animation-delay: -0.45s; }
.capacity-deal--five em { animation-delay: 0s; }
.capacity-deal--six em { animation-delay: 0.45s; }

.capacity-deal--two,
.capacity-deal--five {
  background: rgba(243, 218, 207, 0.94);
}

.capacity-deal--three,
.capacity-deal--six {
  background: rgba(244, 227, 185, 0.95);
}

.capacity-team {
  position: absolute;
  z-index: 4;
  bottom: -2px;
  left: 50%;
  display: flex;
  min-width: 226px;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 13px 9px 15px;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 999px;
  background: #fffbf4;
  box-shadow: 0 15px 34px rgba(23, 37, 45, 0.11);
  transform: translateX(-50%);
}

.capacity-team p {
  display: flex;
  margin: 0;
  color: #75685f;
  white-space: nowrap;
  flex-direction: column;
}

.capacity-team p small {
  color: #8c7f74;
  font-size: 5px;
  font-weight: 760;
  letter-spacing: 0.13em;
}

.capacity-team p strong {
  margin-top: 3px;
  color: #17252d;
  font-size: 11px;
  font-weight: 740;
}

.capacity-team__people {
  display: flex;
  padding-left: 8px;
}

.capacity-team__people i {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 3px solid #fffbf4;
  border-radius: 50%;
  background: #17252d;
  font-style: normal;
  place-items: center;
}

.capacity-team__people i::before {
  position: absolute;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff8ed;
  content: "";
}

.capacity-team__people i::after {
  position: absolute;
  bottom: -8px;
  width: 25px;
  height: 22px;
  border-radius: 50% 50% 0 0;
  background: #fff8ed;
  content: "";
}

.capacity-team__people i + i { margin-left: -11px; }
.capacity-team__people i:nth-child(2) { background: #c9573f; }
.capacity-team__people i:nth-child(3) { background: #d9a036; }

.capacity-team__lock {
  display: grid;
  width: 25px;
  height: 25px;
  margin-left: 4px;
  border-radius: 50%;
  color: #fff8ed;
  background: #17252d;
  font-size: 10px;
  font-weight: 800;
  place-items: center;
}

.hero-capacity-concept figcaption {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid rgba(23, 37, 45, 0.09);
  border-radius: 17px;
  color: #73665d;
  background: rgba(255, 251, 244, 0.52);
  box-shadow: 0 12px 30px rgba(23, 37, 45, 0.06);
  font-size: 9px;
  font-weight: 680;
  backdrop-filter: blur(12px);
}

.hero-capacity-concept figcaption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9573f;
  box-shadow: 0 0 0 4px rgba(201, 87, 63, 0.11);
}

.hero-capacity-concept figcaption strong {
  color: #17252d;
  font-size: 10px;
}

.hero-capacity-concept figcaption span { color: #8b7f75; }

@keyframes capacity-ring-expand {
  0%, 8% { opacity: 0.25; transform: translateX(-50%) scale(0.72); }
  34%, 82% { opacity: 1; transform: translateX(-50%) scale(1); }
  96%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.8); }
}

@keyframes capacity-sweep {
  to { transform: rotate(360deg); }
}

@keyframes capacity-core-pulse {
  0%, 100% { box-shadow: 0 0 0 12px rgba(201, 87, 63, 0.07), 0 22px 42px rgba(23, 37, 45, 0.19); }
  50% { box-shadow: 0 0 0 20px rgba(201, 87, 63, 0.12), 0 25px 48px rgba(23, 37, 45, 0.22); }
}

@keyframes capacity-deal-flow {
  0%, 7% { opacity: 0; transform: translateY(18px) scale(0.76); }
  17%, 76% { opacity: 1; transform: translateY(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-8px) scale(0.92); }
}

@keyframes capacity-check {
  0%, 20% { opacity: 0; transform: scale(0.55); }
  32%, 78% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes capacity-meter-fill {
  0%, 9% { transform: scaleX(0); }
  25%, 82% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

/* Problem */

.problem {
  padding-top: 130px;
  padding-bottom: 150px;
}

.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
  align-items: center;
  gap: clamp(58px, 7vw, 110px);
}

.problem-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 34px;
  background:
    linear-gradient(rgba(102, 103, 240, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 103, 240, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(238, 239, 255, 0.5));
  background-size: 72px 72px, 72px 72px, auto;
}

.problem-window-bar {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(34, 36, 52, 0.08);
}

.problem-window-bar > span {
  display: flex;
  gap: 5px;
}

.problem-window-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9dae1;
}

.problem-window-bar b {
  color: #7a7c86;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.problem-email {
  position: absolute;
  left: 9%;
  display: grid;
  width: 75%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e8e8ef;
  border-radius: 19px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(35, 37, 61, 0.09);
}

.problem-email--one { top: 100px; transform: rotate(-2deg); opacity: 0.65; }
.problem-email--two { top: 206px; left: 16%; transform: rotate(2deg); opacity: 0.82; }
.problem-email--three { top: 318px; left: 11%; }

.problem-email > span {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #ffffff;
  background: var(--indigo);
  font-size: 9px;
  font-weight: 760;
  place-items: center;
}

.problem-email p,
.problem-email b,
.problem-email small {
  margin: 0;
}

.problem-email b,
.problem-email small {
  display: block;
}

.problem-email b { font-size: 10px; }
.problem-email small { margin-top: 4px; color: #92939b; font-size: 8px; }
.problem-email > i { display: grid; width: 24px; height: 24px; border-radius: 50%; color: #5556ce; background: #eeeefe; font-size: 8px; font-style: normal; font-weight: 760; place-items: center; }

.problem-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  color: #555762;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(32, 34, 55, 0.1);
  font-size: 8px;
  font-weight: 700;
}

.problem-float b { display: grid; width: 18px; height: 18px; border-radius: 50%; color: #ffffff; background: #ef9f4f; place-items: center; }
.problem-float--left { bottom: 25px; left: 4%; }
.problem-float--right { right: 4%; bottom: 82px; }

.problem-list {
  display: grid;
  gap: 0;
}

.problem-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 17px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.problem-list article:first-child { border-top: 1px solid var(--line); }

.problem-list article > span {
  color: var(--indigo);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.problem-list h3 {
  margin: -4px 0 7px;
  font-size: 21px;
  font-weight: 630;
  letter-spacing: -0.035em;
}

.problem-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Preview shell */

.preview-section {
  position: relative;
  padding: 110px 0 125px;
  background:
    radial-gradient(circle at 50% 0%, rgba(102, 103, 240, 0.09), transparent 28%),
    linear-gradient(180deg, #ffffff, #f7f7ff 45%, #ffffff);
  scroll-margin-top: 80px;
}

/* Benefits */

.benefits {
  padding-top: 110px;
  padding-bottom: 120px;
  scroll-margin-top: 80px;
}

.benefit-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.benefit-summary__heading h2 {
  max-width: 570px;
  margin: 0;
  color: #17252d;
  font-size: clamp(54px, 5.2vw, 82px);
  font-weight: 510;
  line-height: 0.96;
  letter-spacing: -0.062em;
}

.benefit-outcomes {
  border-left: 3px solid #c9573f;
  padding-left: clamp(28px, 3.1vw, 48px);
}

.benefit-outcome {
  padding: 0 0 34px;
}

.benefit-outcome + .benefit-outcome {
  padding-top: 34px;
  border-top: 1px solid rgba(23, 37, 45, 0.18);
}

.benefit-outcome:last-child {
  padding-bottom: 0;
}

.benefit-outcome h3 {
  max-width: 660px;
  margin: 0;
  color: #17252d;
  font-size: clamp(30px, 3vw, 45px);
  font-weight: 520;
  line-height: 1.02;
  letter-spacing: -0.048em;
}

.benefit-outcome p {
  max-width: 610px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}

/* Role outcomes */

.outcomes {
  position: relative;
  overflow: hidden;
  padding: 145px 0;
  color: #ffffff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #171924;
  background-size: 88px 88px;
}

.outcomes-glow {
  position: absolute;
  top: -270px;
  left: 50%;
  width: 880px;
  height: 520px;
  border-radius: 50%;
  background: rgba(102, 103, 240, 0.2);
  filter: blur(100px);
  transform: translateX(-50%);
  pointer-events: none;
}

.outcomes-heading {
  position: relative;
  max-width: 1050px;
  margin-bottom: 70px;
}

.outcomes-heading h2 { color: #ffffff; }

.outcome-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.outcome-card {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: #232534;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.outcome-card header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.outcome-card header span {
  display: grid;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: var(--lime);
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
  font-weight: 760;
  place-items: center;
}

.outcome-card header p {
  margin: 0;
  color: #b4b6c1;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outcome-card h3 {
  max-width: 550px;
  margin: 45px 0 34px;
  font-size: clamp(37px, 3.8vw, 58px);
  font-weight: 510;
  line-height: 1;
  letter-spacing: -0.057em;
}

.outcome-card ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outcome-card li {
  position: relative;
  padding: 15px 0 15px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #b9bbc5;
  font-size: 12px;
  line-height: 1.5;
}

.outcome-card li::before {
  position: absolute;
  top: 19px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  content: "";
}

/* Control and CTA */

.control {
  padding-top: 105px;
  padding-bottom: 105px;
}

.decision-handoff {
  --handoff-inset: clamp(28px, 3.1vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(86px, 8vw, 122px) 0;
  border-top: 1px solid var(--line);
}

.decision-handoff h2 {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: clamp(64px, 6vw, 94px);
  font-weight: 510;
  line-height: 0.9;
  letter-spacing: -0.07em;
}

.decision-handoff h2 span,
.decision-handoff h2 strong {
  display: block;
  font-weight: inherit;
}

.decision-handoff h2 span {
  grid-column: 1;
  color: #c9573f;
  justify-self: start;
}

.decision-handoff h2 strong {
  grid-column: 2;
  padding-left: calc(var(--handoff-inset) + 3px);
  color: #17252d;
  justify-self: start;
}

.decision-handoff h2 i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #17252d;
  background: #d9a036;
  box-shadow: 0 10px 24px rgba(112, 77, 18, 0.12);
  font-size: 23px;
  font-style: normal;
  font-weight: 620;
  letter-spacing: 0;
  place-items: center;
  transform: translate(-50%, -50%);
}

.decision-handoff > p {
  grid-column: 2;
  width: auto;
  max-width: none;
  margin: clamp(34px, 3.5vw, 48px) 0 0;
  padding-left: calc(var(--handoff-inset) + 3px);
  color: #625c55;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
}

.final-cta {
  padding-bottom: 80px;
}

.final-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  align-items: center;
  gap: clamp(50px, 7vw, 110px);
  overflow: visible;
  padding: clamp(76px, 7vw, 104px) 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.final-cta h2 {
  max-width: 960px;
  color: #17252d;
  font-size: clamp(52px, 5.1vw, 82px);
}

.final-cta h2 span {
  color: inherit;
}

.final-cta .final-cta__panel > .final-cta__copy > p {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.final-cta__button.button {
  min-width: 294px;
  min-height: 92px;
  justify-content: space-between;
  gap: 28px;
  padding: 0 15px 0 29px;
  border: 2px solid #17252d;
  border-radius: 22px;
  color: #fff8ed;
  background: #17252d;
  box-shadow: 8px 8px 0 #d9a036;
  font-size: 21px;
  letter-spacing: -0.025em;
}

.final-cta__button.button > span {
  color: inherit;
  font-size: inherit;
}

.final-cta__button.button > i {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #17252d;
  background: #fff8ed;
  font-size: 27px;
  font-style: normal;
  font-weight: 500;
  place-items: center;
  transition: transform 180ms ease;
}

.final-cta__button.button:hover:not([aria-disabled="true"]) {
  box-shadow: 11px 11px 0 #d9a036;
  transform: translate(-3px, -3px);
}

.final-cta__button.button:hover:not([aria-disabled="true"]) > i {
  transform: rotate(8deg);
}

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  row-gap: 18px;
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 26px;
  border-top: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.footer-brand img {
  width: 32px;
  height: 32px;
}

.site-footer > p {
  margin: 0;
  color: #8b8c95;
  font-size: 11px;
}

.site-footer nav {
  display: flex;
  gap: 20px;
  color: #5f616c;
  font-size: 11px;
  font-weight: 650;
}

.site-footer small {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 29, 38, 0.06);
  color: #92939d;
  font-size: 10px;
}

body:not(.marketing-page) .scroll-space {
  min-height: 240vh;
  background: #ffffff;
}

.reveal.is-pending {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

  .hero-copy {
    max-width: 850px;
  }

  .hero-brand-sculpture {
    width: min(100%, 850px);
    margin: 0 auto;
  }

  .hero-capacity-comparison {
    width: min(100%, 620px);
    margin: 0 auto;
    justify-self: center;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .problem-visual {
    width: min(100%, 850px);
  }

}

@media (max-width: 900px) {
  :root {
    --page-shell-width: min(calc(100vw - 36px), 1380px);
  }

  .section-shell {
    width: var(--page-shell-width);
  }

  .site-header {
    padding: 14px 0 0;
  }

  .nav-shell {
    height: 78px;
    grid-template-columns: 1fr auto;
    column-gap: 7px;
    overflow: visible;
    padding: 0;
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: 176px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 20px;
    background: rgba(250, 250, 255, 0.94);
    box-shadow: 0 18px 46px rgba(31, 32, 47, 0.15);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
  }

  .site-header.is-menu-open .primary-nav {
    display: grid;
    gap: 3px;
  }

  .primary-nav a {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-menu-button {
    display: inline-flex;
  }

  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: 32px; }
  .site-header.is-scrolled .nav-shell { width: var(--page-shell-width); }

  .hero {
    min-height: 0;
    padding-top: 146px;
    padding-bottom: 90px;
  }

  .hero-grid { gap: 62px; }
  .hero-copy h1 { font-size: clamp(58px, 12vw, 92px); }

  .hero-brand-sculpture {
    display: none;
  }

  .hero-capacity-comparison {
    width: min(100%, 540px);
  }

  .problem,
  .benefits,
  .control,
  .outcomes,
  .preview-section {
    padding-top: 105px;
    padding-bottom: 105px;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
  }

  .benefit-summary {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .benefit-summary__heading h2 {
    max-width: 720px;
  }

  .preview-section,
  .benefits,
  .control {
    padding-top: 82px;
    padding-bottom: 88px;
  }

  .decision-handoff h2 {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .decision-handoff {
    grid-template-columns: 1fr;
  }

  .decision-handoff h2 span,
  .decision-handoff h2 strong {
    grid-column: 1;
    justify-self: start;
  }

  .decision-handoff h2 strong {
    padding-left: 0;
  }

  .decision-handoff h2 i {
    position: static;
    transform: rotate(90deg);
  }

  .decision-handoff > p {
    grid-column: 1;
    width: auto;
    max-width: 650px;
    margin-left: 0;
    padding-left: 0;
  }

  .final-cta__panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .final-cta__button.button {
    justify-self: start;
  }

  .site-footer {
    grid-template-columns: auto 1fr;
  }

  .site-footer nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  :root {
    --page-shell-width: calc(100vw - 24px);
  }

  .section-shell {
    width: var(--page-shell-width);
  }

  .site-header,
  .site-header.is-scrolled {
    padding: 10px 0 0;
  }

  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    width: var(--page-shell-width);
    height: 62px;
    padding: 0 9px;
  }

  .brand,
  .site-header.is-scrolled .brand { gap: 7px; }
  .brand-mark,
  .site-header.is-scrolled .brand-mark { width: 33px; height: 33px; }
  .brand-name,
  .site-header.is-scrolled .brand-name { font-size: 25px; }

  .demo-button,
  .site-header.is-scrolled .demo-button {
    min-height: 41px;
    padding: 0 14px;
    font-size: 13px;
  }

  .button-arrow { display: none; }

  .hero {
    padding-top: 122px;
  }

  .hero-copy h1 {
    font-size: clamp(51px, 15vw, 70px);
  }

  .hero-lede {
    font-size: 16px;
  }

  .hero-actions {
    display: grid;
  }

  .hero-grid {
    gap: 44px;
  }

  .hero-capacity-comparison {
    width: 100%;
    min-height: 324px;
  }

  .capacity-comparison {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    transform: translateX(-50%) scale(0.68);
    transform-origin: top center;
  }


  .button {
    width: 100%;
  }

  .section-heading {
    margin-bottom: 42px;
  }

  .section-heading h2,
  .outcomes-heading h2,
  .final-cta h2 {
    font-size: clamp(43px, 12.5vw, 62px);
  }

  .problem-visual {
    min-height: 440px;
  }

  .problem-email {
    left: 5%;
    width: 87%;
  }

  .problem-email--one { top: 83px; }
  .problem-email--two { top: 181px; left: 8%; }
  .problem-email--three { top: 285px; left: 5%; }
  .problem-float--right { bottom: 42px; }
  .problem-float--left { display: none; }

  .outcome-card {
    padding: 25px;
  }

  .benefit-summary {
    gap: 42px;
  }

  .benefit-summary__heading h2 {
    font-size: clamp(48px, 14vw, 64px);
  }

  .benefit-outcomes {
    padding-left: 20px;
    border-left-width: 2px;
  }

  .benefit-outcome {
    padding-bottom: 27px;
  }

  .benefit-outcome + .benefit-outcome {
    padding-top: 27px;
  }

  .benefit-outcome h3 {
    font-size: clamp(29px, 8.5vw, 38px);
  }

  .preview-section,
  .benefits,
  .control {
    padding-top: 70px;
    padding-bottom: 74px;
  }

  .decision-handoff {
    padding: 70px 0;
  }

  .decision-handoff h2 {
    gap: 24px;
    font-size: clamp(54px, 16vw, 72px);
  }

  .decision-handoff h2 i {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .decision-handoff > p {
    margin-top: 42px;
    font-size: 17px;
  }

  .final-cta__panel {
    gap: 40px;
    padding: 62px 0 72px;
    border-radius: 0;
  }

  .final-cta h2 {
    font-size: clamp(47px, 13vw, 63px);
  }

  .final-cta .final-cta__panel > .final-cta__copy > p {
    margin-top: 22px;
    font-size: 16px;
  }

  .final-cta__button.button {
    min-width: 0;
    min-height: 84px;
    padding-left: 23px;
    font-size: 19px;
  }

  .final-cta__button.button > i {
    width: 54px;
    height: 54px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 38px 0;
  }

  .site-footer small {
    grid-column: auto;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal.is-pending { opacity: 1; transform: none; }
  .capacity-comparison *,
  .capacity-comparison *::before,
  .capacity-comparison *::after { animation: none !important; transition: none !important; }
  .capacity-queue .capacity-card { opacity: 1; transform: none; }
  .capacity-case--without .capacity-completed .capacity-card:nth-child(-n + 2),
  .capacity-case--with .capacity-completed .capacity-card { opacity: 1; transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled .nav-shell {
    background: rgba(255, 255, 255, 0.96);
  }

  .site-header.is-scrolled .nav-shell::before {
    filter: none;
  }
}

/* High-contrast editorial palette shared across the complete marketing page. */

.nav-shell::before {
  background:
    radial-gradient(460px circle at var(--glass-x) var(--glass-y), rgba(255, 251, 244, 0.86), rgba(255, 251, 244, 0.1) 38%, transparent 64%),
    linear-gradient(135deg, rgba(255, 251, 244, 0.48), rgba(231, 180, 151, 0.14));
}

.nav-shell::after {
  background:
    radial-gradient(130px 34px at var(--glass-x) var(--glass-y), rgba(255, 251, 244, 0.86), transparent 74%),
    linear-gradient(112deg, rgba(255, 251, 244, 0.38), transparent 28%, transparent 72%, rgba(201, 87, 63, 0.14));
  box-shadow: inset 0 0 19px rgba(255, 251, 244, 0.14), inset 0 -8px 18px rgba(201, 87, 63, 0.04);
}

.site-header.is-scrolled .nav-shell {
  border-color: rgba(255, 251, 244, 0.84);
  background: rgba(255, 248, 237, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 244, 0.98),
    inset 0 -1px 0 rgba(201, 87, 63, 0.1),
    0 18px 46px rgba(23, 37, 45, 0.13),
    0 3px 11px rgba(23, 37, 45, 0.05);
}

.primary-nav a {
  color: #263941;
}

.primary-nav a[aria-current="page"],
.demo-button,
.button--primary {
  border-color: #17252d;
  color: #fff8ed;
  background: #17252d;
  text-shadow: none;
}

.demo-button {
  box-shadow:
    0 1px 2px rgba(23, 37, 45, 0.12),
    0 6px 14px rgba(23, 37, 45, 0.11);
}

.button--primary {
  box-shadow: 0 9px 22px rgba(23, 37, 45, 0.18);
}

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

.primary-nav a:not([aria-current="page"]) {
  background-color: transparent;
  box-shadow: none;
}

.preview-section {
  --deal-row-gap: clamp(96px, 8vw, 132px);
  --deal-row-gap-delta: calc(var(--deal-row-gap) - clamp(48px, 4.5vw, 72px));
  --copy-alignment-inset: clamp(32px, 4vw, 62px);
  --demo-copy-inset: max(0px, calc((100% - 530px) / 2));
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 150px;
  background: #e9b69e;
}

.preview-section::before {
  position: absolute;
  z-index: 0;
  top: clamp(300px, 28vw, 430px);
  right: 0;
  left: 0;
  height: calc(clamp(420px, 40vw, 560px) + var(--deal-row-gap-delta) + var(--copy-alignment-inset));
  background: #c9573f;
  content: "";
}

.preview-section::after {
  position: absolute;
  z-index: 0;
  top: -260px;
  right: -220px;
  width: clamp(500px, 50vw, 880px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9a036;
  content: "";
}

.preview-section > .section-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.journey-rail {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.journey-rail__track,
.journey-rail__progress {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.journey-rail__track {
  stroke: rgba(23, 37, 45, 0.14);
  stroke-dasharray: 3 8;
  stroke-width: 1.5;
}

.journey-rail__progress {
  stroke: #fff1dc;
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(23, 37, 45, 0.14));
}

.journey-rail__node {
  fill: #e9b69e;
  stroke: rgba(23, 37, 45, 0.2);
  stroke-width: 1.5;
  transition: fill 220ms ease, stroke 220ms ease, transform 220ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.journey-rail__node.is-passed {
  fill: #fff1dc;
  stroke: #c9573f;
  transform: scale(1.2);
}

.journey-token {
  --journey-x: 0px;
  --journey-y: 0px;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  width: 38px;
  height: 46px;
  opacity: 0;
  border: 1px solid rgba(23, 37, 45, 0.16);
  border-radius: 9px;
  background: #fffbf4;
  box-shadow: 0 9px 20px rgba(23, 37, 45, 0.16), 0 2px 5px rgba(23, 37, 45, 0.08);
  place-items: center;
  transform: translate3d(
      calc(var(--journey-x) - 50%),
      calc(var(--journey-y) - 50%),
      0
    )
    scale(0.9);
  transition: opacity 220ms ease, box-shadow 260ms ease, border-color 260ms ease;
  will-change: transform;
  pointer-events: none;
}

.journey-token.is-ready {
  opacity: 1;
}

.journey-token svg {
  width: 25px;
  height: 31px;
  fill: #fff8ed;
  stroke: #17252d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.journey-token__lines { fill: none; }

.journey-token i {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  width: 19px;
  height: 19px;
  border: 2px solid #fffbf4;
  border-radius: 50%;
  color: #fff8ed;
  background: #17252d;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

.journey-token[data-stage="2"] {
  border-color: rgba(201, 87, 63, 0.42);
  box-shadow: 0 0 0 5px rgba(201, 87, 63, 0.1), 0 9px 20px rgba(23, 37, 45, 0.14);
}

.journey-token[data-stage="2"] i { background: #c9573f; }
.journey-token[data-stage="3"] i { color: #17252d; background: #d9a036; }
.journey-token[data-stage="4"] i { background: #4f8a70; }

@media (prefers-reduced-motion: reduce) {
  .journey-token { display: none; }
  .journey-rail__progress { stroke-dashoffset: 0 !important; }
}

.preview-section .concept-showcase {
  position: relative;
  z-index: 2;
}

.concept-showcase {
  display: grid;
  min-height: 520px;
  align-items: stretch;
  gap: 0;
}

.concept-showcase--follow-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  order: 2;
  margin-top: var(--deal-row-gap);
}

.concept-showcase--deal-file {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  order: 1;
  margin-top: 0;
}

.concept-showcase--credit-checks,
.concept-showcase--credit-paper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--deal-row-gap);
}

.concept-showcase--credit-checks { order: 3; }
.concept-showcase--credit-paper { order: 4; }

.concept-showcase--credit-checks .concept-copy,
.concept-showcase--credit-paper .concept-stage {
  grid-row: 1;
  grid-column: 1;
}

.concept-showcase--credit-checks .concept-stage,
.concept-showcase--credit-paper .concept-copy {
  grid-row: 1;
  grid-column: 2;
}

.concept-showcase--credit-checks .concept-stage,
.concept-showcase--credit-paper .concept-stage {
  background: transparent;
}

.concept-showcase--deal-file .concept-copy {
  padding-top: 0;
}

.concept-showcase--deal-file .concept-copy__eyebrow {
  color: #fff0e7;
}

.concept-showcase--deal-file .concept-stage {
  background: transparent;
}

.concept-stage {
  display: grid;
  min-width: 0;
  min-height: 520px;
  padding: clamp(32px, 4vw, 62px) clamp(18px, 2.2vw, 34px);
  overflow: hidden;
  background: transparent;
  place-items: center;
}

.concept-showcase--follow-up .concept-stage {
  background: transparent;
}

.concept-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 2px 0 4px;
}

.concept-copy__eyebrow {
  margin: 0 0 14px;
  color: #c9573f;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.025em;
}

.concept-copy h2 {
  max-width: 520px;
  margin: 0;
  color: #17252d;
  font-size: clamp(42px, 3.6vw, 58px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.concept-copy__body {
  max-width: 500px;
  margin: auto 0 0;
  color: #3f4d52;
  font-size: 17px;
  line-height: 1.5;
}

.concept-card {
  --concept-line: #dce1de;
  --concept-muted: #6c777b;
  --concept-accent: #c9573f;
  --concept-green: #174735;
  position: relative;
  width: min(100%, 530px);
  min-height: 418px;
  padding: 25px;
  border: 1px solid rgba(23, 37, 45, 0.08);
  border-radius: 14px;
  color: #17252d;
  background: #fff;
  box-shadow: 0 18px 34px rgba(23, 37, 45, 0.11), 0 3px 9px rgba(23, 37, 45, 0.05);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
}

.follow-up-card {
  min-height: 448px;
}

.concept-card *,
.concept-card *::before,
.concept-card *::after {
  box-sizing: border-box;
}

.concept-card button {
  border: 0;
  font: inherit;
}

.concept-card__header {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.concept-card__header > strong {
  font-size: 13px;
  font-weight: 700;
}

.concept-card__title small,
.concept-card__title strong {
  display: block;
}

.concept-card__title small {
  color: #c9573f;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.11em;
}

.concept-card__title strong {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 720;
}

.concept-status {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 650;
}

.concept-status i {
  display: grid;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  font-size: 7px;
  font-style: normal;
  place-items: center;
}

.concept-status--warning,
.concept-status--working {
  color: #a66619;
}

.concept-status--sent,
.concept-status--ready {
  color: #34745a;
}

.concept-status--new {
  color: #c9573f;
}

.concept-file-row {
  display: grid;
  min-height: 66px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid var(--concept-line);
  border-radius: 9px;
  background: #f7f8f6;
}

.concept-file-icon {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  place-items: center;
}

.concept-file-icon svg {
  width: 19px;
  fill: none;
  stroke: #506067;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.concept-file-row p,
.concept-file-row strong,
.concept-file-row small {
  display: block;
  min-width: 0;
  margin: 0;
}

.concept-file-row strong {
  font-size: 11px;
}

.concept-file-row small {
  margin-top: 3px;
  color: var(--concept-muted);
  font-size: 9px;
}

.concept-file-count {
  padding: 5px 7px;
  border-radius: 999px;
  color: #59676c;
  background: #ecefed;
  font-size: 8px;
  font-weight: 700;
}

.concept-card__label {
  margin: 15px 0 8px;
  color: #667277;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.1em;
}

.concept-requirements {
  display: grid;
  gap: 6px;
}

.concept-requirements > div {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  border-radius: 7px;
  background: #f6f7f5;
  font-size: 10px;
}

.concept-requirements b {
  color: #a66619;
  font-size: 8px;
  font-weight: 690;
}

.concept-state {
  position: absolute;
  z-index: 5;
  right: 25px;
  bottom: 22px;
  left: 25px;
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.concept-state--prompt,
.concept-state--drafting,
.concept-state--sent {
  display: grid;
  min-height: 79px;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #efc0b4;
  border-radius: 9px;
  background: #fff5f1;
}

.concept-spark,
.concept-success-mark {
  display: grid;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--concept-accent);
  background: #fde2dc;
  font-size: 11px;
  place-items: center;
}

.concept-state small,
.concept-state strong {
  display: block;
}

.concept-state small {
  color: var(--concept-accent);
  font-size: 8px;
  font-weight: 700;
}

.concept-state strong {
  margin-top: 4px;
  font-size: 10px;
}

.concept-state button {
  height: 31px;
  padding: 0 10px;
  border-radius: 6px;
  color: #5a686d;
  background: #fff;
  font-size: 8px;
  font-weight: 720;
}

.concept-state .concept-primary {
  color: #fff;
  background: var(--concept-green);
}

.concept-state--drafting {
  grid-template-columns: 34px minmax(0, 1fr) 88px;
  border-color: #e9d6a5;
  background: #fffbef;
}

.concept-spinner {
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  border: 2px solid #ead7aa;
  border-top-color: #bd8125;
  border-radius: 50%;
  animation: concept-spin 800ms linear infinite;
}

.concept-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eadfc4;
}

.concept-progress i {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: inherit;
  background: #d9a036;
  animation: concept-progress 900ms ease-in-out infinite alternate;
}

.concept-state--drafted {
  overflow: hidden;
  border: 1px solid var(--concept-line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 37, 45, 0.09);
}

.concept-state--drafted header,
.concept-state--drafted footer {
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
}

.concept-state--drafted header {
  border-bottom: 1px solid var(--concept-line);
}

.concept-state--drafted header span {
  font-size: 9px;
  font-weight: 730;
}

.concept-state--drafted header i {
  color: var(--concept-accent);
  font-style: normal;
}

.concept-state--drafted header small {
  color: #a66619;
}

.concept-state--drafted > p {
  display: grid;
  min-height: 28px;
  grid-template-columns: 42px 1fr;
  align-items: center;
  margin: 0;
  padding: 0 11px;
  border-bottom: 1px solid var(--concept-line);
  font-size: 8px;
}

.concept-state--drafted > p b {
  color: var(--concept-muted);
  font-weight: 570;
}

.concept-draft-copy {
  min-height: 47px;
  padding: 8px 11px;
  color: #45545a;
  font-size: 8px;
  line-height: 1.45;
}

.concept-state--drafted footer {
  border-top: 1px solid var(--concept-line);
  background: #f8f9f7;
}

.concept-state--drafted footer button {
  height: 26px;
}

.concept-state--sent {
  grid-template-columns: 36px 1fr;
  border-color: #b9d5c7;
  background: #eff8f3;
}

.concept-state--sent .concept-success-mark {
  color: #fff;
  background: #4f8a70;
}

.concept-state--sent small {
  color: #3b755a;
}

.concept-state--sent p {
  margin: 4px 0 0;
  color: #668074;
  font-size: 8px;
}

/* Follow-up vignette: warm, editorial surfaces and a clearer drafting sequence. */
.follow-up-card {
  --concept-line: #ded9d0;
  --concept-muted: #746f68;
  padding: 24px;
  border-color: rgba(23, 37, 45, 0.13);
  box-shadow: 0 13px 27px rgba(23, 37, 45, 0.075), 0 2px 6px rgba(23, 37, 45, 0.04);
}

.follow-up-card .concept-card__header {
  min-height: 33px;
}

.follow-up-card .concept-status {
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #ecd6a8;
  border-radius: 999px;
  background: #fff6df;
  font-size: 9px;
}

.follow-up-card .concept-status--sent {
  border-color: #c8dfd2;
  color: #34745a;
  background: #eff8f3;
}

.follow-up-card .concept-status i {
  width: 6px;
  height: 6px;
}

.follow-up-card .concept-file-row {
  min-height: 60px;
  margin-top: 11px;
  border-radius: 8px;
  background: #faf8f3;
}

.follow-up-card .concept-file-icon {
  border-radius: 8px;
  background: #fff1ec;
}

.follow-up-card .concept-file-icon svg {
  stroke: var(--concept-accent);
}

.follow-up-card .concept-file-row strong {
  font-size: 12px;
}

.follow-up-card .concept-file-row small {
  font-size: 9.5px;
}

.follow-up-card .concept-file-count {
  color: #665f57;
  background: #eeebe4;
}

.follow-up-card .concept-card__label {
  margin: 14px 0 7px;
  color: #756f68;
  font-size: 8.5px;
}

.follow-up-card .concept-requirements {
  margin-top: 14px;
  gap: 6px;
}

.follow-up-card .concept-requirements > div {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f7f5f1;
  font-size: 11px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.follow-up-card .concept-requirements b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8f7652;
  font-size: 8.5px;
  font-weight: 680;
}

.follow-up-card .concept-requirements b::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c99a50;
  content: "";
}

.follow-up-card .concept-state {
  right: 24px;
  bottom: 20px;
  left: 24px;
}

.follow-up-card .concept-state--prompt,
.follow-up-card .concept-state--sent {
  min-height: 112px;
  border-radius: 8px;
}

.follow-up-card .concept-state small {
  font-size: 8.5px;
  letter-spacing: 0.025em;
}

.follow-up-card .concept-state strong {
  font-size: 11px;
}

.follow-up-card .concept-state button {
  height: 32px;
  border-radius: 7px;
  font-size: 8.5px;
}

.follow-up-card .concept-state--drafting {
  display: block;
  min-height: 112px;
  padding: 12px;
  border-color: #efc0b4;
  border-radius: 8px;
  background: #fff6f2;
}

.concept-drafting-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.concept-drafting-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #efd9d2;
}

.concept-drafting-steps span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #81766f;
  font-size: 7.5px;
  opacity: 0.42;
  transform: translateY(2px);
}

.concept-drafting-steps i {
  display: grid;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid #d9c8c1;
  border-radius: 50%;
  color: transparent;
  font-size: 8px;
  font-style: normal;
  place-items: center;
}

.concept-drafting-steps b {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-requirements > div {
  animation: concept-requirement-check 420ms ease both;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-requirements > div:nth-child(2) {
  animation-delay: 620ms;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-requirements > div:nth-child(3) {
  animation-delay: 1240ms;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span {
  animation: concept-drafting-step 340ms 180ms ease both;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(2) {
  animation-delay: 800ms;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(3) {
  animation-delay: 1420ms;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(1) i,
[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(2) i,
[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(3) i {
  animation: concept-drafting-check 340ms 180ms ease both;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(2) i {
  animation-delay: 800ms;
}

[data-concept-demo="followup"][data-phase="drafting"] .concept-drafting-steps span:nth-child(3) i {
  animation-delay: 1420ms;
}

.follow-up-card .concept-state--drafted {
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(23, 37, 45, 0.065);
}

.follow-up-card .concept-state--drafted header,
.follow-up-card .concept-state--drafted footer {
  height: 32px;
}

.follow-up-card .concept-state--drafted > p {
  min-height: 27px;
  font-size: 8.5px;
}

.follow-up-card .concept-draft-copy {
  min-height: 43px;
  font-size: 8.5px;
}

.follow-up-card .concept-state--drafted footer {
  background: #faf8f3;
}

.concept-cursor {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  width: 22px;
  overflow: visible;
  fill: #17252d;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 2.4px;
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(23, 37, 45, 0.24));
  transition: opacity 180ms ease, transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}

.concept-click-ring {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(201, 87, 63, 0.6);
  border-radius: 50%;
  opacity: 0;
}

[data-phase="prompt"] .concept-state--prompt,
[data-phase="draft-click"] .concept-state--prompt,
[data-phase="drafting"] .concept-state--drafting,
[data-phase="drafted"] .concept-state--drafted,
[data-phase="send-click"] .concept-state--drafted,
[data-phase="sent"] .concept-state--sent {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-phase="prompt"] .concept-cursor,
[data-phase="draft-click"] .concept-cursor {
  opacity: 1;
  transform: translate(448px, 365px);
}

[data-phase="drafted"] .concept-cursor,
[data-phase="send-click"] .concept-cursor {
  opacity: 1;
  transform: translate(430px, 391px);
}

[data-phase="draft-click"] [data-concept-draft],
[data-phase="send-click"] [data-concept-send] {
  filter: brightness(0.9);
  transform: translateY(1px) scale(0.97);
}

[data-phase="draft-click"] .concept-click-ring {
  animation: concept-click 330ms ease-out both;
  transform-origin: 455px 373px;
}

[data-phase="send-click"] .concept-click-ring {
  animation: concept-click-send 330ms ease-out both;
}

[data-phase="sent"] .concept-status--sent,
[data-phase="prompt"] .concept-status--warning,
[data-phase="draft-click"] .concept-status--warning,
[data-phase="drafting"] .concept-status--warning,
[data-phase="drafted"] .concept-status--warning,
[data-phase="send-click"] .concept-status--warning {
  display: inline-flex;
}

.deal-file-card {
  min-height: 430px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #fdfcf9 100%);
  isolation: isolate;
}

.deal-morph-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.deal-morph-subject {
  position: absolute;
  top: 27px;
  right: 28px;
  left: 28px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 520;
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(3px);
  transition: opacity 260ms ease, transform 360ms ease;
}

.deal-morph-header {
  position: absolute;
  top: 25px;
  right: 28px;
  left: 28px;
  display: grid;
  height: 52px;
  grid-template-columns: 44px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 12px;
  padding-left: 14px;
  transition: top 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

.deal-morph-icon {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  color: #c9573f;
  background: #fff1ec;
  transition: border-radius 420ms ease, color 320ms ease, background 320ms ease;
}

.deal-morph-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 300ms ease, transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.deal-morph-avatar {
  position: absolute;
  inset: 0;
  display: grid;
  color: #fff;
  font-size: 15px;
  font-weight: 620;
  opacity: 0;
  place-items: center;
  transition: opacity 260ms ease, transform 360ms ease;
}

.deal-morph-identity {
  position: relative;
  height: 38px;
}

.deal-morph-identity p,
.deal-morph-identity strong,
.deal-morph-identity small {
  display: block;
  min-width: 0;
  margin: 0;
}

.deal-morph-identity p {
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 360ms ease;
}

.deal-morph-identity strong {
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-morph-identity strong em {
  color: #6c777b;
  font-size: 9px;
  font-style: normal;
  font-weight: 450;
}

.deal-morph-identity small {
  margin-top: 4px;
  overflow: hidden;
  color: #6c777b;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-morph-identity small > i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.deal-morph-header time,
.deal-morph-check {
  grid-area: 1 / 3;
  opacity: 0;
  transition: opacity 260ms ease, transform 360ms ease;
}

.deal-morph-header time {
  align-self: start;
  justify-self: end;
  margin-top: 8px;
  color: #7a8589;
  font-size: 8px;
}

.deal-morph-check {
  display: grid;
  width: 31px;
  height: 31px;
  justify-self: end;
  border-radius: 50%;
  color: #fff;
  background: #4f8a70;
  font-size: 13px;
  font-style: normal;
  font-weight: 760;
  place-items: center;
  transform: scale(0.72);
}

.deal-morph-email {
  position: absolute;
  top: 157px;
  right: 30px;
  left: 94px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 360ms ease;
}

.deal-morph-email p {
  margin: 0 0 14px;
  color: #28343a;
  font-size: 10px;
  line-height: 1.48;
}

.deal-morph-rows {
  position: absolute;
  top: 100px;
  right: 28px;
  left: 28px;
  display: grid;
  gap: 12px;
}

.deal-morph-row {
  display: grid;
  min-height: 80px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 148px 0 13px;
  border: 1px solid #e6e9e6;
  border-radius: 11px;
  background: #f8f9f7;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 300ms ease, transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.deal-morph-row > span {
  display: grid;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  place-items: center;
}

.deal-morph-row > span svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.deal-morph-row > b {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-morph-row--one > span { color: #c9573f; background: #fff0eb; }
.deal-morph-row--two > span { color: #a66a16; background: #f8e7b5; }
.deal-morph-row--three > span { color: #b7654f; background: #f7ddd4; }

.deal-morph-source {
  position: absolute;
  z-index: 4;
  display: flex;
  top: 313px;
  width: 124px;
  height: 32px;
  align-items: center;
  gap: 9px;
  padding: 0 11px 0 8px;
  overflow: hidden;
  border: 1px solid #d1d7e0;
  border-radius: 999px;
  color: #5f6873;
  background: #fafbfc;
  font-size: 7px;
  font-weight: 680;
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-morph-source > i {
  display: grid;
  width: 24px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  color: #fff;
  background: #ef4b43;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

.deal-morph-source--two > i { background: #d9a036; }

.deal-morph-source > b {
  overflow: hidden;
  color: #5f6873;
  font-size: 7.5px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-morph-source--one { top: 313px; left: 94px; --source-top: 124px; --source-delay: 150ms; }
.deal-morph-source--two { top: 313px; left: 236px; --source-top: 216px; --source-delay: 300ms; }
.deal-morph-source--three { top: 313px; left: 378px; --source-top: 308px; --source-delay: 450ms; }

[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-subject,
[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-avatar,
[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-identity--email,
[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-header time,
[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-email,
[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-source {
  opacity: 1;
  transform: none;
}

[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-header {
  top: 71px;
  grid-template-columns: 52px minmax(0, 1fr) 64px;
  gap: 14px;
  padding-left: 0;
}

[data-concept-demo="dealfile"][data-phase="received"] .deal-morph-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  background: #6d493e;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-icon--form,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-icon--form,
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-identity--deal,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-identity--deal,
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-check,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-check,
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-row,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-row {
  opacity: 1;
  transform: none;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-icon--form,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-icon--form {
  transform: translate(-50%, -50%) scale(1);
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-icon--form,
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-identity--deal { transition-delay: 300ms; }
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-row--one { transition-delay: 400ms; }
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-row--two { transition-delay: 550ms; }
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-row--three { transition-delay: 700ms; }
[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-check { transition-delay: 1000ms; }

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-source,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-source {
  top: var(--source-top);
  left: calc(100% - 164px);
  width: 124px;
  opacity: 1;
  transition: top 780ms cubic-bezier(0.32, 0.72, 0, 1) var(--source-delay), left 780ms cubic-bezier(0.32, 0.72, 0, 1) var(--source-delay), width 780ms cubic-bezier(0.32, 0.72, 0, 1) var(--source-delay), opacity 180ms ease;
}

[data-concept-demo="dealfile"][data-phase="reset"] .deal-morph-source {
  opacity: 0;
  transition: none;
}

.deal-intake-scene,
.deal-output-scene {
  position: absolute;
  inset: 25px;
  display: grid;
  align-content: center;
  justify-items: center;
  opacity: 0;
  pointer-events: none;
}

.deal-intake-scene {
  gap: 0;
}

.deal-email-card {
  width: min(100%, 404px);
  padding: 20px;
  border: 1px solid #dce1de;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(23, 37, 45, 0.09);
}

.deal-email-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.deal-email-heading > span,
.deal-prefilled-heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: #c9573f;
  background: #fff1ec;
  place-items: center;
}

.deal-email-heading > span svg,
.deal-prefilled-heading > span svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.deal-email-heading p,
.deal-email-heading small,
.deal-email-heading strong,
.deal-email-message strong,
.deal-email-message small {
  display: block;
  min-width: 0;
  margin: 0;
}

.deal-email-heading small,
.deal-prefilled-heading small {
  color: #c9573f !important;
  font-size: 8.5px !important;
  font-weight: 730;
  letter-spacing: 0.025em;
}

.deal-email-heading strong {
  margin-top: 4px;
  font-size: 11px;
}

.deal-email-heading time {
  align-self: start;
  color: #7a8589;
  font-size: 8px;
}

.deal-email-message {
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid #e8ebe8;
}

.deal-email-message strong {
  font-size: 12px;
}

.deal-email-message small {
  margin-top: 5px;
  color: #6c777b;
  font-size: 9px;
}

.deal-email-attachments {
  display: flex;
  gap: 7px;
  margin-top: 17px;
}

.deal-email-attachment {
  display: flex;
  min-width: 0;
  height: 36px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid rgba(23, 37, 45, 0.08);
  border-radius: 8px;
  font-size: 7.5px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-email-attachment svg {
  width: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.deal-email-attachment--one { color: #a84d39; background: #fff0eb; }
.deal-email-attachment--two { color: #a95d49; background: #f7ddd4; }
.deal-email-attachment--three { color: #8c5c16; background: #f8e7b5; }

.deal-transform-cue {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
}

.deal-transform-cue > span {
  display: grid;
  width: 64px;
  height: 64px;
  border: 1px solid #ead8d1;
  border-radius: 17px;
  color: #c9573f;
  background: #fff6f2;
  box-shadow: 0 10px 22px rgba(23, 37, 45, 0.08);
  place-items: center;
}

.deal-transform-cue > span:last-child {
  color: #34745a;
  border-color: #c9ded3;
  background: #f0f8f4;
}

.deal-transform-cue svg {
  width: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.deal-transform-cue > i {
  color: #d9a036;
  font-size: 24px;
  font-style: normal;
  font-weight: 520;
}

.deal-one-application {
  width: min(100%, 404px);
  padding: 20px;
  border: 1px solid #dce1de;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(23, 37, 45, 0.09);
}

.deal-one-application > header,
.deal-output-file > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}

.deal-one-application > header p,
.deal-one-application > header strong,
.deal-one-application > header small,
.deal-output-file > header p,
.deal-output-file > header strong,
.deal-output-file > header small {
  display: block;
  min-width: 0;
  margin: 0;
}

.deal-one-application > header strong,
.deal-output-file > header strong {
  font-size: 11px;
  font-weight: 720;
}

.deal-one-application > header small,
.deal-output-file > header small {
  margin-top: 4px;
  overflow: hidden;
  color: #6c777b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-one-token {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid #ecd8d1;
  border-radius: 11px;
  color: #c9573f;
  background: #fff5f1;
  place-items: center;
}

.deal-one-token > svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.deal-one-token > b {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  width: 19px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #17252d;
  font-size: 7px;
  place-items: center;
}

.deal-one-mail {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #c9573f;
  background: #fff1ec;
  place-items: center;
}

.deal-one-mail svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.deal-intake-email {
  position: relative;
  display: grid;
  width: 142px;
  height: 96px;
  border: 1px solid #e8c0b4;
  border-radius: 20px;
  color: #c9573f;
  background: #fff5f1;
  box-shadow: 0 12px 24px rgba(23, 37, 45, 0.08);
  place-items: center;
}

.deal-intake-email svg {
  width: 66px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.deal-intake-email b {
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  width: 29px;
  height: 29px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #17252d;
  font-size: 10px;
  place-items: center;
}

.deal-intake-documents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #e8ebe8;
}

.deal-intake-document {
  display: grid;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(23, 37, 45, 0.1);
  border-radius: 12px;
  box-shadow: 0 9px 18px rgba(23, 37, 45, 0.07);
  place-items: center;
  transform-origin: center;
}

.deal-intake-document svg {
  width: 38px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.deal-intake-document--one {
  color: #c9573f;
  background: #fff7f3;
  transform: rotate(-5deg);
}

.deal-intake-document--two {
  color: #b7654f;
  background: #f7ddd4;
}

.deal-intake-document--three {
  color: #a66a16;
  background: #f8e7b5;
  transform: rotate(5deg);
}

.deal-output-scene {
  transform: translateY(10px) scale(0.94);
}

.deal-output-file {
  width: min(100%, 404px);
  padding: 20px;
  border: 1px solid #dce1de;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(23, 37, 45, 0.09);
}

.deal-output-file > header { padding-bottom: 15px; }

.deal-output-filemark {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: #c9573f;
  background: #fff1ec;
  place-items: center;
}

.deal-output-filemark svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.deal-output-file > header > i {
  display: grid;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  color: #fff;
  background: #4f8a70;
  font-size: 13px;
  font-style: normal;
  font-weight: 760;
  place-items: center;
}

.deal-output-facts {
  display: grid;
  gap: 8px;
}

.deal-output-fact {
  display: grid;
  min-height: 58px;
  grid-template-columns: 70px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 9px;
  padding: 0 11px 0 14px;
  border: 1px solid #e6e9e6;
  border-radius: 11px;
  background: #f8f9f7;
  opacity: 0;
  transform: translateY(7px);
}

.deal-output-fact > small {
  color: #6c777b;
  font-size: 9px;
}

.deal-output-fact > b {
  overflow: hidden;
  font-size: 11px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-output-fact > i {
  display: grid;
  width: 26px;
  height: 30px;
  border-radius: 7px;
  place-items: center;
}

.deal-output-fact > i svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.deal-output-fact > em {
  justify-self: end;
  padding: 6px 7px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 7px;
  font-style: normal;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-output-fact--one > i { color: #c9573f; background: #fff0eb; }
.deal-output-fact--two > i { color: #b7654f; background: #f7ddd4; }
.deal-output-fact--three > i { color: #a66a16; background: #f8e7b5; }
.deal-output-fact--one > em { color: #a84d39; background: #fff0eb; }
.deal-output-fact--two > em { color: #8c5c16; background: #f8e7b5; }
.deal-output-fact--three > em { color: #a95d49; background: #f7ddd4; }

.deal-output-file > footer {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 13px;
  color: #6c777b;
  opacity: 0;
}

.deal-output-file > footer svg {
  width: 15px;
  fill: none;
  stroke: #4f8a70;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.deal-output-file > footer b {
  font-size: 9px;
  font-weight: 650;
}

[data-concept-demo="dealfile"][data-phase="received"] .deal-intake-scene {
  animation: deal-intake-in 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

[data-concept-demo="dealfile"][data-phase="received"] .deal-email-attachment--one {
  animation: deal-email-attachment-in 380ms 90ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

[data-concept-demo="dealfile"][data-phase="received"] .deal-email-attachment--two {
  animation: deal-email-attachment-in 380ms 160ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

[data-concept-demo="dealfile"][data-phase="received"] .deal-email-attachment--three {
  animation: deal-email-attachment-in 380ms 230ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-intake-scene {
  opacity: 1;
  animation: deal-intake-away 220ms 300ms ease-in both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-email-attachment--one {
  animation: deal-email-attachment-one-away 470ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-email-attachment--two {
  animation: deal-email-attachment-two-away 470ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-email-attachment--three {
  animation: deal-email-attachment-three-away 470ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-email-card {
  animation: deal-email-collapse 220ms 240ms ease-in both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-transform-cue {
  animation: deal-transform-cue-in 850ms 400ms ease-in-out both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-transform-cue > i {
  animation: deal-transform-arrow 650ms 470ms ease-in-out both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-output-scene {
  animation: deal-output-in 450ms 1050ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-output-fact--one {
  animation: deal-output-fact-in 180ms 1120ms ease-out both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-output-fact--two {
  animation: deal-output-fact-in 180ms 1260ms ease-out both;
}

[data-concept-demo="dealfile"][data-phase="transforming"] .deal-output-fact--three {
  animation: deal-output-fact-in 180ms 1400ms ease-out both;
}

[data-concept-demo="dealfile"][data-phase="ready"] .deal-output-scene,
[data-concept-demo="dealfile"][data-phase="ready"] .deal-output-fact {
  opacity: 1;
  transform: none;
}

[data-concept-demo="dealfile"][data-phase="ready"] .deal-output-file > header > i {
  animation: deal-ready-pulse 560ms ease-out both;
}

[data-concept-demo="dealfile"][data-phase="reset"] .deal-output-scene {
  animation: deal-output-away 260ms ease-in both;
}

.concept-email-row {
  display: grid;
  min-height: 74px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 10px 11px;
  border: 1px solid var(--concept-line);
  border-radius: 9px;
}

.concept-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: #17252d;
  font-size: 8px;
  font-weight: 760;
  place-items: center;
}

.concept-email-row p,
.concept-email-row strong,
.concept-email-row b,
.concept-email-row small {
  display: block;
  margin: 0;
}

.concept-email-row strong {
  font-size: 9px;
}

.concept-email-row b {
  margin-top: 3px;
  font-size: 10px;
}

.concept-email-row small {
  margin-top: 3px;
  color: var(--concept-muted);
  font-size: 8px;
}

.concept-email-row time {
  align-self: start;
  color: var(--concept-muted);
  font-size: 8px;
}

.concept-attachment-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.concept-attachment-row span {
  padding: 6px 8px;
  border-radius: 6px;
  color: #59676c;
  background: #f0f2f0;
  font-size: 8px;
  font-weight: 650;
}

.concept-file-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 17px 0 9px;
  color: #687479;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.1em;
}

.concept-file-divider i {
  height: 1px;
  flex: 1;
  background: var(--concept-line);
}

.concept-fact-list {
  display: grid;
  gap: 6px;
}

.concept-fact {
  position: relative;
  display: grid;
  min-height: 39px;
  grid-template-columns: 84px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 7px;
  background: #f6f7f5;
  font-size: 9px;
}

.concept-fact > span {
  color: var(--concept-muted);
}

.concept-fact > b {
  overflow: hidden;
  font-size: 9px;
  font-weight: 660;
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(3px);
}

.concept-fact > i {
  display: grid;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  background: #4f8a70;
  font-size: 8px;
  font-style: normal;
  opacity: 0;
  place-items: center;
}

.concept-fact > em {
  position: absolute;
  right: 38px;
  left: 103px;
  height: 7px;
  border-radius: 999px;
  background: #e3e7e4;
}

.concept-activity {
  position: absolute;
  right: 25px;
  bottom: 22px;
  left: 25px;
  display: grid;
  min-height: 66px;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #efc0b4;
  border-radius: 9px;
  background: #fff5f1;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 260ms ease, transform 320ms ease;
}

.concept-activity > span {
  display: grid;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: var(--concept-accent);
  background: #fde2dc;
  place-items: center;
}

.concept-activity p,
.concept-activity strong,
.concept-activity small {
  display: block;
  margin: 0;
}

.concept-activity strong {
  font-size: 9px;
}

.concept-activity small {
  margin-top: 4px;
  color: var(--concept-muted);
  font-size: 8px;
}

.concept-activity--extracting {
  border-color: #e9d6a5;
  background: #fffbef;
}

.concept-activity--ready {
  border-color: #b9d5c7;
  background: #eff8f3;
}

.concept-activity--ready > span {
  color: #fff;
  background: #4f8a70;
}

[data-phase="received"] .concept-status--new,
[data-phase="extracting"] .concept-status--working,
[data-phase="organized"] .concept-status--working,
[data-phase="ready"] .concept-status--ready {
  display: inline-flex;
}

[data-phase="received"] .concept-activity--received,
[data-phase="extracting"] .concept-activity--extracting,
[data-phase="organized"] .concept-activity--extracting,
[data-phase="ready"] .concept-activity--ready {
  opacity: 1;
  transform: translateY(0);
}

[data-phase="extracting"] .concept-fact:nth-child(1) > b,
[data-phase="extracting"] .concept-fact:nth-child(1) > i,
[data-phase="extracting"] .concept-fact:nth-child(2) > b,
[data-phase="extracting"] .concept-fact:nth-child(2) > i,
[data-phase="extracting"] .concept-fact:nth-child(3) > b,
[data-phase="extracting"] .concept-fact:nth-child(3) > i {
  animation: concept-fact-reveal 520ms ease-out both;
}

[data-phase="extracting"] .concept-fact:nth-child(1) > b,
[data-phase="extracting"] .concept-fact:nth-child(1) > i { animation-delay: 160ms; }
[data-phase="extracting"] .concept-fact:nth-child(2) > b,
[data-phase="extracting"] .concept-fact:nth-child(2) > i { animation-delay: 540ms; }
[data-phase="extracting"] .concept-fact:nth-child(3) > b,
[data-phase="extracting"] .concept-fact:nth-child(3) > i { animation-delay: 920ms; }

[data-phase="extracting"] .concept-fact:nth-child(1) > em { animation: concept-skeleton-hide 260ms 160ms both; }
[data-phase="extracting"] .concept-fact:nth-child(2) > em { animation: concept-skeleton-hide 260ms 540ms both; }
[data-phase="extracting"] .concept-fact:nth-child(3) > em { animation: concept-skeleton-hide 260ms 920ms both; }

[data-phase="organized"] .concept-fact > b,
[data-phase="organized"] .concept-fact > i,
[data-phase="ready"] .concept-fact > b,
[data-phase="ready"] .concept-fact > i {
  opacity: 1;
  transform: translateY(0);
}

[data-phase="organized"] .concept-fact > em,
[data-phase="ready"] .concept-fact > em {
  opacity: 0;
}

/* Automated credit checks vignette. */
.credit-check-card {
  min-height: 438px;
}

.credit-check-subject {
  display: grid;
  min-height: 66px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid var(--concept-line);
  border-radius: 9px;
  background: #f8f8f5;
}

.credit-check-subject__mark {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: #fff8ed;
  background: #17252d;
  font-size: 9px;
  font-weight: 760;
  place-items: center;
}

.credit-check-subject p,
.credit-check-subject strong,
.credit-check-subject small {
  display: block;
  min-width: 0;
  margin: 0;
}

.credit-check-subject strong { font-size: 11px; }

.credit-check-subject small {
  margin-top: 4px;
  color: var(--concept-muted);
  font-size: 8px;
}

.credit-check-subject > span:last-child {
  padding: 5px 7px;
  border-radius: 999px;
  color: #6b6258;
  background: #eeeae3;
  font-size: 8px;
  font-weight: 700;
}

.credit-check-list {
  display: grid;
  gap: 7px;
}

.credit-check-row {
  display: grid;
  min-height: 51px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f6f7f5;
  transition: border-color 280ms ease, background-color 280ms ease, transform 280ms ease;
}

.credit-check-provider {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  background: #24363e;
  font-size: 8px;
  font-weight: 790;
  letter-spacing: -0.02em;
  place-items: center;
}

.credit-check-provider--abr {
  color: #17252d;
  background: #e6c16c;
}

.credit-check-provider--ppsr { background: #c9573f; }

.credit-check-row p,
.credit-check-row strong,
.credit-check-row small {
  display: block;
  min-width: 0;
  margin: 0;
}

.credit-check-row strong { font-size: 10px; }

.credit-check-row small {
  margin-top: 3px;
  color: var(--concept-muted);
  font-size: 8px;
}

.credit-check-state {
  display: inline-flex;
  min-width: 63px;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #8a837a;
  font-size: 8px;
  font-weight: 700;
}

.credit-check-state i {
  display: grid;
  width: 15px;
  height: 15px;
  border: 1px solid #cbcfc9;
  border-radius: 50%;
  font-size: 8px;
  font-style: normal;
  place-items: center;
}

.credit-check-state b::before { content: "Queued"; }

[data-concept-demo="creditchecks"][data-phase="equifax"] .credit-check-row:nth-child(1),
[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(2),
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(3) {
  border-color: #e5c98b;
  background: #fffbef;
  transform: translateX(2px);
}

[data-concept-demo="creditchecks"][data-phase="equifax"] .credit-check-row:nth-child(1) .credit-check-state,
[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(2) .credit-check-state,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(3) .credit-check-state {
  color: #a66619;
}

[data-concept-demo="creditchecks"][data-phase="equifax"] .credit-check-row:nth-child(1) .credit-check-state b::before,
[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(2) .credit-check-state b::before,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(3) .credit-check-state b::before {
  content: "Checking";
}

[data-concept-demo="creditchecks"][data-phase="equifax"] .credit-check-row:nth-child(1) .credit-check-state i,
[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(2) .credit-check-state i,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(3) .credit-check-state i {
  border: 2px solid #ead7aa;
  border-top-color: #bd8125;
  animation: concept-spin 800ms linear infinite;
}

[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(1),
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(-n + 2),
[data-concept-demo="creditchecks"][data-phase="complete"] .credit-check-row {
  border-color: #c9ded3;
  background: #f1f8f4;
}

[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(1) .credit-check-state,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(-n + 2) .credit-check-state,
[data-concept-demo="creditchecks"][data-phase="complete"] .credit-check-state {
  color: #34745a;
}

[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(1) .credit-check-state b::before,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(-n + 2) .credit-check-state b::before,
[data-concept-demo="creditchecks"][data-phase="complete"] .credit-check-state b::before {
  content: "Verified";
}

[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(1) .credit-check-state i,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(-n + 2) .credit-check-state i,
[data-concept-demo="creditchecks"][data-phase="complete"] .credit-check-state i {
  border-color: #4f8a70;
  color: #fff;
  background: #4f8a70;
}

[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-row:nth-child(1) .credit-check-state i::before,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-row:nth-child(-n + 2) .credit-check-state i::before,
[data-concept-demo="creditchecks"][data-phase="complete"] .credit-check-state i::before {
  content: "✓";
}

[data-concept-demo="creditchecks"][data-phase="queued"] .concept-status--new,
[data-concept-demo="creditchecks"][data-phase="equifax"] .concept-status--working,
[data-concept-demo="creditchecks"][data-phase="abr"] .concept-status--working,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .concept-status--working,
[data-concept-demo="creditchecks"][data-phase="complete"] .concept-status--ready {
  display: inline-flex;
}

[data-concept-demo="creditchecks"][data-phase="queued"] .credit-check-activity--queued,
[data-concept-demo="creditchecks"][data-phase="equifax"] .credit-check-activity--running,
[data-concept-demo="creditchecks"][data-phase="abr"] .credit-check-activity--running,
[data-concept-demo="creditchecks"][data-phase="ppsr"] .credit-check-activity--running,
[data-concept-demo="creditchecks"][data-phase="complete"] .credit-check-activity--ready {
  opacity: 1;
  transform: translateY(0);
}

.credit-check-activity--running {
  border-color: #e9d6a5;
  background: #fffbef;
}

/* Automated credit-paper vignette. */
.credit-paper-card {
  min-height: 458px;
}

.credit-paper-shell {
  display: grid;
  height: 278px;
  grid-template-columns: 108px minmax(0, 1fr);
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid var(--concept-line);
  border-radius: 10px;
  background: #fff;
}

.credit-paper-outline {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 13px 10px;
  border-right: 1px solid var(--concept-line);
  background: #f6f5f1;
}

.credit-paper-outline__title {
  margin-bottom: 4px;
  color: #8b8178;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: 0.11em;
}

.credit-paper-outline i {
  display: flex;
  min-height: 27px;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 6px;
  color: #9b928a;
  font-size: 7px;
  font-style: normal;
}

.credit-paper-outline i b {
  overflow: hidden;
  color: #59666b;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-paper-outline i.is-current {
  color: #c9573f;
  background: #fff;
  box-shadow: 0 3px 8px rgba(23, 37, 45, 0.06);
}

.credit-paper-sources {
  margin-top: auto;
  padding: 8px 6px 0;
  border-top: 1px solid #ddd9d1;
  color: #807970;
  font-size: 7px;
}

.credit-paper-sources strong {
  display: block;
  margin-bottom: 2px;
  color: #34745a;
  font-size: 13px;
}

.credit-paper-document {
  min-width: 0;
  padding: 12px 13px;
}

.credit-paper-document__head {
  display: flex;
  min-height: 31px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--concept-line);
}

.credit-paper-document__head p,
.credit-paper-document__head small,
.credit-paper-document__head strong {
  display: block;
  margin: 0;
}

.credit-paper-document__head small {
  color: #c9573f;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: 0.1em;
}

.credit-paper-document__head strong {
  margin-top: 3px;
  font-size: 9px;
}

.credit-paper-document__head > span {
  padding: 4px 6px;
  border-radius: 999px;
  color: #7e756d;
  background: #f0eee9;
  font-size: 6px;
  font-weight: 700;
}

.credit-paper-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.credit-paper-metrics span {
  padding: 6px 7px;
  border-radius: 6px;
  background: #f5f6f3;
}

.credit-paper-metrics small,
.credit-paper-metrics b {
  display: block;
}

.credit-paper-metrics small {
  color: #8b837c;
  font-size: 6px;
}

.credit-paper-metrics b {
  margin-top: 2px;
  font-size: 9px;
}

.credit-paper-sections {
  position: relative;
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.credit-paper-sections::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 7px;
  background:
    linear-gradient(#e8ebe7 0 0) 0 4px / 64% 7px no-repeat,
    linear-gradient(#eef0ed 0 0) 0 18px / 94% 6px no-repeat,
    linear-gradient(#eef0ed 0 0) 0 30px / 78% 6px no-repeat,
    linear-gradient(#e8ebe7 0 0) 0 52px / 56% 7px no-repeat,
    linear-gradient(#eef0ed 0 0) 0 66px / 90% 6px no-repeat,
    #fff;
  content: "";
  transition: opacity 260ms ease;
}

.credit-paper-section {
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid #e4e7e3;
  border-radius: 6px;
  opacity: 0;
  background: #fafbf9;
  transform: translateY(4px);
}

.credit-paper-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.credit-paper-section header b { font-size: 7px; }

.credit-paper-section header i {
  display: grid;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  color: #fff;
  background: #4f8a70;
  font-size: 6px;
  font-style: normal;
  place-items: center;
}

.credit-paper-section p {
  overflow: hidden;
  margin: 3px 0 0;
  color: #798388;
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-concept-demo="creditpaper"]:not([data-phase="outline"]) .credit-paper-sections::before {
  opacity: 0;
}

[data-concept-demo="creditpaper"][data-phase="summary"] .credit-paper-section--summary,
[data-concept-demo="creditpaper"][data-phase="analysis"] .credit-paper-section--summary,
[data-concept-demo="creditpaper"][data-phase="analysis"] .credit-paper-section--facility,
[data-concept-demo="creditpaper"][data-phase="analysis"] .credit-paper-section--risk,
[data-concept-demo="creditpaper"][data-phase="recommendation"] .credit-paper-section,
[data-concept-demo="creditpaper"][data-phase="paper-ready"] .credit-paper-section {
  animation: credit-paper-section-in 420ms ease-out both;
}

[data-concept-demo="creditpaper"][data-phase="analysis"] .credit-paper-section--facility { animation-delay: 220ms; }
[data-concept-demo="creditpaper"][data-phase="analysis"] .credit-paper-section--risk { animation-delay: 640ms; }
[data-concept-demo="creditpaper"][data-phase="recommendation"] .credit-paper-section:nth-child(2) { animation-delay: 120ms; }
[data-concept-demo="creditpaper"][data-phase="recommendation"] .credit-paper-section:nth-child(3) { animation-delay: 240ms; }
[data-concept-demo="creditpaper"][data-phase="recommendation"] .credit-paper-section:nth-child(4) { animation-delay: 480ms; }

[data-concept-demo="creditpaper"][data-phase="outline"] .concept-status--working,
[data-concept-demo="creditpaper"][data-phase="summary"] .concept-status--working,
[data-concept-demo="creditpaper"][data-phase="analysis"] .concept-status--working,
[data-concept-demo="creditpaper"][data-phase="recommendation"] .concept-status--working,
[data-concept-demo="creditpaper"][data-phase="paper-ready"] .concept-status--ready {
  display: inline-flex;
}

[data-concept-demo="creditpaper"][data-phase="outline"] .credit-paper-activity--writing,
[data-concept-demo="creditpaper"][data-phase="summary"] .credit-paper-activity--writing,
[data-concept-demo="creditpaper"][data-phase="analysis"] .credit-paper-activity--writing,
[data-concept-demo="creditpaper"][data-phase="recommendation"] .credit-paper-activity--writing,
[data-concept-demo="creditpaper"][data-phase="paper-ready"] .credit-paper-activity--ready {
  opacity: 1;
  transform: translateY(0);
}

.credit-paper-activity--writing {
  border-color: #e9d6a5;
  background: #fffbef;
}

@keyframes credit-paper-section-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes concept-spin {
  to { transform: rotate(360deg); }
}

@keyframes concept-progress {
  from { width: 28%; }
  to { width: 88%; }
}

@keyframes concept-requirement-check {
  0% { border-color: transparent; background: #f7f5f1; transform: translateX(0); }
  45% { border-color: #e6b4a7; background: #fff6f2; transform: translateX(2px); }
  100% { border-color: transparent; background: #f7f5f1; transform: translateX(0); }
}

@keyframes concept-drafting-step {
  to { color: #493f3a; opacity: 1; transform: translateY(0); }
}

@keyframes concept-drafting-check {
  to { border-color: #c9573f; color: #fff; background: #c9573f; }
}

@keyframes concept-click {
  from { opacity: 0.8; transform: translate(446px, 363px) scale(0.45); }
  to { opacity: 0; transform: translate(446px, 363px) scale(1.35); }
}

@keyframes concept-click-send {
  from { opacity: 0.8; transform: translate(428px, 389px) scale(0.45); }
  to { opacity: 0; transform: translate(428px, 389px) scale(1.35); }
}

@keyframes concept-fact-reveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes concept-skeleton-hide {
  to { opacity: 0; }
}

@keyframes deal-intake-in {
  from { opacity: 0; transform: translateY(9px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes deal-email-attachment-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes deal-email-attachment-one-away {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(100px, -22px) scale(0.2); }
}

@keyframes deal-email-attachment-two-away {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(0, -22px) scale(0.2); }
}

@keyframes deal-email-attachment-three-away {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(-100px, -22px) scale(0.2); }
}

@keyframes deal-transform-cue-in {
  0% { opacity: 0; transform: scale(0.92); }
  20%, 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes deal-transform-arrow {
  0% { opacity: 0.25; transform: translateX(-7px); }
  55% { opacity: 1; transform: translateX(5px); }
  100% { opacity: 0.35; transform: translateX(8px); }
}

@keyframes deal-document-one-in {
  from { opacity: 0; transform: translate(16px, 14px) rotate(-1deg); }
  to { opacity: 1; transform: translate(0, 0) rotate(-5deg); }
}

@keyframes deal-document-two-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes deal-document-three-in {
  from { opacity: 0; transform: translate(-16px, 14px) rotate(1deg); }
  to { opacity: 1; transform: translate(0, 0) rotate(5deg); }
}

@keyframes deal-document-one-collapse {
  from { opacity: 1; transform: translate(0, 0) rotate(-5deg) scale(1); }
  to { opacity: 0; transform: translate(83px, -55px) rotate(0) scale(0.18); }
}

@keyframes deal-document-two-collapse {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(0, -55px) scale(0.18); }
}

@keyframes deal-document-three-collapse {
  from { opacity: 1; transform: translate(0, 0) rotate(5deg) scale(1); }
  to { opacity: 0; transform: translate(-83px, -55px) rotate(0) scale(0.18); }
}

@keyframes deal-email-collapse {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.82); }
}

@keyframes deal-intake-away {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes deal-output-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes deal-output-fact-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes deal-ready-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 138, 112, 0.34); transform: scale(0.82); }
  55% { box-shadow: 0 0 0 10px rgba(79, 138, 112, 0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(79, 138, 112, 0); transform: scale(1); }
}

@keyframes deal-output-away {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-5px) scale(0.98); }
}

@media (min-width: 901px) {
  .concept-showcase--follow-up .concept-copy,
  .concept-showcase--credit-paper .concept-copy {
    padding: max(36px, clamp(32px, 4vw, 62px)) 0 max(36px, clamp(32px, 4vw, 62px)) var(--demo-copy-inset);
  }

  .concept-showcase--deal-file .concept-copy,
  .concept-showcase--credit-checks .concept-copy {
    padding: max(45px, clamp(32px, 4vw, 62px)) var(--demo-copy-inset) max(45px, clamp(32px, 4vw, 62px)) 0;
  }
}

@media (max-width: 900px) {
  .preview-section {
    --deal-row-gap-delta: 0px;
    --copy-alignment-inset: 0px;
    padding: 100px 0 110px;
  }

  .concept-showcase,
  .concept-showcase--follow-up,
  .concept-showcase--deal-file,
  .concept-showcase--credit-checks,
  .concept-showcase--credit-paper {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .concept-showcase--follow-up,
  .concept-showcase--credit-checks,
  .concept-showcase--credit-paper {
    margin-top: 100px;
  }

  .concept-showcase--deal-file { margin-top: 0; }

  .concept-showcase--deal-file .concept-copy__eyebrow {
    color: #c9573f;
  }

  .concept-showcase--follow-up .concept-copy,
  .concept-showcase--credit-checks .concept-copy {
    order: 1;
  }

  .concept-showcase--follow-up .concept-stage,
  .concept-showcase--credit-checks .concept-stage {
    order: 2;
  }

  .concept-showcase--credit-checks .concept-copy,
  .concept-showcase--credit-checks .concept-stage,
  .concept-showcase--credit-paper .concept-copy,
  .concept-showcase--credit-paper .concept-stage {
    grid-row: auto;
    grid-column: auto;
  }

  .concept-showcase--credit-paper .concept-copy { order: 1; }
  .concept-showcase--credit-paper .concept-stage { order: 2; }

  .concept-copy__body {
    margin-top: 28px;
  }

  .concept-stage {
    min-height: 500px;
  }
}

@media (max-width: 620px) {
  .preview-section {
    padding: 78px 0 88px;
  }

  .concept-showcase--follow-up,
  .concept-showcase--credit-checks,
  .concept-showcase--credit-paper {
    margin-top: 82px;
  }

  .concept-showcase--deal-file { margin-top: 0; }

  .journey-token {
    width: 29px;
    height: 35px;
    border-radius: 7px;
  }

  .journey-rail__progress {
    filter: none;
  }

  .journey-token svg {
    width: 19px;
    height: 24px;
  }

  .journey-token i {
    right: -5px;
    bottom: -5px;
    width: 16px;
    height: 16px;
    font-size: 7px;
  }

  .concept-copy h2 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .concept-copy__body {
    margin-top: 22px;
    font-size: 15px;
  }

  .concept-stage {
    min-height: 470px;
    padding: 14px;
  }

  .concept-card,
  .deal-file-card {
    min-height: 430px;
    padding: 18px;
  }

  .deal-intake-scene,
  .deal-output-scene {
    inset: 18px;
  }

  .deal-output-file {
    padding: 15px;
  }

  .deal-one-application {
    padding: 15px;
  }

  .deal-morph-card {
    inset: 0;
    width: auto;
    height: auto;
  }

  .deal-morph-subject {
    top: 21px;
    right: 18px;
    left: 18px;
    font-size: 15px;
  }

  .deal-morph-header {
    top: 20px;
    right: 18px;
    left: 16px;
    height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) 52px;
    gap: 8px;
    padding-left: 10px;
  }

  [data-concept-demo="dealfile"][data-phase="received"] .deal-morph-header {
    top: 58px;
    right: 18px;
    left: 18px;
    grid-template-columns: 48px minmax(0, 1fr) 52px;
    gap: 10px;
    padding-left: 0;
  }

  .deal-morph-icon {
    width: 34px;
    height: 34px;
  }

  [data-concept-demo="dealfile"][data-phase="received"] .deal-morph-icon {
    width: 48px;
    height: 48px;
  }

  .deal-morph-email {
    top: 132px;
    right: 18px;
    left: 76px;
  }

  .deal-morph-email p {
    margin-bottom: 11px;
    font-size: 9px;
  }

  .deal-morph-rows {
    top: 80px;
    right: 16px;
    left: 16px;
    gap: 8px;
  }

  .deal-morph-row {
    min-height: 62px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding-right: 128px;
    padding-left: 9px;
  }

  .deal-morph-row > span {
    width: 34px;
    height: 34px;
  }

  .deal-morph-row > b {
    font-size: 9px;
  }

  .deal-morph-source {
    width: 132px;
    height: 30px;
    font-size: 6.5px;
  }

  .deal-morph-source--one { top: 243px; left: 18px; --source-top: 96px; }
  .deal-morph-source--two { top: 281px; left: 18px; --source-top: 166px; }
  .deal-morph-source--three { top: 319px; left: 18px; --source-top: 236px; }

  [data-concept-demo="dealfile"][data-phase="transforming"] .deal-morph-source,
  [data-concept-demo="dealfile"][data-phase="ready"] .deal-morph-source {
    left: calc(100% - 134px);
    width: 108px;
  }

  .deal-email-card {
    padding: 15px;
  }

  .deal-output-fact {
    min-height: 61px;
    grid-template-columns: 46px minmax(0, 1fr) 76px;
    gap: 8px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .deal-output-fact > small {
    font-size: 8px;
  }

  .deal-output-fact > b {
    font-size: 10px;
  }

  .deal-output-fact > em {
    max-width: 76px;
    font-size: 6.5px;
  }

  .credit-check-card { min-height: 438px; }
  .credit-paper-card { min-height: 458px; }

  .credit-paper-shell {
    height: 282px;
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .credit-paper-outline {
    padding-right: 7px;
    padding-left: 7px;
  }

  .follow-up-card {
    min-height: 448px;
  }

  .follow-up-card .concept-state {
    right: 18px;
    left: 18px;
  }

  .follow-up-card .concept-state--prompt {
    grid-template-columns: 31px minmax(0, 1fr) auto;
  }

  .follow-up-card .concept-state--drafting {
    display: block;
  }

  .concept-state,
  .concept-activity {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .concept-state--prompt {
    min-height: 96px;
    grid-template-columns: 31px minmax(0, 1fr) auto;
  }

  .concept-state--prompt button:first-of-type {
    display: none;
  }

  .concept-state--prompt .concept-primary {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .concept-state--drafting {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .concept-state--drafting .concept-progress {
    grid-column: 2;
  }

  .concept-cursor,
  .concept-click-ring {
    display: none;
  }

  .concept-requirements > div {
    padding: 0 9px;
  }

  .concept-email-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .concept-email-row time {
    display: none;
  }

  .concept-attachment-row {
    gap: 4px;
  }

  .concept-attachment-row span {
    padding: 5px 6px;
    font-size: 7px;
  }

  .concept-fact {
    grid-template-columns: 68px minmax(0, 1fr) 18px;
    padding: 0 8px;
  }

  .concept-fact > em {
    left: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-card *,
  .concept-card *::before,
  .concept-card *::after {
    animation: none !important;
    transition: none !important;
  }
}

.site-footer > p,
.site-footer small {
  color: #82756a;
}

.site-footer nav {
  color: #43535a;
}

.primary-nav,
.site-header.is-menu-open .primary-nav {
  background-color: transparent;
}

@media (max-width: 900px) {
  .site-header.is-menu-open .primary-nav {
    border-color: rgba(255, 251, 244, 0.86);
    background: rgba(255, 248, 237, 0.97);
    box-shadow: 0 18px 46px rgba(23, 37, 45, 0.15);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled .nav-shell {
    background: rgba(255, 248, 237, 0.97);
  }
}

/* Solid floating navbar surface; preserve the existing shape, shadow, and motion. */
.site-header.is-scrolled .nav-shell {
  background: var(--paper);
}

.site-header.is-scrolled .nav-shell::before,
.site-header.is-scrolled .nav-shell::after {
  display: none;
}