:root {
  --page-bg: #f6f8fb;
  --page-ink: #141414;
  --page-muted: #5f666f;
  --page-line: #d9dfe7;
  --page-surface: #ffffff;
  --page-primary: #0f8f63;
  --page-accent: #e84d35;
  --page-yellow: #f2c94c;
  --max-width: 1120px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  color: var(--page-ink);
  background:
    linear-gradient(90deg, rgba(20, 20, 20, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, var(--page-bg) 45%, #eef3f1 100%);
  background-size: 72px 72px, auto;
  letter-spacing: 0;
}

img {
  max-width: 100%;
  display: block;
}

button,
input {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 2rem, 2rem);
  background: rgba(246, 248, 251, 0.88);
  border-bottom: 1px solid var(--page-line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--page-ink);
  text-decoration: none;
  font-weight: 700;
}

.brand-mark {
  width: 2.1rem;
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.7rem;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(15, 88, 56, 0.18);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-nav {
  display: flex;
  gap: clamp(0.45rem, 1.1vw, 1rem);
  font-size: 0.92rem;
}

.site-nav a {
  color: var(--page-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--page-ink);
}

.language-switch {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.72);
}

.language-switch button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  color: var(--page-muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 900;
}

.language-switch button.active {
  color: #ffffff;
  background: var(--page-primary);
}

.section {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
  padding: 6rem 0;
}

.hero {
  position: relative;
  min-height: calc(100svh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  overflow: hidden;
}

.hero > :not(.hero-brand-card) {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0;
  color: var(--page-primary);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2 {
  font-family: "Fraunces", serif;
  line-height: 1;
  letter-spacing: 0;
}

h1 {
  max-width: 12ch;
  font-size: 5.4rem;
}

h2 {
  max-width: 14ch;
  font-size: 3.6rem;
}

h3 {
  font-size: 1.15rem;
}

.hero-copy,
.app-section-copy p,
.problem-grid p,
.mission-panel p,
.mission-grid p,
.story-copy p,
.story-timeline p,
.story-principles p,
.award-copy p,
.control-grid p,
.marketplace-grid p,
.feature-grid p,
.business-panel p,
.business-grid p,
.business-note {
  color: var(--page-muted);
  line-height: 1.6;
}

.hero-copy {
  max-width: 48ch;
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.hero-proof span {
  border: 1px solid var(--page-line);
  border-radius: 999px;
  padding: 0.55rem 0.75rem;
  color: var(--page-muted);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.hero-brand-card {
  position: absolute;
  right: clamp(0rem, 3vw, 2.4rem);
  top: 50%;
  width: min(34vw, 330px);
  transform: translateY(-45%) rotate(1.5deg);
  border-radius: 2.8rem;
  opacity: 0.96;
  pointer-events: none;
  filter: drop-shadow(0 28px 52px rgba(11, 45, 40, 0.18));
}

.hero-brand-card img {
  width: 100%;
  border-radius: inherit;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0.72rem 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #ffffff;
  background: var(--page-primary);
}

.button-ghost {
  color: var(--page-ink);
  border: 1px solid var(--page-line);
  background: #ffffff;
}

.section-headline {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.problem-grid article {
  padding: 1.1rem;
  border: 1px solid var(--page-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}

.problem-grid p {
  margin-top: 0.6rem;
}

.data-section {
  border-block: 1px solid var(--page-line);
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.data-grid article,
.loneliness-panel,
.traction-strip {
  border: 1px solid var(--page-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
}

.data-grid article {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-height: 220px;
  padding: 1.1rem;
}

.data-lead {
  grid-column: span 2;
  background:
    radial-gradient(circle at 12% 14%, rgba(242, 201, 76, 0.28), transparent 36%),
    rgba(255, 255, 255, 0.88) !important;
}

.data-number {
  font-family: "Fraunces", serif;
  color: var(--page-primary);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.95;
}

.data-grid p,
.loneliness-panel p,
.data-source,
.gtm-grid p,
.impact-grid p {
  color: var(--page-muted);
  line-height: 1.6;
}

.data-section {
  min-height: auto !important;
  padding-bottom: clamp(4rem, 10vw, 8rem) !important;
}

.data-story {
  --data-progress: 0;
  --data-active: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 6vw, 5rem);
}

.data-visual {
  position: sticky;
  top: clamp(5.6rem, 10vh, 7.2rem);
  min-height: min(620px, calc(100svh - 8rem));
  border: 1px solid rgba(17, 28, 18, 0.13);
  border-radius: 24px;
  padding: clamp(1rem, 2.8vw, 1.45rem);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 253, 243, 0.82), rgba(222, 238, 214, 0.58)),
    rgba(255, 253, 243, 0.72);
  box-shadow: 0 26px 70px rgba(10, 24, 16, 0.1);
  backdrop-filter: blur(16px) saturate(1.08);
}

.data-orbit {
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(15, 143, 99, 0.18);
  border-radius: 24px;
  opacity: 0.7;
}

.orbit-dot {
  position: absolute;
  width: clamp(42px, 7vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--page-primary);
  opacity: 0.18;
  transform: translate(-50%, -50%) scale(calc(0.72 + var(--data-progress) * 0.6));
}

.dot-campus {
  left: 22%;
  top: 22%;
  background: var(--page-yellow);
}

.dot-car {
  left: calc(78% - var(--data-progress) * 32%);
  top: calc(30% + var(--data-progress) * 42%);
  background: var(--page-accent);
}

.dot-social {
  left: calc(30% + var(--data-progress) * 48%);
  top: 78%;
  background: var(--page-primary);
}

.data-funnel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.65rem;
}

.data-funnel span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--w);
  min-height: 48px;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  color: rgba(16, 32, 22, 0.82);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(17, 28, 18, 0.08);
}

.data-funnel strong {
  color: #102016;
  font-family: "Fraunces", serif;
  font-size: clamp(1.15rem, 3vw, 1.8rem);
}

.data-gauge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: clamp(190px, 30vw, 280px);
  margin-block: clamp(1rem, 4vw, 2rem);
  border-radius: 22px;
  background:
    conic-gradient(from -90deg, rgba(15, 143, 99, 0.82) calc(var(--data-progress) * 270deg + 36deg), rgba(16, 32, 22, 0.08) 0),
    radial-gradient(circle, rgba(255, 253, 243, 0.96) 0 58%, transparent 59%);
}

.data-gauge span {
  color: #102016;
  font-family: "Fraunces", serif;
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  line-height: 0.9;
}

.data-gauge small {
  max-width: 28ch;
  color: rgba(21, 28, 20, 0.7);
  text-align: center;
}

.data-mini-bars {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
}

.data-mini-bars span {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 0.7rem;
  color: rgba(21, 28, 20, 0.76);
}

.data-mini-bars span::after {
  content: "";
  width: var(--bar);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-primary), var(--page-yellow));
}

.data-steps {
  display: grid;
}

.data-step {
  display: grid;
  align-content: center;
  min-height: 76svh;
  border: 1px solid rgba(17, 28, 18, 0.13);
  border-radius: 22px;
  padding: clamp(1rem, 3vw, 1.45rem);
  background: rgba(255, 253, 243, 0.78);
  box-shadow: 0 22px 58px rgba(10, 24, 16, 0.09);
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.data-step.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.data-step span {
  color: rgba(15, 143, 99, 0.88);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.data-step h3 {
  max-width: 16ch;
  margin-top: 0.65rem;
  color: #102016;
  font-family: "Fraunces", serif;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 0.98;
}

.data-step p {
  max-width: 52ch;
  margin-top: 1rem;
  color: rgba(21, 28, 20, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.58;
}

.data-story .data-source {
  margin-top: 0;
  border: 1px solid rgba(17, 28, 18, 0.11);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: rgba(255, 253, 243, 0.62);
}

.data-more {
  display: grid;
  gap: 1rem;
  border: 1px solid rgba(17, 28, 18, 0.12);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 253, 243, 0.72);
  box-shadow: 0 18px 44px rgba(10, 24, 16, 0.07);
}

.data-more span {
  color: var(--page-primary);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.data-more h3 {
  margin-top: 0.25rem;
  color: #102016;
}

.data-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.data-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(17, 28, 18, 0.12);
  border-radius: 8px;
  padding: 0.48rem 0.68rem;
  color: #102016;
  background: rgba(255, 255, 255, 0.66);
  font-weight: 800;
  text-decoration: none;
}

.impact-widgets {
  display: grid;
  gap: 1.1rem;
  margin-top: 1rem;
  border: 1px solid rgba(17, 28, 18, 0.12);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 253, 243, 0.72);
  box-shadow: 0 18px 44px rgba(10, 24, 16, 0.07);
}

.impact-widgets-head {
  display: grid;
  gap: 0.35rem;
}

.impact-widgets-head span {
  color: var(--page-primary);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.impact-widgets-head h3 {
  color: #102016;
}

.impact-widgets-head p {
  color: rgba(21, 28, 20, 0.78);
  line-height: 1.55;
}

.impact-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.impact-widget-card,
.impact-chart-card {
  border: 1px solid rgba(17, 28, 18, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.impact-widget-card {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
}

.impact-widget-card span {
  color: var(--page-primary);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.impact-widget-card strong {
  color: #102016;
  font-family: "Fraunces", serif;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.02;
}

.impact-widget-card p,
.impact-chart-card p {
  color: rgba(21, 28, 20, 0.76);
  line-height: 1.5;
}

.impact-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.impact-chart-card {
  display: grid;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.impact-chart-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid rgba(17, 28, 18, 0.08);
}

.impact-chart-card div {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1rem 1rem;
}

.impact-chart-card strong {
  color: #102016;
}

.impact-widget-source {
  margin-top: 0;
}

.loneliness-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1.1rem;
}

.loneliness-bars {
  display: grid;
  gap: 0.65rem;
}

.loneliness-bars span {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.55rem 0.7rem;
  color: var(--page-ink);
  background: #eef3f1;
  font-size: 0.88rem;
}

.loneliness-bars span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar);
  background: rgba(15, 143, 99, 0.18);
}

.loneliness-bars strong {
  position: relative;
  z-index: 1;
  margin-right: 0.4rem;
}

.data-source {
  margin-top: 0.75rem;
  font-size: 0.82rem;
}

.mission {
  border-block: 1px solid var(--page-line);
}

.mission-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1rem;
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--page-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 10%, rgba(15, 143, 99, 0.18), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef8f2 100%);
}

.mission-grid,
.control-grid,
.marketplace-grid,
.feature-grid,
.business-grid,
.event-thesis-grid {
  display: grid;
  gap: 1rem;
}

.mission-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mission-grid article,
.control-grid article,
.marketplace-grid article,
.feature-grid article,
.business-grid article,
.event-thesis-grid article {
  border: 1px solid var(--page-line);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.84);
}

.mission-grid span,
.feature-grid span,
.business-grid span,
.event-thesis-grid span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  padding: 0.3rem 0.58rem;
  color: #ffffff;
  background: var(--page-primary);
  font-weight: 800;
  font-size: 0.78rem;
}

.story {
  border-bottom: 1px solid var(--page-line);
}

.story-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1rem, 4vw, 2.4rem);
  align-items: stretch;
}

.story-photo {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--page-line);
  background: #0b2d28;
  box-shadow: 0 24px 70px rgba(11, 45, 40, 0.16);
}

.story-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(180deg, transparent 42%, rgba(5, 20, 18, 0.68) 100%),
    linear-gradient(90deg, rgba(5, 20, 18, 0.18), transparent 46%);
  pointer-events: none;
}

.story-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.story-photo figcaption {
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  color: #fff8df;
  background: rgba(5, 20, 18, 0.58);
  backdrop-filter: blur(16px);
}

.story-photo figcaption span {
  color: rgba(255, 248, 223, 0.74);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.story-photo figcaption strong {
  font-size: 1.05rem;
}

.story-photo figcaption small {
  max-width: 36ch;
  color: rgba(255, 248, 223, 0.76);
  line-height: 1.45;
}

.story-copy {
  display: grid;
  align-content: center;
  gap: 1rem;
  font-size: 1.03rem;
}

.story-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.6rem;
  border-block: 1px solid var(--page-line);
}

.story-timeline article {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 210px;
  padding: 1rem;
  border-right: 1px solid var(--page-line);
}

.story-timeline article:last-child {
  border-right: 0;
}

.story-timeline span {
  width: fit-content;
  border-radius: 999px;
  padding: 0.34rem 0.6rem;
  color: #ffffff;
  background: var(--page-primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.story-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.story-principles article {
  border: 1px solid var(--page-line);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.84);
}

.story-principles h3 {
  margin-bottom: 0.55rem;
}

.award {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  align-items: center;
  border-bottom: 1px solid var(--page-line);
}

.award-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #0b2d28;
  box-shadow: 0 24px 70px rgba(11, 45, 40, 0.18);
}

.award-photo img {
  width: 100%;
  aspect-ratio: 1.28;
  object-fit: cover;
}

.award-photo figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  color: #fff8df;
  background: rgba(11, 45, 40, 0.72);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 800;
}

.award-copy {
  display: grid;
  gap: 1rem;
}

.award-copy h2 {
  max-width: 12ch;
}

.control-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketplace {
  border-block: 1px solid var(--page-line);
}

.marketplace-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-roadmap {
  border-bottom: 1px solid var(--page-line);
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-grid article {
  min-height: 240px;
}

.feature-grid span {
  color: var(--page-primary);
  background: rgba(15, 143, 99, 0.12);
}

.impact {
  border-block: 1px solid var(--page-line);
}

.business {
  border-bottom: 1px solid var(--page-line);
}

.business-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.2rem;
  margin-bottom: 1rem;
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--page-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(242, 201, 76, 0.26), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f6f2df 100%);
}

