/* Every artwork hook here is also written on an element in templates/partials/artwork,
   so a rename on one side is a dead animation unless it lands on the other. */

::selection {
  background: var(--red);
  color: #fff;
}

a {
  color: inherit;
}

.shell {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
}

.label {
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.label b {
  color: var(--red);
}

.chip {
  display: inline-block;
  background: #fffdf6;
  border: var(--rule);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 14%, transparent);
}

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

.enters {
  transform: translateY(26px);
  opacity: 0;
  animation: rises-in .9s cubic-bezier(.19,1,.22,1) forwards;
}

.enters--1 {
  animation-delay: .08s;
}

.enters--5 {
  animation-delay: .8s;
}

.headline__line {
  display: block;
  overflow: hidden;
}

.headline__line > span {
  display: block;
  transform: translateY(115%);
  animation: line-lifts 1.1s cubic-bezier(.19,1,.22,1) forwards;
}

.headline__line .headline__line-1 {
  animation-delay: .18s;
}

.headline__line .headline__line-2 {
  animation-delay: .34s;
}

.headline__line .headline__line-3 {
  animation-delay: .5s;
}

@keyframes line-lifts {
  to {
    transform: translateY(0);
  }
}

.marks {
  position: fixed;
  top: 62px;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 62;
  pointer-events: none;
}

.mark {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: 2px solid var(--ink);
  background: var(--paper);
  transform: rotate(45deg);
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  transition: border-color .2s, background .2s;
}

.mark:hover {
  border-color: var(--red);
  background: var(--red);
}

header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: var(--rule);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
}

.masthead__inner {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark svg {
  display: block;
}

.wordmark b {
  letter-spacing: .3em;
  font-size: 14px;
}

nav.masthead__nav {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 13px;
}

nav.masthead__nav a {
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}

nav.masthead__nav a:hover {
  border-color: var(--red);
}

.button {
  display: inline-block;
  padding: 12px 26px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .1em;
  border: var(--rule);
  color: var(--ink);
  background: #fffdf6;
  border-radius: 10px;
  box-shadow: var(--drop);
  transition: box-shadow .18s;
}

.button:hover {
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--red) 34%, transparent);
}

.button:active {
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}

.button.accent-fill {
  background: var(--red);
  color: #fff;
}

main, footer {
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 120px 0 46px;
}

.hero .shell {
  position: relative;
  z-index: 2;
}

.hero__text {
  min-width: 0;
}

h1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: .96;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

h1 .headline--hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

h1 .accent-fill {
  color: var(--red);
}

.hero p.hero__lede {
  margin: 18px 0 22px;
  max-width: 62ch;
  font-size: 15.5px;
  color: #3d3f4a;
}

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .3em;
  z-index: 2;
}

.hero__scroll::after {
  content: "";
  display: block;
  width: 2px;
  height: 30px;
  background: var(--ink);
  margin: 8px auto 0;
  animation: scroll-cue 2.2s ease-in-out infinite;
}

@keyframes scroll-cue {
  0%,100% {
    transform: scaleY(.4);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

#ronchamp-line {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  margin-top: 6px;
}

.hero__art {
  min-width: 0;
}

.hero__art svg {
  width: 100%;
  height: auto;
  display: block;
}

.organs {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.organ-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.organ {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  background: #fffdf6;
  border: 2px solid var(--ink);
  border-left: 7px solid var(--accent-colour, var(--red));
  border-radius: 11px;
  padding: 11px 14px;
  text-decoration: none;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 13%, transparent);
  transition: box-shadow .15s;
}

.organ:hover, .organ.is-lit {
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent-colour, var(--ink)) 34%, transparent);
}

.organ .organ__icon {
  width: 38px;
  height: 38px;
  color: var(--accent-colour, var(--red));
  margin-top: 2px;
}

.organ h3 {
  font-size: 15.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.25;
}

.organ h3 .organ__role {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent-colour, var(--ink-faint));
  font-weight: 700;
  margin-left: 8px;
}

.organ p {
  font-size: 12px;
  line-height: 1.5;
  color: #4c4e59;
  margin-top: 3px;
}

.model {
  position: relative;
  min-width: 0;
}

.model svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

[data-floor] .tint {
  transition: opacity .25s;
}

[data-floor].is-lit .tint {
  opacity: .34 !important;
}

svg [data-floor] {
  cursor: pointer;
}

