.hero {
  position: relative;
  padding-block: 0;
  background: var(--cream);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: var(--space-600);
  min-height: clamp(600px, min(56.25vw, 810px), 810px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-block: var(--space-600);
}

.hero-copy h1 {
  max-width: 620px;
}

.hero-lead {
  max-width: 560px;
  margin: var(--space-300) 0 var(--space-400);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1.5;
}

.member-counts {
  display: grid;
  max-width: 660px;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1.15fr);
  align-items: stretch;
  gap: 8px;
  margin: var(--space-400) 0;
}

.member-count {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-200);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(141, 26, 27, 0.24);
  border-radius: 12px;
  text-align: center;
}

.member-count-primary {
  color: var(--white);
  background: var(--burgundy);
  border-color: var(--burgundy);
}

.member-count-total {
  background: var(--sand);
}

.member-count strong {
  display: block;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.member-count span {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.member-count-label-mobile {
  display: none;
}

.member-symbol {
  display: grid;
  place-items: center;
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-300);
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-300) 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.hero-note span {
  width: 8px;
  height: 8px;
  background: var(--burgundy);
  border-radius: 50%;
}

.hero-visual {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc((var(--shell) - 100vw) / 2);
  width: 100vw;
  min-width: 0;
  pointer-events: none;
}

.hero-collage {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: visible;
}

.hero-collage picture,
.hero-collage img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-collage img {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: normal;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.collage-stamp {
  position: absolute;
  top: 28px;
  left: clamp(360px, calc(100vw - 820px), 68vw);
  z-index: 2;
  display: block;
  width: 148px;
  height: 148px;
  padding: 0;
  color: var(--burgundy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  transform: rotate(-6deg);
}

.collage-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
}

.stamp-outline {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 2 5;
  stroke-width: 1.4;
  opacity: 0.7;
}

.stamp-copy {
  fill: currentColor;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.stamp-people {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.collage-arrow {
  position: absolute;
  right: 8%;
  top: 28px;
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  transform: rotate(-12deg);
}

.trust-strip {
  color: var(--white);
  background: #171c22;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-item {
  display: flex;
  min-height: 116px;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-300) var(--space-400);
  border-right: 1px solid var(--line-light);
}

.trust-item:first-child {
  padding-left: 0;
}

.trust-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.trust-item svg {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: rgba(255, 255, 255, 0.94);
}

.trust-item strong,
.trust-item small {
  display: block;
}

.trust-item strong {
  font-size: 15px;
  line-height: 1.3;
}

.trust-item small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.35;
}

.benefits-section {
  background: var(--paper);
  padding-bottom: var(--space-500);
}

.tagline .word {
  color: var(--ink);
  opacity: 0.34;
  transition: opacity 800ms var(--ease-spring), color 800ms var(--ease-spring);
}

.tagline .word.is-active {
  opacity: 1;
}

.tagline .word.accent {
  color: var(--burgundy);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-200);
  margin-top: var(--space-600);
}

.benefit-card {
  min-height: 248px;
  padding: var(--space-400) var(--space-300);
  background: var(--cream);
  border: 1px solid rgba(141, 26, 27, 0.18);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(61, 38, 28, 0.04);
}

.benefit-icon,
.audience-icon,
.process-icon,
.callout-icon,
.cohort-mark {
  display: grid;
  place-items: center;
  color: var(--burgundy);
  background: var(--sand);
  border-radius: 50%;
}

.benefit-icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-300);
}

.benefit-icon svg {
  width: 30px;
  height: 30px;
}

.benefit-card h3 {
  margin-bottom: var(--space-100);
  font-size: 20px;
}

.benefit-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.48;
}

.benefit-incentive {
  margin-top: var(--space-300);
}

.benefit-incentive h4 {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  margin: 0 0 4px;
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.benefit-incentive h4::before {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  content: "+";
  color: var(--burgundy);
  background: var(--sand);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
}

.benefit-card .benefit-incentive p {
  font-size: 14px;
  line-height: 1.35;
}

.section-note {
  margin-top: var(--space-400);
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}

.audience-section {
  background: var(--cream);
  padding-top: var(--space-500);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-200);
  margin-top: var(--space-600);
}

.audience-card {
  display: flex;
  min-height: 232px;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-300);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.benefit-card,
.audience-card,
.process-card,
.cohort-card {
  transition: transform 700ms var(--ease-spring), box-shadow 700ms var(--ease-spring), border-color 700ms var(--ease-spring);
}

/* Reveal rules are intentionally more specific than the shared card styles.
   Keep the reveal opacity transition while allowing hover to retarget the lift. */
html[data-js="true"] .reveal:is(.benefit-card, .audience-card, .process-card, .cohort-card) {
  transition: transform 560ms var(--ease-spring), opacity 180ms var(--ease-spring), box-shadow 700ms var(--ease-spring), border-color 700ms var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover,
  .audience-card:hover,
  .process-card:hover,
  .cohort-card:hover,
  html[data-js="true"] .reveal:is(.benefit-card, .audience-card, .process-card, .cohort-card):hover {
    border-color: rgba(141, 26, 27, 0.35);
    box-shadow: var(--shadow-soft);
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card:hover,
  .audience-card:hover,
  .process-card:hover,
  .cohort-card:hover,
  html[data-js="true"] .reveal:is(.benefit-card, .audience-card, .process-card, .cohort-card):hover {
    transform: none;
  }
}

.audience-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-300);
}

