:root {
  --ink: #17324d;
  --paper: #fff8e8;
  --acid: #ffd85a;
  --coral: #ff6f61;
  --blue: #53c9f4;
  --pink: #ff5cad;
  --dark: #071013;
  --white: #fffdf8;
  --muted: #53687b;
  --line: rgba(23, 50, 77, 0.22);
  --display: "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background: var(--dark);
  color: var(--ink);
  font-family: var(--body);
  margin: 0;
  overflow-x: hidden;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  background: var(--acid);
  left: 1rem;
  padding: 0.8rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 100;
}

.skip-link:focus {
  top: 1rem;
}

.test-ribbon {
  align-items: center;
  background: var(--acid);
  border: 2px solid var(--dark);
  box-shadow: 5px 5px 0 var(--dark);
  display: flex;
  gap: 0.65rem;
  left: 50%;
  padding: 0.65rem 0.85rem;
  position: fixed;
  top: 86px;
  transform: translateX(-50%);
  z-index: 38;
}

.test-ribbon span,
.test-ribbon strong {
  font: 900 0.53rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.test-ribbon span {
  color: #007aa8;
}

.site-header {
  align-items: center;
  background: rgba(255, 253, 248, 0.92);
  border-bottom: 1px solid rgba(23, 50, 77, 0.16);
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: 76px;
  left: 0;
  padding: 0 3.5vw;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
}

.brand {
  display: inline-flex;
}

.brand img {
  height: auto;
  width: clamp(126px, 10vw, 164px);
}

.menu-button {
  align-items: center;
  background: transparent;
  border: 0;
  display: none;
  gap: 0.6rem;
  justify-self: center;
  text-transform: uppercase;
}

.menu-button span {
  font: 900 0.62rem var(--mono);
  letter-spacing: 0.1em;
}

.menu-button i,
.menu-button i::before,
.menu-button i::after {
  background: var(--ink);
  display: block;
  height: 2px;
  transition: 180ms ease;
  width: 18px;
}

.menu-button i {
  position: relative;
}

.menu-button i::before,
.menu-button i::after {
  content: "";
  position: absolute;
}

.menu-button i::before {
  top: -5px;
}

.menu-button i::after {
  top: 5px;
}

.presentation-menu {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.8rem);
  justify-content: center;
}

.presentation-menu a {
  font-size: 0.7rem;
  font-weight: 800;
  position: relative;
}

.presentation-menu a::after {
  background: var(--coral);
  bottom: -0.45rem;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 100%;
  transition: right 180ms ease;
}

.presentation-menu a:hover::after,
.presentation-menu a[aria-current="true"]::after {
  right: 0;
}

.slide-count {
  display: flex;
  font: 800 0.62rem var(--mono);
  gap: 0.35rem;
}

.slide-count b {
  color: #007aa8;
}

.progress-rail {
  display: grid;
  gap: 0.65rem;
  left: 1.3rem;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}

.progress-rail a {
  align-items: center;
  display: flex;
  height: 14px;
  position: relative;
  width: 14px;
}

.progress-rail a::before {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(7, 16, 19, 0.35);
  border-radius: 50%;
  content: "";
  height: 7px;
  transition: 180ms ease;
  width: 7px;
}

.progress-rail a.is-active::before {
  background: var(--coral);
  height: 12px;
  width: 12px;
}

.progress-rail span {
  background: var(--dark);
  color: white;
  font: 800 0.55rem var(--mono);
  left: 1.3rem;
  opacity: 0;
  padding: 0.4rem 0.55rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-0.25rem);
  transition: 180ms ease;
  white-space: nowrap;
}

.progress-rail a:hover span,
.progress-rail a:focus span {
  opacity: 1;
  transform: translateX(0);
}