.business-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.business-grid article {
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.business-grid span {
  color: var(--page-primary);
  background: rgba(242, 201, 76, 0.42);
}

.business-note {
  margin-top: 0.9rem;
  max-width: 82ch;
  font-size: 0.94rem;
}

.impact-grid,
.gtm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.impact-grid article,
.gtm-grid article {
  min-height: 230px;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  border: 1px solid var(--page-line);
  border-radius: 20px;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.84);
}

.impact-grid span,
.gtm-grid span {
  width: fit-content;
  border-radius: 999px;
  padding: 0.3rem 0.58rem;
  color: #ffffff;
  background: var(--page-accent);
  font-weight: 800;
  font-size: 0.78rem;
}

.traction-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.8rem;
}

.traction-strip span {
  border-radius: 999px;
  padding: 0.45rem 0.68rem;
  color: var(--page-primary);
  background: rgba(15, 143, 99, 0.1);
  font-size: 0.86rem;
  font-weight: 800;
}

.flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.flow-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--page-line);
  color: var(--page-muted);
  line-height: 1.65;
}

.flow-list span {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--page-accent);
  font-weight: 700;
}

.user-flow {
  border-block: 1px solid var(--page-line);
}

.moment-card {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--page-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 16%, rgba(242, 201, 76, 0.38), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #eef8f2 100%);
}

.moment-card p:last-child,
.journey-grid p {
  color: var(--page-muted);
  line-height: 1.65;
}

.negative-line,
.positive-line {
  font-family: "Fraunces", serif;
  font-size: clamp(1.45rem, 3vw, 2.55rem);
  line-height: 1.05;
}

.negative-line {
  color: #8a3c32;
}

.positive-line {
  color: var(--page-primary);
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.journey-grid article {
  min-height: 220px;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--page-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.journey-grid span {
  width: fit-content;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  color: #ffffff;
  background: var(--page-primary);
  font-weight: 700;
  font-size: 0.78rem;
}

.crawl-preview {
  width: min(100% - 1rem, 1180px);
}

.event-thesis-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.crawl-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: end;
  margin-bottom: 1.2rem;
}

.crawl-intro p,
.crawl-note,
.crawler-event-card p {
  color: var(--page-muted);
  line-height: 1.6;
}

.crawl-intro p {
  max-width: 58ch;
}

.crawl-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.crawl-stats span {
  border: 1px solid var(--page-line);
  border-radius: 999px;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--page-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.event-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.event-filter-bar button {
  min-height: 38px;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  color: var(--page-muted);
  background: #ffffff;
  cursor: pointer;
}

.event-filter-bar button.active {
  border-color: var(--page-primary);
  color: #ffffff;
  background: var(--page-primary);
}

.crawler-event-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.crawler-event-card {
  min-height: 260px;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--page-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 54px rgba(20, 20, 20, 0.06);
}

.crawler-event-card header {
  display: grid;
  gap: 0.65rem;
}

.crawler-event-card h3 {
  font-family: "Fraunces", serif;
  font-size: 1.35rem;
  line-height: 1.08;
}

.event-date-line,
.event-source-line,
.event-ride-hint {
  color: var(--page-muted);
  font-size: 0.84rem;
}

.event-date-line {
  color: var(--page-primary);
  font-weight: 700;
}

.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.event-category {
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  color: #ffffff;
  background: var(--page-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.event-card-footer a {
  color: var(--page-primary);
  font-weight: 700;
  text-decoration: none;
}

.event-more-button {
  margin-top: 1rem;
}

.event-more-button[hidden] {
  display: none;
}

.crawl-note {
  margin-top: 0.9rem;
  font-size: 0.9rem;
}

.app-section {
  width: min(100% - 1rem, 1180px);
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(320px, 1.08fr);
  gap: 2rem;
  align-items: center;
  padding-top: 4rem;
}

.app-section-copy {
  display: grid;
  gap: 1rem;
}

.app-proof {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  color: var(--page-muted);
}

.app-proof li {
  padding-left: 1rem;
  border-left: 4px solid var(--page-yellow);
}

.phone-stage {
  display: grid;
  justify-items: center;
}

.device-shell {
  position: relative;
  width: min(393px, 100%);
  padding: 0.62rem;
  border-radius: 48px;
  background: #151515;
  box-shadow: 0 24px 80px rgba(20, 20, 20, 0.2);
}

.device-shell::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 4;
  width: 96px;
  height: 28px;
  border-radius: 999px;
  background: #050506;
  transform: translateX(-50%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.phone-app {
  --app-bg: #111214;
  --app-surface: #1d1f22;
  --app-surface-2: #26292d;
  --app-text: #f6f7f9;
  --app-muted: #a5abb3;
  --app-line: #353940;
  --app-primary: #0a7aff;
  --app-green: #2dbf7f;
  --app-warning: #f2c94c;
  aspect-ratio: 393 / 852;
  height: auto;
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border-radius: 38px;
  color: var(--app-text);
  background: var(--app-bg);
  transition: background 0.25s ease, color 0.25s ease;
}

.phone-app.theme-light {
  --app-bg: #f7f8fb;
  --app-surface: #ffffff;
  --app-surface-2: #edf1f6;
  --app-text: #15171a;
  --app-muted: #6a727d;
  --app-line: #dce2ea;
  --app-primary: #0a7aff;
  --app-green: #0f8f63;
  --app-warning: #d8a300;
}

.phone-statusbar {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 1.35rem 0.25rem;
  color: var(--app-muted);
  font-size: 0.75rem;
}

.app-bar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-bg);
}

.app-title-lockup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.app-title-lockup img {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.65rem;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--app-line);
}

.screen-kicker {
  color: var(--app-muted);
  font-size: 0.78rem;
}

.app-bar h3 {
  margin-top: 0.1rem;
  font-size: 1.28rem;
}

.app-bar-actions {
  display: flex;
  gap: 0.45rem;
}

.icon-button,
.quick-actions button,
.segmented button,
.primary-app-button,
.message-form button,
.app-bottom-nav button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.icon-button {
  min-height: 34px;
  padding: 0 0.55rem;
  color: var(--app-text);
  background: var(--app-surface-2);
}

.app-content {
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.app-screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  padding: 1rem;
}

.app-screen.active {
  display: block;
  animation: screenIn 0.22s ease both;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--app-line);
}

.home-greeting,
.screen-block,
.progress-block,
.chat-header,
.profile-name,
.profile-stats,
.app-list-row.static,
.stats-grid article {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

.home-greeting {
  margin-top: 0.8rem;
  padding: 0.9rem;
}

.home-greeting p,
.home-greeting span,
.mini-label,
.stats-grid span,
.progress-block span,
.app-list-row small,
.profile-name p {
  color: var(--app-muted);
  font-size: 0.82rem;
}

.home-greeting h4,
.profile-name h4 {
  margin-top: 0.2rem;
  font-size: 1.3rem;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.quick-actions button,
.primary-app-button {
  min-height: 44px;
  color: #ffffff;
  background: var(--app-primary);
  font-weight: 700;
}

.quick-actions button:last-child {
  color: var(--app-text);
  background: var(--app-surface-2);
}

.app-list,
.event-list,
.match-list,
.feed-list,
.group-list,
.chat-preview {
  display: grid;
  gap: 0.6rem;
}

.app-list {
  margin-top: 0.8rem;
}

.app-list-row,
.event-item,
.candidate-item,
.feed-item,
.group-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  color: var(--app-text);
  background: var(--app-surface);
  text-align: left;
}

.user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 3px var(--app-line);
}

.icon-avatar {
  display: inline-grid !important;
  place-items: center;
  color: #ffffff !important;
  background: var(--app-green);
  font-size: 0.72rem !important;
  font-weight: 900;
  letter-spacing: 0;
}

.event-avatar {
  background: var(--app-primary);
}

.avatar-stack {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  gap: 0 !important;
  color: inherit !important;
}

.avatar-stack .user-avatar {
  width: 2rem;
  height: 2rem;
  margin-right: -0.42rem;
}

.avatar-stack .user-avatar:last-child {
  margin-right: 0;
}

.app-list-row span,
.event-item span,
.candidate-item span,
.feed-item span,
.group-item span {
  display: grid;
  gap: 0.18rem;
  color: var(--app-muted);
  font-size: 0.82rem;
}

.app-list-row strong,
.event-item strong,
.candidate-item strong,
.feed-item strong,
.group-item strong {
  color: var(--app-text);
  font-size: 0.95rem;
}

.feed-filters {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.feed-filters::-webkit-scrollbar {
  display: none;
}

.screen-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.screen-block-head .mini-label {
  margin-bottom: 0;
}

.screen-block-head small {
  color: var(--app-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.mini-create-button,
.sheet-close {
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--app-primary);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
}

.mini-create-button {
  min-height: 30px;
  padding: 0 0.62rem;
}

.sheet-close {
  min-height: 30px;
  padding: 0 0.68rem;
  color: var(--app-muted);
  background: var(--app-surface-2);
}

.phone-event-filters {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.phone-event-filters::-webkit-scrollbar {
  display: none;
}

.phone-event-filters button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 0.72rem;
  color: var(--app-muted);
  background: var(--app-surface-2);
  cursor: pointer;
}

.phone-event-filters button.active {
  color: #ffffff;
  background: var(--app-primary);
}

.feed-filters button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 0.62rem;
  color: var(--app-muted);
  background: var(--app-surface-2);
  cursor: pointer;
}

.feed-filters button.active {
  color: #ffffff;
  background: var(--app-primary);
}

.feed-item,
.group-item {
  min-height: 62px;
}

.feed-item.with-photo {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
}

.feed-identity {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.45rem !important;
  margin-bottom: 0.18rem;
}

.feed-identity .user-avatar {
  width: 1.65rem;
  height: 1.65rem;
}

.feed-identity small {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.feed-item-photo {
  width: 74px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
}

.feed-type,
.group-count {
  color: var(--app-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.stats-grid article {
  padding: 0.8rem;
}

.stats-grid article:first-child {
  grid-column: 1 / -1;
}

.stats-grid strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.8rem;
}

.progress-block {
  margin-top: 0.8rem;
  padding: 0.8rem;
}

.progress-track {
  height: 10px;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 8px;
  background: var(--app-surface-2);
}

.progress-fill {
  width: 14%;
  height: 100%;
  border-radius: 8px;
  background: var(--app-green);
  transition: width 0.25s ease;
}

.screen-block {
  padding: 0.75rem;
  margin-bottom: 0.7rem;
}

.mini-label {
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.event-item.active,
.candidate-item.active {
  border-color: var(--app-primary);
  box-shadow: inset 0 0 0 1px var(--app-primary);
}

.event-item em {
  max-width: 180px;
  overflow: hidden;
  color: var(--app-muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-item small {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  max-width: 108px;
  color: var(--app-muted);
  font-size: 0.72rem;
  text-align: right;
}

.event-item small b {
  color: var(--app-primary);
  font-size: 0.72rem;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.segmented button {
  min-height: 40px;
  padding: 0.35rem;
  color: var(--app-muted);
  background: var(--app-surface-2);
}

.segmented button.active {
  color: #ffffff;
  background: var(--app-primary);
}

.primary-app-button {
  width: 100%;
}

.app-feedback {
  min-height: 1.3rem;
  margin-top: 0.55rem;
  color: var(--app-green);
  font-weight: 700;
  font-size: 0.9rem;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  margin-bottom: 0.75rem;
}

.chat-header strong {
  display: block;
}

.chat-header span {
  color: var(--app-muted);
  font-size: 0.84rem;
}

.chat-preview {
  align-content: end;
  min-height: 430px;
}

.chat-row {
  display: flex;
  align-items: end;
  gap: 0.45rem;
}

.chat-row.from-me {
  justify-content: end;
}

.chat-row.from-me .chat-avatar {
  order: 2;
}

.chat-avatar {
  width: 1.75rem;
  height: 1.75rem;
}

.chat-line {
  max-width: 86%;
  padding: 0.6rem 0.72rem;
  border-radius: 8px;
  line-height: 1.35;
  font-size: 0.9rem;
}

.chat-row.from-me .chat-line {
  justify-self: end;
  color: #ffffff;
  background: var(--app-primary);
}

.chat-row.from-them .chat-line {
  justify-self: start;
  color: var(--app-text);
  background: var(--app-surface-2);
}

.message-form {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding-top: 0.45rem;
  background: var(--app-bg);
}

.message-form input {
  min-width: 0;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 0.65rem;
  color: var(--app-text);
  background: var(--app-surface);
}

.message-form button {
  padding: 0 0.75rem;
  color: #ffffff;
  background: var(--app-primary);
  font-weight: 700;
}

.profile-photo {
  width: 104px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22px;
  border: 3px solid var(--app-bg);
}

.profile-hero {
  position: relative;
  min-height: 172px;
  margin-bottom: 0.7rem;
}

.profile-cover {
  width: 100%;
  height: 148px;
  object-fit: cover;
  border: 1px solid var(--app-line);
  border-radius: 18px;
}

.profile-hero .profile-photo {
  position: absolute;
  left: 0.85rem;
  bottom: 0;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.26);
}

.profile-name {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.85rem;
}

.profile-verified {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.35rem 0.5rem;
  color: #ffffff;
  background: var(--app-green);
  font-size: 0.72rem;
  font-weight: 800;
}

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.85rem;
}

.profile-stats span {
  display: grid;
  color: var(--app-muted);
  font-size: 0.84rem;
}

.profile-stats strong {
  color: var(--app-text);
  font-size: 1.35rem;
}

.profile-bio,
.profile-match-card,
.profile-feed article {
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: var(--app-surface);
}

.profile-bio {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.8rem;
  padding: 0.85rem;
}

.profile-bio p,
.profile-match-card span,
.profile-feed span {
  color: var(--app-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.profile-tags span {
  border-radius: 999px;
  padding: 0.32rem 0.5rem;
  color: var(--app-text);
  background: var(--app-surface-2);
  font-size: 0.72rem;
}

.profile-match-card {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
  padding: 0.85rem;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--app-primary) 22%, transparent), transparent 42%),
    var(--app-surface);
}

.profile-match-card strong {
  font-size: 1rem;
}

.profile-swipe-actions {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.profile-swipe-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  color: var(--app-text);
  background: var(--app-surface-2);
  cursor: pointer;
  font-weight: 800;
  text-transform: lowercase;
}

.profile-swipe-actions button:last-child {
  color: #ffffff;
  background: var(--app-primary);
}

.profile-feed {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.profile-feed article {
  overflow: hidden;
}

.profile-feed img {
  width: 100%;
  height: 136px;
  display: block;
  object-fit: cover;
}

.profile-feed span {
  display: block;
  padding: 0.68rem 0.75rem 0.78rem;
}

.composer-sheet {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-items: end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.composer-sheet.active {
  opacity: 1;
  pointer-events: auto;
}

.composer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.composer-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.7rem;
  margin: 0 0.55rem 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--app-line);
  border-radius: 22px;
  background: var(--app-bg);
  box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.34);
  transform: translateY(20px);
  transition: transform 0.22s ease;
}

.composer-sheet.active .composer-card {
  transform: translateY(0);
}

.composer-card strong {
  display: block;
  margin-top: 0.15rem;
}

.composer-types {
  display: flex;
  gap: 0.38rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.composer-types::-webkit-scrollbar {
  display: none;
}

.composer-types button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 0.7rem;
  color: var(--app-muted);
  background: var(--app-surface-2);
  cursor: pointer;
  font-weight: 800;
}

.composer-types button.active {
  color: #ffffff;
  background: var(--app-primary);
}

.composer-field {
  display: grid;
  gap: 0.32rem;
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.composer-field input,
.composer-field textarea {
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  padding: 0.68rem;
  color: var(--app-text);
  background: var(--app-surface);
  font: inherit;
}

.composer-field textarea {
  min-height: 86px;
  resize: none;
}

.composer-photo-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--app-muted);
  font-size: 0.82rem;
}

.composer-hint {
  color: var(--app-muted);
  font-size: 0.78rem;
}

.composer-submit {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--app-primary);
  cursor: pointer;
  font-weight: 900;
}

.app-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  padding: 0.55rem;
  border-top: 1px solid var(--app-line);
  background: var(--app-bg);
}

.app-bottom-nav button {
  min-height: 46px;
  color: var(--app-muted);
  background: transparent;
  font-size: 0.82rem;
}

.app-bottom-nav button.active {
  color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 12%, transparent);
}