.audience-icon svg {
  width: 36px;
  height: 36px;
}

.audience-card h3 {
  margin-top: auto;
  font-size: 18px;
  line-height: 1.2;
}

.audience-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.how-section {
  background: var(--sand);
}

.how-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: var(--space-700);
}

.how-intro h2 {
  max-width: 420px;
}

.how-intro > p:last-child {
  max-width: 420px;
  margin: var(--space-300) 0 0;
  color: var(--ink-soft);
  font-size: 18px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-200);
}

.process-card {
  position: relative;
  min-height: 240px;
  padding: var(--space-400);
  background: var(--cream);
  border: 1px solid rgba(23, 29, 36, 0.1);
  border-radius: 16px;
}

.step-number {
  position: absolute;
  top: var(--space-300);
  right: var(--space-300);
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.process-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-300);
}

.process-icon svg {
  width: 34px;
  height: 34px;
}

.process-card h3 {
  margin-bottom: var(--space-100);
}

.process-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.45;
}

.collaboration-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-400);
  margin-top: var(--space-600);
  padding: var(--space-500);
  background: var(--cream);
  border: 1px solid rgba(141, 26, 27, 0.16);
  border-radius: 16px;
}

.callout-icon {
  width: 72px;
  height: 72px;
  color: var(--white);
  background: var(--burgundy);
}

.callout-icon svg {
  width: 44px;
  height: 44px;
}

.collaboration-callout h3 {
  margin-bottom: 8px;
  font-size: 30px;
}

.collaboration-callout p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.first-100-section {
  color: var(--white);
  background: var(--burgundy);
}

.first-100-heading {
  max-width: 900px;
}

.first-100-heading h2 {
  max-width: 820px;
  color: var(--white);
  font-size: 60px;
}

.first-100-heading h2 span {
  color: #f3c5b8;
}

.first-100-heading > p:last-child {
  max-width: 720px;
  margin: var(--space-300) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
}

.first-100-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-200);
  margin-top: var(--space-600);
}

.cohort-card {
  min-height: 320px;
  padding: var(--space-400);
  border: 1px solid var(--line-light);
  border-radius: 16px;
}

.cohort-founding,
.cohort-launch {
  background: rgba(104, 20, 22, 0.46);
}

.cohort-total {
  color: var(--ink);
  background: var(--cream);
  border-color: transparent;
}

.cohort-total .cohort-mark {
  background: var(--sand);
}

.cohort-mark {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-300);
  color: var(--burgundy);
  background: rgba(255, 255, 255, 0.88);
}

.cohort-mark svg {
  width: 36px;
  height: 36px;
}

.cohort-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 72px;
  letter-spacing: -0.07em;
  line-height: 0.92;
}

.cohort-card h3 {
  margin-top: var(--space-200);
  color: inherit;
  font-size: 24px;
}

.cohort-card p {
  max-width: 300px;
  margin: var(--space-200) 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.45;
}

.cohort-total p {
  color: var(--ink-soft);
}

.cohort-plus,
.cohort-equals {
  display: grid;
  place-items: center;
  align-self: center;
  color: #f3c5b8;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
}

.faq-section {
  background: var(--paper);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: var(--space-700);
}

.faq-intro h2 {
  max-width: 420px;
}

.faq-intro > p:last-child {
  max-width: 380px;
  margin: var(--space-300) 0 0;
  color: var(--ink-soft);
  font-size: 18px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  padding: var(--space-200) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: var(--burgundy);
  border: 1px solid rgba(141, 26, 27, 0.28);
  border-radius: 50%;
  content: "+";
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 700ms var(--ease-spring), background-color 700ms var(--ease-spring), color 700ms var(--ease-spring);
}

.faq-item[open] summary::after {
  color: var(--white);
  background: var(--burgundy);
  transform: rotate(45deg);
}

.faq-item p {
  max-width: 700px;
  margin: -4px 48px var(--space-300) 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.final-cta {
  color: var(--white);
  background: var(--burgundy);
}

.final-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-700);
  padding-block: var(--space-800);
}

.final-cta h2 {
  color: var(--white);
  font-size: 60px;
}

.final-cta h2 span {
  color: #f3c5b8;
}

.final-cta-inner > div > p:not(.eyebrow) {
  max-width: 660px;
  margin: var(--space-300) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
}

.final-cta small {
  display: block;
  margin-top: var(--space-200);
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.final-cta .button {
  flex: 0 0 auto;
}

.site-footer {
  color: var(--ink);
  background: var(--cream);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr)) minmax(120px, 0.7fr);
  gap: var(--space-600);
  padding-block: var(--space-700) var(--space-600);
}

.footer-brand .brand-logo {
  width: 140px;
}

.footer-brand p {
  margin: var(--space-200) 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.footer-links,
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-links strong,
.footer-social strong {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-links a {
  color: var(--ink-soft);
  font-size: 14px;
}

.footer-links a:hover {
  color: var(--burgundy);
}

.footer-social > a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--white);
  background: var(--burgundy);
  border-radius: 50%;
  transition: transform 700ms var(--ease-spring), background-color 700ms var(--ease-spring);
}

.footer-social > a:hover {
  background: var(--burgundy-dark);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

.footer-disclaimer {
  padding-block: var(--space-300);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.footer-disclaimer p {
  max-width: 880px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-300);
  padding-block: var(--space-300);
  color: rgba(78, 85, 90, 0.78);
  border-top: 1px solid var(--line);
  font-size: 12px;
}