/* ==========================================================================
   Alignmates — Section compositions.
   Ordered to match the 14 chapters of the homepage.
   ========================================================================== */

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.nav {
  position: fixed;
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-32));
  max-width: 1240px;
  z-index: 100;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    top 0.3s ease;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-24);
}

.nav.is-scrolled {
  background: rgba(18, 18, 28, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--dark-border);
  box-shadow: var(--shadow-md);
  top: var(--space-8);
}

.nav__brand img {
  height: 32px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--dark-text-secondary);
}

.nav__links a {
  transition: color 0.18s ease;
}

.nav__links a:hover {
  color: var(--dark-text-primary);
}

.nav .btn {
  min-height: 46px;
  font-size: 15.5px;
  padding: 0 var(--space-24);
}

.nav__burger {
  display: none;
  font-size: 24px;
  color: var(--dark-text-primary);
  padding: var(--space-8);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy-950);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  font-size: 24px;
  font-weight: 600;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}

.mobile-menu.is-open {
  transform: translateY(0);
}

.mobile-menu .close {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  font-size: 34px;
  color: var(--dark-text-primary);
  padding: var(--space-8);
}

@media (max-width: 940px) {
  .nav__links,
  .nav .nav__cta {
    display: none;
  }
  .nav__burger {
    display: block;
  }
}

/* ==========================================================================
   CH1 — HERO
   ========================================================================== */

.hero {
  padding-top: 168px;
  padding-bottom: var(--space-96);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: var(--space-56);
  align-items: center;
}

.hero__copy {
  min-width: 0;
}

.hero__lead {
  max-width: 500px;
  margin: var(--space-28) 0 var(--space-40);
}

.hero__micro {
  margin-top: var(--space-24);
}

/* -- Hero scene: ONE composition, layered primary / secondary / accent -- */

/* Two loose columns that read as one scene. Nothing overlaps live text:
   cards may overlap each other's padding, never each other's content. */
.hero__scene {
  position: relative;
  height: 690px;
  min-width: 0;
}

.hero-feed {
  position: absolute;
  top: 34px;
  right: 0;
  width: 348px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  z-index: 3;
  opacity: 0;
  transform: scale(0.97);
  animation: hero-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards 0.15s;
}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-feed .post-card {
  box-shadow: var(--shadow-xl);
}

.hero-float {
  position: absolute;
  opacity: 0;
  animation:
    float-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards,
    bob 7s ease-in-out infinite;
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --px/--py are updated live by initHeroParallax (JS) via setProperty —
   never via el.style.transform, which an infinite animation would just
   override every frame. Default to 0px so bob works with no JS too. */
@keyframes bob {
  0%,
  100% {
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  }
  50% {
    transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 9px), 0);
  }
}

.hero-float--community {
  top: 0;
  left: 0;
  width: 304px;
  z-index: 4;
  animation-delay: 0.3s, 0.9s;
}

.hero-float--audio {
  top: 246px;
  left: 8px;
  width: 296px;
  z-index: 2;
  animation-delay: 0.4s, 1s;
}

.hero-float--chat {
  bottom: 24px;
  left: 168px;
  width: 262px;
  z-index: 4;
  animation-delay: 0.5s, 1.1s;
}