.gtm-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--page-muted);
  line-height: 1.8;
}

.waitlist {
  border-top: 1px solid var(--page-line);
}

.signup-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.signup-card {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  border: 1px solid var(--page-line);
  border-radius: 22px;
  padding: clamp(1rem, 3vw, 1.3rem);
  background: rgba(255, 255, 255, 0.84);
}

.help-card {
  background:
    radial-gradient(circle at 90% 8%, rgba(15, 143, 99, 0.16), transparent 28%),
    rgba(255, 255, 255, 0.9);
}

.feedback-card {
  grid-column: 1 / -1;
  min-height: 230px;
  align-content: center;
  background:
    linear-gradient(120deg, rgba(4, 55, 37, 0.92), rgba(15, 143, 99, 0.8)),
    radial-gradient(circle at 86% 20%, rgba(244, 184, 65, 0.36), transparent 30%);
  color: #fffaf0;
}

.feedback-card p {
  max-width: 68ch;
  color: rgba(255, 250, 240, 0.78);
}

.feedback-card .button {
  width: fit-content;
  border-color: rgba(255, 250, 240, 0.22);
  background: #fffaf0;
  color: #083a29;
}

.signup-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  align-items: end;
}

.signup-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--page-muted);
  font-size: 0.88rem;
}

.signup-form input,
.signup-form textarea {
  border: 1px solid var(--page-line);
  border-radius: 8px;
  padding: 0.65rem;
  color: var(--page-ink);
  background: #ffffff;
}

.signup-form textarea {
  resize: vertical;
}

.wide-field {
  grid-column: 1 / -1;
}

.form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consent-field {
  grid-column: 1 / -1;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 0.55rem !important;
  max-width: 78ch;
}

.consent-field input {
  width: 1rem;
  margin-top: 0.2rem;
}

.consent-field a,
.footer-links a,
.legal-card a {
  color: var(--page-primary);
  font-weight: 800;
}

.waitlist-message {
  min-height: 1.5rem;
  margin-top: 0.9rem;
  color: var(--page-primary);
  font-weight: 700;
}

.form-error {
  color: #a3311e;
}

.survey-main {
  width: min(100% - 2rem, 1040px);
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 7rem) 0;
}

.survey-hero {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.survey-hero h1 {
  max-width: 13ch;
}

.survey-hero p {
  max-width: 72ch;
  color: var(--page-muted);
  line-height: 1.65;
}

.survey-mode-toggle {
  display: inline-flex;
  width: fit-content;
  gap: 0.35rem;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  padding: 0.28rem;
  background: rgba(255, 255, 255, 0.72);
}

.survey-mode-toggle button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  color: var(--page-muted);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.survey-mode-toggle button.active {
  color: #fffaf0;
  background: var(--page-primary);
}

.survey-form {
  display: grid;
  gap: 1rem;
}

.survey-card {
  position: relative;
  display: grid;
  gap: 1rem;
  border: 1px solid var(--page-line);
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 1.55rem);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 60px rgba(20, 20, 20, 0.055);
}

.survey-card h2 {
  max-width: 18ch;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.survey-step {
  width: fit-content;
  border-radius: 999px;
  padding: 0.26rem 0.55rem;
  color: #fffaf0;
  background: var(--page-primary);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.survey-grid,
.rating-grid,
.checkbox-grid {
  display: grid;
  gap: 0.75rem;
}

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

.rating-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-grid label {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
}

.checkbox-grid input {
  width: auto;
}

.survey-form label {
  display: grid;
  gap: 0.38rem;
  color: var(--page-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.survey-form input,
.survey-form select,
.survey-form textarea {
  width: 100%;
  border: 1px solid var(--page-line);
  border-radius: 12px;
  padding: 0.72rem 0.75rem;
  color: var(--page-ink);
  background: #ffffff;
  font: inherit;
}

.survey-form select {
  min-height: 46px;
}

.survey-hint {
  color: var(--page-muted);
}

.survey-textarea {
  margin-top: 0.3rem;
}

.survey-submit-card {
  background:
    radial-gradient(circle at 92% 15%, rgba(244, 184, 65, 0.18), transparent 28%),
    rgba(255, 255, 255, 0.92);
}

.survey-submit-card .button {
  width: fit-content;
}

.survey-card[hidden] {
  display: none;
}

.site-footer {
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid var(--page-line);
  padding: 1.5rem 1rem 2.8rem;
  text-align: center;
  color: var(--page-muted);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links a {
  text-decoration: none;
}

.legal-main {
  width: min(100% - 2rem, 920px);
  margin-inline: auto;
  padding: 5rem 0;
}

.legal-hero {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.legal-hero h1 {
  max-width: 12ch;
}

.legal-hero p {
  max-width: 72ch;
  color: var(--page-muted);
  line-height: 1.65;
}

.legal-alert {
  border: 1px solid rgba(232, 77, 53, 0.32);
  border-radius: 18px;
  padding: 1rem;
  color: #7a2a1d;
  background: rgba(232, 77, 53, 0.08);
}

.legal-grid {
  display: grid;
  gap: 1rem;
}

.legal-card {
  border: 1px solid var(--page-line);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: rgba(255, 255, 255, 0.86);
}

.legal-card h2 {
  max-width: none;
  margin-bottom: 0.8rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.legal-card h3 {
  margin-top: 1rem;
  margin-bottom: 0.45rem;
}

.legal-card p,
.legal-card li {
  color: var(--page-muted);
  line-height: 1.7;
}

.legal-card ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

/* CampusCar art direction pass: route-led, asymmetric, animated. */
* {
  letter-spacing: 0 !important;
}

:root {
  --page-bg: #f3f5ed;
  --page-ink: #161915;
  --page-muted: #5f665e;
  --page-line: rgba(22, 25, 21, 0.14);
  --page-surface: rgba(255, 255, 249, 0.82);
  --page-primary: #087a51;
  --page-accent: #d94f35;
  --page-yellow: #e4bf45;
  --route-ink: rgba(8, 122, 81, 0.18);
  --route-progress: 0;
  --mouse-x: 0px;
  --mouse-y: 0px;
}

html {
  background: #edf2e8;
}

body {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(8, 122, 81, 0.08) 0 1px, transparent 1px 118px),
    linear-gradient(180deg, #fffdf3 0%, #f4f6eb 42%, #e7f0ec 100%);
  background-size: 118px 118px, auto;
}

body > * {
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.48;
  background:
    linear-gradient(128deg, transparent 0 20%, var(--route-ink) 20.15% 20.45%, transparent 20.6% 43%, rgba(217, 79, 53, 0.16) 43.1% 43.35%, transparent 43.5% 100%),
    linear-gradient(32deg, transparent 0 58%, rgba(228, 191, 69, 0.2) 58.1% 58.35%, transparent 58.5% 100%);
  transform: translate3d(calc(var(--mouse-x) * -0.012), calc(var(--mouse-y) * -0.012), 0);
  transition: transform 0.35s ease;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: calc(var(--route-progress) * 100%);
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--page-primary), var(--page-yellow), var(--page-accent));
  box-shadow: 0 0 22px rgba(8, 122, 81, 0.24);
}

.site-header {
  padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(255, 253, 243, 0.74);
  border-bottom-color: rgba(22, 25, 21, 0.1);
  box-shadow: 0 10px 40px rgba(22, 25, 21, 0.05);
}

.brand-mark {
  border-radius: 38% 62% 44% 56% / 56% 42% 58% 44%;
  animation: markBreathe 7s ease-in-out infinite;
}

.site-nav a {
  position: relative;
  padding: 0.35rem 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.section {
  position: relative;
  padding: clamp(4.75rem, 9vw, 8rem) 0;
}

.section-headline {
  grid-template-columns: minmax(0, 0.72fr) minmax(240px, 1fr);
  align-items: end;
  gap: clamp(1rem, 4vw, 3rem);
}

.section-headline .eyebrow {
  align-self: start;
}

.section-headline h2 {
  max-width: 13.4ch;
}

.section:nth-of-type(2n + 3) .section-headline h2 {
  max-width: 18ch;
  margin-left: auto;
  text-align: right;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  color: var(--page-primary);
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
}

h1,
h2 {
  text-wrap: balance;
}

h1 {
  max-width: 9.8ch;
  font-size: clamp(4rem, 10vw, 8.6rem);
  line-height: 0.86;
}

h2 {
  font-size: clamp(2.5rem, 6.8vw, 5.45rem);
  line-height: 0.92;
}

h3 {
  line-height: 1.08;
}

.hero {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 61px);
  padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 7vw, 8rem);
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero::before {
  inset: 9% -10% 0 36%;
  z-index: 0;
  border: 2px solid rgba(8, 122, 81, 0.18);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 52% 0 0;
  transform: rotate(-8deg) translate3d(calc(var(--mouse-x) * 0.018), calc(var(--mouse-y) * 0.018), 0);
}

.hero::after {
  right: clamp(1rem, 7vw, 8rem);
  bottom: 13%;
  width: min(48vw, 620px);
  height: 34%;
  border-top: 1px solid rgba(22, 25, 21, 0.22);
  border-bottom: 1px solid rgba(22, 25, 21, 0.1);
  transform: skewY(-7deg);
  opacity: 0.8;
}

.hero > :not(.hero-brand-card, .hero-route) {
  max-width: min(760px, 92vw);
}

.hero-copy {
  max-width: 51ch;
  font-size: clamp(1.02rem, 1.35vw, 1.32rem);
}

.hero-actions {
  margin-top: 0.3rem;
}

.button {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  border-radius: 999px;
  padding-inline: 1.15rem;
  box-shadow: 0 14px 30px rgba(22, 25, 21, 0.08);
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.button:hover::after {
  transform: translateX(120%);
}

.hero-proof {
  max-width: 54rem;
  gap: 0;
  margin-top: 1.25rem;
  border-block: 1px solid rgba(22, 25, 21, 0.16);
}

.hero-proof span {
  border: 0;
  border-radius: 0;
  padding: 0.8rem 1rem 0.8rem 0;
  background: transparent;
}

.hero-proof span + span {
  padding-left: 1rem;
  border-left: 1px solid rgba(22, 25, 21, 0.14);
}

.hero-brand-card {
  right: clamp(1rem, 8vw, 10rem);
  width: min(30vw, 360px);
  border-radius: 41% 59% 49% 51% / 52% 42% 58% 48%;
  filter: drop-shadow(0 34px 60px rgba(8, 70, 52, 0.22));
  transform: translate3d(calc(var(--mouse-x) * 0.022), calc(-45% + var(--mouse-y) * 0.022), 0) rotate(4deg);
  animation: heroDrive 8s ease-in-out infinite;
}

.hero-brand-card::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border: 1px solid rgba(8, 122, 81, 0.22);
  border-radius: 48% 52% 42% 58% / 52% 41% 59% 48%;
  animation: routePulse 5.8s ease-in-out infinite;
}

.hero-brand-card img {
  border-radius: inherit;
}

.hero-route {
  position: absolute;
  right: clamp(0.5rem, 7vw, 7rem);
  bottom: 14%;
  z-index: 0;
  width: min(44vw, 580px);
  height: 12rem;
  pointer-events: none;
  transform: rotate(-7deg);
}

.hero-route span {
  position: absolute;
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(8, 122, 81, 0.58), transparent);
  transform-origin: left;
  animation: routeDraw 4.8s ease-in-out infinite;
}

.hero-route span:nth-child(1) {
  left: 0;
  top: 42%;
  width: 78%;
}

.hero-route span:nth-child(2) {
  left: 28%;
  top: 23%;
  width: 48%;
  animation-delay: 0.45s;
  transform: rotate(-13deg);
}

.hero-route span:nth-child(3) {
  left: 18%;
  top: 64%;
  width: 58%;
  animation-delay: 0.9s;
  transform: rotate(15deg);
}

.flow-list {
  width: min(100%, 920px);
  margin-left: auto;
  counter-reset: flow;
}

.flow-list li {
  position: relative;
  grid-template-columns: minmax(3rem, 0.16fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: 1.05rem 0 1.2rem;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
}

.flow-list span,
.journey-grid span,
.mission-grid span,
.feature-grid span,
.business-grid span,
.event-thesis-grid span,
.impact-grid span,
.gtm-grid span,
.story-timeline span {
  border-radius: 45% 55% 40% 60% / 58% 42% 58% 42%;
}

.moment-card,
.mission-panel,
.business-panel {
  position: relative;
  border: 0;
  border-radius: 2rem 5rem 2rem 3rem;
  box-shadow: 0 24px 70px rgba(22, 25, 21, 0.08);
}

.moment-card {
  overflow: hidden;
}

.moment-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 79, 53, 0.42));
}

.negative-line,
.positive-line {
  font-size: clamp(1.8rem, 4.6vw, 4.55rem);
  line-height: 0.94;
}

.journey-grid,
.problem-grid,
.marketplace-grid,
.feature-grid,
.impact-grid,
.gtm-grid,
.mission-grid,
.business-grid,
.event-thesis-grid {
  align-items: stretch;
}

.journey-grid article,
.problem-grid article,
.marketplace-grid article,
.feature-grid article,
.impact-grid article,
.gtm-grid article,
.mission-grid article,
.control-grid article,
.business-grid article,
.event-thesis-grid article,
.data-grid article,
.story-principles article,
.legal-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(22, 25, 21, 0.1);
  background: rgba(255, 255, 249, 0.74);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 54px rgba(22, 25, 21, 0.055);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.journey-grid article:nth-child(1),
.marketplace-grid article:nth-child(2),
.feature-grid article:nth-child(3),
.impact-grid article:nth-child(1),
.business-grid article:nth-child(4) {
  border-radius: 2rem 0.9rem 2.6rem 0.9rem;
}

.journey-grid article:nth-child(2),
.marketplace-grid article:nth-child(3),
.feature-grid article:nth-child(1),
.impact-grid article:nth-child(2),
.business-grid article:nth-child(1) {
  border-radius: 0.9rem 2.8rem 1rem 2.2rem;
}

.journey-grid article:hover,
.problem-grid article:hover,
.marketplace-grid article:hover,
.feature-grid article:hover,
.impact-grid article:hover,
.gtm-grid article:hover,
.mission-grid article:hover,
.control-grid article:hover,
.business-grid article:hover,
.event-thesis-grid article:hover,
.data-grid article:hover,
.story-principles article:hover {
  border-color: rgba(8, 122, 81, 0.26);
  box-shadow: 0 26px 70px rgba(22, 25, 21, 0.095);
  transform: translateY(-6px);
}

.app-section {
  position: relative;
  align-items: center;
}

.app-section::before {
  content: "";
  position: absolute;
  left: 44%;
  top: 11%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(8, 122, 81, 0.38), transparent);
  transform: skewX(-12deg);
}

.app-proof li {
  position: relative;
  border-left: 0;
  padding-left: 1.6rem;
}

.app-proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 45% 55% 40% 60%;
  background: var(--page-yellow);
  transform: rotate(18deg);
}

