.hero {
  display:grid;
  grid-template-columns:56.5% 36.5%;
  gap:7%;
  padding-block:calc(30 * var(--home-unit)) calc(44 * var(--home-unit))}
.hero h1 {
  font-size:clamp(calc(46 * var(--home-unit)),5.55vw,calc(90 * var(--home-unit)));
  line-height:.91;
  font-weight:900;
  letter-spacing:-.04em}
.hero h1 span {
  display:block;
  white-space:nowrap}
.hero-description {
  margin-top:calc(22 * var(--home-unit));
  font-size:clamp(calc(18 * var(--home-unit)),1.6vw,calc(25 * var(--home-unit)));
  line-height:1.25;
  color:var(--muted);
  max-width:64ch}
.hero-actions {
  display:flex;
  gap:calc(22 * var(--home-unit));
  flex-wrap:wrap;
  margin-top:calc(30 * var(--home-unit))}
.hero-actions .action {
  min-height:calc(50 * var(--home-unit));
  min-width:calc(178 * var(--home-unit))}
.response-preview {
  margin:0}
.response-flow {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:calc(26 * var(--home-unit))}
.response-step {
  position:relative;
  display:flex;
  align-items:center;
  gap:calc(18 * var(--home-unit));
  min-height:calc(83 * var(--home-unit));
  padding:calc(12 * var(--home-unit)) calc(18 * var(--home-unit));
  border:calc(1 * var(--home-unit)) solid var(--rule);
  border-radius:calc(8 * var(--home-unit));
  background:var(--card);
  font-size:calc(15 * var(--home-unit));
  line-height:1.3}
.response-step:nth-child(1) {
  margin-left:calc(8 * var(--home-unit));
  margin-right:calc(57 * var(--home-unit))}
.response-step:nth-child(2) {
  margin-left:calc(46 * var(--home-unit));
  margin-right:calc(86 * var(--home-unit))}
.response-step:nth-child(3) {
  margin-right:calc(23 * var(--home-unit));
  min-height:calc(72 * var(--home-unit))}
.response-step:nth-child(4) {
  margin-right:calc(8 * var(--home-unit));
  min-height:calc(72 * var(--home-unit))}
.response-step:not(:last-child)::after {
  content:'';
  position:absolute;
  left:50%;
  top:100%;
  height:calc(26 * var(--home-unit));
  width:calc(1 * var(--home-unit));
  background:var(--accent)}
.response-step:not(:last-child)::before {
  content:'';
  position:absolute;
  left:calc(50% - calc(3 * var(--home-unit)));
  top:calc(100% + calc(21 * var(--home-unit)));
  width:calc(5 * var(--home-unit));
  height:calc(5 * var(--home-unit));
  border-right:calc(1 * var(--home-unit)) solid var(--accent);
  border-bottom:calc(1 * var(--home-unit)) solid var(--accent);
  transform:rotate(45deg)}
.response-step strong,.example-state strong {
  display:block;
  font-size:calc(15 * var(--home-unit));
  letter-spacing:-.025em;
  line-height:1.25}
.response-step small,.example-state small {
  display:block;
  color:var(--muted);
  font-size:calc(13 * var(--home-unit));
  line-height:1.45;
  margin-top:calc(3 * var(--home-unit))}
.response-step .meta,.example-state .meta {
  font-size:calc(11 * var(--home-unit));
  margin:0 0 calc(6 * var(--home-unit))}
.state-body {
  flex:1;
  min-width:0}
.state-meta {
  display:flex;
  justify-content:space-between;
  gap:calc(6 * var(--home-unit));
  color:var(--muted);
  font-size:calc(11 * var(--home-unit));
  margin-bottom:calc(6 * var(--home-unit))}
.symbol {
  width:calc(36 * var(--home-unit));
  height:calc(36 * var(--home-unit));
  flex:none}
.symbol svg {
  display:block;
  width:100%;
  height:100%}