.hero-card--community {
  border-color: var(--purple-600);
  background: linear-gradient(155deg, #2a1f4d, #171126);
}

.chat-bubble {
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  font-size: 14.5px;
  line-height: 1.45;
  display: block;
}

.chat-bubble--in {
  background: var(--dark-bg-surface);
  border: 1px solid var(--dark-border);
}

.chat-bubble--out {
  background: var(--purple-600);
  color: #fff;
  margin-left: auto;
  width: fit-content;
  max-width: 92%;
}

/* Loose identities — accent layer only */
.hero-loose {
  position: absolute;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  z-index: 1;
  opacity: 0;
  animation:
    float-in 0.6s ease forwards,
    bob 8s ease-in-out infinite;
}

/* Accent identities sit in the gaps between cards, never on top of them. */
.hero-loose--1 { width: 52px; height: 52px; top: 188px; left: 214px; animation-delay: 0.6s, 1.2s; }
.hero-loose--2 { width: 46px; height: 46px; top: 480px; right: 26px; animation-delay: 0.65s, 1.25s; }
.hero-loose--3 { width: 44px; height: 44px; bottom: 148px; left: 66px; animation-delay: 0.7s, 1.3s; }
.hero-loose--4 { width: 54px; height: 54px; bottom: 26px; right: 54px; animation-delay: 0.75s, 1.35s; }

@media (max-width: 1240px) {
  .hero-feed { width: 320px; }
  .hero-float--community { width: 272px; }
  .hero-float--audio { width: 268px; }
  .hero-float--chat { left: 140px; width: 244px; }
  .hero-loose--1 { left: 188px; }
}

@media (max-width: 1000px) {
  .hero {
    padding-top: 130px;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }
  .hero__lead {
    max-width: 100%;
  }
  .hero__scene {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    align-items: center;
  }
  .hero-feed,
  .hero-float {
    position: static;
    transform: none;
    animation: none;
    opacity: 1;
    width: 100%;
    max-width: 400px;
  }
  .hero-float--chat,
  .hero-loose {
    display: none;
  }
}

/* ==========================================================================
   CH2 — PRODUCT LOOP  (one connected flow)
   ========================================================================== */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  position: relative;
}

.flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding: 0 var(--space-16);
  position: relative;
}

/* Connector line runs behind the visuals */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 68px;
  left: calc(50% + 92px);
  width: calc(100% - 184px);
  height: 2px;
  background: linear-gradient(90deg, var(--purple-600), rgba(124, 58, 237, 0.15));
}