.device-shell {
  border-radius: 58px 38px 70px 42px;
  transform: translateY(0) rotate(1.4deg);
  animation: phoneFloat 7s ease-in-out infinite;
}

.phone-app {
  border-radius: 46px 30px 58px 34px;
}

.app-list-row,
.event-item,
.candidate-item,
.feed-item,
.group-item,
.home-greeting,
.screen-block,
.progress-block,
.chat-header,
.profile-name,
.profile-stats,
.app-list-row.static,
.stats-grid article {
  border-radius: 15px 10px 18px 10px;
}

.event-item.active,
.candidate-item.active {
  transform: translateX(3px);
}

.story-photo,
.award-photo {
  border: 0;
  border-radius: 18% 7% 20% 8% / 8% 18% 7% 20%;
}

.story-layout {
  align-items: center;
}

.story-copy {
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.story-copy-block {
  display: grid;
  gap: clamp(0.8rem, 1.5vw, 1rem);
}

.story-copy-block:nth-child(2) {
  max-width: 52ch;
  margin-left: clamp(0rem, 7vw, 5rem);
}

.story-copy-block:nth-child(1) {
  max-width: 58ch;
}

.story-timeline {
  border: 0;
  gap: 1px;
  background: rgba(22, 25, 21, 0.12);
}

.story-timeline article {
  border: 0;
  background: rgba(255, 255, 249, 0.82);
}

.crawl-stats span,
.hero-proof span,
.profile-tags span,
.language-switch,
.phone-event-filters button,
.feed-filters button {
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.crawl-stats span:hover,
.phone-event-filters button:hover,
.feed-filters button:hover {
  transform: translateY(-2px);
}

.motion-scene {
  --scene-progress: 0;
  --scene-enter: 0;
  --scene-drive: 0;
  --scene-smoke: 0;
  --social-left-x: -98px;
  --social-right-x: 98px;
  --social-left-rotate: -10deg;
  --social-right-rotate: 10deg;
  --social-eye-lift: 0px;
  --social-sad: 1;
  --social-happy: 0;
  --social-lines: 0;
  --eco-sun-y: 64px;
  --eco-sun-scale: 0.74;
  --eco-cloud-opacity: 1;
  --eco-cloud-left: 0px;
  --eco-cloud-right: 0px;
  --eco-flower-scale: 0;
  --money-rise: 34px;
  --money-rise-mid: 22px;
  --money-rise-top: 12px;
  --money-opacity: 0;
  --money-opacity-mid: 0;
  --money-opacity-top: 0;
  --money-tape-rise: -70px;
  --money-button-ring: 0px;
  --boarding-person-opacity: 1;
  --car-passenger-opacity: 0;
  --car-passenger-y: 14px;
}

.sprite-img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.boarding-scene,
.emission-scene {
  position: relative;
  overflow: hidden;
  margin: clamp(1.6rem, 5vw, 3.4rem) 0;
  border: 1px solid rgba(22, 25, 21, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 253, 243, 0.92), rgba(231, 240, 236, 0.82)),
    radial-gradient(circle at 18% 22%, rgba(228, 191, 69, 0.2), transparent 32%);
  box-shadow: 0 30px 90px rgba(22, 25, 21, 0.08);
  perspective: 900px;
}

.boarding-scene {
  min-height: clamp(280px, 38vw, 470px);
  border-radius: 4.5rem 1.4rem 5.5rem 1.8rem;
}

.boarding-skyline {
  position: absolute;
  inset: auto 7% 22% 7%;
  height: 38%;
  opacity: 0.62;
}

.boarding-skyline span {
  position: absolute;
  bottom: 0;
  width: 14%;
  border: 1px solid rgba(8, 122, 81, 0.12);
  border-bottom: 0;
  background: rgba(8, 122, 81, 0.06);
}

.boarding-skyline span:nth-child(1) {
  left: 8%;
  height: 42%;
  border-radius: 1.4rem 1.4rem 0 0;
}

.boarding-skyline span:nth-child(2) {
  left: 48%;
  height: 62%;
  border-radius: 2.4rem 2.4rem 0 0;
}

.boarding-skyline span:nth-child(3) {
  right: 8%;
  height: 34%;
  border-radius: 1rem 1rem 0 0;
}

.boarding-route {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 23%;
  height: 4px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(22, 25, 21, 0.32) 0 34px, transparent 34px 58px);
  transform: skewY(-4deg) rotateX(58deg);
  transform-origin: center;
}

.boarding-person {
  position: absolute;
  bottom: 27%;
  width: clamp(42px, 5vw, 68px);
  height: clamp(92px, 10vw, 134px);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease;
}

.person-left {
  left: calc(9% + var(--scene-enter) * 28%);
  transform: translateY(calc(var(--scene-enter) * -5px)) scale(calc(1 - var(--scene-drive) * 0.32));
  opacity: calc(1 - var(--scene-drive) * 0.82);
}

.person-right {
  left: calc(18% + var(--scene-enter) * 30%);
  transform: translateY(calc(var(--scene-enter) * -7px)) scale(calc(1 - var(--scene-drive) * 0.34));
  opacity: calc(1 - var(--scene-drive) * 0.86);
}

.person-head,
.person-body,
.person-arm,
.person-leg,
.person-shadow {
  position: absolute;
  display: block;
}

.person-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(22, 25, 21, 0.16));
}

.boarding-person > span {
  display: none;
}

.person-shadow {
  left: 11%;
  right: 11%;
  bottom: -4px;
  height: 10px;
  border-radius: 50%;
  background: rgba(22, 25, 21, 0.16);
  filter: blur(2px);
}

.person-head {
  left: 28%;
  top: 0;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50% 46% 48% 52%;
  background: #f0b79b;
  box-shadow: inset -7px -8px 0 rgba(92, 55, 41, 0.12);
}

.person-body {
  left: 24%;
  top: 34%;
  width: 52%;
  height: 36%;
  border-radius: 45% 55% 34% 66% / 32% 38% 62% 68%;
  background: var(--page-primary);
  box-shadow: inset -8px -8px 0 rgba(0, 0, 0, 0.1);
}

.person-right .person-body {
  background: var(--page-accent);
}

.person-arm {
  top: 41%;
  width: 13%;
  height: 32%;
  border-radius: 999px;
  background: #f0b79b;
  transform-origin: 50% 8%;
}

.arm-front {
  left: 20%;
  animation: walkArm 0.74s ease-in-out infinite;
}

.arm-back {
  right: 20%;
  animation: walkArm 0.74s ease-in-out infinite reverse;
}

.person-leg {
  top: 66%;
  width: 15%;
  height: 34%;
  border-radius: 999px;
  background: #20251f;
  transform-origin: 50% 5%;
}

.leg-front {
  left: 31%;
  animation: walkLeg 0.74s ease-in-out infinite;
}

.leg-back {
  right: 31%;
  animation: walkLeg 0.74s ease-in-out infinite reverse;
}

.boarding-car {
  position: absolute;
  left: calc(48% + var(--scene-drive) * 58%);
  bottom: 22%;
  width: clamp(210px, 28vw, 390px);
  height: clamp(96px, 13vw, 170px);
  transform: translateX(-50%) rotateY(-16deg) rotateZ(calc(var(--scene-drive) * -3deg));
  transform-style: preserve-3d;
  transition: transform 0.08s linear;
}

.car-shadow,
.car-body,
.car-cabin,
.car-window,
.car-door,
.car-wheel {
  position: absolute;
  display: block;
}

.car-sprite {
  position: absolute;
  inset: -8% -5% -14%;
  z-index: 2;
  width: 110%;
  height: 122%;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(8, 80, 56, 0.24));
}

.boarding-car > span {
  display: none;
}

.car-shadow {
  left: 5%;
  right: 4%;
  bottom: -10%;
  height: 20%;
  border-radius: 50%;
  background: rgba(22, 25, 21, 0.22);
  filter: blur(12px);
  transform: rotateX(64deg);
}