.slide {
  min-height: 100svh;
  overflow: hidden;
  padding-top: 76px;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slide-inner {
  min-height: calc(100svh - 76px);
  padding: 7vw 5vw 6vw;
}

.eyebrow {
  color: #007aa8;
  font: 900 0.61rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.eyebrow.light {
  color: var(--blue);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
}

h1,
h2 {
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

h1 em,
h2 em {
  color: var(--pink);
  font-style: normal;
}

.primary-button {
  align-items: center;
  background: var(--acid);
  border-radius: 999px;
  color: var(--dark);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  gap: 2rem;
  justify-content: space-between;
  min-width: 220px;
  padding: 1rem 1.2rem;
  text-transform: uppercase;
}

.next-slide,
.restart-link {
  bottom: 2rem;
  font: 900 0.65rem var(--mono);
  letter-spacing: 0.1em;
  position: absolute;
  right: 3vw;
  z-index: 10;
}

.light-link,
.restart-link {
  color: white;
}

.slide-mission {
  background: var(--dark);
  color: white;
}

.mission-image,
.mission-shade {
  height: calc(100% - 76px);
  inset: 76px 0 0;
  position: absolute;
  width: 100%;
}

.mission-image {
  object-fit: cover;
}

.mission-shade {
  background:
    linear-gradient(90deg, rgba(7, 16, 19, 0.96) 0%, rgba(7, 16, 19, 0.7) 47%, rgba(7, 16, 19, 0.08) 80%),
    linear-gradient(0deg, rgba(7, 16, 19, 0.62), transparent 55%);
}

.mission-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 950px;
  position: relative;
  z-index: 2;
}

.mission-copy h1 {
  font-size: clamp(4.8rem, 8.5vw, 10.2rem);
  line-height: 0.81;
  margin: 2.5rem 0 2rem;
}

.mission-copy h1 em {
  color: var(--acid);
}

.mission-statement {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.45;
  max-width: 720px;
}

.mission-support {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 660px;
}

.mission-copy .primary-button {
  margin-top: 1.2rem;
}

.mission-tags {
  bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: absolute;
  right: 3vw;
  z-index: 3;
}

.mission-tags span {
  backdrop-filter: blur(12px);
  background: rgba(7, 16, 19, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font: 900 0.52rem var(--mono);
  letter-spacing: 0.09em;
  padding: 0.65rem 0.8rem;
}

.slide-gatherings {
  background: var(--acid);
}

.gathering-layout {
  display: grid;
  gap: 4vw;
  grid-template-columns: 1.2fr 0.5fr;
}

.gathering-title h2,
.loop-heading h2,
.section-heading h2,
.business-heading h2,
.pilot-heading h2,
.growth-heading h2 {
  font-size: clamp(3.9rem, 6.5vw, 8rem);
  line-height: 0.85;
  margin: 2.1rem 0 0;
}

.gathering-title h2 em {
  color: #007aa8;
}

.gathering-story {
  align-self: end;
  max-width: 560px;
}

.gathering-story .large-copy {
  color: var(--ink);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.45;
}

.gathering-story > p:last-child {
  color: #40505b;
  font-size: 0.87rem;
  line-height: 1.6;
}

.gathering-scenes {
  align-self: end;
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
}

.gathering-scenes article {
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  min-height: 180px;
  padding: 1.4rem;
}

.gathering-scenes span {
  color: #007aa8;
  font: 900 0.55rem var(--mono);
  letter-spacing: 0.1em;
}

.gathering-scenes strong {
  display: block;
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  line-height: 1.05;
  margin-top: 3.5rem;
  max-width: 320px;
}

.slide-product {
  background: var(--dark);
  color: white;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

.product-visual {
  min-height: calc(100svh - 76px);
  overflow: hidden;
}

.product-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-panel {
  align-self: center;
  padding: 5vw;
}

.product-panel h2 {
  font-size: clamp(3.4rem, 5.2vw, 6.4rem);
  line-height: 0.83;
  margin: 2rem 0;
}

.product-panel h2 em {
  color: var(--acid);
}

.product-lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 540px;
}

.experience-switcher {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  gap: 0.8rem;
  margin-top: 2rem;
}

.experience-switcher button {
  background: transparent;
  border: 0;
  border-bottom: 4px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  font: 900 0.68rem var(--mono);
  letter-spacing: 0.1em;
  padding: 0.8rem 1rem;
}

.experience-switcher button[aria-selected="true"] {
  border-color: var(--acid);
  color: white;
}

.experience-panel {
  padding-top: 1.3rem;
}

.experience-panel > p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.84rem;
  line-height: 1.55;
  max-width: 600px;
}

.mini-cart {
  background: var(--white);
  border-radius: 14px;
  color: var(--ink);
  margin-top: 1rem;
  overflow: hidden;
}

.mini-cart > div,
.mini-cart > strong {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
}

.mini-cart > div {
  border-bottom: 1px solid var(--line);
  font: 800 0.61rem var(--mono);
}

.mini-cart > strong {
  background: var(--acid);
  font: 900 0.64rem var(--mono);
}

.mini-cart > small {
  background: var(--coral);
  color: var(--dark);
  display: block;
  font: 900 0.53rem var(--mono);
  letter-spacing: 0.08em;
  padding: 0.55rem 1rem;
  text-align: center;
}

.profile-signals {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.4rem;
}

.profile-signals span {
  background: rgba(83, 201, 244, 0.12);
  border: 1px solid rgba(83, 201, 244, 0.55);
  border-radius: 12px;
  font: 800 0.54rem var(--mono);
  padding: 1rem;
  text-align: center;
}

.profile-signals b {
  color: var(--acid);
  display: block;
  font: 900 1.7rem var(--display);
  margin-bottom: 0.25rem;
}

.slide-loop {
  background: #dff6ff;
}

.loop-heading {
  display: grid;
  gap: 3vw;
  grid-template-columns: 1.5fr 0.5fr;
}

.loop-heading .eyebrow,
.loop-heading h2 {
  grid-column: 1;
}

.loop-heading > p:last-child {
  align-self: end;
  color: var(--muted);
  font-size: 0.82rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.5;
}

.loop-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4vw;
}

.loop-steps button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.3rem;
}