@keyframes window-lights {
  0%,72%,100% {
    opacity: 0;
  }
  76%,96% {
    opacity: .95;
  }
}

.window {
  animation: window-lights 7s steps(1) infinite;
}

@keyframes node-pulses {
  0%,100% {
    opacity: .35;
  }
  50% {
    opacity: 1;
  }
}

.node {
  animation: node-pulses 2.6s steps(2) infinite;
}

@keyframes bar-grows {
  0%,12% {
    transform: scaleY(.15);
  }
  55%,88% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(.15);
  }
}

.bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-grows 6s steps(8) infinite;
}

@keyframes bar-fills {
  0%,8% {
    transform: scaleX(.1);
  }
  60%,90% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(.1);
  }
}

.fill-bar {
  transform-box: fill-box;
  transform-origin: left;
  animation: bar-fills 5.2s steps(10) infinite;
}

@keyframes parcel-draws {
  0% {
    stroke-dashoffset: 1;
  }
  55%,82% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 1;
  }
}

.parcel-draws {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: parcel-draws 8s steps(12) infinite;
}

@keyframes card-shifts {
  0%,34% {
    transform: translate(0,0);
  }
  46%,80% {
    transform: translate(13px,-4px);
  }
  92%,100% {
    transform: translate(0,0);
  }
}

.card-moves {
  animation: card-shifts 7s steps(6) infinite;
}

@keyframes bubble-rises {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    transform: translateY(-46px);
    opacity: 0;
  }
}

.bubble {
  animation: bubble-rises 4.6s steps(9) infinite;
}

.bubble.b2 {
  animation-delay: 1.5s;
}

.bubble.b3 {
  animation-delay: 3s;
}

@keyframes hook-swings {
  0%,100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

.hook {
  animation: hook-swings 5s steps(6) infinite;
  transform-box: fill-box;
  transform-origin: top center;
}

@keyframes antenna-blinks {
  0%,84%,100% {
    opacity: .3;
  }
  88%,96% {
    opacity: 1;
  }
}

.antenna-light {
  animation: antenna-blinks 3s steps(1) infinite;
}

@keyframes bobs {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.4px);
  }
}

.fg-bob {
  animation: bobs .7s steps(1) infinite alternate;
}

@keyframes arm-draws {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(-13deg);
  }
}

.b-arm {
  transform-box: fill-box;
  transform-origin: 88% 50%;
  animation: arm-draws 1.3s steps(3) infinite alternate;
}

@keyframes arm-taps {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-8deg);
  }
}

.arm-taps {
  transform-box: fill-box;
  transform-origin: 85% 50%;
  animation: arm-taps .8s steps(2) infinite alternate;
}

@keyframes walks {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-34px);
  }
}

.walks {
  animation: walks 5.4s steps(13) infinite alternate;
}

@keyframes head-reads {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(4deg);
  }
}

.head-reads {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: head-reads 2.4s steps(2) infinite alternate;
}

@keyframes cigar-ember {
  0%,70%,100% {
    opacity: .35;
  }
  78%,92% {
    opacity: 1;
  }
}

.cigar-ember {
  animation: cigar-ember 3.4s steps(1) infinite;
}

.band {
  border-top: var(--rule);
  border-bottom: var(--rule);
  overflow: hidden;
  padding: 16px 0;
  background: var(--red);
}

.band__track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: band-slides 36s linear infinite;
}

@keyframes band-slides {
  to {
    transform: translateX(-50%);
  }
}

.band span.band__item {
  font-size: 15px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.band span.band__item i {
  font-style: normal;
  color: var(--yellow);
  margin-right: 64px;
}

section.section {
  padding: 120px 0;
  position: relative;
}

.section__head {
  margin-bottom: 56px;
}

.section__head h2 {
  font-size: clamp(34px, 5vw, 62px);
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.02;
  margin-top: 14px;
  max-width: 20ch;
  text-wrap: balance;
}

.section__head h2 em, h2 em {
  font-style: normal;
  color: var(--ink);
}

@keyframes s-glow {
  0%,100% {
    opacity: .72;
  }
  50% {
    opacity: 1;
  }
}

.s-screen {
  animation: s-glow 4.2s ease-in-out infinite;
}

@keyframes s-ember-glows {
  0%,100% {
    opacity: .45;
  }
  50% {
    opacity: 1;
  }
}

.s-ember {
  animation: s-ember-glows 3.2s ease-in-out infinite;
}

@keyframes s-arm-draws {
  from {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-7deg);
  }
}