.car-body {
  left: 4%;
  right: 4%;
  bottom: 18%;
  height: 44%;
  border-radius: 2.3rem 1rem 1.5rem 2.2rem;
  background: linear-gradient(145deg, #0a8f61, #056542);
  box-shadow: inset -22px -18px 0 rgba(0, 0, 0, 0.13), 0 20px 38px rgba(8, 80, 56, 0.25);
}

.car-cabin {
  left: 28%;
  top: 6%;
  width: 42%;
  height: 50%;
  border-radius: 2.2rem 2.6rem 0.7rem 0.9rem;
  background: linear-gradient(145deg, #dff1ed, #7ab8a6);
  clip-path: polygon(18% 0, 78% 0, 100% 100%, 0 100%);
}

.car-window {
  top: 15%;
  width: 15%;
  height: 24%;
  border-radius: 0.8rem 0.8rem 0.2rem 0.2rem;
  background: rgba(255, 253, 243, 0.78);
}

.window-left {
  left: 34%;
}

.window-right {
  left: 52%;
}

.car-door {
  left: 47%;
  top: 42%;
  height: 35%;
  width: 1px;
  background: rgba(255, 255, 255, 0.26);
}

.car-wheel {
  bottom: 8%;
  width: 16%;
  aspect-ratio: 1;
  border: 9px solid #1c211c;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f8f1cf 0 18%, transparent 19%),
    repeating-conic-gradient(from 0deg, #2b3029 0 18deg, #576157 18deg 32deg);
  animation: wheelSpin 0.9s linear infinite;
}

.wheel-left {
  left: 18%;
}

.wheel-right {
  right: 15%;
}

.boarding-signal {
  position: absolute;
  right: 12%;
  top: 18%;
  width: 22%;
  height: 32%;
  opacity: calc(var(--scene-drive) * 1);
}

.boarding-signal span {
  position: absolute;
  left: 0;
  top: calc(var(--i) * 30%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 79, 53, 0.48));
  transform: scaleX(var(--scene-drive));
  transform-origin: left;
}

.boarding-signal span:nth-child(1) {
  --i: 0;
}

.boarding-signal span:nth-child(2) {
  --i: 1;
}

.boarding-signal span:nth-child(3) {
  --i: 2;
}

.emission-scene {
  min-height: clamp(360px, 42vw, 560px);
  border-radius: 1.4rem 5rem 1.6rem 4rem;
  background:
    linear-gradient(180deg, rgba(255, 253, 243, 0.9), rgba(230, 236, 226, 0.92)),
    linear-gradient(115deg, rgba(8, 122, 81, 0.08), rgba(217, 79, 53, 0.1));
}

.emission-road {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 21%;
  height: 27%;
  background: linear-gradient(180deg, rgba(22, 25, 21, 0.86), #11140f);
  transform: rotateX(58deg) rotateZ(-4deg);
  transform-origin: center;
  box-shadow: 0 26px 80px rgba(22, 25, 21, 0.25);
}

.emission-road span {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 253, 243, 0.86) 0 50px, transparent 50px 84px);
  transform: translateX(calc(var(--scene-progress) * -120px));
}

.emission-road span:first-child {
  top: 42%;
}

.emission-road span:last-child {
  top: 62%;
  opacity: 0.4;
}

.emission-campus {
  position: absolute;
  inset: 12% 6% auto auto;
  width: min(34vw, 410px);
  height: 35%;
  opacity: 0.76;
  transform: translateY(calc(var(--scene-progress) * -18px));
}

.emission-campus span {
  position: absolute;
  bottom: 0;
  border: 1px solid rgba(8, 122, 81, 0.14);
  background: rgba(255, 253, 243, 0.78);
  box-shadow: 0 16px 36px rgba(22, 25, 21, 0.05);
}

.emission-campus span:nth-child(1) {
  left: 0;
  width: 32%;
  height: 62%;
  border-radius: 1.5rem 1.5rem 0.3rem 0.3rem;
}

.emission-campus span:nth-child(2) {
  left: 34%;
  width: 28%;
  height: 92%;
  border-radius: 2.4rem 2.4rem 0.4rem 0.4rem;
}

.emission-campus span:nth-child(3) {
  right: 0;
  width: 34%;
  height: 48%;
  border-radius: 1rem 1rem 0.3rem 0.3rem;
}

.emission-car {
  position: absolute;
  left: calc(-18% + var(--scene-progress) * 92%);
  bottom: 26%;
  width: clamp(230px, 32vw, 470px);
  height: clamp(126px, 16vw, 230px);
  transform: translateZ(40px) rotateY(-24deg) rotateX(4deg) rotateZ(calc(-8deg + var(--scene-drive) * 5deg));
  transform-style: preserve-3d;
}

.emission-car-shadow,
.emission-car-body,
.emission-car-side,
.emission-car-roof,
.emission-car-window,
.emission-wheel {
  position: absolute;
  display: block;
}

.emission-car-sprite {
  position: absolute;
  inset: -10% -6% -14%;
  z-index: 2;
  width: 112%;
  height: 124%;
  object-fit: contain;
  filter: drop-shadow(0 30px 28px rgba(8, 80, 56, 0.32));
}

.emission-car > span {
  display: none;
}

.emission-car-shadow {
  left: 7%;
  right: 3%;
  bottom: -2%;
  height: 18%;
  border-radius: 50%;
  background: rgba(22, 25, 21, 0.26);
  filter: blur(16px);
  transform: rotateX(68deg);
}

.emission-car-body {
  left: 6%;
  right: 4%;
  bottom: 18%;
  height: 46%;
  border-radius: 3rem 1.3rem 1.7rem 2.8rem;
  background: linear-gradient(140deg, #0b8a5f, #075339);
  box-shadow: inset -30px -22px 0 rgba(0, 0, 0, 0.18), 0 26px 58px rgba(8, 80, 56, 0.34);
}

.emission-car-side {
  right: 0;
  bottom: 21%;
  width: 16%;
  height: 38%;
  border-radius: 0 1.1rem 1.1rem 0;
  background: #043a2a;
  transform: translateZ(-42px) skewY(10deg);
}

.emission-car-roof {
  left: 28%;
  top: 8%;
  width: 44%;
  height: 48%;
  border-radius: 3rem 3.2rem 0.8rem 1rem;
  background: linear-gradient(145deg, #cce9e1, #63a890);
  clip-path: polygon(18% 0, 78% 0, 100% 100%, 0 100%);
  transform: translateZ(22px);
}

.emission-car-window {
  left: 39%;
  top: 18%;
  width: 25%;
  height: 24%;
  border-radius: 1rem 1.2rem 0.2rem 0.2rem;
  background: rgba(255, 253, 243, 0.8);
  transform: translateZ(36px);
}

.emission-wheel {
  bottom: 7%;
  width: 16%;
  aspect-ratio: 1;
  border: 10px solid #151914;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f7edd1 0 16%, transparent 17%),
    repeating-conic-gradient(from 0deg, #2d332b 0 16deg, #61695e 16deg 30deg);
  animation: wheelSpin 0.68s linear infinite;
}

.wheel-a {
  left: 18%;
}

.wheel-b {
  right: 16%;
}

.emission-smoke {
  position: absolute;
  left: calc(-28% + var(--scene-progress) * 92%);
  bottom: 37%;
  width: 34%;
  height: 38%;
  pointer-events: none;
  opacity: calc(0.18 + var(--scene-smoke) * 0.82);
  filter: blur(calc(1px + var(--scene-smoke) * 4px));
}

.emission-smoke span {
  position: absolute;
  display: block;
  width: clamp(54px, 9vw, 130px);
  aspect-ratio: 1;
  border-radius: 48% 52% 44% 56%;
  background: rgba(67, 73, 66, 0.22);
  transform: translate3d(calc(var(--scene-smoke) * -90px), calc(var(--scene-smoke) * -36px), 0) scale(calc(0.5 + var(--scene-smoke) * 1.45));
  animation: smokeMorph 3.2s ease-in-out infinite;
}

.emission-smoke span:nth-child(1) {
  right: 2%;
  bottom: 2%;
}

.emission-smoke span:nth-child(2) {
  right: 19%;
  bottom: 24%;
  animation-delay: 0.45s;
}

.emission-smoke span:nth-child(3) {
  right: 38%;
  bottom: 8%;
  animation-delay: 0.9s;
}

.emission-smoke span:nth-child(4) {
  right: 55%;
  bottom: 33%;
  animation-delay: 1.25s;
}

.emission-footprint {
  position: absolute;
  left: 8%;
  top: 12%;
  display: grid;
  place-items: center;
  width: clamp(110px, 16vw, 210px);
  aspect-ratio: 1;
  border: 1px solid rgba(217, 79, 53, 0.22);
  border-radius: 50% 42% 54% 46%;
  color: rgba(217, 79, 53, 0.92);
  background: rgba(255, 253, 243, 0.72);
  font-family: "Fraunces", serif;
  font-size: clamp(2.6rem, 7vw, 6.2rem);
  line-height: 0.9;
  transform: scale(calc(0.78 + var(--scene-smoke) * 0.22)) rotate(calc(var(--scene-progress) * -5deg));
  box-shadow: 0 22px 60px rgba(217, 79, 53, 0.13);
}

.impact-card {
  min-height: 430px !important;
  align-content: start !important;
  gap: 0.8rem !important;
}

.impact-visual {
  position: relative;
  min-height: 178px;
  margin: 0.2rem 0 0.45rem;
  overflow: hidden;
  border-radius: 2rem 0.9rem 2.4rem 1rem;
  background:
    linear-gradient(145deg, rgba(255, 253, 243, 0.78), rgba(232, 240, 235, 0.72)),
    radial-gradient(circle at 18% 20%, rgba(228, 191, 69, 0.18), transparent 34%);
  box-shadow: inset 0 0 0 1px rgba(22, 25, 21, 0.08);
}

.face {
  position: absolute;
  top: 34px;
  width: 88px;
  aspect-ratio: 1;
  transition: transform 0.08s linear;
}

.face-left {
  left: 12%;
  transform: translateX(var(--social-left-x)) rotate(var(--social-left-rotate));
}

.face-right {
  right: 12%;
  transform: translateX(var(--social-right-x)) rotate(var(--social-right-rotate));
}

.face-img {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(22, 25, 21, 0.13));
  transition: opacity 0.08s linear;
}

.face-sad-img {
  opacity: var(--social-sad);
}

.face-happy-img {
  opacity: var(--social-happy);
}

.face > span {
  display: none;
}

.face-hair {
  position: absolute;
  left: 5%;
  top: -6%;
  width: 74%;
  height: 34%;
  border-radius: 60% 40% 42% 58%;
  background: #28231f;
}

.face-right .face-hair {
  left: auto;
  right: 4%;
  width: 68%;
  background: #5a3a2d;
}

.face-eye {
  position: absolute;
  top: 42%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d211c;
  transform: translateY(var(--social-eye-lift));
}

.eye-left {
  left: 30%;
}

.eye-right {
  right: 30%;
}

.mouth {
  position: absolute;
  left: 31%;
  bottom: 22%;
  width: 38%;
  height: 18%;
  border-radius: 50%;
}

.mouth-sad {
  border-top: 4px solid #6e3327;
  opacity: var(--social-sad);
  transform: translateY(6px);
}

.mouth-happy {
  border-bottom: 4px solid #6e3327;
  opacity: var(--social-happy);
  transform: translateY(-3px);
}

.meeting-lines {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 120px;
  height: 80px;
  transform: translate(-50%, -50%) scale(var(--scene-progress));
  opacity: var(--social-lines);
}

.meeting-lines span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 46px;
  background: rgba(8, 122, 81, 0.38);
  transform-origin: 50% 100%;
}

.meeting-lines span:nth-child(1) {
  transform: rotate(-34deg);
}

.meeting-lines span:nth-child(2) {
  transform: rotate(0deg);
}

.meeting-lines span:nth-child(3) {
  transform: rotate(34deg);
}

.eco-visual {
  background:
    linear-gradient(180deg, rgba(204, 231, 224, 0.64), rgba(255, 253, 243, 0.78) 58%, rgba(214, 232, 207, 0.78));
}

.eco-sun {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 82px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe79d 0 54%, #e4bf45 55% 100%);
  box-shadow: 0 0 42px rgba(228, 191, 69, 0.44);
  transform: translate(-50%, var(--eco-sun-y)) scale(var(--eco-sun-scale));
}

.eco-cloud {
  position: absolute;
  top: 34%;
  width: 120px;
  height: 70px;
  background: url("./assets/animation-sprites/co2-cloud.png") center / contain no-repeat;
  filter: blur(0.2px);
  opacity: var(--eco-cloud-opacity);
}

.eco-cloud::before,
.eco-cloud::after {
  display: none;
}

.eco-cloud::before {
  left: 18px;
  width: 54px;
  aspect-ratio: 1;
}

.eco-cloud::after {
  right: 20px;
  width: 66px;
  aspect-ratio: 1;
}

.cloud-left {
  left: 16%;
  transform: translateX(var(--eco-cloud-left));
}

.cloud-right {
  right: 12%;
  transform: translateX(var(--eco-cloud-right));
}

.eco-ground {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 24px;
  height: 4px;
  border-radius: 999px;
  background: rgba(8, 122, 81, 0.26);
}

.eco-flower {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 102px;
  height: 126px;
  transform: translateX(-50%);
}

.flower-sprite {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 118px;
  height: 148px;
  object-fit: contain;
  transform: translateX(-50%) scale(var(--eco-flower-scale));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 12px 10px rgba(8, 80, 56, 0.18));
}

.eco-flower > span {
  display: none;
}

.flower-stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 88px;
  border-radius: 999px;
  background: var(--page-primary);
  transform: translateX(-50%) scaleY(var(--eco-flower-scale));
  transform-origin: 50% 100%;
}

.flower-leaf {
  position: absolute;
  bottom: 34px;
  width: 42px;
  height: 24px;
  border-radius: 100% 0 100% 0;
  background: #3aa06c;
  transform: scale(var(--eco-flower-scale));
}

.leaf-left {
  right: 49%;
  transform-origin: 100% 100%;
  rotate: -22deg;
}

.leaf-right {
  left: 49%;
  transform-origin: 0 100%;
  rotate: 22deg;
}

.flower-head {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 68px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 23%, #f1c949 24% 36%, transparent 37%),
    conic-gradient(from 0deg, #f1c949 0 18deg, transparent 18deg 38deg, #f1c949 38deg 58deg, transparent 58deg 78deg, #f1c949 78deg 98deg, transparent 98deg 118deg, #f1c949 118deg 138deg, transparent 138deg 158deg, #f1c949 158deg 178deg, transparent 178deg 198deg, #f1c949 198deg 218deg, transparent 218deg 238deg, #f1c949 238deg 258deg, transparent 258deg 278deg, #f1c949 278deg 298deg, transparent 298deg 318deg, #f1c949 318deg 338deg, transparent 338deg 360deg);
  transform: translateX(-50%) scale(var(--eco-flower-scale));
  transform-origin: 50% 100%;
}

.flower-core {
  position: absolute;
  left: 50%;
  top: 27px;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--page-accent);
  transform: translateX(-50%) scale(var(--eco-flower-scale));
}

.money-visual {
  background:
    linear-gradient(145deg, rgba(255, 253, 243, 0.86), rgba(239, 232, 190, 0.68)),
    radial-gradient(circle at 78% 18%, rgba(8, 122, 81, 0.15), transparent 34%);
}

.money-machine {
  position: absolute;
  left: 9%;
  bottom: 28px;
  width: 44%;
  height: 112px;
  background: transparent;
}

.money-machine-sprite {
  position: absolute;
  inset: -38% -16% -24% -14%;
  width: 130%;
  height: 162%;
  object-fit: contain;
  filter: drop-shadow(0 20px 18px rgba(22, 25, 21, 0.17));
}

.money-screen {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 0.6rem;
  color: #d9f4c7;
  background: #0f2a1b;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 18px rgba(217, 244, 199, 0.12);
}

.money-slot {
  display: none;
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 34px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 253, 243, 0.26);
}