.flow__visual {
  width: 100%;
  max-width: 240px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.flow__label {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}

.flow-mini {
  width: 100%;
  border-radius: var(--radius-md);
  padding: var(--space-16);
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid var(--dark-border);
  background: var(--dark-bg-surface);
  text-align: left;
  box-shadow: var(--shadow-md);
}

.flow-mini--purple {
  background: linear-gradient(160deg, #241a40, #1a1430);
  border-color: rgba(139, 92, 246, 0.3);
}

.flow-pair {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-pair img:last-child {
  margin-left: -16px;
}

@media (max-width: 900px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-48);
  }
  .flow__step::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   CH3 — EMOTIONAL + WHY ALIGNMATES
   ========================================================================== */

.manifesto {
  max-width: var(--measure-lede);
  margin: 0 auto;
  text-align: center;
}

.manifesto__lead {
  max-width: var(--measure-copy);
  margin: var(--space-40) auto var(--space-48);
}

.why-bridge {
  max-width: var(--measure-lede);
  margin: var(--space-120) auto var(--space-64);
  text-align: center;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
}

.scenario-card {
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  border: 1px solid var(--dark-border);
  color: var(--dark-text-primary);
}

.scenario-card p {
  color: var(--dark-text-secondary);
}

.scenario-card h3 {
  margin-bottom: var(--space-12);
}

.scenario-card--blue { background: linear-gradient(160deg, #1a2440, #131a2c); }
.scenario-card--green { background: linear-gradient(160deg, #16302a, #10201c); }
.scenario-card--cyan { background: linear-gradient(160deg, #123236, #0e2528); }
.scenario-card--orange { background: linear-gradient(160deg, #33241a, #241a12); }

@media (max-width: 1000px) {
  .scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .why-bridge {
    margin-top: var(--space-80);
  }
}
@media (max-width: 560px) {
  .scenario-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   CH4 — AUDIO + EXPRESSION
   ========================================================================== */

.audio-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: var(--space-64);
  align-items: center;
}

/* Primary = audio post (foreground, fully readable).
   Secondary = composer screenshot (behind-right, still identifiable). */
.audio-stage {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.audio-stage__composer {
  position: absolute;
  top: 0;
  right: 0;
  width: 236px;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--dark-border);
  box-shadow: var(--shadow-xl);
  z-index: 1;
}

.audio-post {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin-top: 96px;
  padding: var(--space-32);
  gap: var(--space-20);
  box-shadow: var(--shadow-xl);
}

.audio-post__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.audio-post__play {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--purple-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: var(--glow-purple);
}

/* -- Expression collage: asymmetric, overlapping, app-styled -- */

.expression-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: var(--space-64);
  align-items: center;
  margin-top: var(--space-160);
}

.collage {
  position: relative;
  min-height: 640px;
}

.collage > * {
  position: absolute;
}

.collage__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-text-secondary);
  margin-bottom: var(--space-8);
}

.collage__text {
  top: 0;
  left: 0;
  width: 330px;
  z-index: 3;
  padding: var(--space-28);
  box-shadow: var(--shadow-xl);
}

.collage__poll {
  top: 252px;
  left: 246px;
  width: 300px;
  z-index: 4;
  padding: var(--space-24);
  box-shadow: var(--shadow-xl);
}

.collage__audio {
  top: 300px;
  left: 0;
  width: 260px;
  z-index: 2;
  padding: var(--space-20);
  box-shadow: var(--shadow-lg);
}

.collage__media {
  top: 20px;
  left: 396px;
  width: 172px;
  z-index: 2;
  padding: var(--space-20);
  box-shadow: var(--shadow-lg);
}

.collage__media-icon {
  display: block;
  font-size: 34px;
  text-align: center;
  padding: var(--space-16) 0;
}

.collage__themes {
  top: 508px;
  left: 300px;
  width: 230px;
  z-index: 3;
  padding: var(--space-20);
  box-shadow: var(--shadow-lg);
}

.swatches {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.swatches span {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
}

.poll-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.32);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  font-size: 14px;
  margin-top: var(--space-8);
  position: relative;
  overflow: hidden;
}

.poll-option__fill {
  position: absolute;
  inset: 0;
  background: rgba(139, 92, 246, 0.3);
}

.poll-option span:not(.poll-option__fill) {
  position: relative;
  z-index: 1;
}

@media (max-width: 1080px) {
  .audio-grid,
  .expression-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
  .expression-grid {
    margin-top: var(--space-96);
  }
  .audio-stage {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .audio-stage__composer {
    position: static;
    width: 190px;
    margin: 0 auto var(--space-24);
  }
  .audio-post {
    margin-top: 0;
    max-width: 100%;
  }
  .collage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }
  .collage > * {
    position: static;
    width: 100% !important;
  }
}

/* ==========================================================================
   CH5 — COMMUNITIES
   ========================================================================== */

.communities-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1120px;
  margin: 0 auto;
}

/* Cropped frames — status bars and dead nav space trimmed via object-position */
.community-frame {
  width: 460px;
  max-width: 44vw;
  height: 600px;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--dark-border);
  box-shadow: var(--shadow-xl);
  background: var(--navy-900);
  /* Fade the cut edge so the crop reads as intentional, not chopped */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}

/* Shifted up to crop the phone status bar out of the marketing crop */
.community-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -46px;
}

.community-frame--discovery {
  margin-left: -64px;
  margin-top: 72px;
  z-index: 2;
}

.communities-callouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-48);
}

.communities-callouts .pill {
  background: var(--dark-bg-surface-raised);
  border: 1px solid var(--dark-border);
  font-weight: 600;
}

/* Chapter sub-blocks — generous separation between community modules */
.community-block {
  margin-top: var(--space-120);
}

.community-block__head {
  text-align: center;
  margin-bottom: var(--space-56);
}

/* Discover → Join → Participate → Connect */
.community-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-48);
  position: relative;
}

.journey-step {
  text-align: center;
  position: relative;
}

.journey-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(50% + 40px);
  width: calc(100% - 80px + var(--space-48));
  height: 2px;
  background: linear-gradient(90deg, var(--purple-600), rgba(124, 58, 237, 0.12));
}

.journey-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: linear-gradient(150deg, var(--purple-600), var(--purple-900));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: var(--space-20);
  position: relative;
  z-index: 1;
}

.journey-step h4 {
  margin-bottom: var(--space-8);
}

/* Community → friendship story, in its own contained block */
.story-strip {
  background: var(--dark-bg-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-40) var(--space-32);
  max-width: 1200px;
  margin: 0 auto;
}

.story-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-12);
}

.story-node {
  background: var(--dark-bg-surface-raised);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-full);
  padding: var(--space-12) var(--space-20);
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.story-node--success {
  background: rgba(52, 211, 153, 0.14);
  border-color: var(--success-500);
  color: #7fe3c0;
}

.story-arrow {
  color: var(--dark-text-secondary);
  font-size: 18px;
}