.s-arm {
  transform-box: fill-box;
  transform-origin: top right;
  animation: s-arm-draws 2.6s ease-in-out infinite alternate;
}

@keyframes s-nudges {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1px);
  }
}

.s-typing-arm {
  animation: s-nudges 1.8s ease-in-out infinite alternate;
}

.s-idle {
  animation: s-nudges 2.8s ease-in-out infinite alternate;
}

@keyframes s-head-turns {
  from {
    transform: rotate(-2.5deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}

.s-head {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: s-head-turns 3.8s ease-in-out infinite alternate;
}

@keyframes s-sways {
  from {
    transform: rotate(-2.5deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}

.s-sway {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: s-sways 4.6s ease-in-out infinite alternate;
}

@keyframes s-shelf-drifts {
  from {
    transform: translate(0,0);
  }
  to {
    transform: translate(2.5px,1.2px);
  }
}

.s-shelf {
  animation: s-shelf-drifts 3.4s ease-in-out infinite alternate;
}

@keyframes s-minute-hand-turns {
  to {
    transform: rotate(360deg);
  }
}

.s-minute-hand {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: s-minute-hand-turns 90s linear infinite;
}

@keyframes s-breathes {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.025);
  }
}

.s-breath {
  transform-box: fill-box;
  transform-origin: center;
  animation: s-breathes 2.8s ease-in-out infinite alternate;
}

@keyframes s-pencil-draws {
  from {
    transform: rotate(7deg);
  }
  to {
    transform: rotate(-11deg);
  }
}

.s-pencil-arm {
  transform-box: fill-box;
  transform-origin: top right;
  animation: s-pencil-draws 3s ease-in-out infinite alternate;
}

.s-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: s-line-draws 3s ease-in-out infinite alternate;
}

@keyframes s-line-draws {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes s-screen-line-blinks {
  0%,100% {
    opacity: .2;
  }
  45%,70% {
    opacity: 1;
  }
}

.s-screen-line {
  animation: s-screen-line-blinks 1.6s ease-in-out infinite;
}

@keyframes s-walks-across {
  from {
    transform: translate(0,0);
  }
  to {
    transform: translate(-98px,35px);
  }
}

.s-walk {
  animation: s-walks-across 9s ease-in-out infinite alternate;
}

@keyframes s-leg-swings {
  from {
    transform: rotate(14deg);
  }
  to {
    transform: rotate(-14deg);
  }
}

.s-leg-a {
  transform-box: fill-box;
  transform-origin: top center;
  animation: s-leg-swings .55s ease-in-out infinite alternate;
}

.s-leg-b {
  transform-box: fill-box;
  transform-origin: top center;
  animation: s-leg-swings .55s ease-in-out infinite alternate-reverse;
}

@keyframes s-smoke-rises {
  0% {
    transform: translate(0,0) scale(.5);
    opacity: 0;
  }
  18% {
    opacity: .5;
  }
  100% {
    transform: translate(4px,-18px) scale(1.7);
    opacity: 0;
  }
}

.s-smoke {
  animation: s-smoke-rises 4.5s ease-out infinite;
}

.s-smoke.b2 {
  animation-delay: 2.2s;
}

@keyframes s-printout-feeds {
  0%,10% {
    transform: scaleY(.12);
  }
  68%,88% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(.12);
  }
}

.s-printout {
  transform-box: fill-box;
  transform-origin: top;
  animation: s-printout-feeds 7s ease-in-out infinite;
}

@keyframes s-tail-wags {
  from {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(14deg);
  }
}

.s-tail {
  transform-box: fill-box;
  transform-origin: bottom left;
  animation: s-tail-wags .7s ease-in-out infinite alternate;
}

@keyframes s-ring-tosses {
  0% {
    transform: translate(0,0);
    opacity: 1;
  }
  38% {
    transform: translate(6px,-8px);
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  66% {
    transform: translate(0,0);
    opacity: 0;
  }
  84%,100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

.s-ring {
  animation: s-ring-tosses 4.4s ease-in-out infinite;
}

.quote {
  margin-top: 56px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  max-width: 760px;
}

.quote::before {
  content: "“";
  font-size: 84px;
  line-height: .6;
  color: var(--red);
  font-family: Georgia, serif;
}

.quote p {
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.5;
}

.quote small {
  display: block;
  margin-top: 14px;
  color: var(--ink-faint);
  letter-spacing: .2em;
  font-size: 11.5px;
  text-transform: uppercase;
}

.flow {
  border: var(--rule);
  background: #fffdf6;
  border-radius: 12px;
  box-shadow: var(--drop);
  padding: 40px 38px;
  overflow-x: auto;
}

.flow pre {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 14px;
  line-height: 2;
  color: var(--ink);
}

.flow .accent {
  color: var(--red);
  font-weight: 700;
}

.flow .accent--cool {
  color: var(--blue);
  font-weight: 700;
}

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-top: 66px;
}

.principle {
  border-top: 3px solid var(--ink);
  padding-top: 18px;
}

.principle b {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: .02em;
}

.principle b::before {
  content: "—";
  color: var(--red);
  margin-right: 10px;
}

.principle p {
  color: #4c4e59;
  font-size: 14px;
}

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.example {
  background: #fffdf6;
  border: var(--rule);
  border-radius: 12px;
  box-shadow: var(--drop);
  padding: 20px 20px 20px;
  position: relative;
}

.example h3 {
  margin: 14px 0 6px;
  font-size: 16.5px;
  letter-spacing: .04em;
}

.example p {
  color: #4c4e59;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

.example__screen {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--screen);
  border: var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.example__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.example__screen.example__screen--video video {
  display: block;
}

.example__screen.example__screen--video .example__demo {
  display: none;
}

.example__demo {
  position: absolute;
  inset: 0;
}

.example__demo svg {
  width: 100%;
  height: 100%;
}

@keyframes line-draws {
  to {
    stroke-dashoffset: 0;
  }
}

.example__demo .line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-draws 2.6s ease forwards infinite alternate;
}

@keyframes room-enters {
  0% {
    opacity: 0;
    transform: scale(.6);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.example__demo .room {
  opacity: 0;
  transform-origin: center;
  animation: room-enters 7s ease infinite;
}

@keyframes row-enters {
  0%,8% {
    transform: scaleX(0);
  }
  22% {
    transform: scaleX(1);
  }
  88% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.example__demo .row {
  transform-origin: left;
  transform: scaleX(0);
  animation: row-enters 6s ease infinite;
}

@keyframes dot-flows {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.example__demo .dot {
  offset-path: path("M 40 90 L 480 90");
  animation: dot-flows 3.2s linear infinite;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}

.plan {
  background: #fffdf6;
  border: var(--rule);
  border-radius: 12px;
  box-shadow: var(--drop);
  padding: 40px 30px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--accent-colour, var(--ink));
}

.plan .plan__badge {
  position: absolute;
  top: 18px;
  right: -34px;
  transform: rotate(38deg);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  padding: 5px 40px;
}

.plan h3 {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.plan .plan__price {
  margin: 20px 0 4px;
  font-size: clamp(44px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-colour, var(--ink));
}

.plan .plan__period {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.plan__summary {
  min-height: 2.8em;
  margin: -10px 0 18px;
  color: var(--ink-faint);
  font-size: 13px;
}

.plan ul {
  list-style: none;
  flex: 1;
}

.plan li {
  padding: 9px 0;
  border-top: 1.5px solid var(--paper-sunk);
  color: #4c4e59;
  font-size: 14px;
}

.plan li b {
  color: var(--ink);
  font-weight: 700;
}

.plan li::before {
  content: "—";
  color: var(--accent-colour, var(--red));
  margin-right: 10px;
}

.plan .button {
  margin-top: 24px;
  text-align: center;
}

.plan .button.is-disabled {
  opacity: .55;
  pointer-events: none;
}

.plan-status {
  grid-column: 1 / -1;
  padding: 32px;
  border: var(--rule);
  text-align: center;
}

.plan-status button {
  margin-left: 12px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.plan-note {
  margin-top: 26px;
  color: var(--ink-faint);
  font-size: 13.5px;
  max-width: 74ch;
}

.plan-note b {
  color: var(--ink);
}

.vision {
  background: color-mix(in srgb, var(--yellow) 26%, var(--paper));
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.vision h2 {
  font-size: clamp(34px, 5vw, 62px);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-top: 14px;
  max-width: 22ch;
  text-wrap: balance;
}

.vision > .shell > div > p {
  margin-top: 28px;
  max-width: 62ch;
  font-size: 17px;
  color: #4c4a43;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
  margin-top: 64px;
}

.step {
  border-top: 3px solid var(--ink);
  padding-top: 18px;
}

.step .step__index {
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--red);
  font-weight: 700;
}

.step b {
  display: block;
  margin: 10px 0 6px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.step span {
  color: #5d5a51;
  font-size: 14px;
}

.closing {
  padding: 140px 0;
  background: var(--ink);
  color: var(--concrete);
}

.closing h2 {
  font-size: clamp(40px, 7vw, 92px);
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 14ch;
}

.closing h2 em {
  font-style: normal;
  color: var(--concrete);
  -webkit-text-stroke: 0;
}

.closing .actions {
  margin-top: 44px;
}

.closing .button {
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}

.closing .closing__note {
  margin-top: 20px;
  color: #9aa0ad;
  font-size: 13.5px;
}

.closing .closing__note a {
  color: var(--yellow);
}

.closing .shell {
  display: flex;
  gap: 48px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.coverage {
  font-size: 13.5px;
  color: #9aa0ad;
  line-height: 2;
  min-width: 220px;
}

.coverage b {
  display: block;
  color: var(--concrete);
  font-size: 11px;
  letter-spacing: .3em;
  margin-bottom: 10px;
}

.coverage .coverage__row {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.coverage .coverage__row em {
  font-style: normal;
  color: #6a6f78;
  font-size: 12px;
}

footer {
  border-top: var(--rule);
  padding: 54px 0 64px;
  background: var(--paper-sunk);
}

.colophon__inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

footer .colophon__column {
  font-size: 13px;
  color: #55575f;
  line-height: 2.1;
}

footer .colophon__column b {
  display: block;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .3em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

footer a {
  color: #55575f;
  text-decoration: none;
  display: block;
}

footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer .colophon__social {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

footer .colophon__social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

footer .colophon__social svg {
  flex: none;
}

.colophon__signature {
  margin-top: 40px;
  font-size: 12px;
  color: #7a7c86;
  letter-spacing: .06em;
}

.payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1.5px solid #d2c9b9;
}

.payment p {
  margin: 0;
  max-width: 44ch;
  color: #55575f;
  font-size: 12.5px;
  line-height: 1.55;
}

.payment img {
  display: block;
  width: min(429px, 100%);
  height: auto;
}

@media (max-width: 940px) {
  .hero__grid, .organs {
    grid-template-columns: 1fr;
  }
  .hero__art, .model {
    max-width: 580px;
    margin: 0 auto;
  }
  .model {
    order: -1;
  }
}

@media (max-width: 760px) {
  nav.masthead__nav a.masthead__link--wide {
    display: none;
  }
  section.section {
    padding: 84px 0;
  }
  .hero {
    padding-top: 100px;
  }
  .payment {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enters, .hero__scroll::after, .band__track, .headline__line > span,
    .window, .node, .bar, .fill-bar, .parcel-draws,
    .card-moves, .bubble, .hook, .antenna-light, .example__demo *,
    .fg-bob, .b-arm, .arm-taps, .walks, .head-reads, .cigar-ember,
    .s-screen, .s-ember, .s-arm, .s-typing-arm, .s-idle, .s-head, .s-sway,
    .s-shelf, .s-minute-hand, .s-breath, .s-pencil-arm, .s-line, .s-screen-line,
    .s-walk, .s-leg-a, .s-leg-b, .s-smoke, .s-printout, .s-tail,
    .s-ring {
    animation: none !important;
  }
  .s-line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .enters {
    transform: none;
    opacity: 1;
  }
  .headline__line > span {
    transform: none;
  }
  .reveal, .reveal h2 em {
    transition: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .bar, .fill-bar {
    transform: none;
  }
}

.payment__marks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.payment__marks .payment__mark {
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 5px 9px;
  opacity: .75;
}

.payment__marks .payment__accepted {
  font-size: 12px;
  opacity: .7;
}

.campaign {
  border: 2px dashed var(--red);
  background: #fffdf6;
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
}

.campaign b {
  color: var(--red);
  letter-spacing: .08em;
}

body.is-night .campaign {
  background: transparent;
}


/* The packages offered while signing up. */
.packages {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.packages legend {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0 var(--space-2);
}

.packages__pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
  cursor: pointer;
}

.packages__pick:has(:checked) {
  border-color: var(--accent);
}

.packages__name {
  flex: 1;
  font-weight: 600;
}

.packages__price {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.packages__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}