.money-button {
  z-index: 2;
  position: absolute;
  right: 16%;
  bottom: 14px;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--page-yellow);
  box-shadow: 0 0 0 var(--money-button-ring) rgba(228, 191, 69, 0.12);
}

.money-stack {
  position: absolute;
  right: 9%;
  bottom: 28px;
  width: 36%;
  height: 124px;
}

.money-stack-sprite {
  position: absolute;
  right: -4%;
  bottom: -4%;
  width: 112%;
  height: 120%;
  object-fit: contain;
  opacity: var(--money-opacity);
  transform: translateY(var(--money-rise));
  filter: drop-shadow(0 16px 14px rgba(8, 80, 56, 0.13));
}

.money-stack span {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  border: 1px solid rgba(8, 122, 81, 0.24);
  border-radius: 0.7rem;
  background:
    linear-gradient(90deg, rgba(255, 253, 243, 0.62), transparent 34% 64%, rgba(255, 253, 243, 0.34)),
    #75bd82;
  box-shadow: 0 8px 16px rgba(22, 25, 21, 0.08);
  opacity: var(--money-opacity);
  transform: translateY(var(--money-rise));
}

.money-stack span:nth-child(1) {
  bottom: 0;
}

.money-stack span:nth-child(2) {
  bottom: 19px;
  transition-delay: 0.05s;
}

.money-stack span:nth-child(3) {
  bottom: 38px;
  transition-delay: 0.1s;
}

.money-stack span:nth-child(4) {
  bottom: 57px;
  transition-delay: 0.15s;
}

.money-stack span:nth-child(5) {
  bottom: 76px;
  transition-delay: 0.2s;
}

.money-tape {
  position: absolute;
  left: 24%;
  bottom: 110px;
  width: 42%;
  height: 42px;
  overflow: hidden;
  opacity: var(--money-opacity);
}

.money-tape span {
  position: absolute;
  width: 58px;
  height: 24px;
  border-radius: 0.45rem;
  background: #8fd294;
  transform: translateY(var(--money-tape-rise)) rotate(-8deg);
  box-shadow: inset 0 0 0 1px rgba(8, 122, 81, 0.18);
}

.money-tape span:nth-child(1) {
  left: 0;
  bottom: 0;
}

.money-tape span:nth-child(2) {
  left: 44px;
  bottom: 8px;
  rotate: 13deg;
}

.money-tape span:nth-child(3) {
  left: 90px;
  bottom: -2px;
  rotate: -18deg;
}

.hero {
  width: min(100% - 2rem, var(--max-width));
  max-width: var(--max-width);
  padding: 6rem 0;
}

.hero h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 1;
}

.hero-copy {
  max-width: 48ch;
}

.hero::before,
.hero::after,
.hero-route,
.hero-brand-card {
  display: none;
}

.hero-handoff {
  position: absolute;
  right: clamp(-1rem, 2vw, 1.5rem);
  bottom: clamp(-1rem, 2vw, 2rem);
  z-index: 0;
  width: min(47vw, 520px);
  height: min(54vw, 560px);
  pointer-events: none;
  perspective: 1100px;
}

.hero-hand-sprite {
  position: absolute;
  left: -18%;
  bottom: -9%;
  width: 72%;
  transform-origin: 15% 85%;
  animation: handOffer 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  filter: drop-shadow(0 26px 24px rgba(22, 25, 21, 0.15));
}

.handoff-phone {
  position: absolute;
  left: 28%;
  top: 12%;
  width: min(58%, 290px);
  aspect-ratio: 393 / 852;
  border: 10px solid #151515;
  border-radius: 38px;
  background:
    linear-gradient(180deg, #111214, #181a1d),
    radial-gradient(circle at 18% 18%, rgba(8, 122, 81, 0.28), transparent 36%);
  box-shadow: 0 38px 80px rgba(22, 25, 21, 0.22);
  transform-origin: 20% 82%;
  animation: phoneOffer 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.handoff-phone-bar {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 36%;
  height: 16px;
  border-radius: 999px;
  background: #050506;
  transform: translateX(-50%);
}

.handoff-phone-logo {
  position: absolute;
  left: 13%;
  top: 12%;
  width: 34%;
  border-radius: 1rem;
  overflow: hidden;
}

.handoff-phone-lines {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 34%;
  display: grid;
  gap: 10px;
}

.handoff-phone-lines span {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.handoff-phone-lines span:nth-child(2) {
  width: 72%;
}

.handoff-phone-lines span:nth-child(3) {
  width: 54%;
}

.handoff-phone-route {
  position: absolute;
  left: 16%;
  right: 14%;
  bottom: 18%;
  height: 36%;
  border: 2px solid rgba(45, 191, 127, 0.62);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 3rem 0 0;
}

.user-flow,
.data-section,
.impact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.user-flow > :not(.boarding-scene),
.data-section > :not(.emission-scene),
.impact > :not(.impact-grid),
.impact-card > span,
.impact-card > h3,
.impact-card > p {
  position: relative;
  z-index: 2;
}

.boarding-scene,
.emission-scene {
  position: absolute;
  inset: 4% -8% 2%;
  z-index: 0;
  margin: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.58;
  pointer-events: none;
}

.boarding-scene {
  inset: 7% -5% 0%;
}

.boarding-skyline,
.emission-campus {
  display: none;
}

.boarding-route {
  left: 3%;
  right: 3%;
  bottom: 18%;
  background: rgba(22, 25, 21, 0.2);
}

.person-left,
.person-right {
  opacity: var(--boarding-person-opacity);
}

.boarding-car {
  bottom: 12%;
}

.car-passengers {
  position: absolute;
  left: 35%;
  top: 20%;
  z-index: 4;
  display: flex;
  gap: 1.5%;
  width: 30%;
  opacity: var(--car-passenger-opacity);
  transform: translateY(var(--car-passenger-y));
}

.car-passengers img {
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 4px 5px rgba(22, 25, 21, 0.2));
}

.emission-scene {
  inset: 10% -11% 8%;
  opacity: 0.45;
}

.emission-road {
  bottom: 13%;
  height: 18%;
  background: rgba(22, 25, 21, 0.5);
  box-shadow: none;
}

.emission-car {
  bottom: 18%;
}

.impact-card {
  min-height: 330px !important;
  padding-top: 1.15rem !important;
}

.impact-card > span,
.impact-card > h3,
.impact-card > p {
  text-shadow: 0 1px 0 rgba(255, 253, 243, 0.9);
}

.impact-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  margin: 0;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none;
  opacity: 0.56;
}

.social-visual {
  opacity: 0.5;
}

.eco-visual {
  opacity: 0.62;
}

.money-visual {
  opacity: 0.68;
}

.face {
  top: auto;
  bottom: 34px;
  width: 116px;
}

.face-left {
  left: 6%;
}

.face-right {
  right: 6%;
}

.meeting-lines {
  top: 62%;
}

.eco-sun {
  left: auto;
  right: 16%;
  top: 12%;
}

.eco-cloud {
  top: 18%;
}

.eco-ground {
  left: 8%;
  right: 8%;
  bottom: 44px;
}

.eco-flower {
  left: 36%;
  bottom: 44px;
}

.money-piles {
  position: absolute;
  inset: 18% 4% 8% 3%;
}

.money-pile {
  position: absolute;
  width: 64%;
  height: auto;
  object-fit: contain;
  opacity: var(--money-opacity);
  filter: drop-shadow(0 18px 14px rgba(8, 80, 56, 0.13));
}

.pile-one {
  left: 10%;
  bottom: 0;
  transform: translateY(var(--money-rise)) rotate(-4deg) scale(0.78);
}

.pile-two {
  left: 22%;
  bottom: 20%;
  transform: translateY(var(--money-rise-mid)) rotate(5deg) scale(0.86);
  opacity: var(--money-opacity-mid);
}

.pile-three {
  right: 6%;
  bottom: 39%;
  transform: translateY(var(--money-rise-top)) rotate(-2deg) scale(0.74);
  opacity: var(--money-opacity-top);
}

@keyframes handOffer {
  0% {
    opacity: 0;
    transform: translate(-44%, 30%) rotate(-18deg) scale(0.88);
  }
  48% {
    opacity: 1;
    transform: translate(0, 0) rotate(-4deg) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(0, 0) rotate(-4deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-18%, 20%) rotate(-16deg) scale(0.94);
  }
}

@keyframes phoneOffer {
  0% {
    opacity: 0;
    transform: translate(-42%, 38%) rotateX(62deg) rotateY(-32deg) rotateZ(-16deg) scale(0.72);
  }
  58% {
    opacity: 1;
    transform: translate(0, 0) rotateX(10deg) rotateY(-19deg) rotateZ(-4deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotateX(6deg) rotateY(-14deg) rotateZ(-1deg) scale(1);
  }
}

@keyframes walkArm {
  0%,
  100% {
    transform: rotate(24deg);
  }
  50% {
    transform: rotate(-28deg);
  }
}

@keyframes walkLeg {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(24deg);
  }
}

@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes smokeMorph {
  0%,
  100% {
    border-radius: 48% 52% 44% 56%;
  }
  50% {
    border-radius: 58% 42% 61% 39%;
  }
}

@keyframes markBreathe {
  0%,
  100% {
    border-radius: 38% 62% 44% 56% / 56% 42% 58% 44%;
  }
  50% {
    border-radius: 56% 44% 58% 42% / 42% 58% 44% 56%;
  }
}

@keyframes heroDrive {
  0%,
  100% {
    rotate: 0deg;
  }
  50% {
    rotate: -3deg;
  }
}

@keyframes routePulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) rotate(-4deg);
  }
}

@keyframes routeDraw {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  28%,
  68% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
}

@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0) rotate(1.4deg);
  }
  50% {
    transform: translateY(-14px) rotate(-0.6deg);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(34px) rotate(0.001deg);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 960px) {
  h1 {
    font-size: 3.8rem;
  }

  h2 {
    font-size: 2.6rem;
  }

  .app-section,
  .problem-grid,
  .data-grid,
  .loneliness-panel,
  .mission-panel,
  .mission-grid,
  .story-layout,
  .story-timeline,
  .story-principles,
  .award,
  .control-grid,
  .marketplace-grid,
  .feature-grid,
  .impact-grid,
  .business-panel,
  .business-grid,
  .gtm-grid,
  .event-thesis-grid,
  .journey-grid,
  .crawler-event-list,
  .crawl-intro,
  .signup-options,
  .signup-form,
  .survey-grid,
  .rating-grid,
  .checkbox-grid {
    grid-template-columns: 1fr;
  }

  .data-lead {
    grid-column: auto;
  }

  .crawl-stats {
    justify-content: flex-start;
  }

  .site-nav {
    display: none;
  }

  .language-switch {
    margin-left: auto;
  }

  .section {
    padding: 4.5rem 0;
  }

  .section-headline {
    grid-template-columns: 1fr;
  }

  .section:nth-of-type(2n + 3) .section-headline h2 {
    margin-left: 0;
    text-align: left;
  }

  .hero {
    min-height: calc(92svh - 64px);
    padding-inline: 1rem;
  }

  .hero-handoff {
    right: -8%;
    bottom: 1rem;
    width: min(62vw, 360px);
    height: min(72vw, 390px);
    opacity: 0.62;
  }

  .hero-brand-card {
    position: static;
    width: min(72vw, 280px);
    transform: none;
    align-self: center;
    margin-top: 0.6rem;
  }

  .hero-route {
    display: none;
  }

  .boarding-scene,
  .emission-scene {
    position: absolute;
    margin: 0;
    min-height: 0;
    border-radius: 0;
  }

  .boarding-car {
    width: min(72vw, 300px);
  }

  .boarding-person {
    width: 46px;
    height: 96px;
  }

  .emission-car {
    width: min(76vw, 330px);
    left: calc(-44% + var(--scene-progress) * 116%);
  }

  .emission-smoke {
    left: calc(-56% + var(--scene-progress) * 116%);
    width: 62%;
  }

  .emission-campus {
    width: 56vw;
    right: 4%;
  }

  .emission-footprint {
    left: 5%;
    top: 8%;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.1rem;
  }

  .device-shell {
    width: min(393px, 100%);
    padding: 0.45rem;
    border-radius: 38px;
  }

  .phone-app {
    aspect-ratio: 393 / 852;
    height: auto;
    border-radius: 32px;
  }

  .app-section {
    width: min(100% - 0.75rem, 1180px);
  }

  .boarding-scene,
  .emission-scene {
    position: absolute;
    margin: 0;
    min-height: 0;
  }

  .person-right {
    left: calc(16% + var(--scene-enter) * 28%);
  }

  .boarding-signal {
    display: none;
  }

  .emission-footprint {
    width: 96px;
  }
}

/* Road world prototype: one illustrated campus stage, three cars mapped to the road. */
:root {
  --road-black-x: 79vw;
  --road-black-y: 67vh;
  --road-black-scale: 0.08;
  --road-black-rotate: 0.3deg;
  --road-black-opacity: 0.92;
  --road-white-x: 76vw;
  --road-white-y: 135vh;
  --road-white-scale: 1.18;
  --road-white-rotate: -10deg;
  --road-white-opacity: 0.92;
  --road-red-x: 84vw;
  --road-red-y: 128vh;
  --road-red-scale: 1.08;
  --road-red-rotate: -24deg;
  --road-red-opacity: 0.9;
}

body {
  background: #dfead5;
}

body::before {
  display: none;
}

main {
  position: relative;
  z-index: 2;
}

.site-header {
  z-index: 60;
  background: rgba(248, 252, 240, 0.66);
  border-bottom-color: rgba(25, 34, 24, 0.12);
}

.road-world {
  position: fixed !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
  background: #cfe3bf;
  transform: translateZ(0);
}

.road-world-bg,
.road-world-vignette,
.road-traffic-car {
  position: absolute;
}