.loop-steps button + button {
  border-left: 1px solid var(--ink);
}

.loop-steps button[aria-selected="true"] {
  background: var(--pink);
  color: white;
}

.loop-steps span {
  font: 900 0.54rem var(--mono);
}

.loop-steps strong {
  font-size: 0.74rem;
}

.loop-detail {
  background: var(--dark);
  color: white;
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.3fr 1fr 0.7fr;
  min-height: 230px;
  padding: 2.5rem;
}

.loop-detail > span {
  color: var(--blue);
  font: 900 0.58rem var(--mono);
}

.loop-detail h3 {
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.loop-detail p {
  align-self: end;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.55;
}

.loop-close {
  font: 900 0.65rem var(--mono);
  letter-spacing: 0.12em;
  margin-top: 1.7rem;
  text-align: center;
}

.slide-people {
  background: #ffd8e9;
}

.section-heading {
  align-items: end;
  display: grid;
  gap: 5vw;
  grid-template-columns: 1.5fr 0.5fr;
}

.section-heading h2 {
  margin-top: 2rem;
}

.section-heading > p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.people-grid {
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4vw;
}

.people-grid button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  min-height: 310px;
  padding: 1.4rem;
  text-align: left;
  transition: background 180ms ease, transform 180ms ease;
}

.people-grid button:hover,
.people-grid button[aria-expanded="true"] {
  background: var(--white);
  transform: translateY(-8px);
}

.people-grid span {
  color: #007aa8;
  font: 900 0.52rem var(--mono);
  letter-spacing: 0.07em;
}

.people-grid strong {
  display: block;
  font: 900 clamp(1.7rem, 2.5vw, 2.9rem)/0.95 var(--display);
  margin-top: 4rem;
  text-transform: uppercase;
}

.people-grid p {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
  margin: 1.2rem 0 0;
  opacity: 0.45;
  transition: opacity 180ms ease;
}

.people-grid button:hover p,
.people-grid button[aria-expanded="true"] p {
  opacity: 1;
}

.slide-business {
  background: var(--dark);
  color: white;
}

.business-heading h2 em {
  color: var(--acid);
}

.business-heading > p {
  color: rgba(255, 255, 255, 0.65);
}

.revenue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4vw;
}

.revenue-grid article {
  border: 1px solid rgba(255, 255, 255, 0.25);
  min-height: 250px;
  padding: 1.5rem;
}

.revenue-grid article + article {
  border-left: 0;
}

.revenue-grid span {
  color: var(--blue);
  font: 900 0.55rem var(--mono);
}

.revenue-grid h3 {
  font-size: clamp(1.7rem, 2.7vw, 3.2rem);
  line-height: 0.92;
  margin: 4rem 0 1rem;
}

.revenue-grid p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  line-height: 1.5;
}

.status-drawer {
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  margin-top: 2rem;
}

.status-drawer summary {
  cursor: pointer;
  display: flex;
  font: 900 0.56rem var(--mono);
  justify-content: space-between;
  letter-spacing: 0.08em;
  list-style: none;
  padding: 1rem 0;
}

.status-drawer summary::-webkit-details-marker,
.original-by-design summary::-webkit-details-marker {
  display: none;
}

.status-drawer summary span {
  color: var(--blue);
}

.status-drawer > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.status-drawer article {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem;
}