/* Three principles */
.principle-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-48);
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
  padding: var(--space-48) 0;
}

.principle-row h4 {
  margin-bottom: var(--space-12);
}

/* Create-community CTA — compact, not a full section */
.create-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  flex-wrap: wrap;
  padding: var(--space-40);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, #241a40, var(--navy-800));
  border: 1px solid var(--purple-700);
  margin-top: var(--space-96);
}

@media (max-width: 1000px) {
  .communities-stage {
    flex-direction: column;
    align-items: center;
  }
  .community-frame {
    width: 340px;
    max-width: 86vw;
    height: 460px;
  }
  .community-frame--discovery {
    margin-left: 0;
    margin-top: var(--space-20);
  }
  .community-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-48);
  }
  .journey-step::after {
    display: none;
  }
  .principle-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
}

@media (max-width: 560px) {
  .community-journey {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-strip {
    padding: var(--space-24);
  }
}

/* ==========================================================================
   CH6 — DISCOVERY + CONNECT  (one continuous story)
   ========================================================================== */

.discovery-connect__half + .discovery-connect__half {
  margin-top: var(--space-120);
}

/* Feed tabs */
.tabs__list {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-bottom: var(--space-40);
  flex-wrap: wrap;
}

.tabs__tab {
  background: var(--dark-bg-surface);
  border: 1px solid var(--dark-border);
  color: var(--dark-text-secondary);
  border-radius: var(--radius-full);
  padding: var(--space-12) var(--space-28);
  font-weight: 600;
  font-size: 15px;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.tabs__tab:not(.is-active):hover {
  border-color: var(--purple-500);
  color: var(--dark-text-primary);
}

.tabs__tab.is-active {
  background: var(--purple-600);
  border-color: var(--purple-600);
  color: #fff;
}

.tabs__panel {
  display: none;
}

.tabs__panel.is-active {
  display: block;
  animation: fade-up 0.35s ease;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tabs__caption {
  text-align: center;
  margin-bottom: var(--space-32);
}

.feed-stack {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* The visual bridge from "something" to "someone" */
.bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  margin: var(--space-96) 0 var(--space-80);
  text-align: center;
}

.bridge__line {
  width: 2px;
  height: 56px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.1), var(--purple-500));
}

/* Connect */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}

/* Cropped to the part that proves the feature: the Connect explainer steps.
   Status bar and empty header space are trimmed out. */
.connect-shot {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center -150px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--dark-border);
  box-shadow: var(--shadow-xl);
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

.people-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--dark-border);
  background: var(--dark-bg-surface);
  padding: var(--space-32);
  box-shadow: var(--shadow-xl);
}

.people-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-4);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-24);
}

.people-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

@media (max-width: 860px) {
  .connect-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
}

/* ==========================================================================
   CH7 — POST → FRIENDSHIP
   ========================================================================== */

.journey-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  align-items: stretch;
  margin-top: var(--space-64);
}

.journey-4__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: relative;
}

.journey-4__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: calc(var(--space-24) / -2);
  transform: translate(50%, -50%);
  color: var(--light-text-secondary);
  font-size: 22px;
  z-index: 2;
}

.journey-4__label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--light-text-secondary);
}

.journey-4__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-12);
  min-height: 190px;
}

.journey-4 .post-card {
  height: 100%;
  justify-content: center;
}

.reply-card {
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: 15.5px;
  color: var(--light-text-primary);
  box-shadow: var(--shadow-sm);
}

.friends-card {
  background: rgba(52, 211, 153, 0.13);
  border: 1.5px solid var(--success-500);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  color: #0d7a53;
  font-weight: 700;
  font-size: 17px;
}

.friends-card__pair {
  display: flex;
}

.friends-card__pair img:last-child {
  margin-left: -14px;
}

@media (max-width: 1000px) {
  .journey-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-40);
  }
  .journey-4__step:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .journey-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .journey-4__step::after {
    display: none !important;
  }
}

/* ==========================================================================
   CH8 — CONVERSATIONS
   ========================================================================== */

.chat-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: var(--space-64);
  align-items: center;
}

.chat-window {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--dark-border);
  background: var(--dark-bg-surface);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.chat-window__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-28);
  border-bottom: 1px solid var(--dark-border);
  background: var(--navy-850);
}

.chat-window__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-28);
}