.road-world-bg {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: none;
  transform-origin: 100% 50%;
}

.road-world-vignette {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 15, 12, 0.36) 0%, rgba(5, 15, 12, 0.13) 18%, rgba(255, 253, 243, 0.04) 42%, rgba(255, 253, 243, 0.08) 70%, rgba(5, 15, 12, 0.16) 100%),
    linear-gradient(180deg, rgba(255, 253, 243, 0.06) 0%, rgba(255, 253, 243, 0.02) 50%, rgba(10, 25, 18, 0.18) 100%);
}

.road-traffic-car {
  z-index: 3;
  max-width: none;
  filter: drop-shadow(0 18px 16px rgba(5, 15, 12, 0.24));
  transform-origin: 50% 92%;
  will-change: left, top, transform, opacity;
}

.road-car-black {
  left: var(--road-black-x);
  top: var(--road-black-y);
  z-index: 5;
  width: min(38vw, 650px);
  opacity: var(--road-black-opacity);
  transform: translate(-50%, -100%) scale(var(--road-black-scale)) rotate(var(--road-black-rotate));
}

.road-car-white {
  left: var(--road-white-x);
  top: var(--road-white-y);
  z-index: 4;
  width: min(38vw, 650px);
  opacity: var(--road-white-opacity);
  transform: translate(-50%, -100%) scale(var(--road-white-scale)) rotate(var(--road-white-rotate));
}

.road-car-red {
  left: var(--road-red-x);
  top: var(--road-red-y);
  z-index: 3;
  width: min(34vw, 570px);
  opacity: var(--road-red-opacity);
  transform: translate(-50%, -100%) scale(var(--road-red-scale)) rotate(var(--road-red-rotate));
}

.hero,
.section {
  background: transparent;
}

.hero {
  min-height: calc(100svh - 64px);
  padding-top: clamp(6rem, 10vw, 9rem);
  padding-bottom: clamp(7rem, 13vw, 11rem);
}

.hero > :not(.hero-handoff, .hero-brand-card, .hero-route) {
  max-width: min(720px, 90vw);
}

.hero h1,
.section-headline h2 {
  color: #102016;
  text-shadow: 0 2px 22px rgba(255, 253, 243, 0.66), 0 18px 46px rgba(9, 27, 18, 0.18);
}

.hero-copy,
.section-headline,
.story-copy,
.award-copy,
.app-section-copy,
.data-source,
.business-note {
  text-shadow: 0 1px 18px rgba(255, 253, 243, 0.84);
}

.hero-proof {
  width: min(58rem, 100%);
  background: rgba(255, 253, 243, 0.22);
  backdrop-filter: blur(8px);
}

.hero-proof span {
  color: rgba(20, 26, 18, 0.78);
}

.section:not(.hero) {
  padding-top: clamp(7rem, 13vw, 12rem);
  padding-bottom: clamp(7rem, 13vw, 12rem);
}

.solution,
.user-flow,
.data-section,
.impact,
.mission,
.control,
.marketplace,
.feature-roadmap,
.business,
.gtm,
.story,
.award,
.waitlist,
.survey-section,
.legal-page {
  border-color: rgba(22, 25, 21, 0.1);
}

.flow-list,
.moment-card,
.mission-panel,
.business-panel,
.loneliness-panel,
.traction-strip,
.survey-panel,
.signup-panel {
  background: rgba(255, 253, 243, 0.55);
  border-color: rgba(22, 25, 21, 0.1);
  backdrop-filter: blur(16px) saturate(1.04);
  box-shadow: 0 22px 68px rgba(13, 32, 21, 0.08);
}

.journey-grid article,
.problem-grid article,
.marketplace-grid article,
.feature-grid article,
.impact-grid article,
.gtm-grid article,
.mission-grid article,
.control-grid article,
.business-grid article,
.event-thesis-grid article,
.data-grid article,
.story-principles article,
.story-timeline article,
.legal-card {
  background: rgba(255, 253, 243, 0.54);
  border-color: rgba(22, 25, 21, 0.1);
  backdrop-filter: blur(15px) saturate(1.05);
  box-shadow: 0 18px 54px rgba(13, 32, 21, 0.07);
}

.data-lead,
.business-panel,
.mission-panel {
  background:
    linear-gradient(140deg, rgba(255, 253, 243, 0.66), rgba(238, 246, 230, 0.52)) !important;
}

.hero-handoff,
.boarding-scene,
.emission-scene,
.impact-visual {
  display: none;
}

.impact-card {
  min-height: 0 !important;
  padding: clamp(1.1rem, 3vw, 1.55rem) !important;
  background: rgba(255, 253, 243, 0.46) !important;
}

.app-section::before {
  background: linear-gradient(180deg, transparent, rgba(16, 32, 22, 0.28), transparent);
}

@media (max-width: 960px) {
  .road-world-bg {
    object-position: right center;
  }

  .road-car-black {
    width: min(58vw, 610px);
  }

  .road-car-white {
    width: min(48vw, 540px);
  }

  .road-car-red {
    width: min(40vw, 450px);
  }
}

@media (max-width: 520px) {
  .road-world-bg {
    object-position: right center;
  }

  .road-world-vignette {
    background:
      linear-gradient(90deg, rgba(5, 15, 12, 0.34) 0%, rgba(255, 253, 243, 0.1) 44%, rgba(5, 15, 12, 0.2) 100%),
      linear-gradient(180deg, rgba(255, 253, 243, 0.05) 0%, rgba(10, 25, 18, 0.28) 100%);
  }

  .road-car-black {
    width: min(84vw, 430px);
  }

  .road-car-white {
    width: min(64vw, 380px);
  }

  .road-car-red {
    width: min(56vw, 330px);
  }

  .hero {
    min-height: calc(96svh - 64px);
  }

  .section:not(.hero) {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}

/* Corrective road-story mechanics: content passes through the road, headings stay in the sky. */
:root {
  --road-widget-bg: rgba(255, 253, 243, 0.72);
  --road-widget-border: rgba(17, 28, 18, 0.13);
  --road-widget-shadow: 0 18px 52px rgba(10, 24, 16, 0.08);
}

.section:not(.hero) {
  --story-progress: 0;
  --story-approach: 0;
  --story-leave: 0;
  width: min(100% - 2rem, 1180px);
  min-height: 132svh;
  display: block;
  overflow: visible;
  padding-top: clamp(6rem, 11vw, 10rem);
  padding-bottom: clamp(7rem, 12vw, 11rem);
}

.section:not(.hero) > :not(.section-headline) {
  position: relative;
  z-index: 4;
  transform:
    translate3d(
      calc((1 - var(--story-approach)) * 15vw - var(--story-leave) * 8vw),
      calc((1 - var(--story-approach)) * 22vh - var(--story-leave) * 18vh),
      0
    )
    scale(calc(0.88 + var(--story-approach) * 0.12 - var(--story-leave) * 0.05));
  transform-origin: 72% 100%;
  opacity: calc(0.28 + var(--story-approach) * 0.72 - var(--story-leave) * 0.22);
  transition: transform 0.08s linear, opacity 0.08s linear;
}

.section-headline {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 2vw, 1.05rem);
  position: sticky;
  top: clamp(4.6rem, 8vw, 6.4rem);
  z-index: 34;
  width: min(760px, 92vw);
  max-width: min(760px, 92vw);
  max-height: min(36vh, 330px);
  margin-left: 0;
  margin-bottom: clamp(10rem, 33vh, 21rem);
  color: #102016;
  overflow: visible;
  overscroll-behavior: contain;
  pointer-events: none;
}

.section-headline,
.section:nth-of-type(2n + 3) .section-headline h2 {
  text-align: left;
}

.section:nth-of-type(2n + 3) .section-headline h2 {
  margin-left: 0;
}

.section-headline h2 {
  max-width: 15ch;
  font-size: clamp(2rem, 4.65vw, 4.15rem);
  line-height: 0.98;
}

.section-headline p,
.section-headline .eyebrow {
  margin-bottom: 0;
}

.story .section-headline,
.business .section-headline,
.award .road-sky-copy {
  max-width: min(860px, 92vw);
}

.story .section-headline h2,
.business .section-headline h2,
.award .road-sky-copy h2 {
  max-width: min(17ch, 92vw);
  font-size: clamp(2.15rem, 5vw, 4.8rem);
  line-height: 0.98;
}

.eyebrow::before,
.app-proof li::before,
.moment-card::before {
  display: none;
}

.flow-list,
.journey-grid,
.problem-grid,
.marketplace-grid,
.feature-grid,
.impact-grid,
.gtm-grid,
.mission-grid,
.control-grid,
.business-grid,
.event-thesis-grid,
.data-grid,
.story-principles,
.story-timeline {
  gap: 0.85rem;
}

.flow-list,
.app-proof,
.journey-grid,
.problem-grid,
.marketplace-grid,
.feature-grid,
.impact-grid,
.gtm-grid,
.mission-grid,
.control-grid,
.business-grid,
.event-thesis-grid,
.data-grid,
.story-principles,
.story-timeline,
.signup-options {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.flow-list {
  display: grid;
  width: min(100%, 760px);
  margin-left: auto;
  list-style: none;
  padding-left: 0;
}

.flow-list li::marker {
  color: transparent;
}

.flow-list li {
  display: block;
  min-height: 0;
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 18px !important;
  padding: 1rem 1.1rem !important;
  background: var(--road-widget-bg) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04);
}

.flow-list span {
  display: none;
}

.moment-card,
.mission-panel,
.business-panel,
.loneliness-panel,
.traction-strip,
.survey-panel,
.signup-panel,
.journey-grid article,
.problem-grid article,
.marketplace-grid article,
.feature-grid article,
.impact-grid article,
.gtm-grid article,
.mission-grid article,
.control-grid article,
.business-grid article,
.event-thesis-grid article,
.data-grid article,
.story-principles article,
.story-timeline article,
.legal-card,
.crawler-event-list article,
.crawl-intro article,
.signup-options article,
.rating-card,
.checkbox-grid label {
  min-height: 0;
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 18px !important;
  background: var(--road-widget-bg) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04);
}

.journey-grid article:hover,
.problem-grid article:hover,
.marketplace-grid article:hover,
.feature-grid article:hover,
.impact-grid article:hover,
.gtm-grid article:hover,
.mission-grid article:hover,
.control-grid article:hover,
.business-grid article:hover,
.event-thesis-grid article:hover,
.data-grid article:hover,
.story-principles article:hover {
  transform: none;
  box-shadow: var(--road-widget-shadow) !important;
}

.journey-grid span,
.problem-grid span,
.marketplace-grid span,
.feature-grid span,
.impact-grid span,
.gtm-grid span,
.mission-grid span,
.control-grid span,
.business-grid span,
.event-thesis-grid span,
.data-grid span,
.story-principles span,
.story-timeline span {
  width: auto;
  margin-bottom: 0.45rem;
  border-radius: 0 !important;
  padding: 0;
  color: rgba(10, 61, 42, 0.78);
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.data-number {
  color: rgba(10, 61, 42, 0.92);
  background: transparent;
}

.app-proof {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  list-style: none;
}

.app-proof li {
  border-left: 0;
  border-top: 1px solid rgba(17, 28, 18, 0.12);
  padding: 0.55rem 0 0;
}

.app-proof li:first-child {
  border-top: 0;
  padding-top: 0;
}

.negative-line,
.positive-line {
  font-size: clamp(1.45rem, 3.4vw, 3.2rem);
}

.hero-copy,
.app-section-copy p,
.award-copy p,
.story-copy p,
.mission-panel p,
.business-panel p,
.data-source,
.business-note {
  color: rgba(21, 28, 20, 0.78);
  text-shadow: 0 1px 18px rgba(255, 253, 243, 0.9);
}

@media (max-width: 960px) {
  .data-story {
    grid-template-columns: 1fr;
  }

  .impact-widget-grid,
  .impact-chart-grid {
    grid-template-columns: 1fr;
  }

  .data-visual {
    position: relative;
    top: auto;
    min-height: 430px;
  }

  .data-step {
    min-height: 58svh;
  }

  .section:not(.hero) > :not(.section-headline) {
    transform:
      translate3d(
        calc((1 - var(--story-approach)) * 9vw),
        calc((1 - var(--story-approach)) * 16vh - var(--story-leave) * 12vh),
        0
      )
      scale(calc(0.94 + var(--story-approach) * 0.06 - var(--story-leave) * 0.04));
  }
}

/* Two-axis road story: sky text is stationary, widgets and photos travel below. */
.section[data-reveal],
.section[data-reveal].in-view {
  opacity: 1 !important;
  transform: none !important;
}

.section:not(.hero) {
  min-height: var(--road-height, 254svh);
  padding-top: clamp(5rem, 9vw, 8rem);
}

.section:not(.hero) > :not(.section-headline) {
  transform: none !important;
  opacity: 1 !important;
}

.road-sky-copy {
  position: sticky !important;
  top: clamp(11rem, 23vh, 15.5rem);
  z-index: 7 !important;
  width: min(58ch, 92vw);
  max-width: min(58ch, 92vw);
  margin-bottom: clamp(4rem, 14vh, 8rem);
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: rgba(37, 45, 36, 0.74);
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-shadow: 0 1px 18px rgba(255, 253, 243, 0.88);
  transform: none !important;
  opacity: 1 !important;
}

.section-headline > .road-sky-copy {
  position: static !important;
  width: min(62ch, 92vw);
  max-width: min(62ch, 92vw);
  max-height: min(36vh, 330px);
  margin: 0;
  padding-right: 0.7rem !important;
  overflow-y: auto;
  pointer-events: auto;
}

.section-headline {
  top: clamp(4.75rem, 7vh, 5.8rem);
}

.section-headline.road-sky-copy {
  position: sticky !important;
  top: clamp(4.75rem, 7vh, 5.8rem) !important;
  z-index: 34 !important;
  width: min(800px, 92vw);
  max-width: min(800px, 92vw);
  max-height: min(36vh, 330px);
  overflow: visible;
  margin-bottom: clamp(9rem, 30vh, 19rem);
  pointer-events: auto;
}

.app-section::before {
  display: none !important;
}

.app-section,
.award {
  display: block;
}

.app-section-copy.road-sky-copy h2,
.award-copy.road-sky-copy h2 {
  max-width: min(15ch, 92vw);
  font-size: clamp(2.35rem, 5.8vw, 5.2rem);
  line-height: 0.96;
}

.section-headline.road-sky-copy > p:not(.eyebrow),
.section-headline.road-sky-copy > .button {
  width: fit-content;
  max-width: min(56ch, 88vw);
  border: 1px solid rgba(17, 28, 18, 0.1);
  border-radius: 16px;
  padding: 0.72rem 0.86rem;
  background: rgba(255, 253, 243, 0.5);
  box-shadow: 0 14px 36px rgba(10, 24, 16, 0.06);
  backdrop-filter: blur(12px) saturate(1.04);
}

.section-headline.road-sky-copy > .button {
  display: inline-flex;
}

.business .section-headline > .road-sky-copy,
.data-section .section-headline > .road-sky-copy,
.crawl-preview .section-headline > .road-sky-copy {
  max-height: min(24vh, 210px);
}

.story .section-headline > .road-sky-copy {
  max-height: min(38vh, 360px);
  width: min(68ch, 92vw);
  max-width: min(68ch, 92vw);
}

.section-headline > .road-sky-copy::-webkit-scrollbar {
  width: 4px;
}

.section-headline > .road-sky-copy::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(16, 32, 22, 0.26);
}