.status-drawer article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.status-drawer article span {
  color: var(--acid);
  font: 900 0.54rem var(--mono);
}

.status-drawer article p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.7rem;
  line-height: 1.4;
  margin: 0;
}

.slide-artist-launch {
  background: #f7f0ff;
}

.artist-launch-layout {
  padding-bottom: 5rem;
  padding-top: 4vw;
}

.artist-launch-heading {
  display: grid;
  gap: 4vw;
  grid-template-columns: 1.25fr 0.75fr;
}

.artist-launch-heading .eyebrow,
.artist-launch-heading h2 {
  grid-column: 1;
}

.artist-launch-heading h2 {
  font-size: clamp(3rem, 5.3vw, 6.8rem);
  margin: 1.3rem 0 0;
}

.artist-launch-heading h2 em {
  color: #007aa8;
}

.artist-launch-heading > p {
  align-self: end;
  color: var(--muted);
  font-size: 0.82rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.55;
}

.onboarding-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
}

.onboarding-flow li {
  border: 1px solid var(--ink);
  min-height: 150px;
  padding: 1rem;
}

.onboarding-flow li + li {
  border-left: 0;
}

.onboarding-flow span,
.connection-flow span,
.pilot-pricing span {
  color: #007aa8;
  display: block;
  font: 900 0.52rem var(--mono);
  letter-spacing: 0.08em;
}

.onboarding-flow strong {
  display: block;
  font: 900 1.1rem var(--display);
  margin-top: 2rem;
}

.onboarding-flow p,
.connection-flow p {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.4;
  margin: 0.55rem 0 0;
}

.connection-flow {
  align-items: stretch;
  background: var(--dark);
  color: white;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  margin-top: 1rem;
}

.connection-flow article {
  padding: 1rem 1.2rem;
}

.connection-flow strong {
  display: block;
  font: 900 clamp(1.15rem, 1.8vw, 2rem) var(--display);
  margin-top: 0.6rem;
}

.connection-flow p {
  color: rgba(255, 255, 255, 0.66);
}

.connection-flow i {
  align-self: center;
  color: var(--acid);
  font-style: normal;
  padding: 0.5rem;
}

.pilot-pricing {
  border-bottom: 1px solid var(--ink);
  margin-top: 1rem;
}

.pilot-pricing summary {
  cursor: pointer;
  font: 900 0.58rem var(--mono);
  letter-spacing: 0.08em;
  list-style: none;
  padding: 0.85rem 0;
}

.pilot-pricing summary::-webkit-details-marker {
  display: none;
}

.pilot-pricing > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pilot-pricing article {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  padding: 0.8rem;
}

.pilot-pricing article:nth-child(3n),
.pilot-pricing article:last-child {
  border-right: 1px solid var(--line);
}

.pilot-pricing strong {
  display: block;
  font-size: 0.72rem;
  margin-top: 0.45rem;
}

.pilot-pricing > p {
  color: var(--muted);
  font: 800 0.58rem/1.45 var(--mono);
  margin: 0;
  padding: 0.75rem 0;
}

.slide-pilot {
  background: var(--acid);
}

.pilot-heading {
  display: grid;
  gap: 4vw;
  grid-template-columns: 1.3fr 0.7fr;
}

.pilot-heading .eyebrow,
.pilot-heading h2 {
  grid-column: 1;
}

.pilot-heading > p {
  align-self: end;
  color: #40505b;
  font-size: 0.84rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.55;
}

.pilot-heading h2 em {
  color: #007aa8;
}

.pilot-timeline {
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4vw;
}

.pilot-timeline article {
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  min-height: 210px;
  padding: 1.3rem;
}

.pilot-timeline span {
  color: #007aa8;
  font: 900 0.53rem var(--mono);
}

.pilot-timeline h3 {
  font-size: clamp(2.2rem, 3.5vw, 4rem);
  margin: 3.5rem 0 0.8rem;
}

.pilot-timeline p {
  color: #40505b;
  font-size: 0.72rem;
  line-height: 1.45;
}

.pilot-proof {
  align-items: center;
  background: var(--ink);
  color: white;
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.45fr repeat(3, 1fr);
  padding: 1.2rem;
}

.pilot-proof span {
  color: var(--blue);
  font: 900 0.55rem var(--mono);
}

.pilot-proof strong {
  font-size: 0.73rem;
}

.pilot-proof > p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.65rem;
  grid-column: 1 / -1;
  line-height: 1.45;
  margin: 0;
}