.badge {
  display:inline-block;
  font-size:calc(12 * var(--home-unit));
  white-space:nowrap;
  background:var(--bad-bg);
  color:var(--bad);
  border-radius:calc(10 * var(--home-unit));
  padding:calc(6 * var(--home-unit)) calc(10 * var(--home-unit));
  margin-left:auto}
.badge--good {
  background:var(--good-bg);
  color:var(--good)}
.mini-button {
  font-weight:600;
  font-size:calc(13 * var(--home-unit));
  padding:calc(7 * var(--home-unit)) calc(10 * var(--home-unit));
  white-space:nowrap;
  border:calc(1 * var(--home-unit)) solid var(--rule);
  border-radius:calc(5 * var(--home-unit));
  margin-left:auto}
.chapters {
  display:grid;
  grid-template-columns:1.08fr 1.03fr .95fr .85fr;
  gap:calc(30 * var(--home-unit));
  border-top:calc(1 * var(--home-unit)) solid var(--rule);
  padding-block:calc(15 * var(--home-unit)) calc(11 * var(--home-unit))}
.chapter {
  min-width:0;
  position:relative;
  padding-right:calc(20 * var(--home-unit));
  border-right:calc(1 * var(--home-unit)) solid var(--rule)}
.chapter:last-child {
  border-right:0;
  padding-right:0}
.chapter-spine {
  display:flex;
  align-items:center;
  gap:calc(12 * var(--home-unit));
  height:calc(20 * var(--home-unit));
  color:var(--muted);
  font-size:calc(13 * var(--home-unit));
  font-family:var(--mono)}
.chapter-spine::after {
  content:'';
  height:calc(1 * var(--home-unit));
  background:var(--rule);
  flex:1}
.chapter:first-child .chapter-spine {
  color:var(--accent)}
.chapter:first-child .chapter-spine::after {
  background:var(--accent)}
.chapter h2 {
  font-size:clamp(calc(28 * var(--home-unit)),2.92vw,calc(46 * var(--home-unit)));
  line-height:.94;
  font-weight:800;
  margin-top:calc(19 * var(--home-unit));
  letter-spacing:-.04em}
.chapter:first-child h2 {
  color:var(--accent);
  max-width:9ch}
.chapter>p {
  font-size:calc(17 * var(--home-unit));
  line-height:1.3;
  color:var(--muted);
  margin-top:calc(13 * var(--home-unit));
  min-height:0}
.chapter-examples {
  margin-top:calc(18 * var(--home-unit));
  display:grid;
  gap:calc(18 * var(--home-unit))}
.example-state {
  display:flex;
  align-items:center;
  gap:calc(16 * var(--home-unit));
  min-height:calc(80 * var(--home-unit));
  padding:calc(12 * var(--home-unit)) calc(15 * var(--home-unit));
  border:calc(1 * var(--home-unit)) solid var(--rule);
  border-radius:calc(8 * var(--home-unit));
  background:var(--card);
  font-size:calc(14 * var(--home-unit))}
.example-state .symbol {
  width:calc(32 * var(--home-unit));
  height:calc(32 * var(--home-unit))}
.example-state .badge {
  font-size:calc(12 * var(--home-unit));
  padding:calc(6 * var(--home-unit)) calc(9 * var(--home-unit))}
.example-state .state-meta {
  font-size:calc(11 * var(--home-unit))}
.chapter:first-child .example-state:first-child {
  position:relative}
.chapter:first-child .example-state:first-child::after {
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  height:calc(18 * var(--home-unit));
  width:calc(1 * var(--home-unit));
  background:var(--accent)}
.example-state--room {
  min-height:calc(68 * var(--home-unit));
  gap:calc(13 * var(--home-unit))}
.example-state--room .room-chevron {
  margin-left:auto;
  font-size:calc(24 * var(--home-unit));
  color:var(--muted)}
.chapter>.text-link {
  font-size:calc(16 * var(--home-unit));
  margin-top:calc(16 * var(--home-unit));
  line-height:1.4}
.example-state--update {
  align-items:flex-start;
  min-height:calc(108 * var(--home-unit))}