.chat-window__media {
  align-self: flex-end;
  background: linear-gradient(150deg, var(--purple-600), var(--purple-900));
  color: #fff;
  padding: var(--space-32) var(--space-40);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
}

.chat-window__voice {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  background: var(--dark-bg-surface-raised);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-20);
  align-self: flex-start;
  width: 70%;
}

.chat-window__receipt {
  align-self: flex-end;
  font-size: 12.5px;
  color: var(--dark-text-secondary);
}

.chat-edited {
  font-size: 12px;
  opacity: 0.75;
  font-style: italic;
}

@media (max-width: 1080px) {
  .chat-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
}

/* ==========================================================================
   CH9 — MOODMOJI IDENTITY
   ========================================================================== */

.identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: var(--space-64);
  align-items: center;
}

.orbit {
  position: relative;
  min-height: 520px;
}

.orbit__item {
  position: absolute;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  background: var(--white);
  transition: transform 0.22s ease;
  animation: bob 9s ease-in-out infinite;
}

.orbit__item:hover {
  transform: rotate(-7deg) scale(1.12);
}

.orbit__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  box-shadow: var(--shadow-lg);
  width: 268px;
  z-index: 3;
}

.orbit__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-20);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--light-border);
}

.orbit__stat {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.orbit__stat b {
  font-family: var(--font-display);
  font-size: 19px;
}

.orbit__stat span {
  font-size: 12px;
  color: var(--light-text-secondary);
}

@media (max-width: 1080px) {
  .identity-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .orbit {
    min-height: 440px;
  }
}

@media (max-width: 620px) {
  .orbit {
    min-height: 380px;
    transform: scale(0.86);
  }
}

/* ==========================================================================
   CH10 — PRIVACY + SAFETY
   ========================================================================== */

.control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-56);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.control-col h3 {
  margin-bottom: var(--space-12);
}

.control-col--start { text-align: right; }
.control-col--end { text-align: left; }

.control-panel {
  background: var(--dark-bg-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-28);
  box-shadow: var(--shadow-xl);
}

.control-panel__identity {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--dark-border);
  margin-bottom: var(--space-20);
}

.control-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.control-list li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  background: var(--dark-bg-surface-raised);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  font-size: 15px;
}

@media (max-width: 1000px) {
  .control-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
    max-width: 460px;
  }
  .control-col--start,
  .control-col--end {
    text-align: center;
  }
  .control-panel {
    order: -1;
  }
}

/* ==========================================================================
   CH11 — WHY ALIGNMATES IS DIFFERENT
   ========================================================================== */

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-48) var(--space-56);
  max-width: 1160px;
  margin: 0 auto;
}

.diff {
  padding-top: var(--space-24);
  border-top: 2px solid var(--light-border);
}

.diff__num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--light-accent);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-12);
}

.diff h3 {
  margin-bottom: var(--space-12);
}

/* Compact competitor row — deliberately secondary */
.competitors {
  max-width: 900px;
  margin: var(--space-120) auto 0;
  text-align: center;
}

.competitors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12) var(--space-24);
  margin-bottom: var(--space-40);
  font-size: 16px;
  color: var(--light-text-secondary);
}

.competitors__list span strong {
  color: var(--light-text-primary);
}

@media (max-width: 900px) {
  .diff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .competitors {
    margin-top: var(--space-80);
  }
}
@media (max-width: 560px) {
  .diff-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   CH12 — COMMUNITY-BUILT + FEATURE EXPLORER
   ========================================================================== */

.shipped-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-32);
  max-width: 1100px;
  margin: 0 auto;
}

.shipped-card {
  text-align: center;
  padding: var(--space-40) var(--space-32);
  border-radius: var(--radius-lg);
  border: 1px solid var(--dark-border);
  background: var(--dark-bg-surface);
}

.shipped-card__ask {
  font-size: 17px;
  color: var(--dark-text-secondary);
  font-style: italic;
}

.shipped-card__arrow {
  display: block;
  margin: var(--space-16) 0;
  color: var(--purple-400);
  font-size: 18px;
}

.shipped-card__result {
  font-weight: 700;
  font-size: 16.5px;
  color: var(--success-500);
}

/* -- Explorer: 30 / 70 with a rich product panel -- */

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: var(--space-40);
  align-items: start;
  margin-top: var(--space-56);
}