.slide-growth {
  background: var(--dark);
  color: white;
}

.growth-layout {
  display: grid;
  gap: 3vw;
  grid-template-columns: 0.78fr 1.22fr;
}

.growth-heading h2 {
  margin-top: 2rem;
}

.growth-heading h2 em {
  color: var(--acid);
}

.growth-path {
  align-self: center;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(7, auto);
}

.growth-path article {
  max-width: 180px;
}

.growth-path article span {
  color: var(--blue);
  display: block;
  font: 900 0.55rem var(--mono);
  margin-bottom: 1rem;
}

.growth-path article strong {
  font: 900 1.1rem var(--display);
}

.growth-path article p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.67rem;
  line-height: 1.45;
  margin-top: 0.6rem;
}

.growth-path i {
  align-self: center;
  color: var(--acid);
  font-style: normal;
}

.original-by-design {
  grid-column: 1 / -1;
}

.original-by-design details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 0;
}

.original-by-design summary {
  color: var(--blue);
  cursor: pointer;
  font: 900 0.58rem var(--mono);
  letter-spacing: 0.1em;
  list-style: none;
}

.original-by-design p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 1.3rem 0 0;
  max-width: 850px;
}

.original-by-design ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.original-by-design li {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font: 800 0.53rem var(--mono);
  padding: 0.55rem 0.7rem;
}

.growth-close {
  align-items: end;
  display: grid;
  gap: 2vw;
  grid-column: 1 / -1;
  grid-template-columns: 0.35fr 1fr;
}

.growth-close > span {
  color: var(--blue);
  font: 900 0.55rem/1.5 var(--mono);
  letter-spacing: 0.08em;
}

.growth-close h3 {
  font-size: clamp(2.8rem, 5vw, 5.8rem);
  grid-column: 2;
  line-height: 0.88;
  margin: 0;
  text-transform: uppercase;
}

.growth-close > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  grid-column: 2;
}

.secondary-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
  font-weight: 900;
  padding-bottom: 0.4rem;
  text-transform: uppercase;
}

.keyboard-hint {
  align-items: center;
  bottom: 0.8rem;
  display: flex;
  font: 800 0.48rem var(--mono);
  gap: 0.35rem;
  left: 50%;
  opacity: 0.7;
  position: fixed;
  transform: translateX(-50%);
  z-index: 30;
}

.keyboard-hint kbd {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(7, 16, 19, 0.2);
  border-radius: 4px;
  color: var(--dark);
  font: 800 0.55rem var(--mono);
  padding: 0.2rem 0.35rem;
}

@media (max-width: 1100px) {
  .presentation-menu {
    gap: 0.85rem;
  }

  .presentation-menu a {
    font-size: 0.62rem;
  }

  .people-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .people-grid button {
    min-height: 240px;
  }

  .onboarding-flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .onboarding-flow li:nth-child(4) {
    border-left: 1px solid var(--ink);
  }

  .onboarding-flow li:nth-child(n + 4) {
    border-top: 0;
  }

  .growth-layout {
    grid-template-columns: 1fr;
  }

  .growth-path {
    grid-template-columns: repeat(7, minmax(0, auto));
  }
}