.sample-message {
  border:calc(1 * var(--home-unit)) solid var(--rule);
  padding:calc(7 * var(--home-unit)) calc(8 * var(--home-unit));
  border-radius:calc(4 * var(--home-unit));
  margin-top:calc(8 * var(--home-unit));
  font-size:calc(12 * var(--home-unit));
  line-height:1.3}
.example-state--publish {
  min-height:calc(80 * var(--home-unit))}
.sample-publish {
  display:block;
  margin-top:calc(8 * var(--home-unit));
  background:#ce3d0b;
  color:#fff;
  text-align:center;
  border-radius:calc(4 * var(--home-unit));
  padding:calc(6 * var(--home-unit));
  font-size:calc(12 * var(--home-unit));
  font-weight:600}
.next-opening {
  border-top:calc(1 * var(--home-unit)) solid var(--rule);
  padding-block:calc(27 * var(--home-unit))}
.next-opening h2 {
  font-size:clamp(calc(30 * var(--home-unit)),2.85vw,calc(44 * var(--home-unit)));
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.04em}

@media(max-width:1100px) and (min-width:761px) {
  .response-step {
  gap:calc(10 * var(--home-unit));
  padding:calc(12 * var(--home-unit))}
.response-step:nth-child(1) {
  margin-right:calc(12 * var(--home-unit))}
.response-step:nth-child(2) {
  margin-left:calc(24 * var(--home-unit));
  margin-right:calc(24 * var(--home-unit))}
.response-step:nth-child(3),.response-step:nth-child(4) {
  margin-right:0}
.response-step .mini-button {
  display:none}
.chapters {
  gap:calc(22 * var(--home-unit))}
.chapter {
  padding-right:calc(14 * var(--home-unit))}
.chapter>p {
  font-size:calc(15 * var(--home-unit))}
.example-state {
  padding:calc(10 * var(--home-unit));
  gap:calc(8 * var(--home-unit))}
.example-state .badge {
  padding:calc(5 * var(--home-unit))}
.example-state .symbol {
  width:calc(26 * var(--home-unit));
  height:calc(26 * var(--home-unit))}
.example-state strong {
  font-size:calc(13 * var(--home-unit))}
.example-state small {
  font-size:calc(11 * var(--home-unit))}
.state-meta {
  font-size:calc(9 * var(--home-unit))}
.chapter>.text-link {
  font-size:calc(14 * var(--home-unit))}
}

@media(max-width:760px) {
  .hero {
  grid-template-columns:1fr;
  gap:calc(36 * var(--home-unit));
  padding-top:calc(35 * var(--home-unit));
  padding-bottom:calc(36 * var(--home-unit))}
.hero h1 {
  font-size:clamp(calc(40 * var(--home-unit)),8.4vw,calc(62 * var(--home-unit)));
  line-height:1.02}
.hero h1 span {
  white-space:normal}
.hero-description {
  font-size:calc(20 * var(--home-unit));
  max-width:48ch;
  margin-top:calc(22 * var(--home-unit));
  line-height:1.4}
.hero-actions {
  gap:calc(12 * var(--home-unit));
  margin-top:calc(24 * var(--home-unit))}
.hero-actions .action {
  min-width:0;
  padding-inline:calc(20 * var(--home-unit))}
.response-preview {
  max-width:calc(500 * var(--home-unit));
  width:100%;
  margin-inline:auto}
.response-step:nth-child(1) {
  margin-right:calc(35 * var(--home-unit))}
.response-step:nth-child(2) {
  margin-left:calc(35 * var(--home-unit));
  margin-right:calc(45 * var(--home-unit))}
.response-step {
  min-height:calc(78 * var(--home-unit))}
.response-step .mini-button {
  font-size:calc(11 * var(--home-unit));
  padding:calc(6 * var(--home-unit))}
.chapters {
  grid-template-columns:1fr 1fr;
  gap:calc(35 * var(--home-unit)) calc(24 * var(--home-unit));
  padding-block:calc(24 * var(--home-unit)) calc(40 * var(--home-unit))}
.chapter:nth-child(2) {
  border-right:0;
  padding-right:0}
.chapter h2 {
  font-size:calc(34 * var(--home-unit));
  margin-top:calc(15 * var(--home-unit))}
.chapter>p {
  font-size:calc(16 * var(--home-unit))}
.chapter:first-child h2 {
  max-width:none}
.chapter>.text-link {
  font-size:calc(15 * var(--home-unit))}
.example-state {
  padding:calc(11 * var(--home-unit));
  gap:calc(10 * var(--home-unit))}
.example-state strong {
  font-size:calc(14 * var(--home-unit))}
.example-state small {
  font-size:calc(12 * var(--home-unit))}
.example-state .badge {
  font-size:calc(11 * var(--home-unit))}
.state-meta {
  font-size:calc(10 * var(--home-unit))}
.next-opening {
  padding-block:calc(34 * var(--home-unit))}
.next-opening h2 {
  font-size:calc(34 * var(--home-unit))}
}