.road-sky-copy h2 {
  max-width: 12.5ch;
  color: #102016;
  font-size: clamp(2.45rem, 5.8vw, 5.2rem);
  line-height: 0.95;
}

.road-sky-copy p {
  max-width: 54ch;
  color: rgba(37, 45, 36, 0.76);
}

.road-story-item {
  --road-item-x: -50vw;
  --road-item-y: 125vh;
  --road-item-scale: 0.12;
  --road-item-rotate: 0deg;
  --road-item-opacity: 0;
  position: fixed !important;
  left: var(--road-item-x, 0px);
  top: var(--road-item-y, 0px);
  z-index: 5;
  width: var(--road-item-width, min(540px, 84vw));
  max-width: var(--road-item-width, min(540px, 84vw));
  margin: 0 !important;
  transform:
    translate(-50%, 0)
    scale(var(--road-item-scale, 1))
    rotate(var(--road-item-rotate, 0deg)) !important;
  transform-origin: 50% 0%;
  opacity: var(--road-item-opacity, 1) !important;
  visibility: hidden;
  will-change: transform, opacity;
  transition: transform 0.08s linear, opacity 0.08s linear;
}

.road-story-item:is(article, li, .moment-card, .mission-panel, .business-panel, .loneliness-panel, .crawl-note, .data-source, .business-note, .story-copy, .story-copy-block) {
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
}

.road-story-item:is(article, li) {
  min-height: 0 !important;
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 18px !important;
  padding: 0.9rem 1rem !important;
  background: var(--road-widget-bg) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04) !important;
}

.road-story-item p {
  line-height: 1.42;
}

.moment-card.road-story-item {
  width: min(640px, 90vw);
  max-width: min(640px, 90vw);
}

.moment-card.road-story-item .negative-line,
.moment-card.road-story-item .positive-line {
  font-size: clamp(1.15rem, 2.3vw, 1.85rem);
  line-height: 1.08;
}

.moment-card.road-story-item p {
  font-size: clamp(0.88rem, 1.12vw, 0.98rem);
  line-height: 1.38;
}

.phone-stage.road-story-item,
.story-photo.road-story-item,
.award-photo.road-story-item {
  width: var(--road-item-width, min(420px, 76vw));
  max-width: var(--road-item-width, min(420px, 76vw));
  filter: drop-shadow(0 26px 34px rgba(10, 24, 16, 0.16));
}

.phone-stage.road-story-item {
  display: grid;
  width: var(--road-item-width, min(330px, 66vw));
  max-width: var(--road-item-width, min(330px, 66vw));
  justify-items: center;
}

.phone-stage.road-story-item .device-shell {
  width: min(300px, 100%);
  transform: none !important;
  animation: none !important;
}

.story-photo.road-story-item,
.award-photo.road-story-item {
  min-height: 0 !important;
  height: clamp(210px, 24vw, 320px);
  margin: 0 !important;
  overflow: hidden;
}

.story-photo.road-story-item img,
.award-photo.road-story-item img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  aspect-ratio: auto;
  object-fit: cover;
}

.flow-list li.road-story-item,
.app-proof li.road-story-item,
.data-grid article.road-story-item,
.crawl-note.road-story-item,
.data-source.road-story-item,
.business-note.road-story-item {
  width: var(--road-item-width, min(500px, 84vw));
  max-width: var(--road-item-width, min(500px, 84vw));
}

.flow-list.road-story-item,
.app-proof.road-story-item,
.journey-grid.road-story-item,
.problem-grid.road-story-item,
.data-grid.road-story-item,
.impact-grid.road-story-item,
.marketplace-grid.road-story-item,
.feature-grid.road-story-item,
.event-thesis-grid.road-story-item,
.mission-grid.road-story-item,
.control-grid.road-story-item,
.business-grid.road-story-item,
.gtm-grid.road-story-item,
.story-timeline.road-story-item,
.story-principles.road-story-item,
.signup-options.road-story-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0.72rem !important;
  width: var(--road-item-width, min(760px, 86vw));
  max-width: var(--road-item-width, min(760px, 86vw));
  max-height: min(315px, 34vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 20px !important;
  padding: clamp(0.7rem, 1.8vw, 1rem) !important;
  background: rgba(255, 253, 243, 0.5) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04) !important;
}

.signup-options.road-story-item {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  width: var(--road-item-width, min(860px, 86vw));
  max-width: var(--road-item-width, min(860px, 86vw));
  max-height: min(430px, 46vh);
}

.flow-list.road-story-item > *,
.app-proof.road-story-item > *,
.journey-grid.road-story-item > *,
.problem-grid.road-story-item > *,
.data-grid.road-story-item > *,
.impact-grid.road-story-item > *,
.marketplace-grid.road-story-item > *,
.feature-grid.road-story-item > *,
.event-thesis-grid.road-story-item > *,
.mission-grid.road-story-item > *,
.control-grid.road-story-item > *,
.business-grid.road-story-item > *,
.gtm-grid.road-story-item > *,
.story-timeline.road-story-item > *,
.story-principles.road-story-item > *,
.signup-options.road-story-item > * {
  min-height: 0 !important;
  margin: 0 !important;
}

.flow-list.road-story-item li,
.app-proof.road-story-item li {
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 16px !important;
  padding: 0.72rem 0.82rem !important;
  background: rgba(255, 253, 243, 0.58) !important;
  box-shadow: none !important;
}

.flow-list > li.road-story-item,
.app-proof > li.road-story-item {
  display: grid;
  align-content: start;
  color: rgba(21, 28, 20, 0.86);
  line-height: 1.42;
}

.flow-list > li.road-story-item span {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(10, 61, 42, 0.78);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.crawl-note.road-story-item,
.data-source.road-story-item,
.business-note.road-story-item {
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 18px !important;
  padding: 0.9rem 1rem !important;
  color: rgba(21, 28, 20, 0.78);
  background: var(--road-widget-bg) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04) !important;
  font-size: 0.9rem;
  line-height: 1.45;
}

.story-copy.road-story-item,
.story-copy-block.road-story-item {
  display: grid;
  gap: 0.75rem;
  width: var(--road-item-width, min(620px, 84vw));
  max-width: var(--road-item-width, min(620px, 84vw));
  max-height: none;
  overflow: visible;
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 18px !important;
  padding: 1rem 1.1rem !important;
  background: var(--road-widget-bg) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04) !important;
}

.story-copy-block.road-story-item {
  font-size: clamp(0.88rem, 1.05vw, 0.96rem);
  line-height: 1.42;
}

.award-photo.road-story-item figcaption {
  right: auto;
  max-width: calc(100% - 2rem);
  border-radius: 14px;
  white-space: normal;
  line-height: 1.25;
}

.app-proof {
  width: min(100%, 640px);
  margin: clamp(1rem, 6vh, 4rem) 0 clamp(1rem, 5vh, 3rem) auto;
}

.app-proof li {
  border: 1px solid var(--road-widget-border) !important;
  border-radius: 18px !important;
  padding: 0.9rem 1rem !important;
  background: var(--road-widget-bg) !important;
  box-shadow: var(--road-widget-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.04);
}

.story-layout {
  display: block;
}

.story-photo {
  width: min(520px, 92vw);
  margin-left: auto;
}

.story-copy {
  margin-bottom: clamp(4rem, 16vh, 9rem);
}

.award {
  display: block;
}

.award-photo {
  width: min(560px, 92vw);
  margin-left: auto;
  margin-bottom: clamp(3rem, 12vh, 7rem);
}

.signup-form {
  width: min(720px, 100%);
  margin-left: auto;
}

body:not(.prototype-page) .app-section .phone-stage {
  display: none !important;
}

.prototype-page {
  min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(20, 20, 20, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #f7faf8 0%, #eef5f0 100%);
  background-size: 72px 72px, auto;
}

.prototype-page .road-world,
.prototype-page main > section:not(.app-section) {
  display: none !important;
}

.prototype-page .app-section {
  width: min(100% - 2rem, 1120px);
  min-height: calc(100svh - 74px) !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) 0 !important;
  overflow: visible;
}

.prototype-page .app-section::before {
  display: none;
}

.prototype-page .app-section .section-headline,
.prototype-page .app-proof,
.prototype-page .phone-stage {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.prototype-page .app-section .section-headline {
  grid-column: 1;
  align-self: end;
  width: min(100%, 560px);
  max-width: 560px;
  max-height: none;
  margin: 0;
  min-width: 0;
  pointer-events: auto;
}

.prototype-page .app-section .section-headline h2 {
  max-width: min(11ch, 100%);
  font-size: clamp(2.25rem, 4.2vw, 3.65rem);
  overflow-wrap: anywhere;
}

.prototype-page .app-section .section-headline p {
  max-width: min(54ch, 100%);
}

.prototype-page .app-proof {
  grid-column: 1;
  align-self: start;
  width: min(100%, 620px);
  margin: 0;
  min-width: 0;
}

.prototype-page .phone-stage {
  display: grid !important;
  grid-row: 1 / span 2;
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: min(380px, 92vw);
  max-width: min(380px, 92vw);
  z-index: 2;
}

.prototype-page .phone-stage .device-shell {
  width: min(360px, 100%);
  transform: none !important;
  animation: none !important;
}

@media (max-width: 1100px) {
  .road-sky-copy {
    top: clamp(8.5rem, 20vh, 12rem);
  }

  .prototype-page .app-section {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 760px);
  }

  .prototype-page .phone-stage {
    grid-row: auto;
    grid-column: 1;
    order: 2;
  }

  .prototype-page .app-proof {
    order: 3;
  }

  .prototype-page .app-section .section-headline {
    order: 1;
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 760px) {
  .data-visual {
    min-height: 380px;
    border-radius: 18px;
  }

  .data-funnel span {
    width: 100%;
  }

  .data-step {
    min-height: 64svh;
  }

  .data-step h3 {
    max-width: 13ch;
  }

  .section-headline,
  .section-headline.road-sky-copy {
    top: 4.6rem !important;
    width: min(92vw, 640px);
    max-width: min(92vw, 640px);
  }

  .section-headline h2,
  .road-sky-copy h2,
  .app-section-copy.road-sky-copy h2,
  .award-copy.road-sky-copy h2 {
    max-width: min(13ch, 92vw);
    font-size: clamp(2.05rem, 10vw, 3.15rem);
    line-height: 0.98;
  }

  .road-story-item {
    width: var(--road-item-width, min(88vw, 520px));
    max-width: var(--road-item-width, min(88vw, 520px));
  }

  .road-story-item:is(article, li, .moment-card, .mission-panel, .business-panel, .loneliness-panel, .crawl-note, .data-source, .business-note, .story-copy, .story-copy-block) {
    max-height: none;
  }

  .flow-list.road-story-item,
  .app-proof.road-story-item,
  .journey-grid.road-story-item,
  .problem-grid.road-story-item,
  .data-grid.road-story-item,
  .impact-grid.road-story-item,
  .marketplace-grid.road-story-item,
  .feature-grid.road-story-item,
  .event-thesis-grid.road-story-item,
  .mission-grid.road-story-item,
  .control-grid.road-story-item,
  .business-grid.road-story-item,
  .gtm-grid.road-story-item,
  .story-timeline.road-story-item,
  .story-principles.road-story-item {
    grid-template-columns: 1fr;
    width: var(--road-item-width, min(88vw, 520px));
    max-width: var(--road-item-width, min(88vw, 520px));
    max-height: min(300px, 32vh);
  }

  .signup-options.road-story-item {
    grid-template-columns: 1fr;
    width: var(--road-item-width, min(92vw, 560px));
    max-width: var(--road-item-width, min(92vw, 560px));
    max-height: min(590px, 66vh);
  }

  .phone-stage.road-story-item {
    width: var(--road-item-width, min(72vw, 320px));
    max-width: var(--road-item-width, min(72vw, 320px));
  }

  .phone-stage.road-story-item .device-shell {
    width: min(300px, 100%);
  }

  .story-photo.road-story-item,
  .award-photo.road-story-item {
    width: var(--road-item-width, min(84vw, 420px));
    max-width: var(--road-item-width, min(84vw, 420px));
    height: clamp(210px, 52vw, 320px);
  }
}