@media (max-width: 820px) {
  html {
    scroll-snap-type: none;
  }

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

  .menu-button {
    display: flex;
  }

  .presentation-menu {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: none;
    left: 0;
    padding: 1rem 1.2rem 1.4rem;
    position: absolute;
    right: 0;
    top: 76px;
  }

  .presentation-menu.is-open {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .presentation-menu a {
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 0;
  }

  .progress-rail,
  .keyboard-hint {
    display: none;
  }

  .test-ribbon {
    box-shadow: none;
    justify-content: center;
    top: 76px;
    width: 100%;
  }

  .slide {
    min-height: auto;
  }

  .slide-inner {
    min-height: auto;
    padding: 5rem 1.2rem;
  }

  .next-slide,
  .restart-link {
    bottom: 1.2rem;
  }

  .slide-mission {
    min-height: 820px;
  }

  .mission-image,
  .mission-shade {
    height: calc(100% - 76px);
  }

  .mission-copy {
    min-height: 744px;
    padding: 5rem 1.2rem 7rem;
  }

  .mission-copy h1 {
    font-size: 4.2rem;
  }

  .mission-tags {
    bottom: 1.3rem;
    left: 1.2rem;
    right: 1.2rem;
  }

  .gathering-layout,
  .loop-heading,
  .section-heading,
  .artist-launch-heading,
  .pilot-heading,
  .growth-close {
    grid-template-columns: 1fr;
  }

  .gathering-title h2,
  .loop-heading h2,
  .section-heading h2,
  .business-heading h2,
  .artist-launch-heading h2,
  .pilot-heading h2,
  .growth-heading h2 {
    font-size: 3.4rem;
  }

  .gathering-story,
  .loop-heading > p:last-child,
  .artist-launch-heading > p,
  .pilot-heading > p {
    grid-column: auto;
    grid-row: auto;
  }

  .gathering-scenes,
  .loop-steps,
  .revenue-grid,
  .onboarding-flow,
  .pilot-pricing > div,
  .pilot-timeline {
    grid-template-columns: 1fr;
  }

  .onboarding-flow li + li,
  .onboarding-flow li:nth-child(4) {
    border-left: 1px solid var(--ink);
    border-top: 0;
  }

  .connection-flow {
    grid-template-columns: 1fr;
  }

  .connection-flow i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .pilot-pricing article {
    border-right: 1px solid var(--line);
  }

  .gathering-scenes article {
    min-height: 150px;
  }

  .slide-product {
    display: block;
  }

  .product-visual {
    min-height: 380px;
  }

  .product-panel {
    padding: 4rem 1.2rem 5rem;
  }

  .product-panel h2 {
    font-size: 3.5rem;
  }

  .loop-steps button + button,
  .revenue-grid article + article {
    border-left: 1px solid var(--ink);
  }

  .loop-detail {
    grid-template-columns: 1fr;
    padding: 2rem 1.2rem;
  }

  .loop-detail h3 {
    font-size: 3rem;
  }

  .loop-detail p {
    align-self: auto;
  }

  .people-grid,
  .status-drawer > div {
    grid-template-columns: 1fr;
  }

  .revenue-grid article + article {
    border-top: 0;
  }

  .status-drawer article + article {
    border-left: 0;
  }

  .pilot-proof {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .growth-path {
    grid-template-columns: 1fr;
  }

  .growth-path i {
    transform: rotate(90deg);
  }

  .growth-close h3,
  .growth-close > div {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Four-part screenshot-led presentation */
html:has(body.four-part-deck) {
  scroll-snap-type: none;
}

.four-part-deck .chapter {
  min-height: 100svh;
  padding: 76px clamp(1.25rem, 5vw, 5rem) 3rem;
}

.four-part-deck .chapter h1,
.four-part-deck .chapter h2 {
  line-height: 0.92;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.four-part-deck .chapter p,
.deck-host strong {
  text-wrap: pretty;
}

.chapter-intro {
  align-items: center;
  background:
    radial-gradient(circle at 80% 36%, rgba(83, 201, 244, 0.2), transparent 30rem),
    var(--dark);
  color: var(--white);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(19rem, 0.75fr) minmax(30rem, 1.25fr);
}

.chapter-intro-copy {
  align-self: center;
  max-width: 36rem;
  position: relative;
  z-index: 4;
}

.chapter-intro-copy h1 {
  font-size: clamp(4.4rem, 8vw, 9rem);
  margin-top: 1.25rem;
}

.chapter-intro-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  line-height: 1.55;
  max-width: 36ch;
}

.chapter-screen {
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 1rem 1rem 0 rgba(255, 216, 90, 0.26);
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.chapter-screen img {
  display: block;
  height: auto;
  width: 100%;
}

.chapter-screen figcaption {
  background: var(--acid);
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font: 900 0.65rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  padding: 0.8rem 1rem;
}

.chapter-screen-hero {
  transform: perspective(1200px) rotateY(-4deg) translateY(-1rem);
}

.chapter-pills {
  bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  left: clamp(1.25rem, 5vw, 5rem);
  position: absolute;
  right: clamp(1.25rem, 5vw, 5rem);
  z-index: 7;
}

.chapter-pills span {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font: 900 0.61rem var(--mono);
  letter-spacing: 0.12em;
  padding: 0.75rem 1rem;
  text-align: center;
}

.deck-host {
  align-items: end;
  display: flex;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

.deck-host img {
  filter:
    drop-shadow(0 0.35rem 0.2rem rgba(7, 16, 19, 0.34))
    drop-shadow(0 1.3rem 1rem rgba(7, 16, 19, 0.5));
  max-width: none;
  object-fit: contain;
  position: relative;
  width: auto;
  z-index: 2;
}

.deck-host > div {
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 0.55rem 0.55rem 0 var(--ink);
  color: var(--ink);
  max-width: 22rem;
  padding: 1rem 1.1rem;
  position: relative;
  z-index: 3;
}

.deck-host > div::after {
  background: var(--white);
  border-bottom: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  content: "";
  height: 1rem;
  position: absolute;
  right: -0.65rem;
  top: 50%;
  transform: rotate(-45deg);
  width: 1rem;
}

.deck-host span {
  color: #007aa8;
  display: block;
  font: 900 0.57rem var(--mono);
  letter-spacing: 0.1em;
  margin-bottom: 0.45rem;
}

.deck-host strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.65vw, 1.45rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.deck-host-welcome {
  bottom: 3.5rem;
  flex-direction: row-reverse;
  right: -1.5rem;
}

.deck-host-welcome img {
  height: clamp(18rem, 46vh, 31rem);
}

.deck-host-welcome > div {
  margin-bottom: 5.5rem;
  margin-right: -3rem;
}

.chapter-proof {
  background: var(--acid);
  color: var(--ink);
  padding-bottom: 5rem;
}

.chapter-heading {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.4fr 0.6fr;
  margin: clamp(3rem, 6vh, 5rem) auto 2rem;
  max-width: 88rem;
}

.chapter-heading h2 {
  font-size: clamp(3.5rem, 6.5vw, 7.5rem);
  margin-top: 0.8rem;
}

.chapter-heading > p {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  max-width: 30ch;
}

.proof-four-grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.4rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 88rem;
  padding-bottom: 3rem;
  position: relative;
}

.proof-four-grid figure {
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 0.55rem 0.55rem 0 var(--ink);
  margin: 0;
  overflow: hidden;
}

.proof-four-grid img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.proof-four-grid figcaption {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem 1rem;
}

.proof-four-grid figcaption span {
  color: #007aa8;
  font: 900 0.56rem var(--mono);
  letter-spacing: 0.08em;
}

.proof-four-grid figcaption strong {
  font-family: var(--display);
  text-transform: uppercase;
}

.deck-host-point {
  bottom: -3.5rem;
  left: -4rem;
}

.deck-host-point img {
  height: clamp(20rem, 48vh, 34rem);
}

.deck-host-point > div {
  margin-bottom: 4rem;
  margin-left: -4rem;
}

.deck-host-point > div::after,
.deck-host-artist > div::after {
  border-bottom: 0;
  border-left: 3px solid var(--ink);
  border-right: 0;
  border-top: 3px solid var(--ink);
  left: -0.65rem;
  right: auto;
  transform: rotate(-45deg);
}

.chapter-artist {
  background:
    radial-gradient(circle at 75% 35%, rgba(83, 201, 244, 0.22), transparent 28rem),
    var(--ink);
  color: var(--white);
  display: grid;
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(20rem, 0.85fr) minmax(30rem, 1.15fr);
  grid-template-rows: auto auto auto;
  padding-bottom: 5rem;
}

.artist-story {
  align-self: center;
  max-width: 42rem;
}

.artist-story h2 {
  font-size: clamp(3.7rem, 6.3vw, 7rem);
  margin-top: 0.8rem;
}

.artist-story > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.08rem;
  line-height: 1.5;
  max-width: 42ch;
}

.artist-story ol {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.artist-story li {
  border: 1px solid rgba(255, 255, 255, 0.36);
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
}

.artist-story li span {
  color: var(--acid);
  font: 900 0.55rem var(--mono);
}

.artist-story li strong {
  font-size: 0.72rem;
}

.artist-screen {
  align-self: center;
}

.artist-connection {
  align-items: center;
  display: grid;
  font: 900 clamp(0.62rem, 0.9vw, 0.8rem) var(--mono);
  gap: 0.5rem;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  letter-spacing: 0.08em;
  text-align: center;
}

.artist-connection span {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.8rem;
}

.artist-connection i {
  color: var(--acid);
  font-style: normal;
}

.artist-prices {
  display: grid;
  gap: 0.8rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, 1fr);
  max-width: 52rem;
}

.artist-prices article {
  background: var(--white);
  border: 2px solid var(--dark);
  color: var(--ink);
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 1rem;
}

.artist-prices span,
.artist-prices small {
  font: 900 0.54rem var(--mono);
  letter-spacing: 0.08em;
}

.artist-prices small {
  color: #b3352b;
}

.deck-host-artist {
  bottom: -3rem;
  right: -3rem;
}

.deck-host-artist img {
  height: clamp(19rem, 44vh, 31rem);
}

.deck-host-artist > div {
  margin-bottom: 12rem;
  margin-right: -3rem;
  order: -1;
}

.deck-host-artist > div::after {
  left: auto;
  right: -0.65rem;
  transform: rotate(135deg);
}

.chapter-plan {
  background: #fff8e8;
  color: var(--ink);
  padding-bottom: 5rem;
}

.plan-heading {
  margin-bottom: 1.5rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto 1.5rem;
  max-width: 88rem;
}

.plan-grid article {
  background: var(--acid);
  border: 1px solid var(--ink);
  display: grid;
  gap: 0.6rem;
  min-height: 7rem;
  padding: 1rem;
}

.plan-grid span,
.plan-partner figcaption span {
  color: #007aa8;
  font: 900 0.56rem var(--mono);
  letter-spacing: 0.1em;
}

.plan-grid strong,
.plan-partner figcaption strong {
  font-family: var(--display);
  text-transform: uppercase;
}

.plan-partner {
  background: var(--white);
  border: 2px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.6fr);
  margin: 0 auto;
  max-width: 88rem;
  overflow: hidden;
}

.plan-partner img {
  display: block;
  width: 100%;
}

.plan-partner figcaption {
  align-content: center;
  border-left: 2px solid var(--ink);
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
}

.plan-actions {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem auto 0;
  max-width: 88rem;
}

.secondary-link {
  border-bottom: 2px solid currentColor;
  font-size: 0.72rem;
  font-weight: 900;
  padding-bottom: 0.25rem;
  text-transform: uppercase;
}

.deck-host-tip {
  bottom: -3rem;
  right: -2rem;
}

.deck-host-tip img {
  height: clamp(18rem, 42vh, 29rem);
}

.deck-host-tip > div {
  margin-bottom: 5.5rem;
  margin-right: -2.5rem;
  order: -1;
}

@media (max-width: 1100px) {
  .chapter-intro {
    grid-template-columns: minmax(17rem, 0.8fr) minmax(24rem, 1.2fr);
  }

  .deck-host > div {
    max-width: 18rem;
  }

  .deck-host-welcome,
  .deck-host-artist,
  .deck-host-tip {
    right: -6rem;
  }

  .deck-host-point {
    left: -7rem;
  }
}

@media (max-width: 820px) {
  .four-part-deck .chapter {
    display: block;
    min-height: 760px;
    padding: 10rem 1rem 5rem;
  }

  .chapter-intro-copy h1,
  .artist-story h2,
  .chapter-heading h2 {
    font-size: clamp(3.5rem, 16vw, 5.4rem);
  }

  .chapter-screen-hero {
    margin-top: 2rem;
    transform: none;
  }

  .chapter-pills {
    display: none;
  }

  .deck-host {
    margin-top: -1.5rem;
    position: relative;
  }

  .deck-host img {
    height: 14rem;
  }

  .deck-host > div {
    margin: 0 0 3.5rem -2rem;
    max-width: none;
    padding: 0.8rem;
  }

  .deck-host-welcome,
  .deck-host-point,
  .deck-host-artist,
  .deck-host-tip {
    bottom: auto;
    left: auto;
    right: auto;
  }

  .chapter-heading {
    display: block;
    margin: 0 0 2rem;
  }

  .chapter-heading > p {
    max-width: 36ch;
  }

  .proof-four-grid {
    grid-template-columns: 1fr;
  }

  .deck-host-point > div::after,
  .deck-host-artist > div::after {
    left: -0.65rem;
    right: auto;
    transform: rotate(-45deg);
  }

  .chapter-artist {
    padding-top: 10rem;
  }

  .artist-screen {
    margin-top: 2rem;
  }

  .artist-connection {
    grid-template-columns: 1fr;
    margin: 1.5rem 0;
  }

  .artist-connection i {
    transform: rotate(90deg);
  }

  .artist-prices,
  .plan-grid {
    grid-template-columns: 1fr;
  }

  .deck-host-artist > div,
  .deck-host-tip > div {
    order: 0;
  }

  .plan-partner {
    grid-template-columns: 1fr;
  }

  .plan-partner figcaption {
    border-left: 0;
    border-top: 2px solid var(--ink);
  }

  .plan-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}