@media(max-width:480px) {
  .hero h1 {
  font-size:clamp(calc(37 * var(--home-unit)),10.5vw,calc(49 * var(--home-unit)));
  letter-spacing:-.04em}
.hero h1 span:first-child {
  white-space:normal}
.hero-description {
  font-size:calc(19 * var(--home-unit))}
.hero-actions {
  gap:calc(10 * var(--home-unit))}
.hero-actions .action {
  font-size:calc(14 * var(--home-unit));
  padding-inline:calc(15 * var(--home-unit))}
.response-step {
  padding:calc(12 * var(--home-unit));
  gap:calc(12 * var(--home-unit))}
.response-step .mini-button {
  display:none}
.chapters {
  grid-template-columns:1fr;
  gap:calc(36 * var(--home-unit))}
.chapter {
  padding:0 0 calc(28 * var(--home-unit));
  border-right:0;
  border-bottom:calc(1 * var(--home-unit)) solid var(--rule)}
.chapter:last-child {
  border-bottom:0;
  padding-bottom:0}
.chapter h2 {
  font-size:calc(36 * var(--home-unit));
  line-height:1.02}
.chapter:first-child h2 {
  max-width:none}
.chapter>p {
  font-size:calc(18 * var(--home-unit));
  max-width:38ch}
.chapter-examples {
  max-width:calc(420 * var(--home-unit))}
.chapter>.text-link {
  margin-top:calc(19 * var(--home-unit));
  font-size:calc(16 * var(--home-unit))}
.chapter-spine {
  font-size:calc(12 * var(--home-unit))}
.example-state strong {
  font-size:calc(16 * var(--home-unit))}
.example-state small {
  font-size:calc(13 * var(--home-unit))}
.example-state .state-meta {
  font-size:calc(11 * var(--home-unit))}
.example-state .symbol {
  width:calc(34 * var(--home-unit));
  height:calc(34 * var(--home-unit))}
.next-opening h2 {
  font-size:calc(34 * var(--home-unit))}
}


.example-state:has(.state-meta) {
  position:relative}
.example-state .state-meta {
  position:absolute;
  top:calc(10 * var(--home-unit));
  left:calc(63 * var(--home-unit));
  right:calc(15 * var(--home-unit));
  white-space:nowrap;
  line-height:1.2}
.example-state:has(.state-meta) .state-body {
  padding-top:calc(13 * var(--home-unit))}
.chapter .room-chevron svg {
  width:calc(16 * var(--home-unit));
  height:calc(16 * var(--home-unit))}

@keyframes connect-response {
  from {
  transform:scaleY(0)}
to {
  transform:scaleY(1)}
}

@media(prefers-reduced-motion:no-preference) {
  .response-step:not(:last-child)::after {
  transform-origin:top;
  animation:connect-response .5s cubic-bezier(.16,1,.3,1) both}
.response-step:nth-child(2)::after {
  animation-delay:.15s}
.response-step:nth-child(3)::after {
  animation-delay:.3s}
}
:root {
  --home-unit:1px}
@media(min-width:1001px) {
  :root {
  --home-unit:min(1px,calc(100vw / 1504))}
  .nav {
  min-height:calc(72 * var(--home-unit))}
}