.explorer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: 110px;
}

.explorer__item {
  text-align: left;
  border-left: 3px solid transparent;
  padding: var(--space-16) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-radius: var(--radius-sm);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.explorer__item span:first-child {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--dark-text-primary);
}

.explorer__item span:last-child {
  font-size: 14px;
  color: var(--dark-text-secondary);
}

.explorer__item:hover {
  background: var(--dark-bg-surface);
}

.explorer__item.is-active {
  border-left-color: var(--purple-500);
  background: var(--dark-bg-surface);
}

.explorer__panel {
  display: none;
  background: var(--dark-bg-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-48);
  min-height: 560px;
}

.explorer__panel.is-active {
  display: block;
  animation: fade-up 0.3s ease;
}

.explorer__desc {
  max-width: 560px;
  margin: var(--space-16) 0 var(--space-40);
}

.explorer__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
  margin-bottom: var(--space-40);
  padding: var(--space-32);
  background: var(--navy-950);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  min-height: 240px;
}

/* One treatment for every explorer screenshot: same size, status bar cropped */
.explorer__shot {
  width: 212px;
  height: 400px;
  object-fit: cover;
  object-position: center -34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--dark-border);
  flex-shrink: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.feature-list li {
  background: var(--dark-bg-surface-raised);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-full);
  padding: var(--space-8) var(--space-16);
  font-size: 14.5px;
  color: var(--dark-text-primary);
}

@media (max-width: 1000px) {
  .shipped-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .explorer {
    grid-template-columns: minmax(0, 1fr);
  }
  .explorer__menu {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    scrollbar-width: none;
  }
  .explorer__menu::-webkit-scrollbar {
    display: none;
  }
  .explorer__item {
    border-left: none;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;
    padding: var(--space-12) var(--space-16);
  }
  .explorer__item span:last-child {
    display: none;
  }
  .explorer__item.is-active {
    border-bottom-color: var(--purple-500);
  }
  .explorer__panel {
    padding: var(--space-28);
    min-height: 0;
  }
}

/* ==========================================================================
   CH13 — RETURN / RELATIONSHIP LOOP
   ========================================================================== */

.return-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: var(--space-64);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.return-profile {
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-xl);
  padding: var(--space-40);
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  margin: 0 auto;
}

.return-profile__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  font-size: 14px;
  color: var(--light-text-secondary);
}

.return-profile__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success-500);
}

.notif-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.notif {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-md);
  padding: var(--space-20) var(--space-24);
  font-size: 16.5px;
  color: var(--light-text-primary);
  box-shadow: var(--shadow-sm);
}

.notif__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--cloud-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .return-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }
}

/* ==========================================================================
   CH14 — FINAL CTA + FOOTER
   ========================================================================== */

.final-cta {
  overflow: hidden;
}

.final-cta__people {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-48);
}

.final-cta__people img {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--navy-950);
  margin-left: -18px;
  box-shadow: var(--shadow-md);
}

.final-cta__people img:first-child {
  margin-left: 0;
}

.final-cta__people img:nth-child(even) {
  transform: translateY(-14px);
}

.final-cta__sign {
  margin-top: var(--space-80);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
}

@media (max-width: 700px) {
  .final-cta__people img {
    width: 54px;
    height: 54px;
    margin-left: -12px;
  }
}

/* ---- Footer ---- */

.footer {
  background: var(--navy-950);
  padding: var(--space-96) 0 var(--space-40);
  border-top: 1px solid var(--dark-border);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-48) var(--space-32);
  margin-bottom: var(--space-80);
}

.footer__brand img {
  height: 32px;
  margin-bottom: var(--space-24);
}

.footer__brand p {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--dark-text-secondary);
}

.footer__col h5 {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-24);
  color: var(--dark-text-secondary);
}

.footer__col a {
  display: block;
  font-size: 15px;
  color: var(--dark-text-primary);
  margin-bottom: var(--space-16);
  transition: color 0.18s ease;
}

.footer__col a:hover {
  color: var(--purple-300);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding-top: var(--space-32);
  border-top: 1px solid var(--dark-border);
  font-size: 14px;
  color: var(--dark-text-secondary);
}

@media (max-width: 1000px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}