/* ============================================================
   Flock — design system
   Palette and weight sampled from Direction 1 (the picked route)
   ============================================================ */

:root {
  --nav-h: 95px;            /* the hero is pulled up by this */
  /* Ground — white dominant, neutral separation. No pink washes. */
  --paper:   #FFFFFF;
  --bone:    #F4F2EE;   /* warm neutral section break */
  --bone-2:  #EAE7E1;   /* inset / rail */
  --surface: #FAF9F7;   /* alias: app inner ground */
  --warm:    #F4F2EE;   /* alias */
  --warm-2:  #EAE7E1;   /* alias */
  --ink:     #111014;   /* near-black */
  --ink-soft:#1B1A20;

  /* Confident accents. Each has one job. Used as graphic blocks, not tints. */
  --sun:     #FFCE31;   /* energy, highlight objects, CTA on dark */
  --violet:  #6C4CF1;   /* the philosophy moment */
  --sky:     #2F6BFF;   /* product / data */
  --mint:    #16B98C;   /* live, positive state */
  --pink:    #E45DA0;   /* brand accent: CTA, selected, badges */
  --pink-deep:#C93F82;

  --ink-80: rgba(17,16,20,.80);
  --ink-65: rgba(17,16,20,.60);
  --ink-50: rgba(17,16,20,.46);
  --line:   #E7E4DE;
  --line-2: #D6D2CA;

  /* legacy aliases kept so existing markup keeps working */
  --cream:      #F4F2EE;
  --cream-lite: #FFFFFF;
  --blush:      #F4F2EE;
  --dark:       #111014;
  --pink-band:  #F4F2EE;
  --cream-80: rgba(244,242,238,.82);
  --cream-60: rgba(244,242,238,.62);
  --cream-30: rgba(244,242,238,.30);

  /* Radius — generous on big surfaces, restrained on small ones */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(17,16,20,.04);
  --sh-2: 0 2px 10px rgba(17,16,20,.06);
  --sh-3: 0 20px 60px rgba(17,16,20,.12);

  --gut: 40px;
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--pink); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: 104px 0; }
.sec-tight { padding: 78px 0; }
.bg-cream { background: var(--cream); }
.bg-cream-lite { background: var(--cream-lite); }
.bg-blush { background: var(--warm); }
.bg-dark { background: var(--dark); color: var(--cream); }

/* ---------- type ---------- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.eyebrow-muted { color: var(--ink-50); }
.bg-dark .eyebrow-muted { color: var(--cream-60); }

.d1 { font-size: clamp(42px, 6.8vw, 104px); line-height: .98; letter-spacing: -.042em; font-weight: 700; }
.hero .d1, .d-hero { font-weight: 900; }
.d2 { font-size: clamp(33px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; }
.d3 { font-size: clamp(25px, 2.9vw, 40px); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; }
.h4 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.24; letter-spacing: -.018em; font-weight: 700; }

.lede { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--ink-65); font-weight: 400; }
.bg-dark .lede { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--ink-65); font-weight: 400; }
.body { font-size: 15px; line-height: 1.6; color: var(--ink-65); }
.bg-dark .body { color: var(--cream-60); }
.meta { font-size: 13px; font-weight: 500; color: var(--ink-50); }
.bg-dark .meta { color: var(--cream-60); }

.pink { color: var(--pink); }

/* pink hand-drawn underline on a word */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark svg { position: absolute; left: 0; bottom: -.06em; width: 100%; height: .22em; overflow: visible; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 30px; border-radius: 999px; border: 0;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  min-height: 52px;
}
.btn-pink { background: var(--pink); color: #fff; box-shadow: none; }
.btn-pink:hover { background: var(--pink-deep); transform: none; }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #000; transform: none; }
.btn-ghost { background: transparent; color: inherit; border: 1px solid var(--line-2); }
.btn-ghost:hover { background: rgba(24,12,16,.04); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.btn-light:hover { background: rgba(255,255,255,.22); }
.btn-sm { padding: 11px 20px; font-size: 14.5px; min-height: 42px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; padding-bottom: 3px;
  border-bottom: 1px solid var(--line-2);
}
.link-arrow:hover { color: var(--pink); border-color: var(--pink); }
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-2);
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  min-height: 44px;
}
.chip:hover { border-color: var(--ink-50); transform: translateY(-1px); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: var(--cream);
  font-size: 12.5px; font-weight: 500; color: var(--ink-65);
  /* a pill is a single token: it must never be squeezed onto two lines when
     the row runs out of width on a phone */
  white-space: nowrap; flex: none;
}
.badge-new {
  padding: 6px 12px; border-radius: 999px; background: var(--pink); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--pink); flex: none; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.pill-live {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--sh-1);
}

/* ---------- avatars ---------- */
.av { border-radius: 999px; object-fit: cover; flex: none; }
.av-stack { display: flex; }
.av-stack .av + .av { margin-left: -12px; }
.av-ring { box-shadow: 0 0 0 2px var(--paper); }
.bg-dark .av-ring, .on-media .av-ring { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.bg-cream .av-ring { box-shadow: 0 0 0 2px var(--cream); }

/* ---------- cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;
}
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.card-media { overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card-lift:hover .card-media img { transform: scale(1.045); }
.card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.quote-box { background: var(--cream); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--ink); }

/* ---------- nav ---------- */
.nav { position: relative; z-index: 20; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px 0; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--pink); }
.nav-links a.is-active { color: var(--pink); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-mark { height: 24px; width: auto; }

.nav-over { position: absolute; top: 0; left: 0; right: 0; color: #fff; }
.nav-over .nav-inner { border-bottom: 1px solid rgba(255,255,255,.16); }
.nav-over .nav-links a:hover { color: #fff; opacity: .75; }
.nav-solid .nav-inner { border-bottom: 1px solid var(--line); }

/* ---------- hero (full-bleed media) ---------- */
.hero {
  position: relative; min-height: 780px; display: flex; align-items: center;
  overflow: hidden; background: var(--dark);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,11,14,.62) 0%, rgba(20,11,14,.30) 34%, rgba(20,11,14,.55) 72%, rgba(20,11,14,.86) 100%),
    linear-gradient(to right, rgba(20,11,14,.46) 0%, rgba(20,11,14,.10) 60%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 150px 0 78px; color: #fff; }
.hero-copy { max-width: 780px; display: flex; flex-direction: column; gap: 24px; }
.hero .pill-live { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: #fff; backdrop-filter: blur(8px); box-shadow: none; align-self: flex-start; }
.hero-sub { font-size: clamp(16px, 1.4vw, 19.5px); line-height: 1.6; color: rgba(255,255,255,.86); max-width: 560px; }

/* the "what are you bringing people together around" entry */
.starter {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  background: rgba(255,255,255,.97); border-radius: 999px;
  padding: 8px 8px 8px 28px; width: fit-content; max-width: 100%;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.starter-label { display: flex; align-items: baseline; gap: 7px; font-size: 16.5px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.starter-word { font-weight: 700; color: var(--pink); position: relative; white-space: nowrap; }
.starter-word::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; background: var(--pink); margin-left: 3px; vertical-align: -.16em; animation: caret 1.1s step-end infinite; }
@keyframes caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.starter-hints { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hint {
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .18s ease;
}
.hint:hover { background: rgba(255,255,255,.26); }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; }

/* ---------- ticker ---------- */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; padding: 14px 0; }
.ticker-track { display: flex; gap: 46px; white-space: nowrap; width: max-content; animation: marquee 46s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-65); }
.ticker-item::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--pink); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) {
  /* An item is sized by its own copy, and on a phone a single item is wider
     than the viewport - so items entered and left the screen mid-word against
     a hard edge. Fade both edges (the treatment the discovery mosaic already
     uses) and tighten the run so more of an item reads at once. */
  .ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .ticker-track { gap: 30px; }
  .ticker-item { font-size: 12.5px; gap: 8px; }
}

/* ---------- layout helpers ---------- */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap14 { gap: 14px; }
.gap16 { gap: 16px; } .gap20 { gap: 20px; } .gap24 { gap: 24px; } .gap32 { gap: 32px; }
.mt-auto { margin-top: auto; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 44px; }
.sec-head .stack { gap: 14px; max-width: 780px; }

/* ---------- story cards (cinematic) ---------- */
.story { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 440px; display: flex; }
.story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.story:hover > img { transform: scale(1.05); }
.story-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,11,14,.94) 12%, rgba(20,11,14,.48) 46%, rgba(20,11,14,0) 80%); }
.story-body { position: relative; z-index: 2; align-self: flex-end; padding: 32px; color: #fff; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.story-body .body { color: rgba(255,255,255,.82); }
.story-outcome { padding: 8px 15px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12.5px; font-weight: 700; }

/* ---------- topic selector ---------- */
.topic-media { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 560px; }
.topic-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.topic-media > img.is-on { opacity: 1; }
.topic-media .story-scrim { z-index: 1; }
.topic-cap { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; color: #fff; }

/* ---------- seven steps ---------- */
.steps { position: relative; }
.steps::before { content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.step { position: relative; display: flex; margin-bottom: 16px; }
.step-l { justify-content: flex-start; padding-right: calc(50% + 40px); }
.step-r { justify-content: flex-end; padding-left: calc(50% + 40px); }
/* the marker centres on its card at any card height - it was pinned at a flat
   24px, so every card of a different height sat off its own dot */
.step-node { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-radius: 999px; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px var(--paper); }
.step-node.is-pink { background: var(--pink); }
.step-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--sh-1); max-width: 460px; }
.step-card.is-pink { background: var(--pink); color: #fff; border-color: var(--pink); }
.step-card.is-dark { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.step-day { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; }
.step-card.is-pink .step-day, .step-card.is-dark .step-day { color: rgba(255,255,255,.65); }

/* ---------- signal rows ---------- */
.signal { display: flex; align-items: center; gap: 20px; padding: 16px 14px; border-radius: var(--r-sm); border-bottom: 1px solid var(--line); transition: background .18s ease; }
.signal:last-child { border-bottom: 0; }
.signal:hover { background: var(--blush); }
.signal-name { font-size: 16px; font-weight: 700; width: 270px; flex: none; }
.bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(24,12,16,.08); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--pink); }
.bar.ink span { background: var(--ink); }

/* ---------- funnel vs flock ---------- */
.funnel-stage { position: relative; text-align: center; padding: 16px 0; border-radius: 10px; overflow: hidden; }
.funnel-fill { position: absolute; inset: 0; border-radius: inherit; background: rgba(246,239,231,.12); z-index: 0; }
.funnel-stage > b, .funnel-stage > .meta { position: relative; z-index: 1; }
.flock-cluster { position: relative; height: 300px; }
.flock-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 152px; height: 152px; border-radius: 999px; z-index: 2;
  background: var(--dark); border: 1px solid var(--pink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}


/* ---------- footer ---------- */
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 48px; padding-bottom: 42px; border-bottom: 1px solid rgba(246,239,231,.16); }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 15px; color: var(--cream-80); }
.foot-col a:hover { color: var(--pink); }
.foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; font-size: 13.5px; color: var(--cream-60); }

/* ---------- discovery ---------- */
.search {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 720px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 8px 8px 8px 24px; box-shadow: var(--sh-2);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.search input::placeholder { color: var(--ink-50); }
.strip { display: flex; gap: 14px; overflow: hidden; padding: 24px 0 0; }
.strip img { width: 210px; height: 150px; object-fit: cover; border-radius: var(--r-md); flex: none; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; }
.empty { text-align: center; padding: 70px 0 10px; }

/* ---------- system page ---------- */
.swatch { height: 104px; border-radius: var(--r-md); border: 1px solid var(--line); }
.spec { font-size: 12px; font-weight: 500; color: var(--ink-50); line-height: 1.5; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  :root { --gut: 28px; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .signal-name { width: 190px; }
}

@media (max-width: 860px) {
  .sec { padding: 72px 0; }
  .nav-links { display: none; }
  .hero { min-height: 640px; }
  .hero-inner { padding: 120px 0 56px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sec-head p[style] { text-align: left !important; max-width: none !important; }
  .topic-media { min-height: 380px; }
  .steps::before { left: 7px; }
  .step-l, .step-r { padding: 0 0 0 34px; justify-content: flex-start; }
  .step-node { left: 7px; }
  .step-card { max-width: none; }
  .signal { flex-wrap: wrap; gap: 10px; }
  .signal-name { width: 100%; }
  .bar { order: 3; width: 100%; flex-basis: 100%; }
  .starter { flex-direction: column; align-items: stretch; gap: 12px; border-radius: var(--r-lg); padding: 18px; width: 100%; }
  .starter-label { white-space: normal; flex-wrap: wrap; }
  .starter .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .flock-cluster { height: 260px; }
}

/* ============================================================
   Discovery hero — a living wall of Flocks (page 2 only)
   ============================================================ */
.disco-hero { padding: 56px 0 84px; overflow: hidden; }
.disco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.disco-copy { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }

.mosaic {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  height: 620px; overflow: hidden;
}
.mosaic-fade {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    rgba(255,255,255,0) 15%,
    rgba(255,255,255,0) 85%,
    var(--paper) 100%);
}
.mosaic-col { display: flex; flex-direction: column; gap: 14px; animation: driftUp 44s linear infinite; will-change: transform; }
.mosaic-col.rev { animation: driftDown 52s linear infinite; }
.mosaic-col.slow { animation-duration: 60s; }
@keyframes driftUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes driftDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.tile { position: relative; border-radius: var(--r-md); overflow: hidden; flex: none; box-shadow: var(--sh-1); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,11,14,.78), rgba(20,11,14,0) 58%); }
.tile-cap { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 11px; color: #fff; }
.tile-name { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.tile-meta { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.75); margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .mosaic-col, .ticker-track { animation: none !important; }
  .starter-word::after { animation: none; }
  .dot { animation: none; }
}

@media (max-width: 1080px) {
  .disco-grid { grid-template-columns: 1fr; gap: 44px; }
  .disco-copy { max-width: none; }
  .mosaic { height: 420px; }
}
@media (max-width: 620px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); height: 360px; }
}

/* ============================================================
   Surfaces last — these must win over component backgrounds
   (.card sets its own background, so it would otherwise
   override .bg-dark on a combined `class="card bg-dark"`)
   ============================================================ */
.bg-cream      { background: var(--cream); }
.bg-cream-lite { background: var(--cream-lite); }
.bg-blush      { background: var(--warm); }
.bg-dark       { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.bg-dark .lede,
.bg-dark .body,
.bg-dark .meta { color: var(--cream-60); }
.bg-dark .eyebrow-muted { color: var(--cream-60); }
.bg-dark a:not(.btn) { color: var(--cream-80); }
.bg-dark a:not(.btn):hover { color: var(--pink); }

/* ============================================================
   Corrections
   ============================================================ */
/* tags were reading as "air" — give them a defined edge */
.tag { background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); }
.chip-sm { padding: 8px 16px; font-size: 13.5px; min-height: 36px; }

/* logo in a flex column would stretch to column width */
.foot-col > img, .stack > img.nav-mark { align-self: flex-start; width: auto; }
.nav-brand { display: inline-flex; align-items: center; }
.nav-plain { font-size: 15px; font-weight: 500; }

/* funnel stages on a light surface */
.funnel-stage .funnel-fill { background: rgba(24,12,16,.06); }

/* ============================================================
   Hero montage — video + Flock UI, changing together
   ============================================================ */
.hero-grid { display: grid; grid-template-columns: 1fr 372px; gap: 56px; align-items: center; }

.hero-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.hero-clip.is-on { opacity: 1; }

.hero-ui {
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-radius: var(--r-lg); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.32); color: var(--ink);
}
.hero-ui-top { display: flex; align-items: center; gap: 12px; }
.hero-ui-top b { font-size: 16px; letter-spacing: -.01em; }
.hero-ui-top span { font-size: 12.5px; color: var(--ink-50); font-weight: 500; }
.hero-ui-msg { font-size: 16px; line-height: 1.5; font-weight: 500; }
.hero-ui-foot { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; color: var(--pink); }
.hero-ui-bars { display: flex; gap: 5px; }
.hero-ui-bars i { flex: 1; height: 3px; border-radius: 999px; background: rgba(24,12,16,.14); overflow: hidden; }
.hero-ui-bars i.is-on { background: var(--pink); }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-ui { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-clip { transition: none; }
}

/* ============================================================
   Sticky navigation + journey toggle
   The creative direction says connect discovery through
   navigation — so the two journeys live in the nav, not in a
   homepage fork.
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 50; transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.nav-over { position: sticky; background: transparent; color: #fff; }
.nav-over .nav-inner { border-bottom: 1px solid rgba(255,255,255,.18); }
.nav-solid { background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); }
.nav-solid .nav-inner { border-bottom: 1px solid var(--line); }

.nav.is-stuck { background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav.is-stuck .nav-inner { border-bottom: 0; }
.nav.is-stuck .nav-mark { content: none; }

.jtoggle {
  display: inline-flex; padding: 4px; border-radius: 999px; gap: 2px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease;
}
.jtoggle a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  font-size: 14.5px; font-weight: 700; color: #fff;
  transition: background .2s ease, color .2s ease;
  min-height: 40px;
}
.jtoggle a:hover { color: #fff; opacity: .8; }
.jtoggle a.is-on { background: #fff; color: var(--ink); opacity: 1; }

.nav-solid .jtoggle,
.nav.is-stuck .jtoggle { background: rgba(24,12,16,.05); border-color: var(--line); }
.nav-solid .jtoggle a,
.nav.is-stuck .jtoggle a { color: var(--ink-65); }
.nav-solid .jtoggle a:hover,
.nav.is-stuck .jtoggle a:hover { color: var(--ink); opacity: 1; }
.nav-solid .jtoggle a.is-on,
.nav.is-stuck .jtoggle a.is-on { background: var(--ink); color: var(--cream); }

.nav.is-stuck .nav-right a:not(.btn) { color: var(--ink); }
.nav-over .nav-right a:not(.btn) { color: #fff; }

/* hero sits under the sticky nav */
.hero { margin-top: -86px; padding-top: 86px; }

/* ============================================================
   Pink statement band — "Funnels chase people. Flocks keep them."
   Direction 2 presented this line on pink, and that is the
   version the client responded to.
   ============================================================ */
.bg-pink { background: var(--warm-2); color: var(--ink); }
.bg-pink .lede, .bg-pink .body, .bg-pink .meta { color: rgba(24,12,16,.66); }
.bg-pink .eyebrow-muted { color: rgba(24,12,16,.55); }

/* ============================================================
   Light footer (Direction 1's footer is light, not dark)
   ============================================================ */
.foot { background: var(--cream); color: var(--ink); padding: 60px 0 36px; }
.foot .foot-grid { border-bottom: 1px solid var(--line-2); }
.foot .foot-col a { color: var(--ink-65); }
.foot .foot-col a:hover { color: var(--pink); }
.foot .foot-bot { color: var(--ink-50); }
.foot .body { color: var(--ink-65); }

@media (max-width: 860px) {
  .jtoggle a { padding: 9px 14px; font-size: 13.5px; }
  .hero { margin-top: -78px; padding-top: 78px; }
}

/* wordmark swaps when the transparent nav turns solid */
.nav-mark-dark { display: none; }
.nav.is-stuck .nav-mark-light { display: none; }
.nav.is-stuck .nav-mark-dark { display: block; }
.nav-solid .nav-mark-light { display: none; }
.nav-solid .nav-mark-dark { display: block; }

/* the cluster core is dark, so its type must be light regardless of surface */
.flock-core { color: var(--cream); }
.flock-core .meta { color: var(--cream-60); }

/* keep story eyebrows legible over bright sky / light image areas */
.story-body .eyebrow,
.story-body h3,
.story-body .body,
.story-body span { text-shadow: 0 1px 10px rgba(20,11,14,.5); }
.story-body .story-outcome { text-shadow: none; }

/* ============================================================
   Discovery masonry — Direction 1's layout
   Staggered columns with images at varying heights, so browsing
   reads as a wall of different worlds rather than a uniform
   marketplace row.
   ============================================================ */
.masonry { column-count: 3; column-gap: 24px; }
.masonry > .fcard { break-inside: avoid; margin: 0 0 24px; display: block; width: 100%; }

.fcard {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .28s ease, box-shadow .28s ease;
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.fcard-media { position: relative; overflow: hidden; }
.fcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fcard:hover .fcard-media img { transform: scale(1.045); }
.fcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 7px; }
.fcard-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.fcard-tags { font-size: 13.5px; color: var(--ink-65); }
.fcard-by { font-size: 13.5px; color: var(--ink-65); }
.fcard-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.join {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper);
  font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 38px;
  transition: background .18s ease, border-color .18s ease;
}
.join:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.fcard-note { font-size: 12.5px; font-weight: 700; color: var(--pink); }

@media (max-width: 1080px) { .masonry { column-count: 2; } }
@media (max-width: 620px)  { .masonry { column-count: 1; } }

/* ============================================================
   Contrast pass
   Brand pink #E45DA0 only clears 3:1 on white, so it is reserved
   for large display type and decorative marks. Small text and
   filled chips use a deeper pink that clears 4.5:1, and any label
   sitting on a photograph is white.
   ============================================================ */
:root {
  --pink-text: #C2317A;
  --ink-50: rgba(24,12,16,.62);
}

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.fcard-note { color: var(--pink-text); }
.hero-ui-foot { color: var(--pink-text); }
.signal .pink, .pink.meta { color: var(--pink-text); }
a.link-arrow:hover { color: var(--pink-text); }
.foot .foot-col a:hover { color: var(--pink-text); }

/* filled pink surfaces that carry small text */
.btn-pink { background: var(--pink-text); box-shadow: 0 6px 18px rgba(194,49,122,.26); }
.btn-pink:hover { background: #AD2A6C; box-shadow: 0 10px 26px rgba(194,49,122,.34); }
.badge-new { background: var(--pink-text); }
.story-outcome { background: var(--pink-text); }
.step-card.is-pink { background: var(--pink-text); border-color: var(--pink-text); }

/* labels over photography are always white, never pink */
.story-body .eyebrow,
.topic-cap .eyebrow,
.tile-cap .tile-name { color: #FFFFFF; }
.story-body .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #FFFFFF; }

/* large display words keep the brand pink */
h1 .pink, h2 .pink, .d1 .pink, .d2 .pink { color: var(--pink); }
.bg-dark .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(246,239,231,.72); }
.bg-dark .pink { color: var(--pink); }

/* hero copy must stay readable over any frame of the montage */
.hero-scrim {
  background:
    linear-gradient(to right, rgba(18,10,13,.86) 0%, rgba(18,10,13,.64) 34%, rgba(18,10,13,.22) 66%, rgba(18,10,13,.10) 100%),
    linear-gradient(to bottom, rgba(18,10,13,.52) 0%, rgba(18,10,13,.20) 30%, rgba(18,10,13,.34) 70%, rgba(18,10,13,.72) 100%);
}
.hero-copy h1,
.hero-copy .hero-sub,
.hero-proof { text-shadow: 0 2px 18px rgba(12,7,9,.55); }
.hero .pill-live { text-shadow: none; }

/* scrim: enough to hold the copy, light enough to keep the footage alive */
.hero-scrim {
  background:
    linear-gradient(to right, rgba(18,10,13,.74) 0%, rgba(18,10,13,.46) 38%, rgba(18,10,13,.06) 72%, rgba(18,10,13,0) 100%),
    linear-gradient(to bottom, rgba(18,10,13,.34) 0%, rgba(18,10,13,.06) 34%, rgba(18,10,13,.16) 68%, rgba(18,10,13,.52) 100%);
}

/* Clips vary from near-black to bright white paper, so no single
   scrim can hold the copy. Normalise every clip into the same
   tonal band first, then scrim lightly on top. */
.hero-clip { filter: brightness(.56) saturate(1.08) contrast(1.02); }
.hero-scrim {
  background:
    linear-gradient(to right, rgba(18,10,13,.62) 0%, rgba(18,10,13,.34) 40%, rgba(18,10,13,.04) 74%, rgba(18,10,13,0) 100%),
    linear-gradient(to bottom, rgba(18,10,13,.30) 0%, rgba(18,10,13,.04) 32%, rgba(18,10,13,.12) 68%, rgba(18,10,13,.46) 100%);
}

/* ============================================================
   Hero legibility: a localised field behind the copy only, so
   the footage stays bright and the headline never drops below
   contrast on any frame.
   ============================================================ */
.hero-clip { filter: none; }
.hero-scrim {
  background:
    linear-gradient(to right, rgba(18,10,13,.42) 0%, rgba(18,10,13,.18) 46%, rgba(18,10,13,0) 78%),
    linear-gradient(to bottom, rgba(18,10,13,.30) 0%, rgba(18,10,13,0) 26%, rgba(18,10,13,0) 62%, rgba(18,10,13,.46) 100%);
}
.hero-copy { position: relative; }
.hero-copy::before {
  content: ''; position: absolute; inset: -56px -120px -48px -90px;
  background: radial-gradient(78% 84% at 26% 52%,
    rgba(12,7,9,.90) 0%, rgba(12,7,9,.78) 38%, rgba(12,7,9,.44) 66%, rgba(12,7,9,0) 100%);
  filter: blur(18px); z-index: -1; pointer-events: none;
}
.hero-copy > * { position: relative; z-index: 1; }
.hero-copy h1, .hero-copy .hero-sub, .hero-proof { text-shadow: 0 2px 16px rgba(10,6,8,.6); }

/* ============================================================
   Motion
   Everything is readable before it animates: reveals only move
   opacity and a few pixels, and are disabled outright under
   prefers-reduced-motion.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }

/* seven steps: the connecting line draws as you pass through */
.steps::after {
  content: ''; position: absolute; left: 50%; top: 8px; width: 1px;
  background: var(--pink); height: 0; transition: height .6s linear; transform: translateX(-.5px);
}
.step-card { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.step.in .step-card { opacity: 1; transform: none; }
/* keep the -50% Y from the centring rule: dropping it here is what pushed the
   marker half its own height below the card's centre once the step revealed */
.step-node { transform: translate(-50%, -50%) scale(.5); opacity: .35; transition: transform .35s cubic-bezier(.3,1.4,.4,1), opacity .35s ease; }
.step.in .step-node { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* roadmap: bars grow from zero once seen */
.bar span { width: 0 !important; transition: width .9s cubic-bezier(.2,.8,.3,1); }
.bar.in span { width: var(--w) !important; }

/* masonry filtering: cards fade rather than snap */
.fcard { transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease; }
.fcard.filtering { opacity: 0; }

/* people > leads: the anonymous number gives way to real members */
.leads-num { transition: opacity .6s ease, filter .6s ease; }
.leads-num.faded { opacity: .28; filter: blur(1.5px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .step-card, .step-node { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bar span { width: var(--w) !important; transition: none !important; }
  .steps::after { display: none; }
  .leads-num.faded { opacity: 1; filter: none; }
  .mosaic-col { animation: none !important; }
}
.steps-line { position: absolute; left: 50%; top: 8px; width: 1px; background: var(--pink); height: 0; transform: translateX(-.5px); transition: height .25s linear; z-index: 1; }
.steps::after { display: none; }
@media (max-width: 860px) { .steps-line { left: 7px; } }

/* search results must clear the sticky nav when jumped to */
#browse { scroll-margin-top: 96px; }

/* ============================================================
   RESPONSIVE
   Inline grid-template-columns in the markup beat stylesheet
   rules, so the collapses below are marked !important. Nothing
   else here uses it.
   ============================================================ */
html, body { max-width: 100%; }
img, video, svg { max-width: 100%; }

/* ---- tablet landscape ---- */
@media (max-width: 1080px) {
  :root { --gut: 40px; }
  .sec { padding: 84px 0; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid[style*="grid-template-columns"],
  .card[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}

/* ---- tablet portrait ---- */
@media (max-width: 860px) {
  :root { --gut: 28px; }
  .sec { padding: 68px 0; }
  .sec-tight { padding: 54px 0; }

  /* every two-column block becomes one column */
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .grid[style*="grid-template-columns"],
  .card[style*="grid-template-columns"],
  .foot-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .grid[style*="gap:56px"], .grid[style*="gap:70px"] { gap: 36px !important; }
  .card[style*="padding:52px"] { padding: 34px !important; }

  /* section heads stop fighting for space */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-head p, .sec-head .body, .sec-head .meta { text-align: left !important; max-width: none !important; }

  /* nav wraps to two rows, toggle stays reachable */
  .nav-plain { display: none; }

  /* seven-step timeline: everything to one side of the rule */
  .steps::before, .steps::after, .steps-line { left: 7px; }
  .step-l, .step-r { justify-content: flex-start; padding-left: 34px; padding-right: 0; }
  .step > div { width: 100%; max-width: none !important; }

  footer .foot-grid { gap: 30px; }
  .foot-bot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- mobile ---- */
@media (max-width: 620px) {
  :root { --gut: 20px; }
  .sec { padding: 56px 0; }
  .grid, .g2, .g3, .g4 { gap: 18px; }

  .hero { min-height: 620px; }
  .hero-ui { max-width: none; }
  .starter { flex-direction: column; align-items: stretch; gap: 12px; }
  .starter .btn { justify-content: center; }
  .starter-label { text-align: center; }

  /* search: field over button */
  .search { flex-wrap: wrap; border-radius: var(--r-lg); padding: 12px; gap: 10px; }
  .search input { flex: 1 1 100%; min-width: 0; }
  .search .btn { flex: 1 1 100%; justify-content: center; }

  /* filter rails scroll instead of wrapping into a wall */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }

  .funnel-stage { width: 100% !important; }
  .flock-cluster { height: 260px; }
  .card[style*="padding:52px"] { padding: 24px !important; }
  .card[style*="padding:32px"] { padding: 24px !important; }

  /* every tap target clears 44px */
  .btn, .chip, .jtoggle a { min-height: 44px; }
}

@media (max-width: 400px) {
  :root { --gut: 16px; }
  .jtoggle a { padding: 10px 10px; font-size: 13px; }
}

/* the Flock grid must be one column on a phone (source order wins) */
@media (max-width: 620px) {
  .masonry { column-count: 1; column-gap: 0; }
  .masonry > .fcard { width: 100%; margin-bottom: 18px; }
}

/* mosaic: let the columns actually shrink, and drop to two on a phone */
.mosaic-col { min-width: 0; }
.mosaic .tile img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); height: 400px; }
  .mosaic-col.slow { display: none; }
}
@media (max-width: 620px) {
  .mosaic { height: 300px; gap: 10px; }
  .mosaic .tile { height: auto !important; min-height: 120px; }
}

/* anchored sections must clear the sticky nav */
#start, #inside, #browse, #product, #stories, #opportunity { scroll-margin-top: 96px; }

/* ============================================================
   Focus visibility — every interactive element, keyboard only
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
.chip:focus-visible, .join:focus-visible, .jtoggle a:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 999px;
}
.fcard a:focus-visible, .story:focus-visible { outline-offset: 2px; border-radius: var(--r-lg); }
.search:focus-within { box-shadow: 0 0 0 3px rgba(228,93,160,.35), var(--sh-2); }
.nav.nav-over a:focus-visible, .nav.nav-over button:focus-visible { outline-color: #fff; }

/* join button states */
.join { transition: background .2s ease, color .2s ease, border-color .2s ease; cursor: pointer; }
.join[aria-pressed="true"] {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.join[aria-pressed="true"]::after { content: ' ✓'; }

/* ============================================================
   Header: one intentional row at every width.
   Below 760px it becomes a compact menu rather than wrapping.
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 60; }
.nav-inner { flex-wrap: nowrap; }
.nav-burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .28s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-panel { display: none; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); }
.nav-panel .wrap { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; padding-bottom: 20px; }
.nav-panel-link {
  display: flex; align-items: center; min-height: 52px; padding: 0 16px;
  border-radius: var(--r-md); font-size: 17px; font-weight: 700; color: var(--ink);
}
.nav-panel-link.is-on { background: var(--cream); color: var(--pink); }
.nav-panel-cta { justify-content: center; min-height: 52px; margin-top: 6px; }

@media (max-width: 760px) {
  .jtoggle, .nav-right { display: none; }
  .nav-burger { display: flex; }
  .nav-panel[data-open="true"] { display: block; }
  /* the panel needs a solid header behind it */
  .nav[data-open="true"] { background: var(--paper); color: var(--ink); }
  .nav[data-open="true"] .nav-mark-light { display: none; }
  .nav[data-open="true"] .nav-mark-dark { display: block; }
}
body[data-nav-open="true"] { overflow: hidden; }

/* hero never shows a black frame: the poster sits behind every clip */
.hero-media { background: #1a1012 url('video/poster.jpg') center/cover no-repeat; }

/* ============================================================
   FLOCK PRODUCT UI
   One app language. Every product surface on the site is built
   from these parts so they read as the same software.
   ============================================================ */
.app {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 208px 1fr;
  box-shadow: var(--sh-2);
}
.app-solo { grid-template-columns: 1fr; }

/* left rail */
.app-rail { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.app-brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 14px; }
.app-brand img { height: 18px; width: auto; }
.app-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--ink-65); }
.app-nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }
.app-nav.is-on { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: var(--sh-1); }
.app-nav.is-on svg { color: var(--pink); }
.app-rail-label { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); padding: 16px 10px 6px; }

/* top bar */
.app-top { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.app-top b { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.app-search { flex: 1; max-width: 260px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-50); background: var(--surface); }
.app-search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.app-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }

/* tabs inside the product */
.app-tabs { display: flex; gap: 4px; padding: 4px; background: var(--warm-2); border-radius: var(--r-pill); }
.app-tab { border: 0; background: transparent; padding: 8px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; color: var(--ink-65); cursor: pointer; min-height: 36px; transition: background .18s ease, color .18s ease; }
.app-tab:hover { color: var(--ink); }
.app-tab.is-on { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: var(--sh-1); }

/* generic surface inside the app */
.mod { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.mod-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mod-title { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.mod-note { font-size: 12px; color: var(--ink-50); font-weight: 500; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); background: var(--warm-2); font-size: 11.5px; font-weight: 500; color: var(--ink-65); }
.tag-pink { background: var(--blush); color: var(--pink-deep); }

/* a post in the feed */
.post { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.post-head b { font-size: 13.5px; font-weight: 500; }
.post-main { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.post-title { font-size: 17px; font-weight: 500; letter-spacing: -.016em; line-height: 1.3; }
.post-foot { display: flex; align-items: center; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-50); font-weight: 500; }
.post-foot .act { display: inline-flex; align-items: center; gap: 6px; }
.post-foot svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* audio player (podcast feed) */
.player { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border-radius: var(--r-md); }
.player-art { width: 68px; height: 68px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.player-play { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.player-play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.player-bar { height: 3px; border-radius: 2px; background: var(--line-2); position: relative; margin-top: 8px; }
.player-bar span { position: absolute; inset: 0 auto 0 0; background: var(--pink); border-radius: 2px; }
.player-time { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-50); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* article (writing feed) */
.article-read { background: var(--surface); border-radius: var(--r-md); padding: 18px 20px; }
.article-read p { font-size: 14px; line-height: 1.7; color: var(--ink-65); }
.article-read p + p { margin-top: 10px; }
.article-rule { height: 1px; background: var(--line); margin: 14px 0; }

/* video feed */
.vid { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/9; background: var(--warm-2); }
.vid img { width: 100%; height: 100%; object-fit: cover; }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; }
.vid-play span { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: var(--sh-2); }
.vid-play svg { width: 15px; height: 15px; fill: var(--ink); }
.vid-time { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.clip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.clip { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16/10; position: relative; }
.clip img { width: 100%; height: 100%; object-fit: cover; }

/* comment line, shared by every feed format */
.cmt { display: flex; gap: 10px; align-items: flex-start; }
.cmt p { font-size: 13.5px; line-height: 1.5; }
.cmt b { font-size: 12.5px; font-weight: 500; }

/* leaderboard */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.lb-row:first-of-type { border-top: 0; }
.lb-rank { width: 20px; font-size: 12.5px; font-weight: 500; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.lb-row.is-top .lb-rank { color: var(--pink); }

/* automation builder */
.auto-step { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: 13px; }
.auto-step .kind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); width: 42px; flex: none; }
.auto-step.is-accent { border-color: rgba(228,93,160,.35); background: var(--blush); }
.auto-step.is-accent .kind { color: var(--pink-deep); }
.auto-link { width: 1px; height: 12px; background: var(--line-2); margin-left: 26px; }

/* integrations */
.intg { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.side-block .intg:first-of-type { border-top: 0; }
.intg-mark { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.intg b { font-size: 13px; font-weight: 500; }
.intg .on { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-50); display: inline-flex; align-items: center; gap: 5px; }
.intg .on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #35B37E; }

/* CRM member record */
.crm-line { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.crm-line:first-of-type { border-top: 0; }
.crm-key { width: 96px; flex: none; color: var(--ink-50); font-weight: 500; font-size: 12.5px; }

/* Duie & Tuie */
.dt-mark { display: inline-flex; align-items: center; gap: -6px; }
.dt-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.dt-note.is-lead { border-color: rgba(228,93,160,.32); background: linear-gradient(180deg, var(--blush), var(--paper) 70%); }
.dt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dt-act { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper); font-size: 12.5px; font-weight: 500; cursor: pointer; min-height: 38px; transition: border-color .18s ease, background .18s ease; }
.dt-act:hover { border-color: var(--ink-50); background: var(--surface); }
.dt-act.is-primary { background: var(--pink); border-color: var(--pink); color: #fff; }
.dt-act.is-primary:hover { background: var(--pink-deep); border-color: var(--pink-deep); }

/* event + course */
.ev { display: flex; gap: 14px; align-items: flex-start; }
.ev-date { width: 54px; flex: none; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 0; background: var(--paper); }
/* day name over day number: both were inline, so they ran together on one
   line at two different sizes instead of stacking in the badge */
.ev-date .m { display: block; font-size: 10.6px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); line-height: 1.25; }
.ev-date .d { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lesson { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.lesson:first-of-type { border-top: 0; }
.lesson-tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; }
.lesson.is-done .lesson-tick { background: var(--ink); border-color: var(--ink); }
.lesson.is-done .lesson-tick svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3; fill: none; }
.lesson.is-now .lesson-tick { border-color: var(--pink); border-width: 4px; }
.lesson.is-done span.t { color: var(--ink-50); }
.prog { height: 4px; border-radius: 2px; background: var(--warm-2); overflow: hidden; }
.prog span { display: block; height: 100%; background: var(--ink); border-radius: 2px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; gap: 6px; scrollbar-width: none; }
  .app-rail::-webkit-scrollbar { display: none; }
  .app-brand, .app-rail-label { display: none; }
  .app-nav { flex: none; }
  .clip-row { grid-template-columns: repeat(2, 1fr); }
}

/* headline emphasis: an underline, not a colour flood */
.mark-u { position: relative; display: inline-block; }
.mark-u::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em;
  height: .09em; background: var(--pink); border-radius: 2px;
}

/* feed panes */
.feed-pane { display: none; }
.feed-pane.is-on { display: block; animation: feedIn .34s ease both; }
@keyframes feedIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .feed-pane.is-on { animation: none; } }

/* discovery card: a line of real product activity */
.fcard-live {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-65);
  padding: 7px 10px; margin: 2px 0 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.fcard-live-i { display: grid; place-items: center; width: 15px; height: 15px; flex: none; color: var(--ink-50); }
.fcard-live-i svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.fcard-live-i.audio svg { fill: currentColor; stroke: none; width: 11px; height: 11px; }
.fcard-live-i.event { color: var(--pink); }

@media (max-width: 620px) {
  .app-search { display: none; }
  .app-top { padding: 11px 14px; }
  .app-body { padding: 14px; }
}

/* ============================================================
   ART DIRECTION — composition over card grids
   ============================================================ */
.feed-sec { padding: 112px 0 0; background: var(--paper); overflow: hidden; }
.feed-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; margin-bottom: 34px; }
.feed-title { margin-top: 14px; }
.feed-aside { padding-bottom: 8px; }
.feed-strong { font-size: clamp(19px,1.6vw,24px); font-weight: 700; letter-spacing: -.02em; margin-top: 14px; }
.feed-tabs { width: max-content; margin-bottom: 40px; }

/* the colour block the product sits on — graphic, not a card */
.feed-stage { position: relative; padding-bottom: 96px; }
.feed-block {
  position: absolute; left: 0; right: 0; top: 92px; bottom: 0;
  background: var(--ink);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.feed-stage .wrap { position: relative; }

/* large app shell: rail | content | side */
.app-lg { grid-template-columns: 216px minmax(0,1fr) 248px; border-radius: var(--r-xl); box-shadow: var(--sh-3); border-color: rgba(255,255,255,.12); }
.app-col { min-width: 0; display: flex; flex-direction: column; }
.app-body-lg { padding: 22px; flex: 1; }
.rail-foot { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 12px 8px 2px; border-top: 1px solid var(--line); }
.btn-app { margin-left: 8px; display: inline-flex; align-items: center; padding: 8px 15px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; }

/* post at readable scale */
.post-lg .post-head { padding: 18px 20px 0; }
.post-lg .post-head b { font-size: 15px; }
.post-lg .post-main { padding: 14px 20px 16px; gap: 14px; }
.post-title { font-size: 24px; font-weight: 700; letter-spacing: -.026em; line-height: 1.2; }
.post-body { font-size: 15px; line-height: 1.6; color: var(--ink-65); }
.post-cmts { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.post-cmts .cmt p { font-size: 14px; line-height: 1.5; color: var(--ink-80); }
.post-cmts .cmt b { font-size: 13px; }
.post-lg .post-foot { padding: 13px 20px; font-size: 13px; }

.player-lg { padding: 16px; gap: 16px; }
.player-lg .player-art { width: 88px; height: 88px; border-radius: var(--r-md); }
.player-note { font-size: 12.5px; color: var(--ink-50); margin-top: 10px; font-weight: 500; }
.vid-lg { border-radius: var(--r-md); }
.clip { position: relative; }
.clip-t { position: absolute; left: 8px; bottom: 7px; color: #fff; font-size: 11px; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.read { background: var(--bone); border-radius: var(--r-md); padding: 22px 24px; }
.read p { font-size: 15px; line-height: 1.72; color: var(--ink-80); }
.read p + p { margin-top: 12px; }
.read-drop::first-letter { font-size: 46px; font-weight: 700; float: left; line-height: .84; margin: 4px 10px 0 0; color: var(--ink); }

/* right side panel of the app */
.app-side { border-left: 1px solid var(--line); background: var(--paper); padding: 18px 16px; display: flex; flex-direction: column; gap: 22px; }
.side-block { display: flex; flex-direction: column; gap: 8px; }
.side-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 2px; }
.app-side .lb-row { padding: 7px 0; gap: 10px; }
.app-side .lb-row b { font-size: 13px; }
.app-side .meta { font-size: 11.5px; }
.room { display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-65); padding: 7px 10px; border-radius: var(--r-sm); }
.room i { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-50); }
.room.is-on { background: var(--bone); color: var(--ink); font-weight: 500; }

@media (max-width: 1100px) {
  .app-lg { grid-template-columns: 200px minmax(0,1fr); }
  .app-side { display: none; }
}
@media (max-width: 900px) {
  .feed-head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .app-lg { grid-template-columns: 1fr; }
  .feed-block { top: 60px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .rail-foot { display: none; }
  .btn-app { display: none; }
}
@media (max-width: 620px) {
  .feed-sec { padding-top: 72px; }
  .post-title { font-size: 20px; }
  .read-drop::first-letter { font-size: 36px; }
  .player-lg .player-art { width: 64px; height: 64px; }
}

/* tighten the feed composition */
.feed-block { top: 122px; }
.feed-stage { padding-bottom: 74px; }

/* tabs: real contrast, dark selected */
.feed-tabs { background: var(--bone); padding: 5px; }
.feed-tabs .app-tab { padding: 10px 22px; font-size: 14.5px; min-height: 42px; }
.feed-tabs .app-tab.is-on { background: var(--ink); color: #fff; box-shadow: none; }

/* ============================================================
   DUIE & TUIE — the two pigeons from the Flock mark
   ============================================================ */
.bird { display: block; }
.bird-lg { width: 132px; height: 132px; }
.bird-sm { width: 40px; height: 40px; flex: none; }
.dt-stage { position: relative; background: var(--sun); border-radius: var(--r-2xl); padding: 54px 48px; overflow: hidden; }
.dt-pair { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 26px; }
.dt-pair .bird-lg:last-child { margin-bottom: 14px; }
.dt-quote { font-size: clamp(22px,2.4vw,34px); font-weight: 700; letter-spacing: -.028em; line-height: 1.18; max-width: 460px; }
.dt-sub { font-size: 15px; line-height: 1.6; color: rgba(17,16,20,.7); margin-top: 16px; max-width: 420px; }
.dt-feed { display: flex; flex-direction: column; gap: 12px; }
.dt-card { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.dt-card.is-lead { border-color: var(--ink); border-width: 1.5px; }
.dt-who { font-size: 12.5px; font-weight: 700; }
.dt-when { font-size: 12px; color: var(--ink-50); font-weight: 500; }
.dt-msg { font-size: 15.5px; line-height: 1.5; margin-top: 5px; color: var(--ink); }
.dt-msg-sm { font-size: 14.5px; line-height: 1.55; margin-top: 5px; color: var(--ink-80); }
@media (max-width: 900px) { .dt-stage { padding: 36px 24px; } .bird-lg { width: 96px; height: 96px; } }

/* neutral section ground */
.bg-bone { background: var(--bone); }

/* ops: one application, three panes */
.app-ops { grid-template-columns: 216px minmax(0,1fr) 268px; border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.ops-body { gap: 18px; }
.ops-person { display: flex; align-items: center; gap: 18px; }
.ops-name { font-size: 22px; font-weight: 700; letter-spacing: -.024em; }
.ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ops-cell { background: var(--paper); padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.ops-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); }
.ops-v { font-size: 15px; font-weight: 500; letter-spacing: -.012em; }
.ops-time { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.tl { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.tl b { font-weight: 500; }
.tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; transform: translateY(-1px); }
.tl-dot.is-pink { background: var(--pink); }
.ops-side { gap: 26px; }
.intg-mark { background: var(--ink); }
.intg-off { opacity: .62; }
.intg .off { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-50); }
@media (max-width: 1100px) { .app-ops { grid-template-columns: 200px minmax(0,1fr); } .ops-side { display: none; } }
@media (max-width: 900px)  { .app-ops { grid-template-columns: 1fr; } .ops-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .ops-grid { grid-template-columns: 1fr; } .ops-person { flex-wrap: wrap; } }

/* event as an editorial surface, not a calendar row */
.ev-hero { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 21/9; }
.ev-hero img { width: 100%; height: 100%; object-fit: cover; }
.ev-badge { position: absolute; left: 18px; bottom: 18px; background: var(--paper); border-radius: var(--r-sm); padding: 8px 14px; text-align: center; box-shadow: var(--sh-2); }
.ev-badge .m { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-deep); }
.ev-badge .d { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.ev-meta { display: flex; align-items: center; gap: 18px; }
.ev-meta > div { flex: 1; min-width: 0; }
.ev-att { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.btn-app-pink { background: var(--pink); }
.course-art { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 4px; }
.app-side .lesson { padding: 7px 0; font-size: 13px; }

/* ============================================================
   FLOCK PRODUCT PRIMITIVES
   Grouping comes from dividers, alignment and type — not from
   nesting another rounded box inside a rounded box.
   ============================================================ */

/* a plain content surface: white, no border, no shadow */
.app-body-plain { background: var(--paper); padding: 0; gap: 0; }

/* section inside a screen: label + rule, no container */
.p-sec { padding: 20px 24px; border-top: 1px solid var(--line); }
.p-sec:first-child { border-top: 0; }
.p-sec-tight { padding: 14px 24px; }
.p-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 12px; }

/* real list rows — dividers, not cards */
.p-list { display: flex; flex-direction: column; }
.p-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.p-row:first-child { border-top: 0; }
.p-row b { font-weight: 500; font-size: 14px; }
.p-row .sub { font-size: 12.5px; color: var(--ink-50); }
.p-row .num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 14px; }

/* table */
.p-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.p-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.p-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.p-table tr:last-child td { border-bottom: 0; }
.p-table .who { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.p-table .n { font-variant-numeric: tabular-nums; }
.p-table .right { text-align: right; padding-right: 0; }

/* status pill — small, functional, one size */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--ink-65); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.st-pending::before { background: var(--ink-50); }

/* in-product tabs — underline, not pills */
.p-tabs { display: flex; gap: 22px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.p-tab { padding: 13px 0; font-size: 13.5px; font-weight: 500; color: var(--ink-50); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; }
.p-tab.is-on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

/* inline stat group — numbers, no boxes */
.p-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.p-stat .k { display: block; font-size: 11.5px; color: var(--ink-50); font-weight: 500; margin-bottom: 4px; }
.p-stat .v { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.p-stat .v small { font-size: 13px; font-weight: 500; color: var(--ink-50); letter-spacing: 0; }

/* conversation stream — continuous, divider separated */
.stream { display: flex; flex-direction: column; }
.stream-post { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.stream-post:first-of-type { border-top: 0; }
.stream-post .body { flex: 1; min-width: 0; }
.stream-name { font-size: 13.5px; font-weight: 500; }
.stream-time { font-size: 12px; color: var(--ink-50); font-weight: 500; }
.stream-text { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin-top: 4px; }
.stream-acts { display: flex; gap: 16px; margin-top: 8px; font-size: 12.5px; color: var(--ink-50); font-weight: 500; }
.stream-acts span { display: inline-flex; align-items: center; gap: 5px; }
.stream-acts svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.stream-post.is-pinned { border-left: 2px solid var(--pink); padding-left: 14px; margin-left: -16px; }
.stream-pin { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 5px; display: block; }

/* room header inside a screen */
.room-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.room-name { font-size: 14.5px; font-weight: 500; }
.room-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-50); }
.room-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.prod-art { width: 84px; height: 84px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.com-pane { display: none; }
.com-pane.is-on { display: block; }

/* ------------------------------------------------------------
   TYPE WEIGHT SYSTEM — Satoshi ships 400/500/700/900 only.
   400 body · 500 UI, labels, metadata · 700 headings, buttons
   900 reserved for the hero statement.
   ------------------------------------------------------------ */
.d2, .d3, .h4, .post-title, .ops-name, .stream-name, .room-name,
.p-row b, .p-table .who, .mod-title, .fcard-name { font-weight: 700; }
.eyebrow, .p-label, .side-label, .ops-k, .meta, .app-nav, .app-tab,
.p-tab, .tag, .st, .btn, .btn-app, .dt-act, .chip { font-weight: 500; }
.app-nav.is-on, .p-tab.is-on, .app-tab.is-on, .btn-pink, .btn-ink { font-weight: 700; }
.body, .lede, .read p, .stream-text, .post-body, .p-table td { font-weight: 400; }

/* community profile surface — one card, dividers inside */
.profile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; }
.profile-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; }
.profile-sec { padding: 18px 24px; border-top: 1px solid var(--line); }
.profile-foot { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--line); margin-top: auto; }
.profile .filters { gap: 8px; }
.profile .chip { padding: 7px 13px; font-size: 13px; min-height: 34px; }
.insight-op { background: var(--bone); }
.p-row .sub { margin-left: 10px; }
.room-col { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--paper); }
.room-stream { padding: 8px 26px 26px; }
.stream-img { width: 100%; border-radius: var(--r-sm); margin-top: 10px; aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 900px) { .room-col { border-left: 0; border-top: 1px solid var(--line); } }

.ops-person .p-label { margin: 0; }
.p-row .tl-dot { margin-right: 2px; }
.app-body-plain > .p-sec:first-child { padding-top: 22px; }

/* ============================================================
   UI CHROME — crisp, not pastel
   The beige-gray fills (#EAE7E1 / #F4F2EE) on tags, search and
   rows were reading as washed-out pastel. Small chrome is now
   white or true neutral with a crisp edge; warmth stays on the
   large section grounds only.
   ============================================================ */
:root {
  --line:    #E3E3E1;   /* true neutral, crisper than the old warm #E7E4DE */
  --line-2:  #D2D2CF;
  --ui-2:    #F4F4F3;   /* true light neutral, no beige cast */
  --surface: #FCFCFB;
}

/* tags: white with a defined edge, not a beige blob */
.tag {
  background: var(--paper);
  border: 1px solid var(--line-2);
  color: var(--ink-80);
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
}
.tag-pink { background: var(--paper); border-color: rgba(228,93,160,.55); color: var(--pink-deep); }

/* search: white field, crisp border */
.app-search { background: var(--paper); border-color: var(--line-2); }

/* in-app tab track: true neutral */
.app-tabs { background: var(--ui-2); }
.feed-tabs { background: var(--ui-2); }

/* rows and inset surfaces: true neutral, no warm cast */
.room.is-on { background: var(--ui-2); }
.player { background: var(--ui-2); }
.read { background: var(--ui-2); }
.insight-op { background: var(--ui-2); }
.app-body { background: var(--surface); }
.app-rail { background: var(--surface); }

/* discovery activity line: white with an edge */
.fcard-live { background: var(--paper); border-color: var(--line-2); }

/* automation steps: white, accent by border not by pink wash */
.auto-step { background: var(--paper); border-color: var(--line-2); }
.auto-step.is-accent { background: var(--paper); border-color: var(--pink); }
.auto-step.is-accent .kind { color: var(--pink-deep); }

/* chips on the marketing page */
.chip { background: var(--paper); border-color: var(--line-2); }
.chip:hover { border-color: var(--ink-50); }

/* section grounds stay warm, but lighter and cleaner */
.bg-bone, .bg-cream, .bg-blush { background: #F7F6F3; }
.feed-sec { background: var(--paper); }
.bg-pink { background: #F7F6F3; }
.vid { background: var(--ui-2); }
.prog { background: var(--ui-2); }

/* ============================================================
   Sticky nav fix — overflow-x:hidden on html/body creates a
   scroll container and silently kills position:sticky.
   `clip` prevents sideways scroll without that side effect.
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
.nav { position: sticky !important; top: 0; z-index: 60; }
.feed-sec { overflow: visible; }
.feed-stage { overflow: clip; }

/* ============================================================
   Commerce: two panes, not three. The empty third track was
   stretching the order table across dead space.
   ============================================================ */
.app-2 { grid-template-columns: 216px minmax(0,1fr); max-width: 1060px; margin-inline: auto; }
.app-2 .p-table { table-layout: auto; }
.app-2 .p-table th:nth-child(3), .app-2 .p-table td:nth-child(3) { width: 90px; }
.app-2 .p-table th:nth-child(4), .app-2 .p-table td:nth-child(4) { width: 110px; }
.app-2 .p-table th:last-child, .app-2 .p-table td:last-child { width: 110px; }
@media (max-width: 900px) { .app-2 { grid-template-columns: 1fr; max-width: 100%; } }

/* ============================================================
   MOTION SYSTEM
   One set of durations and curves. Behaviour, not decoration.
   ============================================================ */
:root {
  --t-fast: 150ms;      /* micro: hover, press, toggle */
  --t-base: 260ms;      /* state change */
  --t-slow: 420ms;      /* panel / content transition */
  --ease: cubic-bezier(.22,.61,.36,1);       /* soft deceleration */
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

/* --- interactive rows: highlight, never float --- */
.p-row, .lb-row, .p-table tbody tr, .lesson, .intg, .room {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.p-table tbody tr { cursor: default; }
.p-table tbody tr:hover, .p-row:hover, .lb-row:hover, .intg:hover { background: var(--ui-2); }
.lesson { cursor: pointer; border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
.lesson:hover { background: var(--ui-2); }
.room { cursor: pointer; }
.room:hover { background: var(--ui-2); }

/* --- feed tabs: sliding indicator --- */
.app-tabs { position: relative; }
.app-tabs .tab-ind {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  background: var(--ink); border-radius: var(--r-pill);
  transition: transform var(--t-base) var(--ease), width var(--t-base) var(--ease);
  pointer-events: none;
}
.feed-tabs .app-tab { position: relative; z-index: 1; transition: color var(--t-base) var(--ease); }
.feed-tabs .app-tab.is-on { background: transparent; color: #fff; }

/* --- feed panes: content moves, shell stays --- */
.feed-pane { display: none; }
.feed-pane.is-on { display: block; animation: paneIn var(--t-slow) var(--ease-out) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- audio player --- */
.player-play { cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.player-play:hover { transform: scale(1.06); }
.player-play:active { transform: scale(.96); }
.player-bar { cursor: pointer; }
.player-bar span { transition: width 240ms linear; }
.player.is-playing .player-art { animation: artPulse 3.2s var(--ease) infinite; }
@keyframes artPulse { 0%,100% { transform: none; } 50% { transform: scale(1.015); } }

/* --- toggles / RSVP --- */
.btn-app { cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn-app:active { transform: scale(.97); }
.btn-app[aria-pressed="true"] { background: var(--pink); color: #fff; }
.btn-app[aria-pressed="false"] { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); }

/* --- automation: on/off + step selection --- */
.auto-step { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.auto-step:hover { border-color: var(--ink-50); }
.auto-step.is-sel { border-color: var(--ink); }
.auto-toggle { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background var(--t-base) var(--ease); flex: none; border: 0; }
.auto-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--t-base) var(--ease); }
.auto-toggle[aria-pressed="true"] { background: var(--mint); }
.auto-toggle[aria-pressed="true"]::after { transform: translateX(14px); }
.auto-off { opacity: .45; transition: opacity var(--t-base) var(--ease); }

/* --- affiliate expand --- */
.aff-row { cursor: pointer; }
.aff-more { display: none; }
.aff-more.is-open { display: table-row; }
.aff-more td { padding: 0 0 14px; }
.aff-panel { display: flex; gap: 34px; padding: 12px 14px; background: var(--ui-2); border-radius: var(--r-sm); animation: paneIn var(--t-base) var(--ease-out) both; }
.aff-chev { display: inline-block; transition: transform var(--t-base) var(--ease); color: var(--ink-50); }
.aff-row.is-open .aff-chev { transform: rotate(90deg); }

/* --- reactions --- */
.stream-acts span[data-react] { cursor: pointer; transition: color var(--t-fast) var(--ease); }
.stream-acts span[data-react]:hover { color: var(--ink); }
.stream-acts span[data-react].is-on { color: var(--pink-deep); font-weight: 700; }
.stream-acts span[data-react].is-on svg { fill: var(--pink); stroke: var(--pink); }

/* --- product frames settle in --- */
.app.reveal { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }

/* --- Duie & Tuie: restrained entrance, no floating --- */
.dt-stage .bird-lg { animation: birdIn 520ms var(--ease-out) both; }
.dt-stage .bird-lg:last-child { animation-delay: 90ms; }
@keyframes birdIn { from { opacity: 0; transform: translateY(10px) rotate(-4deg); } to { opacity: 1; transform: none; } }

@media (hover: none) {
  .p-table tbody tr:hover, .p-row:hover, .lb-row:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-pane.is-on, .aff-panel, .dt-stage .bird-lg { animation: none !important; }
  .app-tabs .tab-ind { transition: none; }
  .player.is-playing .player-art { animation: none; }
  * { scroll-behavior: auto; }
}


/* ---- topic panel crossfade (matches the .5s media fade) ---- */
@keyframes topicSwap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.profile.is-swap .profile-head,
.profile.is-swap .profile-sec,
.profile.is-swap .profile-foot { animation: topicSwap 380ms var(--ease-out) both; }
.profile.is-swap .profile-sec { animation-delay: 40ms; }
.profile.is-swap .profile-foot { animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .profile.is-swap .profile-head,
  .profile.is-swap .profile-sec,
  .profile.is-swap .profile-foot { animation: none; }
}

/* ============================================================
   09 · Funnel vs Flock — behaviour as argument
   The funnel runs once and stops. The Flock keeps living.
   All continuous motion is transform/opacity only and pauses
   the moment the section leaves the viewport.
   ============================================================ */

/* ---- the funnel: mechanical, sequential, finite ----
   The hidden state is scoped to .js-motion, which JS sets itself.
   Without JS, or before the observer fires, everything is simply visible. */
.funnel-stage .funnel-fill { transform-origin: 50% 50%; }
.js-motion .funnel-stage { opacity: 0; transform: translateY(10px); }
.js-motion .funnel-stage .funnel-fill { transform: scaleX(.12); }
.js-motion .funnel-foot { opacity: 0; }

.is-run .funnel-stage {
  opacity: 1; transform: none;
  transition: opacity 300ms linear var(--d, 0ms), transform 300ms cubic-bezier(.2,.7,.4,1) var(--d, 0ms);
}
.is-run .funnel-stage .funnel-fill {
  transform: scaleX(1);
  transition: transform 460ms cubic-bezier(.16,.84,.44,1) calc(var(--d, 0ms) + 90ms);
}
.is-run .funnel-foot { opacity: 1; transition: opacity 420ms linear 1150ms; }

/* ---- the flock: a room people are standing in ---- */
.flock-cluster {
  position: relative; height: 300px;
  --rx: 190px; --ry: 124px;
}

.flock-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(var(--cs, 1));
  width: 152px; height: 152px; border-radius: 999px; z-index: 3;
  background: var(--dark); border: 1px solid var(--pink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color 220ms linear, box-shadow 420ms ease-out;
  will-change: transform;
}
.is-live .flock-core { animation: flockBreathe 6.4s ease-in-out infinite; }
@keyframes flockBreathe {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%      { transform: translate(-50%,-50%) scale(1.015); }
}
.flock-core.is-greet {
  border-color: #FF7FBE;
  box-shadow: 0 0 0 6px rgba(228,93,160,.14);
}

/* Base position is polar and static. Drift rides the separate
   `translate` property and hover/entrance ride `scale`, so the three
   never fight over one transform string and all stay composited. */
.flock-cluster .fl-av {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform:
    translate(-50%,-50%)
    translate(calc(var(--ax) * var(--rx)), calc(var(--ay) * var(--ry)));
  transition: scale 240ms cubic-bezier(.2,.7,.4,1), opacity 520ms ease-out;
  will-change: translate;
}

/* five different paths so no two people move alike */
@keyframes drift1 { 0%{translate:0 0} 25%{translate:5px -4px} 50%{translate:-3px -7px} 75%{translate:-6px 2px} 100%{translate:0 0} }
@keyframes drift2 { 0%{translate:0 0} 25%{translate:-6px 3px} 50%{translate:2px 7px} 75%{translate:6px -2px} 100%{translate:0 0} }
@keyframes drift3 { 0%{translate:0 0} 25%{translate:4px 6px} 50%{translate:-5px 3px} 75%{translate:-2px -6px} 100%{translate:0 0} }
@keyframes drift4 { 0%{translate:0 0} 25%{translate:-4px -6px} 50%{translate:6px -1px} 75%{translate:3px 6px} 100%{translate:0 0} }
@keyframes drift5 { 0%{translate:0 0} 25%{translate:7px 2px} 50%{translate:1px -5px} 75%{translate:-5px -3px} 100%{translate:0 0} }

.is-live .fl-av { animation: drift1 7s ease-in-out infinite; }
.is-live .fl-av:nth-child(5n+2) { animation-name: drift2; animation-duration: 8.4s; }
.is-live .fl-av:nth-child(5n+3) { animation-name: drift3; animation-duration: 6.2s; }
.is-live .fl-av:nth-child(5n+4) { animation-name: drift4; animation-duration: 9.1s; }
.is-live .fl-av:nth-child(5n+5) { animation-name: drift5; animation-duration: 7.6s; }
/* negative delays desynchronise them from the very first frame */
.is-live .fl-av:nth-child(2n)   { animation-delay: -2.3s; }
.is-live .fl-av:nth-child(3n)   { animation-delay: -4.1s; }
.is-live .fl-av:nth-child(4n)   { animation-delay: -5.7s; }
.is-live .fl-av:nth-child(5n)   { animation-delay: -1.2s; }

/* someone arriving */
.flock-cluster .fl-av.is-new { opacity: 0; scale: .5; }
.flock-cluster .fl-av.is-in  { opacity: 1; scale: 1; }

/* hover/focus lifts one person forward and rests their drift */
@media (hover: hover) {
  .flock-cluster .fl-av:hover { scale: 1.14; z-index: 4; animation-play-state: paused; }
}
.flock-cluster .fl-av:focus-visible {
  scale: 1.14; z-index: 4; animation-play-state: paused;
  outline: 2px solid var(--ink); outline-offset: 3px;
}

.flock-tip {
  position: absolute; left: 0; top: 0; z-index: 6;
  padding: 7px 11px; border-radius: 9px;
  background: var(--ink); color: #fff;
  font-size: 11.5px; line-height: 1.35; font-weight: 500;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -100%) translateY(2px);
  transition: opacity 180ms linear, transform 180ms cubic-bezier(.2,.7,.4,1);
}
.flock-tip b { display: block; font-weight: 700; }
.flock-tip.is-on { opacity: 1; transform: translate(-50%, -100%) translateY(-8px); }

.flock-join {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  margin-top: -104px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--pink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px);
}
.flock-join.is-on {
  animation: flockJoinIn 2200ms cubic-bezier(.2,.7,.4,1) both;
}
@keyframes flockJoinIn {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.9); }
  12%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(1); }
}

/* the retention line lands after the count settles */
.js-motion .flock-ret { opacity: 0; }
.is-run .flock-ret { opacity: 1; transition: opacity 460ms linear 620ms; }

/* ---- recomposition, not shrinking ---- */
@media (max-width: 1200px) { .flock-cluster { --rx: 162px; --ry: 118px; } }
@media (max-width: 1023px) { .flock-cluster { --rx: 198px; --ry: 120px; } }
@media (max-width: 760px)  { .flock-cluster { --rx: 150px; --ry: 114px; } }

@media (max-width: 560px) {
  .flock-cluster { height: 262px; --rx: 104px; --ry: 96px; }
  .flock-core { width: 118px; height: 118px; }
  .flock-core .flock-num { font-size: 25px !important; }
  .flock-cluster .fl-av { width: 40px !important; height: 40px !important; }
  /* drop the two side anchors so nothing crowds the core */
  .flock-cluster .fl-av[data-side] { display: none; }
  .flock-join { margin-top: -84px; }
}
@media (max-width: 380px) {
  .flock-cluster { --rx: 94px; --ry: 90px; }
  .flock-cluster .fl-av { width: 36px !important; height: 36px !important; }
}

/* ---- stillness on request ---- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .funnel-stage,
  .js-motion .funnel-foot,
  .js-motion .flock-ret { opacity: 1; transform: none; }
  .js-motion .funnel-stage .funnel-fill { transform: scaleX(1); }
  .is-live .flock-core { animation: none; }
  .is-live .fl-av { animation: none; }
  .flock-cluster .fl-av { transition: opacity 200ms linear; }
  .flock-join.is-on { animation: none; opacity: 0; }
  .flock-tip { transition: opacity 120ms linear; }
}

/* ============================================================
   FLOCK PRODUCT UI — one surface system
   Calibrated from the Events/Courses screen, which is the
   benchmark. Every product screen draws from these tokens so
   the same MEANING always gets the same treatment. Layout and
   density still differ per feature; colour no longer does.
   ============================================================ */
:root {
  --app-bg:            #F7F7F6;   /* neutral the app sits on */
  --app-surface:       #FFFFFF;   /* primary content surface  */
  --app-sidebar:       #FAFAF9;   /* left rail                */
  --app-panel:         #FFFFFF;   /* right context rail       */
  --app-inset:         #F4F4F3;   /* troughs, players, chips  */
  --app-border:        #E6E6E4;
  --app-border-strong: #D3D3D0;
  --app-text:          #111014;
  --app-text-muted:    #6B6B72;
  --app-accent:        #C2317A;
  --app-accent-soft:   rgba(194,49,122,.10);
  --app-success:       #16B98C;
  --app-disabled:      #A5A5AA;
}

/* shell ---------------------------------------------------- */
.app { background: var(--app-surface); border-color: var(--app-border); }
.app-rail        { background: var(--app-sidebar); border-right: 1px solid var(--app-border); }
.app-top         { background: var(--app-surface); border-bottom: 1px solid var(--app-border); }
.app-body        { background: var(--app-bg); }
.app-body-plain  { background: var(--app-bg); }
/* the same "white content on the app neutral" reading as Events,
   without nesting bordered cards inside cards */
.app-body-plain > .p-sec { background: var(--app-surface); border-top: 0; margin-top: 6px; }
.app-body-plain > .p-sec:first-child { margin-top: 0; }
.app-side,
.room-col        { background: var(--app-panel); border-left: 1px solid var(--app-border); }

/* navigation ----------------------------------------------- */
.app-nav         { color: var(--app-text-muted); }
.app-nav.is-on   { background: var(--app-surface); color: var(--app-text); box-shadow: var(--sh-1); }
.app-nav.is-on svg { color: var(--app-accent); }
.app-rail-label  { color: var(--app-text-muted); }
.rail-foot       { border-top: 1px solid var(--app-border); }

/* inputs --------------------------------------------------- */
.app-search      { background: var(--app-surface); border: 1px solid var(--app-border-strong); color: var(--app-text-muted); }

/* tabs ----------------------------------------------------- */
.app-tabs        { background: var(--app-inset); }
.app-tab         { color: var(--app-text-muted); }
.app-tab.is-on   { background: var(--app-surface); color: var(--app-text); }

/* quiet insets: same trough everywhere --------------------- */
.player,
.room.is-on,
.aff-panel,
.prog            { background: var(--app-inset); }
.player-bar      { background: var(--app-border-strong); }
.player-bar span { background: var(--app-accent); }
.prog span       { background: var(--app-text); }

/* dividers, rows, tables ----------------------------------- */
.p-row, .p-sec, .p-table th, .p-table td,
.lb-row, .intg, .lesson { border-color: var(--app-border); }
.p-table tbody tr:hover, .p-row:hover, .lb-row:hover,
.intg:hover, .lesson:hover, .room:hover { background: var(--app-inset); }

/* small objects that were inventing their own beige --------- */
.auto-step       { background: var(--app-surface); border: 1px solid var(--app-border-strong); }
.auto-step.is-accent { background: var(--app-surface); border-color: var(--app-accent); }
.auto-link       { background: var(--app-border-strong); }
.ev-date, .ev-badge, .dt-card, .dt-act, .ops-cell, .ops-time { background: var(--app-surface); }
.ev-date, .dt-card, .ops-time { border-color: var(--app-border); }
.dt-act          { border-color: var(--app-border-strong); }
.dt-act:hover    { background: var(--app-inset); border-color: var(--app-text-muted); }
.ops-grid        { background: var(--app-border); border-color: var(--app-border); }

/* Duie is an assistant state — distinct by meaning, not whim */
.dt-note         { background: var(--app-surface); border: 1px solid var(--app-border); }
.dt-note.is-lead { background: var(--app-surface); border-color: var(--app-accent); box-shadow: inset 3px 0 0 var(--app-accent); }

/* one pink, used for selection / primary action / status ---- */
.dt-act.is-primary { background: var(--app-accent); border-color: var(--app-accent); }
.dt-act.is-primary:hover { background: #AD2A6C; border-color: #AD2A6C; }
.room-live::before { background: var(--app-accent); }
.auto-toggle[aria-pressed="true"] { background: var(--app-success); }
.auto-toggle     { background: var(--app-border-strong); }

/* the feed tab bar sits on the dark marketing band, but the
   app inside it must not inherit that darkness */
.feed-tabs .app-tab.is-on { background: transparent; color: #fff; }

/* ---- product screens as deliberate objects ---------------- */
.app, .app-lg, .app-2 { margin-top: 44px; margin-bottom: 44px; }
@media (max-width: 760px) { .app, .app-lg, .app-2 { margin-top: 30px; margin-bottom: 30px; } }

/* ============================================================
   FOOTER — the last brand moment, not a utility block
   Asymmetric: the statement holds the left, navigation answers
   from the right, and the wordmark closes the page as typography
   rather than as a logo sitting in a corner.
   ============================================================ */
.foot {
  background: var(--paper);
  color: var(--ink);
  padding: 0 0 30px;
  border-top: 0;
  overflow: hidden;
}
/* the final CTA and the footer read as one ending sequence */
#start { padding-bottom: 72px; }
.foot > .wrap { padding-top: 64px; border-top: 1px solid var(--line); }

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.foot-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-50);
}
.foot-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink-text); }

.foot-statement {
  margin: 20px 0 0;
  max-width: 15ch;
  /* client asked for a little more presence here - one step up in size and
     weight, not a new display style */
  font-size: clamp(31px, 3.7vw, 50px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 600;
  max-width: 20ch;
}

.foot-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-self: end; padding-top: 6px; }
.foot-link {
  position: relative;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500; letter-spacing: -.01em; color: var(--ink);
  padding-bottom: 3px;
}
.foot-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--pink-text);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.foot-link:hover::after, .foot-link:focus-visible::after { transform: scaleX(1); }

.foot-mid {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-top: 54px;
}
.foot-people { display: flex; align-items: center; gap: 13px; }
.foot-people-copy { font-size: 14px; color: var(--ink-65); }
.foot-avs .av { width: 34px; height: 34px; }

.foot-acts { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.foot-go {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
}
.foot-go svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform 240ms cubic-bezier(.22,.61,.36,1); }
.foot-go:hover { color: var(--pink-text); }
.foot-go:hover svg { transform: translateX(5px); }
.foot-quiet { font-size: 15px; color: var(--ink-65); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 200ms linear, border-color 200ms linear; }
.foot-quiet:hover { color: var(--ink); border-bottom-color: var(--line-2); }

/* the wordmark closes the page */
.foot-mark { margin: 58px 0 26px; line-height: 0; }
.foot-mark img { width: 100%; height: auto; display: block; }

.foot-bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 4px;
  font-size: 13px; color: var(--ink-50);
  border-top: 0;
}

/* a single restrained rise as the footer arrives — once, not looping */
.foot-mark img,
.foot-top, .foot-mid {
  transition: opacity 700ms cubic-bezier(.16,.84,.44,1), transform 700ms cubic-bezier(.16,.84,.44,1);
}
.js-motion .foot:not(.is-in) .foot-mark img { opacity: 0; transform: translateY(22px); }
.js-motion .foot:not(.is-in) .foot-top   { opacity: 0; transform: translateY(12px); }
.js-motion .foot:not(.is-in) .foot-mid   { opacity: 0; transform: translateY(12px); }
.foot.is-in .foot-top { transition-delay: 60ms; }
.foot.is-in .foot-mid { transition-delay: 140ms; }
.foot.is-in .foot-mark img { transition-delay: 220ms; }

/* the little cluster keeps the living-community language */
.foot.is-in .foot-avs .av { animation: drift1 8s ease-in-out infinite; }
.foot.is-in .foot-avs .av:nth-child(2) { animation-name: drift3; animation-duration: 9.4s; animation-delay: -2.1s; }
.foot.is-in .foot-avs .av:nth-child(3) { animation-name: drift2; animation-duration: 7.2s; animation-delay: -4.4s; }
.foot.is-in .foot-avs .av:nth-child(4) { animation-name: drift5; animation-duration: 10.1s; animation-delay: -1.3s; }
.foot.is-in .foot-avs .av:nth-child(5) { animation-name: drift4; animation-duration: 8.6s; animation-delay: -5.9s; }

/* ---- recomposed for small screens, not shrunk ---- */
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-nav { justify-self: start; flex-direction: row; gap: 26px; padding-top: 0; }
  .foot-statement { max-width: 22ch; }
  .foot-mid { margin-top: 40px; }
}
@media (max-width: 560px) {
  .foot > .wrap { padding-top: 48px; }
  #start { padding-bottom: 56px; }
  .foot-statement { font-size: clamp(28px, 8.2vw, 38px); max-width: none; }
  .foot-mid { flex-direction: column; align-items: flex-start; gap: 22px; }
  .foot-acts { gap: 20px; }
  .foot-mark { margin: 42px 0 22px; }
  .foot-bot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .foot.is-in .foot-avs .av { animation: none; }
  .foot-mark img, .foot-top, .foot-mid { transition: none; }
}

/* the footer cluster reads as people, so let them breathe */
.foot-avs { display: flex; }
.foot-avs .av { margin-left: -9px; box-shadow: 0 0 0 2px var(--paper); }
.foot-avs .av:first-child { margin-left: 0; }

/* ---- touch targets: every control clears 44px on a coarse pointer ---- */
@media (hover: none), (max-width: 900px) {
  .btn, .chip, .join, .dt-act, .app-tab, .p-tab, .jtoggle a {
    min-height: 44px;
  }
  .foot-link, .foot-go, .foot-quiet, .link-arrow, .nav-brand {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* keep the footer's vertical rhythm now that links are taller */
  .foot-nav { gap: 4px; }
}

/* the reaction control is a button, so give it a button's hit area */
.stream-acts [data-react] { display: inline-flex; align-items: center; gap: 6px; }
@media (hover: none), (max-width: 900px) {
  .stream-acts [data-react] { min-height: 44px; padding-right: 4px; }
}
@media (hover: none), (max-width: 900px) {
  .player-play { width: 44px; height: 44px; }
}

/* ============================================================
   01 · The Question — topic selector responsiveness
   The profile card had a 446px min-content width, so below
   ~430px the grid track refused to shrink and the card was
   clipped off-screen. Grid/flex children need min-width:0
   before any of their own overflow handling can take effect.
   ============================================================ */
.grid > *, .card > * { min-width: 0; }
.profile { min-width: 0; }
.profile .filters { min-width: 0; }
.stream, .stream-post, .stream-post .body { min-width: 0; }
.stream-text { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  /* the footer row stops forcing its three items onto one line */
  .profile-foot { flex-wrap: wrap; gap: 14px 12px; }
  .profile-foot .meta { flex: 1 1 auto; }
  .profile-foot .btn { margin-left: 0 !important; width: 100%; justify-content: center; }

  /* rooms scroll sideways instead of setting the card's width */
  .profile .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .profile .filters::-webkit-scrollbar { display: none; }
  .profile .filters .chip { flex: none; }
}

/* the media and the panel should end up close in height, so the
   panel does not finish with a large empty block underneath */
@media (min-width: 1081px) { .topic-media { min-height: 500px; } }
@media (min-width: 861px) and (max-width: 1080px) { .topic-media { min-height: 470px; } }

/* ============================================================
   01 · The Question — topic selector responsiveness
   The profile card had a 446px min-content width, so below
   ~430px the grid track refused to shrink and the card was
   clipped off-screen. Grid/flex children need min-width:0
   before any of their own overflow handling can take effect.
   ============================================================ */
.grid > *, .card > * { min-width: 0; }
.profile { min-width: 0; }
.profile .filters { min-width: 0; }
.stream, .stream-post, .stream-post .body { min-width: 0; }
.stream-text { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  /* the footer row stops forcing its three items onto one line */
  .profile-foot { flex-wrap: wrap; gap: 14px 12px; }
  .profile-foot .meta { flex: 1 1 auto; }
  .profile-foot .btn { margin-left: 0 !important; width: 100%; justify-content: center; }

  /* rooms scroll sideways instead of setting the card's width */
  .profile .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .profile .filters::-webkit-scrollbar { display: none; }
  .profile .filters .chip { flex: none; }
}

/* the media and the panel should end up close in height, so the
   panel does not finish with a large empty block underneath */
@media (min-width: 1081px) { .topic-media { min-height: 500px; } }
@media (min-width: 861px) and (max-width: 1080px) { .topic-media { min-height: 470px; } }

/* ============================================================
   HERO — one composed scene, not copy beside a card
   An interest becomes a room, the room fills, the people talk.
   The fragments are pinned into the photograph at different
   sizes and shapes and wired together, so the eye reads a
   sequence rather than a second column.
   ============================================================ */
.hero-scene {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-areas: 'copy pins';
  align-items: end;
  gap: 48px;
}
.hero-scene .hero-copy { grid-area: copy; max-width: 720px; padding-bottom: 8px; }

/* ---- the pinned community ----
   A single thread runs down the scene: the Flock, the room it opened,
   what is being said inside it, who just arrived, what happens next.
   Each fragment hangs off that thread at its own indent, so the group
   reads as one connected story instead of scattered cards. */
.hero-pins {
  grid-area: pins;
  position: relative;
  align-self: end;
  padding: 0 0 4px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero-pins::before {
  content: '';
  position: absolute; left: 5px; top: 16px; bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.12));
}
.pin-wires { display: none; }

.pin {
  position: relative;
  color: #fff;
  border-radius: 14px;
  background: rgba(18,12,15,.42);
  border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 38px rgba(8,5,7,.30);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 480ms cubic-bezier(.16,.84,.44,1), transform 480ms cubic-bezier(.16,.84,.44,1);
}
.pin::before {
  content: '';
  position: absolute; left: -21px; top: 50%;
  width: 21px; height: 1px;
  background: rgba(255,255,255,.32);
}
.pin::after {
  content: '';
  position: absolute; left: -24px; top: 50%;
  width: 5px; height: 5px; margin-top: -2px;
  border-radius: 999px; background: rgba(255,255,255,.6);
}
.hero-pins.is-in .pin { opacity: 1; transform: none; }
.hero-pins.is-in .pin-flock { transition-delay: 40ms; }
.hero-pins.is-in .pin-room  { transition-delay: 180ms; }
.hero-pins.is-in .pin-talk  { transition-delay: 320ms; }
.hero-pins.is-in .pin-event { transition-delay: 620ms; }

.pin-flock { margin-left: 0; }
.pin-room  { margin-left: 22px; }
.pin-talk  { margin-left: 0; }
.pin-join  { margin-left: 40px; }
.pin-event { margin-left: 12px; }

.pin-flock {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 7px; border-radius: 999px;
}
.pin-flock .av { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; }
.pin-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.pin-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; opacity: .78; }
.pin-live .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pink); }

.pin-room {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(18,12,15,.34);
}
.pin-hash { font-size: 13.5px; font-weight: 700; }
.pin-here { font-size: 11.5px; font-weight: 500; opacity: .72; }

.pin-talk {
  width: 100%; max-width: 376px;
  padding: 15px 18px 13px;
  border-radius: 18px;
}
.pin-talk-head { display: flex; align-items: center; gap: 9px; }
.pin-talk-head .av { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.pin-talk-head b { font-size: 13px; font-weight: 700; }
.pin-talk-head span { font-size: 11.5px; opacity: .65; }
.pin-msg { margin: 9px 0 11px; font-size: 15px; line-height: 1.48; font-weight: 500; }
.pin-talk-foot { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #FF8CC0; }
.pin-talk-foot .av { width: 22px; height: 22px; }

.pin-join {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  background: rgba(18,12,15,.52);
}
.pin-join .av { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; }
.pin-join b { font-weight: 700; }

.pin-event {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px; border-radius: 12px;
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.65);
  color: var(--ink);
}
.pin-event::after { background: rgba(255,255,255,.85); }
.pin-when { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-text); }
.pin-what { font-size: 13.5px; font-weight: 500; }

.pin-join { opacity: 0; }
.hero-pins.is-in .pin-join.is-here {
  animation: joinIn 3600ms cubic-bezier(.16,.84,.44,1) both;
}
@keyframes joinIn {
  0%   { opacity: 0; transform: translateX(-10px); }
  10%  { opacity: 1; transform: none; }
  84%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(6px); }
}

/* ---- the strip that closes the scene ---- */
.hero-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500;
}
.hero-strip-dots { margin-left: auto; display: flex; gap: 6px; }
.hero-strip-dots i { width: 20px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.26); transition: background 420ms ease; }
.hero-strip-dots i.is-on { background: var(--pink); }

/* ---- recomposed for smaller screens ---- */
@media (max-width: 1180px) {
  .hero-scene { grid-template-columns: minmax(0,1fr) minmax(0,400px); gap: 32px; }
  .pin-talk { max-width: 340px; }
}
@media (max-width: 980px) {
  .hero-scene {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: 'copy' 'pins';
    min-height: 0; gap: 30px; align-items: start;
  }
  .hero-pins { min-height: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .pin-wires { display: none; }
  .pin { position: static; opacity: 1; transform: none; }
  .pin-talk { max-width: none; flex: 1 1 100%; order: 3; }
  .pin-flock { order: 1; }
  .pin-room  { order: 2; }
  .pin-event { order: 4; }
  .pin-join  { display: none; }          /* the arrival needs the scene to read */
  .hero-strip { margin-top: 26px; }
}
@media (max-width: 560px) {
  .hero-pins { gap: 8px; }
  .pin-msg { font-size: 14.5px; }
  .pin-talk { padding: 14px 15px 12px; }
  .hero-strip { flex-wrap: wrap; gap: 10px; font-size: 13px; }
  .hero-strip-dots { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pin { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-pins.is-in .pin-join.is-here { animation: none; opacity: 1; }
}

/* ============================================================
   04 · THE FEED — "the room stays the same, the front page changes"
   Two planes instead of one dashboard: a quiet, constant community
   band underneath, and the format the creator publishes sitting
   on top of it, overlapping. The layering IS the argument.
   ============================================================ */
.feed-compose { position: relative; margin-top: 52px; }

/* the constant plane */
.feed-base {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 28px;
  padding: 22px 28px 84px;
  border-radius: var(--r-xl);
  background: var(--app-bg);
  border: 1px solid var(--app-border);
}
.feed-base-id { display: flex; align-items: center; gap: 11px; }
.feed-base-id .av { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; }
.feed-base-id b { font-size: 15px; letter-spacing: -.01em; }
.feed-base-rooms { display: flex; gap: 8px; }
.feed-base-rooms .room { pointer-events: none; }
.feed-base-people { display: flex; align-items: center; gap: 11px; }
/* room chips keep their count spaced, same as the product rail */
.feed-base-rooms .room { display: inline-flex; align-items: center; gap: 8px; }
.feed-base-rooms .room i { font-style: normal; font-size: 11.5px; opacity: .55; }

/* the changing plane, sitting on the constant one */
.feed-formats {
  position: relative;
  margin: -62px auto 0;
  width: min(100%, 880px);
  z-index: 2;
}
.feed-switch {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 5px 5px 16px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--cream);
  box-shadow: 0 14px 34px rgba(17,16,20,.24);
  margin-bottom: 14px;
}
.feed-switch-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; opacity: .55; margin-right: 8px;
}
.feed-switch .app-tab {
  background: transparent; color: rgba(244,242,238,.62);
  border-radius: var(--r-pill); padding: 8px 15px; min-height: 36px;
  font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.feed-switch .app-tab.is-on { background: rgba(244,242,238,.14); color: #fff; font-weight: 700; }

/* the pointer that shows the demo driving itself */
.feed-cursor {
  position: absolute; left: 0; top: 50%; width: 15px; height: 15px;
  margin: -7px 0 0 -7px; border-radius: 999px;
  background: var(--pink); box-shadow: 0 0 0 5px rgba(228,93,160,.24);
  opacity: 0; pointer-events: none;
  transition: transform 620ms cubic-bezier(.5,.05,.2,1), opacity 260ms linear;
}
.feed-cursor.is-on { opacity: 1; }
.feed-cursor.is-tap { transform: scale(.62); transition-duration: 140ms; }

.feed-cards { position: relative; }
.feed-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--r-xl);
  box-shadow: 0 26px 60px rgba(17,16,20,.13);
  padding: 24px 26px;
  opacity: 0; visibility: hidden;
  position: absolute; inset: 0 0 auto 0;
  transform: translateY(12px) scale(.985);
  transition: opacity 340ms var(--ease-out), transform 420ms var(--ease-out);
}
.feed-card.is-on {
  position: relative; opacity: 1; visibility: visible;
  transform: none;
}
.feed-card .post-lg { border: 0; padding: 0; background: none; box-shadow: none; }

@media (max-width: 980px) {
  .feed-base { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px 84px; }
  .feed-base-rooms { flex-wrap: wrap; }
  .feed-formats { margin-top: -58px; width: 100%; }
}
@media (max-width: 620px) {
  .feed-base { padding: 18px 16px 78px; border-radius: var(--r-lg); }
  .feed-base-note { left: 16px; bottom: 18px; }
  .feed-switch { width: 100%; justify-content: flex-start; flex-wrap: wrap; padding: 8px; gap: 4px; }
  .feed-switch-label { width: 100%; margin: 0 0 4px 8px; }
  .feed-card { padding: 18px 16px; border-radius: var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-card { transition: none; }
  .feed-cursor { display: none; }
}

/* ============================================================
   FLOCK PRODUCT — primitives taken from the real application
   Sampled from Chloe's product screenshot. These are the actual
   app's language: teal accent, plum/zinc dark surfaces, category
   chips, threaded replies, subscription rail. Marketing sections
   compose fragments of these rather than inventing UI.
   ============================================================ */
:root {
  --fp-teal:      #2DD4BF;
  --fp-teal-ink:  #0D9488;
  --fp-teal-tint: #F0FDFA;
  --fp-amber:     #F59E0B;
  --fp-ink:       #18181B;
  --fp-ink-2:     #52525B;
  --fp-ink-3:     #A1A1AA;
  --fp-line:      #E4E4E7;
  --fp-surface:   #FFFFFF;
  --fp-canvas:    #FAFAFA;
  --fp-dark:      #242426;
  --fp-dark-2:    #27272A;
  --fp-plum-a:    #342922;
  --fp-plum-b:    #1A1024;
  --fp-r:         12px;
}

/* ---- top bar ---- */
.fp-top {
  display: flex; align-items: center; gap: 26px;
  padding: 12px 18px;
  background: var(--fp-surface);
  border-bottom: 1px solid var(--fp-line);
}
.fp-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--fp-ink); }
.fp-brand img { height: 19px; width: auto; }
.fp-nav { display: flex; gap: 20px; font-size: 14px; font-weight: 500; color: var(--fp-ink-2); }
.fp-nav .is-on { color: var(--fp-ink); font-weight: 700; }
.fp-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; min-width: 190px;
  border: 1px solid var(--fp-line); border-radius: 999px;
  font-size: 13px; color: var(--fp-ink-3); background: var(--fp-surface);
}
.fp-search kbd {
  margin-left: auto; font: inherit; font-size: 11px;
  padding: 1px 5px; border-radius: 4px; background: var(--fp-canvas);
  border: 1px solid var(--fp-line); color: var(--fp-ink-2);
}
.fp-admin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--fp-teal-tint); color: var(--fp-teal-ink);
  font-size: 12.5px; font-weight: 700;
  border: 1px solid rgba(45,212,191,.32);
}
.fp-new {
  padding: 8px 15px; border-radius: 999px;
  background: var(--fp-ink); color: #fff; font-size: 13px; font-weight: 700;
}

/* ---- community switcher rail ---- */
.fp-switch { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 10px; background: var(--fp-canvas); border-right: 1px solid var(--fp-line); }
.fp-switch span, .fp-switch img {
  width: 36px; height: 36px; border-radius: 12px; object-fit: cover;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--fp-ink); color: #fff;
}
.fp-switch .is-on { box-shadow: 0 0 0 2px var(--fp-teal); }
.fp-switch .fp-add { background: transparent; color: var(--fp-ink-3); border: 1px dashed var(--fp-line); font-weight: 500; }

/* ---- community banner ---- */
.fp-banner {
  position: relative; overflow: hidden;
  padding: 22px 24px;
  background: linear-gradient(102deg, var(--fp-plum-a), var(--fp-plum-b) 62%);
  color: #fff;
}
.fp-banner h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.fp-banner p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 12px; }
.fp-banner .fp-members { display: inline-flex; align-items: center; gap: 6px; }

/* ---- composer ---- */
.fp-composer {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-line); border-radius: var(--fp-r);
}
.fp-composer .fp-av { flex: none; }
.fp-composer-body { flex: 1; min-width: 0; }
.fp-composer-body > span { display: block; font-size: 14.5px; color: var(--fp-ink-3); padding: 4px 0 12px; }
.fp-tools { display: flex; align-items: center; gap: 6px; }
.fp-tools i {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; color: var(--fp-ink-2);
  border: 1px solid transparent;
}
.fp-tools svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.fp-post {
  margin-left: auto; padding: 7px 16px; border-radius: 999px;
  background: var(--fp-ink); color: #fff; font-size: 13px; font-weight: 700;
}

/* ---- avatars, chips, posts ---- */
.fp-av { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; display: grid; place-items: center;
  background: var(--fp-canvas); color: var(--fp-ink-2); font-size: 13px; font-weight: 700; border: 1px solid var(--fp-line); }
.fp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 7px;
  background: var(--fp-canvas); border: 1px solid var(--fp-line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-ink-2);
}
.fp-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fp-chip.is-pin { background: var(--fp-teal-tint); border-color: rgba(45,212,191,.3); color: var(--fp-teal-ink); }
.fp-chip.is-live { background: var(--fp-teal-tint); border-color: rgba(45,212,191,.3); color: var(--fp-teal-ink); }
.fp-chip.is-progress { background: #FFFBEB; border-color: rgba(245,158,11,.32); color: #B45309; }

.fp-thread {
  background: var(--fp-surface); border: 1px solid var(--fp-line);
  border-radius: var(--fp-r); padding: 16px 18px;
}
.fp-thread-head { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.fp-thread-head b { font-weight: 700; color: var(--fp-ink); }
.fp-thread-head .fp-time { color: var(--fp-ink-3); }
.fp-thread h4 { margin: 10px 0 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; color: var(--fp-ink); }
.fp-thread p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--fp-ink-2); }
.fp-acts { display: flex; align-items: center; gap: 18px; margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--fp-ink-2); }
.fp-acts span { display: inline-flex; align-items: center; gap: 6px; }
.fp-acts svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* threaded reply, with the author marked the way the product marks it */
.fp-reply { display: flex; gap: 10px; padding: 12px 0 0 14px; border-left: 1px solid var(--fp-line); margin-left: 16px; }
.fp-reply .fp-av { width: 26px; height: 26px; font-size: 11px; }
.fp-author {
  padding: 2px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; background: var(--fp-teal-tint); color: var(--fp-teal-ink);
}

/* ---- the dark subscription rail ---- */
.fp-subs { background: var(--fp-dark); border-radius: var(--fp-r); padding: 12px; color: #fff; }
.fp-subs-head { display: flex; align-items: center; font-size: 13px; font-weight: 700; padding: 4px 8px 10px; }
.fp-subs-head svg { margin-left: auto; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.fp-sub {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 8px;
  font-size: 13px; color: rgba(255,255,255,.72);
}
.fp-sub svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.fp-sub.is-on { background: var(--fp-dark-2); color: #fff; font-weight: 600; }
.fp-sub.is-on::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--fp-teal); margin-left: -2px; }

/* ---- onboarding card, straight from the product ---- */
.fp-start { background: var(--fp-dark); border-radius: var(--fp-r); padding: 16px; color: #fff; }
.fp-start-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.fp-start-head .fp-done { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); }
.fp-start-bar { height: 3px; border-radius: 999px; background: rgba(255,255,255,.14); margin: 12px 0 14px; overflow: hidden; }
.fp-start-bar i { display: block; height: 100%; width: 33%; background: var(--fp-teal); border-radius: 999px; }
.fp-step {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 9px; margin-bottom: 7px;
  background: var(--fp-dark-2); font-size: 13.5px;
}
.fp-step .fp-tick { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); flex: none; }
.fp-step.is-done .fp-tick { border-color: var(--fp-teal); background: var(--fp-teal); }
.fp-step.is-done span { text-decoration: line-through; color: rgba(255,255,255,.45); }
.fp-hash {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 7px; background: rgba(45,212,191,.14);
  color: var(--fp-teal); font-size: 11.5px; font-weight: 600;
}

/* the thread swaps the way a thread swaps — content out, content in */
#roomPost { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
#roomPost.is-swapping { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { #roomPost { transition: none; } #roomPost.is-swapping { opacity: 1; transform: none; } }

/* ============================================================
   HERO — footage of the interest, people gathering across it
   The video is the thing people care about. The rule running over
   it carries them: distant and unnamed on the left, close and
   named on the right, ending in a real conversation.
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  /* pulled up under the sticky nav so the footage runs behind it —
     without this the nav sits on white and the cream mark vanishes */
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(148px + var(--nav-h)) 0 0;
  min-height: calc(780px + var(--nav-h));
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; color: #fff; background: var(--dark);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1100ms ease;
}
.hero-clip.is-on { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,8,10,.72) 0%, rgba(12,8,10,.34) 34%, rgba(12,8,10,.88) 100%),
    linear-gradient(90deg, rgba(12,8,10,.52) 0%, transparent 62%);
}

.hero-claim {
  display: grid; grid-template-columns: minmax(0,1.24fr) minmax(0,1fr);
  gap: 56px; align-items: end; padding-bottom: 8px;
}
.hero-claim .d1 { margin: 0; letter-spacing: -.045em; color: #fff; }
.hero-claim-side { padding-bottom: 6px; }
.hero-claim-side .starter .btn { white-space: nowrap; flex: none; }
.hero-sub { font-size: clamp(16px,1.35vw,19px); line-height: 1.6; color: rgba(255,255,255,.84); margin: 0 0 22px; max-width: 46ch; }

/* ---- the gathering, laid over the footage ---- */
.gather-band { position: relative; padding: 44px 0 40px; }
.gather-rule {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.42) 58%, rgba(255,255,255,.08) 100%);
}
.gather {
  position: relative; list-style: none; margin: 0; padding: 0 var(--gut);
  display: flex; align-items: center; min-height: 190px;
}
.g { position: relative; flex: none; transform: translateY(var(--y, 0)); }
.g img { border-radius: 999px; object-fit: cover; display: block; }
.g-cap {
  display: block; margin-top: 9px; text-align: center;
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.g-far { margin-right: 62px; opacity: .42; filter: grayscale(1); }
.g-mid { margin-right: 40px; opacity: .86; }
.g-near { margin-right: 16px; }
.g-near + .g-near { margin-right: 30px; }
.g-near img, .g-mid img { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

.g-talk { flex: 1 1 auto; min-width: 0; max-width: 400px; transform: none; }
.gather-thread {
  background: rgba(18,12,15,.5);
  border-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(8,5,7,.34);
}
.gather-thread .fp-thread-head b, .gather-thread h4 { color: #fff; }
.gather-thread p { color: rgba(255,255,255,.86); font-size: 14.5px; }
.gather-thread .fp-time { color: rgba(255,255,255,.55); }
.gather-thread .fp-reply { border-left-color: rgba(255,255,255,.22); }
.gather-thread .fp-reply p { font-size: 13px; }
.gather-thread .fp-av { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.gather-thread .fp-chip { background: rgba(45,212,191,.16); border-color: rgba(45,212,191,.36); color: #7FF0DE; }

.js-motion .gather-band .g { opacity: 0; }
.gather-band.is-in .g { animation: gatherIn 720ms cubic-bezier(.16,.84,.44,1) both; }
.gather-band.is-in .g:nth-child(1) { animation-delay: 0ms; }
.gather-band.is-in .g:nth-child(2) { animation-delay: 90ms; }
.gather-band.is-in .g:nth-child(3) { animation-delay: 180ms; }
.gather-band.is-in .g:nth-child(4) { animation-delay: 310ms; }
.gather-band.is-in .g:nth-child(5) { animation-delay: 400ms; }
.gather-band.is-in .g:nth-child(6) { animation-delay: 530ms; }
.gather-band.is-in .g:nth-child(7) { animation-delay: 610ms; }
.gather-band.is-in .g:nth-child(8) { animation-delay: 760ms; }
@keyframes gatherIn {
  from { opacity: 0; transform: translateY(calc(var(--y, 0px) + 22px)) scale(.92); }
  to   { opacity: var(--o, 1); transform: translateY(var(--y, 0)) scale(1); }
}
.gather-band.is-in .g-far { --o: .42; }
.gather-band.is-in .g-mid { --o: .86; }

#gatherThread { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
#gatherThread.is-swapping { opacity: 0; transform: translateY(6px); }

@media (max-width: 1180px) {
  .g-far { margin-right: 40px; }
  .g-mid { margin-right: 28px; }
  .g-talk { max-width: 340px; }
}
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: calc(122px + var(--nav-h)); }
  .hero-claim { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .gather { flex-wrap: wrap; gap: 18px 0; min-height: 0; align-items: flex-start; }
  .gather-rule { display: none; }
  .g { transform: none !important; }
  .g-far { margin-right: 26px; }
  .g-mid { margin-right: 22px; }
  .g-talk { flex: 1 1 100%; max-width: none; margin-top: 10px; }
  .gather-band { padding: 34px 0 36px; }
}
@media (max-width: 620px) {
  .hero { padding-top: calc(106px + var(--nav-h)); }
  .g-far:nth-of-type(n+3) { display: none; }
  .g-mid img { width: 54px; height: 54px; }
  .g-near img { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .gather-band .g { opacity: 1; }
  .gather-band.is-in .g { animation: none; }
  #gatherThread, .hero-clip { transition: none; }
}

/* ============================================================
   02 · CREATOR STORIES — the breadth, at deliberately unequal sizes
   One world dominates the frame. One is only a conversation. One
   enters half-cropped from the edge. One is a face and a sentence.
   Nothing here is the same size or shape as anything else.
   ============================================================ */
.sec-range { background: var(--surface); overflow: clip; }
.range {
  margin-top: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  grid-template-areas:
    'lead side'
    'edge edge';
  gap: 30px 40px;
  align-items: start;
}

/* the dominant one */
.r-lead { grid-area: lead; margin: 0; position: relative; }
.r-lead > img {
  width: 100%; height: 520px; object-fit: cover;
  border-radius: var(--r-xl); display: block;
}
.r-lead figcaption { padding: 22px 4px 0; }
.r-lead .d3 { margin: 10px 0 10px; letter-spacing: -.03em; }
.r-lead .body { max-width: 44ch; color: var(--ink-65); }
.r-by { display: flex; align-items: center; gap: 11px; margin-top: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-65); }
.r-by .story-outcome { margin-left: auto; }

/* the conversational one — no photograph at all */
.r-side { grid-area: side; display: flex; flex-direction: column; gap: 34px; }
.r-talk { }
.r-talk .d4 { margin: 10px 0 16px; letter-spacing: -.02em; }
.r-talk .fp-thread { background: var(--paper); }
.r-by-line { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-50); }

/* the one entering from the edge, deliberately cropped */
.r-edge { grid-area: edge; margin: 0; position: relative; }
.r-edge { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,320px); gap: 34px; align-items: end; margin-top: 14px; }
.r-edge > img {
  width: calc(100% + 12vw); max-width: none;
  height: 300px; object-fit: cover; object-position: 50% 62%;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  display: block; order: 2;
  margin-right: calc(-12vw);
}
.r-edge figcaption { padding: 0 0 8px; order: 1; }
.r-edge .d4 { margin: 8px 0 0; letter-spacing: -.02em; }

/* the quietest one: a face and a sentence */
.r-note {
  align-self: start;
  padding: 26px 0 6px;
  border-top: 1px solid var(--line);
}
.r-note .av { margin-bottom: 14px; }
.r-note .body { font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 34ch; }

@media (max-width: 1024px) {
  .range { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 22px 26px; }
  .r-lead img { height: 420px; }
}
@media (max-width: 800px) {
  .range {
    grid-template-columns: 1fr;
    grid-template-areas: 'lead' 'side' 'edge';
    gap: 34px;
  }
  .r-lead img { height: 300px; }
  .r-edge { grid-template-columns: 1fr; gap: 16px; }
  .r-edge > img { height: 210px; width: calc(100% + var(--gut)); margin-right: calc(var(--gut) * -1); order: 1; }
  .r-edge figcaption { order: 2; }
  .r-note { align-self: auto; }
}

/* ============================================================
   08 · DUIE & TUIE — the page contracts
   A narrow measure and a lot of air, directly after the broad,
   loud sections. Nothing here is a card or a panel.
   ============================================================ */
.sec-quiet { background: var(--paper); padding: 132px 0 128px; }
.quiet-col {
  max-width: 620px; margin: 0 auto;
  padding: 0 var(--gut);
  text-align: center;
}
.quiet-title { margin: 16px 0 0; letter-spacing: -.03em; }
.quiet-lede { margin: 18px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--ink-65); }

.quiet-col .dt-pair {
  display: flex; align-items: flex-end; justify-content: center; gap: 26px;
  margin: 54px 0 46px;
}
.quiet-col .bird { width: 128px; height: 128px; }
.quiet-col .bird-sm { width: 88px; height: 88px; }

.quiet-quote {
  margin: 0; font-size: clamp(21px, 2.3vw, 30px); line-height: 1.32;
  letter-spacing: -.025em; font-weight: 500; color: var(--ink);
}
.quiet-sub { margin: 16px auto 0; max-width: 44ch; font-size: 14.5px; color: var(--ink-50); }

/* the notes read like margin notes, not a card grid */
.quiet-notes {
  margin: 64px auto 0; text-align: left;
  display: flex; flex-direction: column; gap: 0;
}
.qn { padding: 26px 0; border-top: 1px solid var(--line); }
.qn:last-child { border-bottom: 1px solid var(--line); }
.qn-who { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.qn-who i { font-style: normal; font-weight: 500; color: var(--ink-50); }
.qn p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-65); }
.qn-acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .sec-quiet { padding: 88px 0 84px; }
  .quiet-col .bird { width: 96px; height: 96px; }
  .quiet-col .bird-sm { width: 68px; height: 68px; }
  .quiet-notes { margin-top: 48px; }
}

/* ============================================================
   07 · ROADMAP — noise, pattern, direction
   Four stages that run themselves: scattered questions drift,
   group into named signals, one member's question surfaces, and
   the thing worth making resolves. Nothing here is a dashboard.
   ============================================================ */
.sec-converge { background: var(--surface); padding: 108px 0 112px; overflow: clip; }
.cv-head {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 48px; align-items: end; margin-bottom: 8px;
}
.cv-quote {
  margin: 0; padding-left: 20px; border-left: 2px solid var(--pink);
  font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink);
}
.cv-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--ink-50); }

.converge { position: relative; margin-top: 46px; min-height: 230px; }

/* stage 1 — scattered questions */
.cv-noise { position: absolute; inset: 0 0 auto 0; height: 230px; pointer-events: none; z-index: 2; }
.cv-noise .q {
  position: absolute; left: var(--x); top: var(--y);
  transform: rotate(var(--r));
  padding: 7px 13px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-50); white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out);
}
[data-stage="1"] .cv-noise .q,
[data-stage="2"] .cv-noise .q { opacity: 1; }
/* they drift toward the middle before resolving into groups */
[data-stage="2"] .cv-noise .q { transform: rotate(0deg) translate(calc((50% - var(--x)) * .28), -18px); opacity: .35; }
[data-stage="3"] .cv-noise .q,
[data-stage="4"] .cv-noise .q { opacity: 0; transform: rotate(0deg) translateY(-34px); }

/* stage 2 — the pattern */
.cv-groups {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
[data-stage="2"] .cv-groups,
[data-stage="3"] .cv-groups,
[data-stage="4"] .cv-groups { opacity: 1; transform: none; }
.cvg { padding-top: 18px; border-top: 2px solid var(--line-2); }
.cvg.is-lead { border-top-color: var(--pink); }
.cvg b { display: block; font-size: 19px; letter-spacing: -.02em; }
.cvg-who { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-50); }
.cvg-n { display: block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--ink-65); }
.cvg-bar { display: block; height: 3px; margin-top: 10px; border-radius: 999px; background: var(--line-2); width: 0; transition: width 780ms var(--ease-out); }
.cvg.is-lead .cvg-bar { background: var(--pink); }
[data-stage="2"] .cvg-bar, [data-stage="3"] .cvg-bar, [data-stage="4"] .cvg-bar { width: var(--p); }
[data-stage="3"] .cvg:not(.is-lead), [data-stage="4"] .cvg:not(.is-lead) { opacity: .38; transition: opacity 420ms linear; }

/* stage 3 — the question underneath */
.cv-ask {
  margin: 54px auto 0; max-width: 560px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
[data-stage="3"] .cv-ask, [data-stage="4"] .cv-ask { opacity: 1; transform: none; }
.cv-again { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--pink-text); }

/* stage 4 — the direction it produces */
.cv-out {
  margin: 26px auto 0; max-width: 620px;
  padding: 26px 28px; border-radius: var(--r-lg);
  background: var(--ink); color: var(--cream);
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
[data-stage="4"] .cv-out { opacity: 1; transform: none; }
.cv-out-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(244,242,238,.7); }
.cv-out-head b { color: #fff; }
.cv-out-head .bird { width: 30px; height: 30px; }
.cv-out-line { margin: 12px 0 0; font-size: 19px; line-height: 1.4; font-weight: 500; color: #fff; letter-spacing: -.015em; }
.cv-basis { display: block; margin-top: 12px; font-size: 12px; color: rgba(244,242,238,.5); }
.cv-acts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cv-out .dt-act { background: rgba(244,242,238,.1); border-color: rgba(244,242,238,.2); color: #fff; }
.cv-out .dt-act.is-primary { background: var(--pink); border-color: var(--pink); }

@media (max-width: 900px) {
  .cv-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .cv-noise { height: 250px; }
  .cv-noise .q { font-size: 11.5px; }
  .cv-groups { grid-template-columns: 1fr; gap: 16px; }
  .cv-ask { margin-top: 44px; }
}
@media (max-width: 560px) {
  .sec-converge { padding: 76px 0 80px; }
  .cv-noise .q:nth-child(n+7) { display: none; }
  .cv-ask { margin-top: 38px; }
  .cv-out { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-noise .q, .cv-groups, .cv-ask, .cv-out, .cvg-bar { transition: none; }
  .cv-noise .q { opacity: 0; }
  .cv-groups, .cv-ask, .cv-out { opacity: 1; transform: none; }
  .cvg-bar { width: var(--p); }
}

/* ============================================================
   03 · NOT ANOTHER SCROLL — anonymity resolving into a room
   The left half is a feed with the people removed: grey stubs,
   no names, no faces, fading as it goes. It resolves rightward
   into a room where everyone is somebody. The gradient between
   the two halves is the whole argument.
   ============================================================ */
.sec-resolve { background: var(--paper); padding: 104px 0 108px; overflow: clip; }
.rs-head { max-width: 640px; }
.rs-head .d2 { margin: 16px 0 18px; }
.rs-head .lede { color: var(--ink-65); }

.resolve {
  position: relative; margin-top: 54px;
  display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  align-items: start; gap: 0;
}

/* the anonymous side */
.rs-noise {
  padding: 4px var(--gut) 0 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.28) 62%, transparent 96%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.28) 62%, transparent 96%);
}
.ns {
  display: grid; grid-template-columns: 30px minmax(0,1fr);
  gap: 12px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.ns:first-child { border-top: 0; }
.ns-av { width: 30px; height: 30px; border-radius: 999px; background: var(--bone-2); display: block; }
.ns span {
  display: block; height: 9px; border-radius: 999px;
  background: var(--bone-2); width: var(--w); margin-bottom: 8px;
}
.ns span:last-child { background: var(--bone); }

/* the room it becomes */
.rs-room {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: var(--r-xl);
  background: var(--fp-canvas);
  border: 1px solid var(--fp-line);
  box-shadow: -24px 24px 60px rgba(17,16,20,.07);
}
.rs-room-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; flex-wrap: wrap; }
.rs-hash { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.rs-meta { font-size: 12.5px; color: var(--fp-ink-3); }
.rs-room-head .fp-chip { margin-left: auto; }
.rs-thread + .rs-thread { margin-top: 12px; }
.rs-pinned { border-color: rgba(45,212,191,.34); }
.rs-live {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fp-line);
  font-size: 13px; color: var(--fp-ink-2);
}

@media (max-width: 900px) {
  .resolve { grid-template-columns: 1fr; gap: 26px; }
  .rs-noise {
    padding: 0 0 4px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 94%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 94%);
  }
  .ns:nth-child(n+5) { display: none; }
  .rs-room { box-shadow: 0 20px 50px rgba(17,16,20,.08); }
}
@media (max-width: 560px) {
  .sec-resolve { padding: 76px 0 78px; }
  .rs-room { padding: 18px 16px 16px; border-radius: var(--r-lg); }
}

/* ============================================================
   10b · COACHING ROOMS — the room narrows to two people
   Wide public thread on the left, a single action between, and a
   private two-person room on the right. The narrowing is literal.
   ============================================================ */
.sec-narrow { background: var(--paper); padding: 104px 0 108px; overflow: clip; }
.nw-head { max-width: 760px; }
.nw-head .d2 { margin: 16px 0 18px; }
.nw-head .lede { color: var(--ink-65); }

.narrow {
  margin-top: 52px;
  display: grid; grid-template-columns: minmax(0,1fr) 210px minmax(0,.72fr);
  gap: 0; align-items: center;
}
.nw-label {
  display: block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-50);
}
.nw-public { display: flex; flex-direction: column; gap: 10px; }
.nw-public .fp-thread { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.nw-ask { border-color: var(--pink); box-shadow: inset 3px 0 0 var(--pink); }
.nw-others { display: flex; flex-direction: column; gap: 10px; }
.fp-thread.is-faint { opacity: .42; }
.fp-thread.is-faint .fp-av { background: var(--fp-canvas); }

/* the moment it becomes private */
/* The room narrows to two - it does not lose the other people in it. They
   recede rather than being deleted, so the thread still reads as a public
   room after the sequence has played. */
[data-step="2"] .nw-others { opacity: 1; transform: none; transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
[data-step="2"] .nw-public > .fp-thread:first-of-type { opacity: .3; }

.nw-act { display: flex; flex-direction: column; align-items: center; gap: 0; }
.nw-act-line { flex: 1; width: 1px; min-height: 46px; background: var(--line-2); }
.nw-open {
  opacity: 0; transform: scale(.96);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  white-space: nowrap;
}
[data-step="1"] .nw-open, [data-step="2"] .nw-open { opacity: 1; transform: none; }

.nw-private {
  padding: 22px 24px 20px; border-radius: var(--r-lg);
  background: var(--fp-canvas); border: 1px solid var(--fp-line);
  opacity: 0; transform: translateX(14px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
[data-step="2"] .nw-private { opacity: 1; transform: none; }
.nw-pair { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; }
.nw-pair .av + .av { margin-left: -12px; }
.nw-pair span { margin-left: 6px; }
.nw-note { display: block; margin-top: 14px; font-size: 12px; color: var(--ink-50); }

@media (max-width: 980px) {
  .narrow { grid-template-columns: 1fr; gap: 22px; }
  .nw-act { flex-direction: row; gap: 14px; }
  .nw-act-line { width: auto; height: 1px; min-height: 0; min-width: 24px; }
  .nw-private { transform: translateY(14px); }
  [data-step="2"] .nw-private { transform: none; }
}
@media (max-width: 560px) { .sec-narrow { padding: 76px 0 78px; } }
@media (prefers-reduced-motion: reduce) {
  .nw-open, .nw-private, .nw-others, .nw-public .fp-thread { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   12b · PRICING — typographic, not a card grid
   Deliberately structural: the second tier is a marked slot that
   accepts a real figure without any layout change. Nothing here
   invents a plan name, a price or an entitlement.
   ============================================================ */
.sec-price { background: var(--surface); padding: 108px 0 112px; }
.pr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 64px; align-items: start; }
.pr-say .d2 { margin: 16px 0 18px; }
.pr-say .lede { color: var(--ink-65); max-width: 42ch; }

.pr-tiers { display: flex; flex-direction: column; }
.pr-tier { padding: 30px 0; border-top: 1px solid var(--line-2); }
.pr-tier:last-child { border-bottom: 1px solid var(--line-2); }
.pr-when { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-50); }
.pr-amount {
  display: block; margin: 10px 0 8px;
  font-size: clamp(38px, 5vw, 62px); line-height: 1; font-weight: 700;
  letter-spacing: -.04em; color: var(--ink);
}
.pr-tbc { color: var(--line-2); }
.pr-detail { display: block; font-size: 14.5px; color: var(--ink-65); }
.pr-note { grid-column: 1 / -1; margin: 34px 0 0; font-size: 13.5px; color: var(--ink-50); }

@media (max-width: 860px) {
  .pr { grid-template-columns: 1fr; gap: 34px; }
  .sec-price { padding: 76px 0 80px; }
}

/* ============================================================
   09 · FUNNELS vs FLOCKS — an inset comparison panel
   Borrowed structure: a dark panel floating inside the page with a
   pill label, headline left and note right, and the winning column
   boxed and tinted so the eye is told which side to be on.
   ============================================================ */
.sec-versus { background: var(--paper); padding: 84px 0 88px; }
.vs-panel {
  border-radius: 28px;
  background: var(--dark); color: var(--cream);
  padding: 54px 56px 58px;
  overflow: hidden;
}
.vs-panel-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,300px);
  gap: 40px; align-items: end; margin-bottom: 52px;
}
.vs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(244,242,238,.09); border: 1px solid rgba(244,242,238,.16);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: rgba(244,242,238,.8);
}
.vs-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pink); }
.vs-title { margin: 18px 0 0; color: #fff; letter-spacing: -.03em; }
.vs-note { margin: 0; text-align: right; font-size: 13.5px; line-height: 1.5; color: rgba(244,242,238,.55); }

.vs-cols {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr);
  gap: 40px; align-items: stretch;
}
.vs-col { min-width: 0; padding-top: 4px; }
.vs-col-name {
  display: block; margin-bottom: 26px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244,242,238,.45);
}
.vs-col-lede { margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: rgba(244,242,238,.72); }
.vs-foot { margin: 30px 0 0; font-size: 13px; color: rgba(244,242,238,.45); }
.vs-stay { color: rgba(244,242,238,.8); }
.vs-stay b { color: var(--pink); font-weight: 700; }

/* the column the page is arguing for */
.vs-col-win {
  padding: 28px 30px 26px;
  border-radius: 20px;
  border: 1px solid rgba(228,93,160,.42);
  background: linear-gradient(180deg, rgba(228,93,160,.10), rgba(228,93,160,.02));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.vs-col-win .vs-col-name { color: var(--pink); }
.vs-col-win .vs-col-lede { max-width: 34ch; }

/* the narrowing side */
.funnel-graph { display: flex; flex-direction: column; align-items: flex-start; }
.fstep {
  width: var(--w); min-width: 128px;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px;
  border-left: 2px solid rgba(244,242,238,.34);
  background: linear-gradient(90deg, rgba(244,242,238,.09), rgba(244,242,238,.015));
}
.fstep b {
  font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: #fff;
  /* reserve the widest figure so every label starts at the same x - without it
     the column stepped in as the numbers got shorter */
  min-width: 5.2ch; font-variant-numeric: tabular-nums;
}
.fstep span { font-size: 12px; color: rgba(244,242,238,.5); }
.fstep.is-last { border-left-color: rgba(244,242,238,.16); }
.fstep.is-last b { color: rgba(244,242,238,.42); }

.fdrop { display: flex; gap: 8px; padding: 8px 0 8px 18px; height: 18px; }
.fdrop i { width: 5px; height: 5px; border-radius: 999px; background: rgba(244,242,238,.3); }
.is-run .fdrop i { animation: fall 900ms cubic-bezier(.5,.05,.7,1) both; }
.is-run .fdrop i:nth-child(2) { animation-delay: 70ms; }
.is-run .fdrop i:nth-child(3) { animation-delay: 150ms; }
.is-run .fdrop i:nth-child(4) { animation-delay: 220ms; }
.is-run .fdrop i:nth-child(5) { animation-delay: 300ms; }
.is-run .fdrop i:nth-child(6) { animation-delay: 380ms; }
.is-run .fdrop i:nth-child(7) { animation-delay: 450ms; }
.is-run .fdrop i:nth-child(8) { animation-delay: 520ms; }
@keyframes fall { 0% { opacity: .3; transform: none; } 100% { opacity: 0; transform: translateY(16px); } }

/* the ring */
.ring { position: relative; width: 320px; height: 320px; margin: 6px auto 0; }
.ring-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-orbit { fill: none; stroke: rgba(244,242,238,.14); stroke-width: 1; }
.ring-chords line { stroke: rgba(228,93,160,.36); stroke-width: 1; }
.ring-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 126px; height: 126px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(17,16,20,.9); border: 1px solid var(--pink);
}
.ring-core b { font-size: 27px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.ring-core span { font-size: 11.5px; color: rgba(244,242,238,.6); }
.ring-face {
  position: absolute; left: 50%; top: 50%;
  border-radius: 999px; object-fit: cover;
  transform: rotate(var(--a)) translate(124px) rotate(calc(var(--a) * -1)) translate(-50%,-50%);
  box-shadow: 0 0 0 2px var(--dark);
}
.ring-face.is-new { opacity: 0; }
.is-run .ring-face.is-new { animation: arrive 5200ms ease-out infinite; }
@keyframes arrive { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 1; } }

@media (max-width: 980px) {
  .vs-panel { padding: 38px 26px 42px; border-radius: 22px; }
  .vs-panel-head { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 36px; }
  .vs-note { text-align: left; }
  .vs-cols { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .sec-versus { padding: 60px 0 64px; }
  .vs-panel { padding: 28px 18px 32px; }
  .vs-col-win { padding: 22px 16px 20px; }
  .fstep { padding: 10px 13px; min-width: 116px; }
  .fstep b { font-size: 20px; }
  .ring { width: 250px; height: 250px; }
  .ring-face { transform: rotate(var(--a)) translate(96px) rotate(calc(var(--a) * -1)) translate(-50%,-50%); }
  .ring-core { width: 106px; height: 106px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-run .fdrop i { animation: none; opacity: .3; }
  .is-run .ring-face.is-new { animation: none; opacity: 1; }
}

/* ============================================================
   SHARED DEVICES — borrowed structure, Flock's own material
   A pill section label, and a "mat": product UI sunk into a thick
   tinted frame instead of floating on a bare white card. These two
   run across the page so the sections read as one family.
   ============================================================ */
.pill-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.pill-label .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pink); }

/* the mat: product UI framed, and cropped by its own frame */
.rk-mat, .mat {
  background: var(--bone);
  border-radius: 18px;
  /* the cream framed the top and sides but stopped dead at the bottom, so the
     card sat flush against one edge of its own mat */
  padding: 20px;
  overflow: hidden;
}
.rk-mat > *, .mat > * {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  padding: 20px 22px 26px;
  margin-bottom: 0;
}

/* ============================================================
   04 · THE FEED — a rack of formats, one open
   Collapsed spines carry a number, a rotated name and a thumbnail.
   Opening one changes the post; the room band above never moves.
   ============================================================ */
.sec-rack { background: var(--surface); padding: 104px 0 108px; }
.rk-head { max-width: 660px; }
.rk-head .d2 { margin: 18px 0 16px; }
.rk-head .lede { color: var(--ink-65); }
.rk-strong { margin: 14px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }

.rk-room {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 44px 0 0; padding: 14px 20px;
  border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13.5px;
}
.rk-room b { font-weight: 700; }
.rk-room > span { color: var(--ink-50); }
.rk-rooms { display: inline-flex; gap: 8px; }
.rk-rooms i { font-style: normal; font-size: 12px; color: var(--ink-50); }
.rk-same {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50);
}

.rack {
  display: grid;
  grid-template-columns: 78px 78px minmax(0,1fr);
  gap: 14px; margin-top: 18px; align-items: stretch;
  transition: grid-template-columns 620ms cubic-bezier(.22,.61,.36,1);
}
.rack:has(.rk:nth-child(1).is-open) { grid-template-columns: minmax(0,1fr) 78px 78px; }
.rack:has(.rk:nth-child(2).is-open) { grid-template-columns: 78px minmax(0,1fr) 78px; }
.rack:has(.rk:nth-child(3).is-open) { grid-template-columns: 78px 78px minmax(0,1fr); }

.rk {
  position: relative; min-width: 0;
  border-radius: 20px; overflow: hidden;
  background: var(--bone);
  border: 1px solid var(--line);
}
.rk:not(.is-open) { min-height: 460px; }
/* the collapsed spine */
.rk-spine {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 18px 0 16px; width: 78px;
  background: var(--bone); border: 0; cursor: pointer;
  transition: opacity 320ms var(--ease), background 320ms var(--ease);
}
.rk-spine:hover { background: var(--bone-2); }
.rk-num { font-size: 11px; font-weight: 700; color: var(--ink-50); }
.rk-name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.rk-thumb { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.rk.is-open .rk-spine { opacity: 0; pointer-events: none; }

/* the open one */
.rk-open {
  opacity: 0; transform: translateX(26px) scale(.985);
  transition: opacity 460ms var(--ease-out) 140ms, transform 560ms var(--ease-out) 140ms;
  padding: 14px;
}
.rk.is-open .rk-open { opacity: 1; transform: none; }
.rk:not(.is-open) .rk-open { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.rk-mat { background: transparent; padding: 0; }
.rk-open { padding: 16px; }
.rk-mat > * { border-radius: 14px; border: 1px solid var(--line); padding: 20px 22px; background: var(--paper); box-shadow: 0 10px 28px rgba(17,16,20,.05); }
.rk-mat .post-lg { box-shadow: none; }

@media (max-width: 900px) {
  .rack, .rack:has(.rk.is-open) { grid-template-columns: 1fr; gap: 10px; }
  .rk-spine { position: relative; inset: auto; width: 100%; flex-direction: row; padding: 14px 16px; }
  .rk-name { writing-mode: horizontal-tb; transform: none; }
  .rk-thumb { width: 34px; height: 34px; }
  .rk.is-open .rk-spine { opacity: 1; pointer-events: auto; background: var(--bone-2); }
  .rk:not(.is-open) .rk-open { display: none; }
  .rk-room { border-radius: var(--r-lg); }
  .rk-same { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rack, .rk-open, .rk-spine { transition: none; }
}

/* the pill sits on dark grounds too */
.bg-dark .pill-label, .sec-world .pill-label, .vs-panel .pill-label {
  background: rgba(244,242,238,.10); color: rgba(244,242,238,.86);
  border: 1px solid rgba(244,242,238,.18);
}
/* it needs air under it wherever it replaces an eyebrow */
.pill-label + h2, .pill-label + .d1, .pill-label + .d2, .pill-label + .d3 { margin-top: 18px; }
.stack > .pill-label { align-self: flex-start; }

/* ============================================================
   05 · EVENTS + COURSES — three moments on one line
   Before, the hour, after. The middle one is a photograph rather
   than an interface, so time reads as the subject and the product
   fragments sit either side of it.
   ============================================================ */
.sec-stage { background: var(--paper); padding: 104px 0 108px; }
.stage-head { max-width: 660px; }
.stage-head .d2 { margin: 18px 0 16px; }
.stage-head .lede { color: var(--ink-65); }

.stage {
  list-style: none; margin: 52px 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  gap: 30px; align-items: start;
  position: relative;
}
/* the line the three moments sit on */
.stage::before {
  content: ''; position: absolute; left: 0; right: 0; top: 15px;
  height: 1px; background: var(--line);
}
.stage > .st { display: block; position: relative; min-width: 0; padding-top: 46px; }
.st-n {
  position: absolute; top: 0; left: 0;
  width: 31px; height: 31px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--cream);
  font-size: 11.5px; font-weight: 700;
}
.st-when {
  position: absolute; top: 6px; left: 42px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-50);
}
.st-mat { padding: 14px; }
.st-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ev-row { display: flex; align-items: center; gap: 12px; }
.st-going { display: flex; align-items: center; gap: 10px; }
.st-title { font-size: 16px; letter-spacing: -.015em; }
.st-prog { height: 4px; border-radius: 999px; background: var(--bone-2); overflow: hidden; }
.st-prog i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.st-lessons { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-65); }
.st-lessons li { padding-left: 20px; position: relative; line-height: 1.5; }
.st-lessons li::before {
  content: ''; position: absolute; left: 0;
  /* centre the 14px dot on the first line rather than guessing an offset */
  top: calc((1.5em - 14px) / 2);
  width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid var(--line-2);
}
.st-lessons .is-done::before { background: var(--ink); border-color: var(--ink); }
.st-lessons .is-done { color: var(--ink-50); text-decoration: line-through; }
.st-lessons .is-now::before { border-color: var(--pink); }
.st-lessons .is-now { color: var(--ink); font-weight: 500; }
.st-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-50); }

/* the hour is a photograph, not an interface */
.st-live-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 3;
}
.st-live-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-live-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,8,10,.42), rgba(12,8,10,.06) 40%, rgba(12,8,10,.62));
}
.st-live-chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(18,12,15,.6); color: #fff;
  font-size: 11.5px; font-weight: 700;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.st-live-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pink); }
.st-live-host {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-size: 13px; color: rgba(255,255,255,.9);
}

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; gap: 40px; }
  /* The number and its label sit on their own line and the card runs the full
     column beneath them, its left edge flush with the number. Indenting the
     card behind the rail cost 70px of a phone's width and left every card
     floating away from the step it belongs to. */
  .stage::before { display: none; }
  .st { padding-left: 0; padding-top: 44px; }
  .st-n { top: 0; left: 0; }
  .st-when { top: 9px; left: 42px; }
  .st-mat { padding: 14px 0; }
  .st-live-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .sec-stage { padding: 76px 0 80px; }
  /* the card runs the full column at this width too - see the 900px block */
  .st { padding-left: 0; }
}

/* ============================================================
   01 · THE QUESTION — the answers, set as an index
   Type carries this section. The photograph is a matted inset that
   follows whichever answer is active, so it sits between the two
   photo-led sections without repeating either of them.
   ============================================================ */
.sec-index { background: var(--paper); padding: 104px 0 108px; }
.ix-head { max-width: 680px; }
.ix-head .d2 { margin: 18px 0 16px; }
.ix-head .lede { color: var(--ink-65); }

.ix {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,430px);
  gap: 64px; align-items: start; margin-top: 54px;
}

/* the answers */
.ix-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ix-list li { border-bottom: 1px solid var(--line); }
.ix-pick {
  width: 100%; display: flex; align-items: baseline; gap: 22px;
  padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 700; color: var(--ink-50);
  transition: color 260ms var(--ease), padding-left 320ms var(--ease);
}
.ix-n {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-50); flex: none; width: 22px;
  transition: color 260ms var(--ease);
}
.ix-pick:hover { color: var(--ink); }
.ix-pick.is-on { color: var(--ink); padding-left: 14px; }
.ix-pick.is-on .ix-n { color: var(--pink-text); }
.ix-list li:has(.is-on) { box-shadow: inset 3px 0 0 var(--pink); }

/* the answer, seen */
.ix-view { position: sticky; top: 108px; }
.ix-mat { padding: 16px 16px 16px; }
.ix-shot {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 5;
}
.ix-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 620ms ease;
}
.ix-shot img.is-on { opacity: 1; }

.ix-id {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper);
  transition: opacity 240ms var(--ease-out);
}
.ix-id.is-swap { opacity: 0; }
.ix-id b { font-size: 14px; }
.ix-id .meta { font-size: 12px; }
.ix-id .fp-chip { margin-left: auto; background: var(--fp-teal-tint); border-color: rgba(45,212,191,.32); color: var(--fp-teal-ink); }
.ix-id .fp-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fp-teal); }

@media (max-width: 900px) {
  .ix { grid-template-columns: 1fr; gap: 34px; }
  .ix-view { position: static; }
  .ix-shot { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .sec-index { padding: 76px 0 80px; }
  .ix-pick { gap: 14px; padding: 14px 0; }
  .ix-id { flex-wrap: wrap; border-radius: var(--r-lg); }
  .ix-id .fp-chip { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-shot img, .ix-pick, .ix-id { transition: none; }
}

/* ============================================================
   PRODUCT DEMOS — a pointer you can actually follow
   One cursor style for every self-running demonstration, so the
   cause of each state change is always legible.
   ============================================================ */
.demo-cursor {
  position: absolute; left: 0; top: 0; z-index: 40;
  width: 30px; height: 30px; margin: -4px 0 0 -4px;
  pointer-events: none; opacity: 0;
  transition: opacity 240ms linear, transform 820ms cubic-bezier(.45,.05,.25,1);
  will-change: transform;
}
.demo-cursor svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 3px 8px rgba(17,16,20,.45)); }
.demo-cursor.is-on { opacity: 1; }
.demo-cursor.is-press svg { transform: scale(.74); transition: transform 130ms var(--ease); }
.demo-cursor::after {
  content: ''; position: absolute; left: 5px; top: 5px;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 999px; border: 2px solid var(--pink);
  opacity: 0; transform: scale(.3);
}
.demo-cursor.is-press::after { animation: demoTap 620ms var(--ease-out); }
@keyframes demoTap {
  0%   { opacity: .85; transform: scale(.3); }
  100% { opacity: 0;   transform: scale(1.35); }
}
/* the control the cursor is over */
.demo-hot {
  box-shadow: 0 0 0 3px rgba(228,93,160,.28), inset 0 0 0 2px var(--pink) !important;
  transition: box-shadow 220ms var(--ease) !important;
}
/* whatever just changed gets one clear beat of emphasis */
.demo-changed { animation: demoChanged 1100ms var(--ease-out); }
@keyframes demoChanged {
  0%   { box-shadow: 0 0 0 0 rgba(228,93,160,.42); }
  35%  { box-shadow: 0 0 0 8px rgba(228,93,160,.16); }
  100% { box-shadow: 0 0 0 14px rgba(228,93,160,0); }
}

@media (prefers-reduced-motion: reduce) { .demo-cursor { display: none; } }
@media (max-width: 860px) { :root { --nav-h: 78px; } }
@media (max-width: 560px) { :root { --nav-h: 70px; } }

/* the RSVP control the events demo operates */
.ev-rsvp {
  margin-left: auto; flex: none;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper);
  font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.ev-rsvp.is-going { background: var(--pink-text); border-color: var(--pink-text); color: #fff; }
.st-going { flex-wrap: wrap; }
/* a newcomer lands in the attendee stack */
.st-going .av.is-added { animation: evJoin 520ms var(--ease-out) both; }
@keyframes evJoin { from { opacity: 0; transform: translateX(-6px) scale(.8); } to { opacity: 1; transform: none; } }
/* the hour arrives */
#evChip.is-live { background: var(--pink-text); }
#evFrame.is-live::after { background: linear-gradient(180deg, rgba(12,8,10,.30), rgba(12,8,10,.04) 40%, rgba(12,8,10,.66)); }
/* what is left afterwards */
#evAfter { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.js-motion #evAfter { opacity: .35; }
#evAfter.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js-motion #evAfter { opacity: 1; } }

/* ---- Admin demo states (no layout change, only emphasis) ---- */
#opsPerson { transition: opacity 460ms var(--ease-out); }
#ops .p-row[data-act] { transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
#ops .p-row.is-lit { background: var(--app-inset); box-shadow: inset 2px 0 0 var(--pink); }
#ops .auto-step[data-eval] { transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
#ops .auto-step.is-eval { opacity: 1; border-color: var(--ink-50); }
#ops .auto-step.is-fired { opacity: 1; border-color: var(--pink); background: rgba(228,93,160,.07); }
@media (prefers-reduced-motion: reduce) {
}

/* ---- Commerce demo: one order arrives and settles ---- */
#comOrders tr.is-new { animation: orderIn 620ms var(--ease-out) both; }
@keyframes orderIn {
  from { opacity: 0; transform: translateY(-8px); background: rgba(228,93,160,.08); }
  to   { opacity: 1; transform: none; }
}
#comOrders .st.is-settling { background: var(--bone-2); color: var(--ink-50); }
.com-total { transition: color 320ms var(--ease); }
.com-total.is-up { color: var(--pink-text); }

/* ---- Duie & Tuie: they notice, they do not perform ---- */
#assistant .dt-card { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.js-motion #assistant .dt-card { opacity: 0; transform: translateY(8px); }
#assistant .dt-card.is-seen { opacity: 1; transform: none; }
/* the room stirring is a single quiet shift, not an effect */
#assistant .dt-quote { transition: opacity 420ms var(--ease-out); }
.js-motion #assistant:not(.dt-stirred) .dt-quote { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .js-motion #assistant .dt-card { opacity: 1; transform: none; }
  .js-motion #assistant:not(.dt-stirred) .dt-quote { opacity: 1; }
}

/* ---- 07 · the member journey: Nadia moves, the path follows her ---- */
.steps .step { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js-motion .steps .step { opacity: 0; transform: translateY(14px); }
.steps .step.is-reached { opacity: 1; transform: none; }
.steps .step-node { transition: background 380ms var(--ease), box-shadow 380ms var(--ease); }
.steps .step.is-reached .step-node { background: var(--pink); box-shadow: 0 0 0 4px rgba(228,93,160,.16); }
/* the line fills as she travels it */
.steps { position: relative; }
.steps-line { overflow: hidden; }
.steps-line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%;
  height: var(--travelled, 0%); background: var(--pink);
  transition: height 620ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .steps .step { opacity: 1; transform: none; }
  .steps-line::after { height: 100%; transition: none; }
}

/* ---- Discover: signs of life, not a carousel ---- */
#peekStream .stream-post.is-arriving { animation: replyIn 620ms var(--ease-out) both; }
@keyframes replyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tile-flag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(18,12,15,.62); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.tile-flag .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--pink); }
.tile-flag.is-on { opacity: 1; transform: none; }
/* the search caret only exists while the demo types */
.search input.is-typing { caret-color: var(--pink-text); }
@media (prefers-reduced-motion: reduce) { .tile-flag { display: none; } }

/* ============================================================
   VERTICAL RHYTHM — the quieter sections give height back
   Uniform 104/104 on every section was flattening the scroll as
   much as it was padding it. Expressive sections keep their air;
   heading-plus-panel sections tighten.
   ============================================================ */
#product      { padding: 92px 0 96px; }
.sec-resolve  { padding: 88px 0 92px; }
.sec-stage    { padding: 88px 0 92px; }
.sec-converge { padding: 92px 0 96px; }
#ops          { padding: 88px 0 92px; }
.sec-narrow   { padding: 88px 0 92px; }
#opportunity  { padding: 88px 0; }
.sec-price    { padding: 88px 0 92px; }
#leads, .bg-dark.sec { padding: 88px 0; }

/* the journey travels a shorter distance between beats */
.steps .step { margin-bottom: 10px; }
@media (max-width: 760px) { .steps .step { margin-bottom: 8px; } }

/* ---- 02 · the thread gathers reactions ---- */
.range-faces { display: inline-flex; margin-left: 4px; }
.range-faces img {
  width: 20px; height: 20px; border-radius: 999px; object-fit: cover;
  box-shadow: 0 0 0 2px var(--paper); margin-left: -6px;
  opacity: 0; transform: scale(.6);
  animation: faceIn 420ms var(--ease-out) forwards;
}
.range-faces img:first-child { margin-left: 0; }
@keyframes faceIn { to { opacity: 1; transform: none; } }
#rangeHearts.is-bump, #rangeReplies.is-bump { animation: numBump 420ms var(--ease-out); }
@keyframes numBump { 0% { transform: none; } 40% { transform: translateY(-3px); color: var(--pink-text); } 100% { transform: none; } }
.r-talk .fp-thread .fp-reply.is-arriving { animation: replyIn 560ms var(--ease-out) both; }

/* ---- 03 · the room stays busy ---- */
.rs-typing {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 2px 2px; font-size: 12.5px; color: var(--fp-ink-3);
  opacity: 0; transition: opacity 300ms linear;
}
.rs-typing.is-on { opacity: 1; }
.rs-typing i { display: inline-flex; gap: 3px; }
.rs-typing i span {
  width: 4px; height: 4px; border-radius: 999px; background: var(--fp-ink-3);
  animation: typeDot 1.2s ease-in-out infinite;
}
.rs-typing i span:nth-child(2) { animation-delay: .16s; }
.rs-typing i span:nth-child(3) { animation-delay: .32s; }
@keyframes typeDot { 0%,60%,100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
#rsCount.is-bump { animation: numBump 420ms var(--ease-out); }
.rs-thread.is-arriving { animation: replyIn 560ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .rs-typing i span, .range-faces img { animation: none; opacity: 1; transform: none; }
}

/* ---- the recording that appears once the hour is over ---- */
.st-recording {
  display: block; margin-top: 12px;
  font-size: 12px; font-weight: 700; color: var(--fp-teal-ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.st-recording.is-on { opacity: 1; transform: none; }
.st-lessons li { cursor: default; transition: color var(--t-base) var(--ease); }
.st-lessons li.is-hot { color: var(--ink); }
#evProg { transition: width 620ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .st-recording { opacity: 1; transform: none; } }

/* ---- 06 · the journey: she types before she speaks ----
   Narration simply arrives. Anything in quotation marks is somebody
   actually saying it, so it is composed and then typed out. */
.step-card { position: relative; }
.step-say { position: relative; }
.step-say > * { transition: opacity 420ms var(--ease-out); }
.js-motion .step:not(.is-spoken) .step-say > * { opacity: 0; }
.step-type {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 0; opacity: 0; transition: opacity 260ms linear;
}
.step-type.is-on { opacity: 1; }
.step-type span {
  width: 5px; height: 5px; border-radius: 999px; background: var(--ink-50);
  animation: typeDot 1.2s ease-in-out infinite;
}
.step-type span:nth-child(2) { animation-delay: .16s; }
.step-type span:nth-child(3) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .step:not(.is-spoken) .step-say > * { opacity: 1; }
  .step-type { display: none; }
}

/* ============================================================
   HEADING CHOREOGRAPHY — restrained, and not the same twice
   Two treatments only, applied to different sections so the page
   does not develop a tic. Headings settle before their demo runs.
   ============================================================ */
.hl { display: block; overflow: hidden; }
.js-motion .hl > i { display: block; font-style: inherit; transition: transform 760ms cubic-bezier(.16,.84,.44,1); }
.js-motion .hl > i { transform: translateY(102%); }
.is-set .hl > i { transform: none; }
.is-set .hl:nth-child(2) > i { transition-delay: 90ms; }
.is-set .hl:nth-child(3) > i { transition-delay: 170ms; }

/* the quieter treatment: the line simply arrives */
/* One editable sentence, still set on two lines: the browser balances the
   break instead of a hardcoded <br>, so the editor never has to know the
   headline was ever split. */
.hw-balance { text-wrap: balance; max-width: 22ch; }
.hw { transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.js-motion .hw { opacity: 0; transform: translateY(10px); }
.is-set .hw { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hl > i { transform: none; transition: none; }
  .hw { opacity: 1; transform: none; transition: none; }
}

/* ---- Discover: a community that is visibly inhabited ---- */
.feat-live {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--fp-teal-tint); border: 1px solid rgba(45,212,191,.32);
  color: var(--fp-teal-ink); font-size: 10.5px; font-weight: 700;
  opacity: 0; transform: translateY(-3px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.feat-live .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--fp-teal); }
.feat-live.is-on { opacity: 1; transform: none; }
#featCount.is-bump { animation: numBump 420ms var(--ease-out); }
#convGrid .cv-r.is-bump, #convGrid .cv-p.is-bump { animation: numBump 420ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .feat-live { opacity: 1; transform: none; } }

/* the control under the pointer reads as genuinely hovered */
.rk-spine.demo-hot { background: var(--bone-2); }
.ev-rsvp.demo-hot { background: var(--bone-2); }
.app-nav.demo-hot { background: var(--app-surface); }
.st-lessons li.demo-hot { color: var(--ink); font-weight: 500; }

/* the message being written, character by character */
.step-say[data-typed] > p { min-height: 1.5em; }
.js-motion .step:not(.is-spoken) .step-say[data-typed] > p { opacity: 1; }
.step-say[data-typed] .caret-t {
  display: inline-block; width: 2px; height: 1em;
  background: var(--pink-text); vertical-align: -2px; margin-left: 1px;
  animation: caretBlink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .step-say[data-typed] .caret-t { display: none; } }

/* ============================================================
   Duie & Tuie are characters, so they behave like them
   A slow blink and the smallest shift of weight. Nothing performs;
   they simply do not stand perfectly still.
   ============================================================ */
.bird-eye { transform-origin: 84px 38px; transform-box: fill-box; }
.bird-a .bird-eye { animation: blink 7.2s infinite; }
.bird-b .bird-eye { animation: blink 9.6s infinite 2.4s; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(.12); }
  98%           { transform: scaleY(1); }
}
.dt-stage .bird-a, .dt-stage .bird-b { transform-origin: 60% 90%; }
.dt-stage .bird-a { animation: birdIn 520ms var(--ease-out) both, sway 9s ease-in-out 620ms infinite; }
.dt-stage .bird-b { animation: birdIn 520ms var(--ease-out) both, sway 11s ease-in-out 2.2s infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35%      { transform: rotate(-1.1deg) translateY(-2px); }
  70%      { transform: rotate(.9deg) translateY(1px); }
}

/* the people in the hero do not stand perfectly still either */
.gather-band.is-in .g-mid img,
.gather-band.is-in .g-near img { animation: shift 8.5s ease-in-out infinite; }
.gather-band.is-in .g:nth-child(5) img { animation-duration: 10.5s; animation-delay: -2.2s; }
.gather-band.is-in .g:nth-child(6) img { animation-duration: 9.2s;  animation-delay: -4.6s; }
.gather-band.is-in .g:nth-child(7) img { animation-duration: 11.4s; animation-delay: -1.1s; }
@keyframes shift {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(2px, -3px); }
  65%      { transform: translate(-2px, 2px); }
}

@media (prefers-reduced-motion: reduce) {
  .bird-a, .bird-b, .bird-eye,
  .gather-band.is-in .g-mid img, .gather-band.is-in .g-near img { animation: none !important; }
}

/* ============================================================
   HERO A — composer geometry rebuilt from layout rules
   The pink action must always belong to the white field.
   Root cause of the production bug: .starter was
   width:fit-content + nowrap with a nowrap label and a
   flex:none button, so inside the narrow hero side column the
   children overflowed the painted pill instead of reflowing.
   ============================================================ */

.starter {
  /* wrap is the structural guarantee: the button can never be
     pushed outside the field, it drops beneath it instead */
  flex-wrap: wrap;
  row-gap: 10px;
  /* radius that reads as a pill on one line and a card when wrapped */
  border-radius: 28px;
  padding: 8px 8px 8px 24px;
  align-items: center;
  transition: border-radius .2s ease;
}
.starter-label {
  min-width: 0;                 /* the fix: allows the phrase to shrink */
  flex: 1 1 auto;
  white-space: normal;          /* phrase wraps; the word itself does not */
  line-height: 1.35;
}
.starter-word { white-space: nowrap; }
.hero-claim-side .starter .btn { flex: 0 0 auto; white-space: nowrap; }

/* one line fits comfortably — keep the true pill */
@media (min-width: 1181px) {
  .starter { border-radius: 999px; padding: 8px 8px 8px 28px; flex-wrap: nowrap; }
  .starter-label { white-space: nowrap; flex: 0 1 auto; }
}

/* the squeeze zone the production bug lived in: the hero is still
   two columns but the side column can no longer hold one line */
@media (max-width: 1180px) and (min-width: 861px) {
  .starter {
    flex-direction: column; align-items: stretch;
    border-radius: var(--r-lg); padding: 16px; gap: 12px;
    width: 100%;
  }
  .starter-label { white-space: normal; text-align: left; }
  .starter .btn { width: 100%; justify-content: center; }
}

/* ---- Hero A polish: hierarchy, depth, spacing ---- */
.hero-claim { align-items: end; }
.hero-claim .d1 { text-shadow: 0 2px 30px rgba(0,0,0,.34); }
.hero-sub { text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.starter {
  background: #fff;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.14);
}
.starter .btn-pink { box-shadow: 0 6px 18px -4px rgba(228,93,160,.6); }
.starter-label { font-size: 16px; }

/* member portraits: consistent ring + lift, no collision with the thread */
.gather-band .g img { box-shadow: 0 10px 26px rgba(0,0,0,.42); }

/* ============================================================
   ROADMAP — rebuilt as five states in four reserved rows.
   The old version put .cv-noise (absolute, z-index 2) on top of
   .cv-groups, so mid-crossfade the scattered questions sat over
   the topic cards. Here every state owns its own row and its
   height is reserved, so a screenshot at ANY frame is intentional.
   ============================================================ */

.rm {
  margin-top: 46px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0;
}

/* ---- STATE 1 · the murmur ---- */
.rm-murmur {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  min-height: 84px; align-content: flex-start;      /* height reserved */
  margin-bottom: 30px;
}
.rm-murmur .rm-q {
  padding: 7px 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-50); white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js-motion .rm[data-state="1"] .rm-q { opacity: 1; transform: none; }
.js-motion .rm[data-state="1"] .rm-q:nth-child(1){transition-delay:.00s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(2){transition-delay:.06s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(3){transition-delay:.12s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(4){transition-delay:.18s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(5){transition-delay:.24s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(6){transition-delay:.30s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(7){transition-delay:.36s}
.js-motion .rm[data-state="1"] .rm-q:nth-child(8){transition-delay:.42s}
/* from state 2 on, the murmur recedes but keeps its space */
.js-motion .rm[data-state="2"] .rm-q,
.js-motion .rm[data-state="3"] .rm-q,
.js-motion .rm[data-state="4"] .rm-q,
.js-motion .rm[data-state="5"] .rm-q { opacity: .28; transform: none; transition-delay: 0s; }

/* ---- STATES 2 + 3 · the topics ---- */
.rm-topics {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
  align-items: start;
}
.rm-topic {
  min-width: 0; padding: 22px 22px 20px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid; gap: 9px; align-content: start;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out),
              box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.js-motion .rm[data-state="2"] .rm-topic,
.js-motion .rm[data-state="3"] .rm-topic,
.js-motion .rm[data-state="4"] .rm-topic,
.js-motion .rm[data-state="5"] .rm-topic { opacity: 1; transform: none; }
.js-motion .rm[data-state="2"] .rm-topic:nth-child(2){transition-delay:.08s}
.js-motion .rm[data-state="2"] .rm-topic:nth-child(3){transition-delay:.16s}

.rm-name { font-size: 18px; letter-spacing: -.02em; font-weight: 700; }
.rm-count { font-size: 13.5px; color: var(--ink-65); font-weight: 500; font-variant-numeric: tabular-nums; }
.rm-count i { font-style: normal; font-weight: 700; color: var(--ink); }
.rm-bar { display: block; height: 4px; border-radius: 999px; background: var(--bone-2); overflow: hidden; }
.rm-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px; background: var(--line-2);
  transition: width .85s var(--ease-out) .1s, background .45s var(--ease-out);
}
.js-motion .rm[data-state="2"] .rm-bar i,
.js-motion .rm[data-state="3"] .rm-bar i,
.js-motion .rm[data-state="4"] .rm-bar i,
.js-motion .rm[data-state="5"] .rm-bar i { width: var(--p); }
.rm-who { font-size: 12.5px; color: var(--ink-50); }

/* STATE 3 — pricing becomes unmistakably dominant */
.js-motion .rm[data-state="3"] .rm-topic.is-lead,
.js-motion .rm[data-state="4"] .rm-topic.is-lead,
.js-motion .rm[data-state="5"] .rm-topic.is-lead {
  border-color: var(--pink); box-shadow: 0 18px 44px -18px rgba(228,93,160,.55);
}
.js-motion .rm[data-state="3"] .rm-topic.is-lead .rm-bar i,
.js-motion .rm[data-state="4"] .rm-topic.is-lead .rm-bar i,
.js-motion .rm[data-state="5"] .rm-topic.is-lead .rm-bar i { background: var(--pink); }
.js-motion .rm[data-state="3"] .rm-topic:not(.is-lead),
.js-motion .rm[data-state="4"] .rm-topic:not(.is-lead),
.js-motion .rm[data-state="5"] .rm-topic:not(.is-lead) { opacity: .62; }
.rm-topic.is-lead .rm-name { font-size: 21px; }
.rm-topic.is-lead .rm-count i { color: var(--pink-deep); }

/* ---- STATES 4 + 5 · the representative question ---- */
.rm-ask {
  margin-top: 30px; min-height: 168px;              /* height reserved */
  display: grid; justify-items: center; align-content: start; gap: 14px;
}
.rm-card {
  margin: 0; max-width: 560px; width: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js-motion .rm[data-state="4"] .rm-card,
.js-motion .rm[data-state="5"] .rm-card { opacity: 1; transform: none; }
.rm-card-head { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.rm-card-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.rm-card-head b { font-weight: 700; }
.rm-in { color: var(--ink-50); }
.rm-card blockquote {
  margin: 11px 0 0; font-size: clamp(16px,1.5vw,19px); line-height: 1.45;
  letter-spacing: -.015em; font-weight: 500;
}
.rm-similar {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--pink-deep);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js-motion .rm[data-state="5"] .rm-similar { opacity: 1; transform: none; }
.rm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); display: block; flex: none; }

@media (max-width: 900px) {
  .rm-topics { grid-template-columns: 1fr; gap: 12px; }
  .rm-topic { padding: 16px 18px; }
  .rm-murmur { min-height: 116px; gap: 8px; }
  .rm-murmur .rm-q { font-size: 11.5px; padding: 6px 11px; }
  /* on mobile the three topics become a sequence, so the lead reads first */
  .rm-topic.is-lead { order: -1; }
  .rm-ask { min-height: 190px; }
}
@media (max-width: 560px) {
  .rm-murmur { min-height: 132px; }
  .rm-card blockquote { font-size: 16px; }
}

/* no JS / reduced motion: the finished state, fully legible */
.rm[data-state="0"] .rm-q,
.rm[data-state="0"] .rm-topic,
.rm[data-state="0"] .rm-card,
.rm[data-state="0"] .rm-similar { opacity: 1; transform: none; }
.rm[data-state="0"] .rm-bar i { width: var(--p); }
@media (prefers-reduced-motion: reduce) {
  .rm .rm-q, .rm .rm-topic, .rm .rm-card, .rm .rm-similar {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .rm .rm-bar i { width: var(--p) !important; transition: none !important; }
  .rm .rm-topic:not(.is-lead) { opacity: .62 !important; }
  .rm .rm-topic.is-lead { border-color: var(--pink) !important; }
  .rm .rm-topic.is-lead .rm-bar i { background: var(--pink) !important; }
}

/* ============================================================
   CRM + FLOCK REP — the rule supports, the conversation leads.
   ============================================================ */

/* the compact if/then signal */
.rule-chip { display: grid; gap: 5px; }
.rc-step {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-size: 12.5px; line-height: 1.35;
  opacity: .5; transition: opacity .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.rc-step i {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-50); flex: none; width: 32px;
}
.rc-step b { font-weight: 700; }
.rc-step.is-out i { color: var(--pink-deep); }

/* the rep conversation */
.ar-block { gap: 8px; }
.ar {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden;
}
.ar-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: #FCFBFA;
}
.ar-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--bone); display: grid; place-items: center; flex: none; }
.ar-mark svg { width: 18px; height: 18px; }
.ar-head b { font-size: 12.5px; }
.ar-sub { font-size: 10.5px; color: var(--ink-50); }
.ar-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--mint); }
.ar-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); display: block; }

/* the thread reserves its full height, so nothing below it ever jumps */
.ar-thread {
  padding: 11px; display: grid; gap: 7px; align-content: start;
  min-height: 214px;
}
.ar-msg { max-width: 92%; opacity: 0; transform: translateY(6px); transition: opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.ar-msg p { margin: 0; font-size: 12.3px; line-height: 1.42; padding: 8px 11px; border-radius: 12px; }
.ar-out { justify-self: start; }
.ar-out p { background: var(--bone); border-bottom-left-radius: 4px; }
.ar-in  { justify-self: end; }
.ar-in p { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }

.ar-typing {
  /* holds its space at every step so the panel never changes height
     mid-sequence — display toggling here caused a 30px shift */
  display: flex; gap: 3px; padding: 9px 11px; background: var(--bone);
  border-radius: 12px; border-bottom-left-radius: 4px;
  justify-self: start; width: fit-content;
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.ar-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-50); display: block; animation: arDot 1.1s infinite; }
.ar-typing span:nth-child(2) { animation-delay: .18s; }
.ar-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes arDot { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

.ar-booked {
  display: flex; align-items: center; gap: 9px;
  margin: 0 11px 11px; padding: 10px 12px;
  border: 1px solid rgba(53,179,126,.34); background: rgba(53,179,126,.08);
  border-radius: var(--r-sm);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.ar-booked svg { width: 16px; height: 16px; stroke: #2E9E6E; stroke-width: 2.4; fill: none; flex: none; }
.ar-booked b { font-size: 12.3px; }
.ar-booked span { font-size: 10.8px; color: var(--ink-65); }

.intg-mcp .intg-mark { background: var(--sky); font-size: 13px; }
.ar-note { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-50); }

/* the CRM timeline receives the new event last */
.p-row.is-new { opacity: 1; transform: none; }

/* no JS / reduced motion: everything legible at rest */
@media (prefers-reduced-motion: reduce) {
  .rc-step, .ar-msg, .ar-booked, .p-row.is-new { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ar-typing { opacity: 0 !important; }
  .ar-typing span { animation: none !important; }
}

/* the rep panel needs a little more room than the old rule stack */
.app-ops { grid-template-columns: 208px minmax(0,1fr) 292px; }
@media (max-width: 1100px) {
  /* the sidebar used to be display:none here, which hid the whole
     rep story on tablet. It becomes a row beneath the profile. */
  .app-ops { grid-template-columns: 200px minmax(0,1fr); }
  .ops-side {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px; border-top: 1px solid var(--line); padding-top: 20px;
  }
  .ar-block { grid-row: span 2; }
}
@media (max-width: 900px) {
  .app-ops { grid-template-columns: 1fr; }
  .ops-side { grid-template-columns: 1fr; }
  .ar-block { grid-row: auto; }
  .ar-thread { min-height: 0; }
}

/* ============================================================
   FOOTER — column architecture built to take more columns later.
   Only destinations that exist today are listed.
   ============================================================ */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 34px;
  align-content: start;
}
.foot-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.foot-col-h {
  margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-50);
}
.foot-cols .foot-link {
  font-size: 14px; font-weight: 500; color: var(--ink-80);
  text-decoration: none; width: fit-content;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .16s ease, border-color .16s ease;
}
.foot-cols .foot-link:hover { color: var(--ink); border-bottom-color: var(--pink); }
.foot-cols .foot-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 900px) {
  .foot-cols { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 26px 22px; }
}
@media (max-width: 480px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 18px; }
  .foot-cols .foot-link { font-size: 13.5px; }
}
/* the nav side now carries three columns, so it needs the room */
.foot-top { grid-template-columns: minmax(0, .92fr) minmax(0, 1.35fr); gap: 48px; }
@media (max-width: 1000px) { .foot-top { grid-template-columns: 1fr; gap: 34px; } }
/* every footer link is a real target: >=24px everywhere, >=44px on touch */
.foot-cols .foot-link {
  min-height: 26px; display: inline-flex; align-items: center;
}
.foot-col { gap: 4px; }
@media (hover: none), (max-width: 900px) {
  /* the tap target was doing double duty as vertical rhythm: at 44px per link
     a four-item column read as huge gaps between short labels. 36px still
     clears the WCAG 2.2 minimum comfortably and closes the column right up. */
  .foot-cols .foot-link { min-height: 36px; }
  .foot-col { gap: 0; }
  /* matched to the Figma mobile footer: two columns, tighter column gutter,
     more air between the blocks, and the group headings up two points */
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 18px; }
  .foot-col-h { font-size: 12.5px; }
}

/* ============================================================
   RESPONSIVE AUDIT FIXES — 24 Aug 2026
   ============================================================ */

/* 1. The hero label's TEXT was overflowing its own box by up to 72px
   with overflow:visible, so the phrase ran under the pink button when
   the cycled topic was long ("freelance pricing"). The box was inside
   the field, which is why a button-position check missed it.
   The word now reserves the width of the longest term it cycles
   through, and the label is never compressed below its content. */
.starter-word { display: inline-block; min-width: 8.4em; }
@media (min-width: 1181px) {
  .starter { flex-wrap: wrap; }            /* wrap stays the safety net */
  .starter-label { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 1180px) { .starter-word { min-width: 0; } }

/* 2. Discover search was a 21px-tall input with 1px padding — not a
   usable target on any device. */
#flockSearch {
  min-height: 46px; padding: 12px 14px; line-height: 1.3;
}
@media (hover: none), (max-width: 900px) { #flockSearch { min-height: 48px; } }

/* 3. RSVP was 64x33, under the 40px touch minimum. */
#evRsvp { min-height: 36px; }
@media (hover: none), (max-width: 900px) {
  #evRsvp { min-height: 44px; padding-left: 20px; padding-right: 20px; }
}

/* 4. Micro-labels sat at 10.5-11px. That is defensible on a desktop
   pointer but too small on a handset, so they get a floor there.
   Desktop sizing is untouched. */
@media (max-width: 620px) {
  .eyebrow, .tile-meta, .foot-col-h, .p-label, .side-label,
  .g-cap, .st-when, .vs-col-name, .fp-author, .fp-time,
  .rm-who, .ar-sub, .ar-booked span, .intg .on, .ar-note {
    font-size: 12px !important; letter-spacing: .04em;
  }
  .ops-k, th { font-size: 11.5px !important; }
}
/* In stacked mode nothing sits beside the phrase, so a two-word topic
   ("freelance pricing") may break across lines rather than overflow. */
@media (max-width: 1180px) {
  .starter-word { white-space: normal; }
  .starter-label { overflow-wrap: break-word; }
}
/* the rule-chip label was the smallest text on the page at 9.5px —
   brought up to the 10.5px floor the rest of the system uses */
.rc-step i { font-size: 10.5px; }
.ar-sub { font-size: 11px; }
/* The thread reserves 214px so the panel never changes height. Before
   the conversation starts that space would read as a void, so it holds
   a resting line instead — a screenshot at any frame stays intentional. */
.ar-idle {
  /* absolute so it occupies none of the reserved height — the panel
     measures the same whether the conversation has started or not */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  margin: 0; text-align: center; width: max-content; max-width: 24ch;
  font-size: 12px; line-height: 1.5; color: var(--ink-50);
  transition: opacity .3s var(--ease-out); pointer-events: none;
}
.ar-thread { position: relative; align-content: start; }
@media (prefers-reduced-motion: reduce) { .ar-idle { display: none; } }

/* ============================================================
   HERO COMPOSER — final geometry.
   The single-line pill never actually fitted the hero side column:
   the phrase plus the action needs ~630px and the column is 511px.
   The original only looked right because it overflowed the field.
   So it is a deliberate card at every size — label, then the action
   across the full width — which is stable, readable and never wraps
   into a half-empty pill.
   ============================================================ */
.hero-claim-side .starter {
  flex-direction: column; align-items: stretch;
  flex-wrap: nowrap; gap: 12px;
  border-radius: 22px; padding: 18px;
  width: 100%; max-width: 100%;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.14);
}
.hero-claim-side .starter-label {
  white-space: normal; text-align: left;
  flex: 0 0 auto; min-width: 0; font-size: 16.5px; line-height: 1.4;
  /* holds two lines so a longer topic never changes the card height */
  min-height: 2.8em; display: flex; align-items: center; flex-wrap: wrap;
}
.hero-claim-side .starter-word { min-width: 0; white-space: nowrap; }
.hero-claim-side .starter .btn {
  width: 100%; justify-content: center; flex: 0 0 auto;
  min-height: 48px; font-size: 15.5px;
}
/* the earlier viewport overrides are no longer needed here */
@media (min-width: 1181px) {
  .hero-claim-side .starter { flex-wrap: nowrap; border-radius: 22px; padding: 18px; }
  .hero-claim-side .starter-label { white-space: normal; flex: 0 0 auto; }
}
@media (max-width: 1180px) and (min-width: 861px) {
  .hero-claim-side .starter { border-radius: 22px; padding: 18px; }
}
@media (max-width: 560px) {
  .hero-claim-side .starter { padding: 16px; border-radius: 18px; }
  .hero-claim-side .starter-label { font-size: 15.5px; min-height: 2.8em; }
}

/* ===== Hero concepts B and C, for the on-page picker ===== */
/* ============================================================
   HERO B — editorial, people-first. No product chrome at all.
   ============================================================ */
.hb {
  position: relative; background: var(--paper); color: var(--ink);
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 78px);
  overflow: hidden;
}
.hb-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.hb-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50);
}
.hb-eyebrow i { width: 26px; height: 1px; background: var(--line-2); display: block; }
.hb h1 {
  font-size: clamp(38px, 7.4vw, 92px); line-height: .98; letter-spacing: -.048em;
  font-weight: 900; margin: 0; max-width: 15ch; text-wrap: balance;
}
.hb h1 .u { position: relative; white-space: nowrap; }
.hb h1 .u svg {
  position: absolute; left: 0; right: 0; bottom: -.06em; width: 100%; height: .19em;
  overflow: visible;
}
.hb h1 .u svg path {
  stroke: var(--pink); stroke-width: 7; fill: none; stroke-linecap: round;
  stroke-dasharray: 260; stroke-dashoffset: 260;
}
.hb.is-live h1 .u svg path { animation: hbDraw .8s cubic-bezier(.4,0,.2,1) .55s forwards; }
@keyframes hbDraw { to { stroke-dashoffset: 0; } }

.hb-sub {
  margin: 26px 0 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6;
  color: var(--ink-65); max-width: 46ch;
}

/* the gathering: portraits arrive one at a time, then a line forms */
.hb-people { margin: clamp(36px, 5vw, 58px) 0 0; }
.hb-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 14px; }
.hb-face {
  width: clamp(52px, 6.2vw, 74px); height: clamp(52px, 6.2vw, 74px);
  border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid var(--paper); margin-right: -14px;
  box-shadow: 0 6px 20px rgba(17,16,20,.14);
  opacity: 0; transform: translateY(10px) scale(.9);
}
.hb.is-live .hb-face { animation: hbIn .5s cubic-bezier(.2,.8,.3,1) forwards; }
.hb.is-live .hb-face:nth-child(1) { animation-delay: .10s }
.hb.is-live .hb-face:nth-child(2) { animation-delay: .20s }
.hb.is-live .hb-face:nth-child(3) { animation-delay: .30s }
.hb.is-live .hb-face:nth-child(4) { animation-delay: .40s }
.hb.is-live .hb-face:nth-child(5) { animation-delay: .50s }
.hb.is-live .hb-face:nth-child(6) { animation-delay: .60s }
@keyframes hbIn { to { opacity: 1; transform: none; } }
.hb-count {
  margin-left: 30px; font-size: 14px; color: var(--ink-65); font-weight: 500;
  opacity: 0; transition: opacity .4s ease .75s;
}
.hb.is-live .hb-count { opacity: 1; }
.hb-count b { color: var(--ink); font-weight: 700; }

/* one quiet conversation cue — not a product panel */
.hb-cue {
  margin-top: 30px; padding-left: 20px; border-left: 2px solid var(--pink);
  max-width: 54ch; opacity: 0; transform: translateY(8px);
}
.hb.is-live .hb-cue { animation: hbIn .55s cubic-bezier(.2,.8,.3,1) .95s forwards; }
.hb-cue p { margin: 0; font-size: clamp(16px,1.6vw,19.5px); line-height: 1.5; letter-spacing: -.01em; }
.hb-cue .who { display: block; margin-top: 9px; font-size: 13px; color: var(--ink-50); font-weight: 500; }

.hb-acts {
  margin-top: clamp(30px, 4vw, 44px); display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap;
  opacity: 0;
}
.hb.is-live .hb-acts { animation: hbIn .5s ease 1.25s forwards; }
.hb-quiet {
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--line-2); padding-bottom: 2px; transition: border-color .18s ease;
}
.hb-quiet:hover, .hb-quiet:focus-visible { border-color: var(--pink); }

/* the interest signal, set as a quiet editorial rule */
.hb-signal {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-50);
}
.hb-chip {
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--bone); border-radius: 999px; padding: 6px 14px;
}
.hb-chip.is-on { background: var(--pink); color: #fff; }

@media (max-width: 620px) {
  .hb-face { margin-right: -12px; }
  .hb-count { margin-left: 24px; width: 100%; margin-top: 4px; }
}

/* ============================================================
   HERO C — product + community, cropped to the minimum
   ============================================================ */
.hc {
  position: relative; background: var(--bone); color: var(--ink);
  padding: clamp(52px, 7vw, 92px) 0 clamp(52px, 7vw, 88px); overflow: hidden;
}
.hc-grid {
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.hc h1 {
  font-size: clamp(34px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -.045em;
  font-weight: 900; margin: 0 0 20px; text-wrap: balance;
}
.hc h1 em { font-style: normal; color: var(--pink); }
.hc-sub { font-size: clamp(15.5px,1.4vw,18px); line-height: 1.6; color: var(--ink-65); margin: 0 0 26px; max-width: 42ch; }

/* the composer — same geometric contract as Hero A, no overflow possible */
.hc-composer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 10px 10px 10px 20px;
  box-shadow: var(--sh-3); max-width: 100%;
}
.hc-composer .lbl { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.hc-composer .lbl b { color: var(--pink); font-weight: 700; white-space: nowrap; }
.hc-composer .btn { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 900px) { .hc-composer { border-radius: 999px; padding-left: 24px; } }
@media (max-width: 560px) {
  .hc-composer { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 16px; }
  .hc-composer .btn { width: 100%; justify-content: center; }
}

/* the cropped product surface — one thread, one reply. Nothing else. */
.hc-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(17,16,20,.22);
  overflow: hidden; position: relative;
}
.hc-panel-top {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: #FCFBFA;
}
.hc-panel-top b { font-size: 13.5px; letter-spacing: -.01em; }
.hc-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--mint);
}
.hc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: block; }
.hc-body { padding: 16px; display: grid; gap: 14px; }
.hc-msg { display: flex; gap: 11px; opacity: 0; transform: translateY(8px); }
.hc.is-live .hc-msg { animation: hbIn .5s cubic-bezier(.2,.8,.3,1) forwards; }
.hc.is-live .hc-msg:nth-of-type(1) { animation-delay: .35s; }
.hc.is-live .hc-msg:nth-of-type(2) { animation-delay: 1.5s; }
.hc-msg img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.hc-msg .body { min-width: 0; flex: 1; }
.hc-msg .who { font-size: 13px; font-weight: 700; }
.hc-msg .when { font-size: 12px; color: var(--ink-50); margin-left: 5px; font-weight: 500; }
.hc-msg p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; }
.hc-msg .authorbadge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; background: var(--ink); color: #fff;
  border-radius: 4px; padding: 2px 5px; margin-right: 6px; vertical-align: 1px;
}
.hc-joins {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-top: 1px solid var(--line); background: #FCFBFA;
  opacity: 0;
}
.hc.is-live .hc-joins { animation: hbIn .5s ease 2.5s forwards; }
.hc-joins .st { display: flex; }
.hc-joins .st img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-right: -8px;
}
.hc-joins span { font-size: 12.5px; color: var(--ink-65); margin-left: 14px; font-weight: 500; }
@media (max-width: 900px) {
  .hc-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hb .hb-face, .hb .hb-cue, .hb .hb-acts, .hb .hb-count,
  .hc .hc-msg, .hc .hc-joins { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hb h1 .u svg path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* anchors must clear the sticky comparison bar */
.cx-head { scroll-margin-top: 66px; }

/* Hero C: the typed word changes length, so the field reserves the
   width of the longest term. Geometry stays defined at every frame
   of the animation instead of reflowing mid-type. */
.hc-composer .lbl b {
  display: inline-block; min-width: 9.4em;
}
@media (min-width: 1100px) {
  .hc-composer { flex-wrap: nowrap; }
  .hc-composer .lbl { white-space: nowrap; }
}
@media (max-width: 1099px) and (min-width: 561px) {
  .hc-composer .lbl b { min-width: 0; }
}
@media (max-width: 560px) { .hc-composer .lbl b { min-width: 0; } }


/* ============================================================
   ON-PAGE HERO PICKER — review tool, left edge, collapsible.
   Sits above the hero, never over the content it is showing.
   ============================================================ */
.hero-panel[hidden] { display: none; }
.hero-panel { animation: hpIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes hpIn { from { opacity: 0; } to { opacity: 1; } }

.hp {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 120; display: flex; align-items: stretch;
  font-family: inherit;
}
.hp-tab {
  width: 26px; border: 0; cursor: pointer; padding: 0;
  background: var(--ink); color: #fff;
  border-radius: 0 10px 10px 0;
  display: grid; place-items: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
}
.hp-tab-i { width: 4px; height: 4px; border-radius: 50%; background: #fff; display: block;
  box-shadow: 0 -7px 0 #fff, 0 7px 0 var(--pink); }
.hp-tab:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.hp-body {
  background: var(--ink); color: #fff;
  border-radius: 0 14px 14px 0;
  padding: 16px 16px 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1);
  transform-origin: left center;
}
.hp.is-shut .hp-body { display: none; }
.hp.is-shut .hp-tab { border-radius: 0 10px 10px 0; }
.hp-h {
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.hp-opts { display: flex; flex-direction: column; gap: 6px; }
.hp-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px; padding: 8px 12px 8px 8px; color: #fff;
  font-size: 12.5px; font-weight: 600; text-align: left; min-height: 38px;
  transition: background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.hp-opt:hover { background: rgba(255,255,255,.12); }
.hp-opt:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.hp-opt b {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.14);
}
.hp-opt.is-on { background: var(--pink); border-color: var(--pink); }
.hp-opt.is-on b { background: rgba(255,255,255,.26); }

/* Below desktop the rail would sit on top of the hero it is meant to
   show, so it becomes a small corner control that is shut by default
   and opens over a backdrop. */
@media (max-width: 1200px) {
  .hp { top: auto; bottom: 16px; left: auto; right: 16px; transform: none; flex-direction: row-reverse; }
  .hp-tab {
    width: 46px; height: 46px; border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,.34);
  }
  .hp-body {
    border-radius: 14px; padding: 14px; margin-right: 10px;
    align-self: flex-end;
  }
  .hp-opt span { display: inline; }
}
@media (max-width: 560px) {
  .hp { bottom: 12px; right: 12px; }
  .hp-body { padding: 12px; }
  .hp-opt { font-size: 12px; padding: 8px 10px 8px 8px; }
}
@media (prefers-reduced-motion: reduce) { .hero-panel { animation: none; } }

/* ============================================================
   Heroes B and C sit on light grounds, so the nav cannot keep the
   over-dark-footage treatment or the wordmark disappears.
   ============================================================ */
html.hero-light .nav-over { color: var(--ink); }
html.hero-light .nav-over .nav-inner { border-bottom-color: var(--line); }
html.hero-light .nav-over .nav-right a:not(.btn) { color: var(--ink); }
html.hero-light .nav-mark-light { display: none; }
html.hero-light .nav-mark-dark  { display: block; }
html.hero-light .nav-over .jtoggle { background: var(--bone); border-color: var(--line); }
html.hero-light .nav-over .jtoggle a { color: var(--ink-65); }
html.hero-light .nav-over .jtoggle a.is-on { background: var(--ink); color: #fff; }
html.hero-light .nav.nav-over a:focus-visible,
html.hero-light .nav.nav-over button:focus-visible { outline-color: var(--pink); }
html.hero-light .nav-burger span { background: var(--ink); }
/* B and C are not pulled up under the nav the way the footage hero is */
.hero-panel[data-hero="b"] .hb,
.hero-panel[data-hero="c"] .hc { padding-top: calc(var(--nav-h) + 40px); }

/* the two connector rules are gone — the sequence reads from the
   numbers and the gathering from the portraits themselves */
.gather-rule { display: none !important; }
.stage::before { display: none !important; }

/* ============================================================
   HERO B — editorial. Two columns: the words on the left, a
   composed set of rooms on the right. Copy is the approved hero
   copy, unchanged; only the composition differs from A.
   ============================================================ */
.hb-grid {
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: clamp(30px, 4.5vw, 68px); align-items: center;
}
.hb-say { min-width: 0; }
.hb h1 { max-width: 13ch; }
.hb-sub { margin: 22px 0 0; max-width: 44ch; }
.hb-row { margin: clamp(26px,3.4vw,38px) 0 0; display: flex; align-items: center; flex-wrap: wrap; }
.hb-acts { margin-top: clamp(24px,3vw,34px); }

/* the art panel — four rooms, offset, never a grid of equal boxes */
.hb-art {
  position: relative; min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, minmax(0, 1fr));
  aspect-ratio: 1 / 1.02;
}
.hb-ph {
  margin: 0; overflow: hidden; border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -22px rgba(17,16,20,.42), 0 2px 6px rgba(17,16,20,.06);
  background: var(--bone);
  opacity: 0; transform: translateY(14px) scale(.985);
}
.hb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-ph-1 { grid-column: 1 / 8;  grid-row: 1 / 7;  }
.hb-ph-2 { grid-column: 8 / 13; grid-row: 2 / 8;  }
.hb-ph-3 { grid-column: 1 / 6;  grid-row: 7 / 13; }
.hb-ph-4 { grid-column: 6 / 13; grid-row: 8 / 13; }
.hb.is-live .hb-ph { animation: hbIn .62s cubic-bezier(.2,.8,.3,1) forwards; }
.hb.is-live .hb-ph-1 { animation-delay: .10s }
.hb.is-live .hb-ph-2 { animation-delay: .22s }
.hb.is-live .hb-ph-3 { animation-delay: .34s }
.hb.is-live .hb-ph-4 { animation-delay: .46s }

/* a slow drift so the panel breathes without asking for attention */
@media (prefers-reduced-motion: no-preference) {
  .hb.is-live .hb-ph-1 { animation: hbIn .62s cubic-bezier(.2,.8,.3,1) .10s forwards, hbFloat 13s ease-in-out 1.4s infinite; }
  .hb.is-live .hb-ph-2 { animation: hbIn .62s cubic-bezier(.2,.8,.3,1) .22s forwards, hbFloat 15s ease-in-out 2.1s infinite reverse; }
  .hb.is-live .hb-ph-3 { animation: hbIn .62s cubic-bezier(.2,.8,.3,1) .34s forwards, hbFloat 16s ease-in-out 1.0s infinite reverse; }
  .hb.is-live .hb-ph-4 { animation: hbIn .62s cubic-bezier(.2,.8,.3,1) .46s forwards, hbFloat 14s ease-in-out 2.6s infinite; }
}
@keyframes hbFloat {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -7px; }
}

@media (max-width: 900px) {
  .hb-grid { grid-template-columns: minmax(0,1fr); gap: 34px; }
  .hb-art { aspect-ratio: 1 / .72; order: 2; }
  .hb-say { order: 1; }
  .hb h1 { max-width: none; }
}
@media (max-width: 560px) {
  .hb-art { aspect-ratio: 1 / .86; }
  .hb-ph { border-radius: var(--r-md); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-ph { opacity: 1 !important; transform: none !important; animation: none !important; translate: none !important; }
}

/* ============================================================
   ROADMAP — static. No sequence, no reserved animation space,
   no ghosted intermediate states. Everything reads at full
   strength the moment the section is on screen.
   ============================================================ */
.rm .rm-q,
.rm .rm-topic,
.rm .rm-card,
.rm .rm-similar {
  opacity: 1 !important; transform: none !important;
  transition: none !important; animation: none !important;
}
.rm .rm-bar i { width: var(--p) !important; transition: none !important; }

/* the murmur is a deliberate quiet layer, not a faded-out state */
.rm-murmur { min-height: 0; margin-bottom: 26px; }
.rm-murmur .rm-q { color: var(--ink-50); border-color: var(--line); background: var(--paper); }

/* pricing stays dominant; the other two are context */
.rm .rm-topic:not(.is-lead) { opacity: .78 !important; }
.rm .rm-topic.is-lead { border-color: var(--pink); box-shadow: 0 18px 44px -20px rgba(228,93,160,.45); }
.rm .rm-topic.is-lead .rm-bar i { background: var(--pink); }

/* the reserved height was only there for the sequence */
.rm-ask { min-height: 0; margin-top: 26px; }

/* ============================================================
   HERO A — below desktop the two-column claim is too cramped, so it
   becomes a single column with real vertical rhythm, and the
   gathering recomposes rather than shrinking.
   ============================================================ */
@media (max-width: 1180px) {
  .hero-claim {
    grid-template-columns: minmax(0,1fr);
    gap: 26px; align-items: start;
  }
  .hero-claim-side { padding-bottom: 0; }
  .hero-claim .d1 { max-width: 16ch; }
  .hero { padding-top: calc(96px + var(--nav-h)); min-height: 0; }
  .hero-sub { max-width: 54ch; margin-bottom: 20px; }
}
@media (max-width: 860px) {
  .hero { padding-top: calc(74px + var(--nav-h)); }
  .hero-claim { gap: 22px; }
  .hero-claim .d1 { max-width: none; }
}
@media (max-width: 620px) {
  .hero { padding-top: calc(56px + var(--nav-h)); }
  .hero-claim .d1 { font-size: clamp(34px, 11vw, 52px); line-height: 1.02; }
  .hero-sub { font-size: 15.5px; margin-bottom: 18px; }
}

/* the gathering recomposes below desktop instead of squeezing: the
   distant strangers drop away, the named people stay, and the
   conversation moves underneath them at full width */
@media (max-width: 1180px) {
  .gather-band { padding: 30px 0 34px; }
  .gather { flex-wrap: wrap; row-gap: 20px; min-height: 0; align-items: flex-start; }
  .g-talk { flex: 1 1 100%; max-width: none; margin-top: 4px; }
  .g-far { margin-right: 34px; }
  .g-mid { margin-right: 26px; }
}
@media (max-width: 860px) {
  .gather-band { padding: 24px 0 30px; }
  .g-far { display: none; }              /* the strangers read as noise at this size */
  .g-mid { margin-right: 20px; }
  .g-near { margin-right: 14px; }
  .g-near + .g-near { margin-right: 20px; }
  .g img { width: 60px !important; height: 60px !important; }
  .g-mid img { width: 54px !important; height: 54px !important; }
}
@media (max-width: 620px) {
  .gather { row-gap: 16px; justify-content: flex-start; }
  .g img { width: 52px !important; height: 52px !important; }
  .g-mid img { width: 46px !important; height: 46px !important; }
  .g-cap { font-size: 11px; }
  .gather-thread { border-radius: 14px; }
}
@media (max-width: 430px) {
  /* two names is enough to read as "people are here" */
  .g-mid:nth-of-type(5) { display: none; }
  .g img { width: 48px !important; height: 48px !important; }
}

/* Hero B and C need the same breathing room below desktop */
@media (max-width: 1180px) {
  .hero-panel[data-hero="b"] .hb,
  .hero-panel[data-hero="c"] .hc { padding-top: calc(var(--nav-h) + 30px); }
  .hb { padding-bottom: 46px; }
  .hc { padding-bottom: 48px; }
}
@media (max-width: 900px) {
  .hb-art { gap: 0; }
  .hb-ph { border-radius: var(--r-md); }
  .hb-row { margin-top: 24px; }
  .hb-acts { margin-top: 24px; }
}
@media (max-width: 620px) {
  .hero-panel[data-hero="b"] .hb,
  .hero-panel[data-hero="c"] .hc { padding-top: calc(var(--nav-h) + 18px); }
  .hb h1, .hc h1 { font-size: clamp(32px, 10.5vw, 46px); line-height: 1.03; }
  .hb-sub, .hc-sub { font-size: 15.5px; }
}

/* Hero C composer: the same contract as Hero A. If the phrase and the
   action cannot share a line, it becomes a card with the action across
   the full width — never a wide pill with the button stranded in it. */
@media (max-width: 1180px) and (min-width: 561px) {
  .hc-composer {
    flex-direction: column; align-items: stretch;
    border-radius: 20px; padding: 16px; gap: 12px;
  }
  .hc-composer .lbl { white-space: normal; }
  .hc-composer .lbl b { min-width: 0; }
  .hc-composer .btn { width: 100%; justify-content: center; min-height: 46px; }
}
/* between 900 and 1180 the grid is single column, so the line fits again */
@media (max-width: 1180px) and (min-width: 901px) {
  .hc-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
}

/* Hero B photos read as separate rooms, not one collaged block */
.hb-art { gap: 10px; }
@media (max-width: 900px) { .hb-art { gap: 8px; } }

/* Hero C composer is a card at every size, exactly like Hero A.
   The phrase plus the action needs more width than either hero column
   ever offers, so one line was never achievable — a card is the honest
   composition rather than a pill with the button stranded inside it. */
.hero-panel[data-hero="c"] .hc-composer {
  flex-direction: column !important; align-items: stretch !important;
  flex-wrap: nowrap !important;
  border-radius: 20px !important; padding: 18px !important; gap: 12px !important;
  max-width: 480px;
}
.hero-panel[data-hero="c"] .hc-composer .lbl {
  white-space: normal !important; flex: 0 0 auto; min-width: 0;
  line-height: 1.4; min-height: 2.8em; display: flex; align-items: center; flex-wrap: wrap;
}
.hero-panel[data-hero="c"] .hc-composer .lbl b { min-width: 0 !important; white-space: nowrap; }
.hero-panel[data-hero="c"] .hc-composer .btn {
  width: 100% !important; justify-content: center; min-height: 48px; flex: 0 0 auto;
}
@media (max-width: 900px) { .hero-panel[data-hero="c"] .hc-composer { max-width: none; } }

/* ============================================================
   MOBILE FIXES — sections that were shrinking instead of
   recomposing. 24 Aug 2026.
   ============================================================ */

/* 1 · story card avatar was stretching to the flex row height and
   rendering as a tall sliver */
.r-by .av, .r-by img.av-ring {
  flex: 0 0 30px; width: 30px; height: 30px;
  object-fit: cover; align-self: center;
}
.r-by { flex-wrap: wrap; row-gap: 6px; align-items: center; }

/* 2 · the orders table collided at mobile. It becomes stacked rows,
   each order readable on its own. */
@media (max-width: 620px) {
  .p-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p-table, .p-table tbody, .p-table tr, .p-table td { display: block; width: 100%; }
  .p-table tr {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 10px 12px; margin-bottom: 8px;
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; align-items: center;
  }
  .p-table td { border: 0; padding: 0; font-size: 13px; }
  .p-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; }
  .p-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink-65); font-size: 12.5px; }
  .p-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .p-table td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .p-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; font-size: 11.5px; text-align: left; }
  .p-table .who { display: flex; align-items: center; gap: 8px; }
  .p-table .who img { flex: 0 0 22px; width: 22px; height: 22px; }
}

/* 3 · the feed rack kept three panels side by side and squeezed each
   post to ~100px. On mobile it stacks: every room is full width and
   the open one shows its post properly. */
@media (max-width: 900px) {
  .rack,
  .rack:has(.rk:nth-child(1).is-open),
  .rack:has(.rk:nth-child(2).is-open),
  .rack:has(.rk:nth-child(3).is-open) {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px; transition: none;
  }
  .rk { min-width: 0; }
  .rk-spine {
    writing-mode: horizontal-tb !important;
    width: 100% !important; height: auto !important;
    min-height: 52px; padding: 12px 16px !important;
    flex-direction: row !important; align-items: center; gap: 10px;
    text-orientation: initial !important; transform: none !important;
  }
  /* the product panel is a visual, not body copy: let it run to both edges of
     the phone while the surrounding text stays on the content grid */
  .rk-mat { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 0 10px; }
  .rk-mat > * { border-radius: 0; border-left: 0; border-right: 0; }
  .post.post-lg { width: auto; min-width: 0; }
  .post-title { font-size: 16px; }
  .player.player-lg { width: 100%; }
}

/* 4 · on mobile the anonymous scroll ran to 371px of grey before the
   real room appeared, so the section read as empty. Three rows is
   enough to make the point. */
@media (max-width: 900px) {
  .rs-noise { padding-bottom: 0; }
  .ns:nth-child(n+4) { display: none; }
  .ns { margin-bottom: 10px; }
  .resolve { gap: 18px; }
}

/* ============================================================
   FEED RACK on mobile — a real accordion. The closed panels were
   holding their full height with opacity:0 content, which rendered
   as tall empty boxes. Closed now means collapsed to its header.
   ============================================================ */
@media (max-width: 900px) {
  .rk { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bone); }
  .rk .rk-open { display: none; }
  .rk.is-open .rk-open {
    display: block; opacity: 1; transform: none;
    transition: none; padding: 10px;
  }
  .rk-spine {
    background: transparent; border: 0; border-radius: 0;
    display: flex; justify-content: flex-start; gap: 12px;
    min-height: 56px; width: 100%; text-align: left;
  }
  .rk-spine .rk-name { flex: 1; text-align: left; }
  .rk-spine .rk-thumb { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
  .rk.is-open .rk-spine { border-bottom: 1px solid var(--line); background: var(--paper); }
  .rk-mat { padding: 0; }
  .rk-mat > * { box-shadow: none; }
}
/* the 460px floor and the hidden spine are desktop-only devices */
@media (max-width: 900px) {
  .rk:not(.is-open) { min-height: 0 !important; }
  .rk.is-open .rk-spine { opacity: 1 !important; pointer-events: auto !important; }
  .rk:not(.is-open) .rk-open { position: static !important; visibility: hidden; }
  .rk { position: relative; }
}

/* ============================================================
   ROADMAP · Duie's direction — restored from the reviewed
   iteration. The FE bugs it had (absolute positioning stacking it
   over other states) are gone: it is a normal flow row, static.
   ============================================================ */
.rm-out {
  margin-top: 22px; max-width: 620px; width: 100%;
  padding: 24px 26px; border-radius: var(--r-lg);
  background: var(--ink); color: var(--cream);
  justify-self: center;
}
.rm-out-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(244,242,238,.7); }
.rm-out-head b { color: #fff; }
.rm-out-head .bird { width: 34px; height: 34px; flex: none; }
/* the mark is drawn near-black inline; on this dark panel it disappeared, so
   invert it here - cream bird, dark eye - rather than ship a second asset */
.rm-out-head .bird [fill="#111014"] { fill: var(--bone); }
.rm-out-head .bird [fill="#fff"] { fill: #111014; }
.rm-out-line { margin: 12px 0 0; font-size: clamp(16px,1.6vw,19px); line-height: 1.4; font-weight: 500; color: #fff; letter-spacing: -.015em; }
.rm-basis { display: block; margin-top: 12px; font-size: 12px; color: rgba(244,242,238,.5); }
.rm-acts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.rm-out .dt-act { background: rgba(244,242,238,.1); border: 1px solid rgba(244,242,238,.2); color: #fff; }
.rm-out .dt-act.is-primary { background: var(--pink); border-color: var(--pink); }
@media (max-width: 620px) {
  .rm-out { padding: 20px; }
  .rm-acts .dt-act { font-size: 12.5px; }
}

/* ============================================================
   ROADMAP · Duie's direction — restored from the reviewed
   iteration. The FE bugs it had (absolute positioning stacking it
   over other states) are gone: it is a normal flow row, static.
   ============================================================ */
.rm-out {
  margin-top: 22px; max-width: 620px; width: 100%;
  padding: 24px 26px; border-radius: var(--r-lg);
  background: var(--ink); color: var(--cream);
  justify-self: center;
}
.rm-out-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(244,242,238,.7); }
.rm-out-head b { color: #fff; }
.rm-out-head .bird { width: 34px; height: 34px; flex: none; }
/* the mark is drawn near-black inline; on this dark panel it disappeared, so
   invert it here - cream bird, dark eye - rather than ship a second asset */
.rm-out-head .bird [fill="#111014"] { fill: var(--bone); }
.rm-out-head .bird [fill="#fff"] { fill: #111014; }
.rm-out-line { margin: 12px 0 0; font-size: clamp(16px,1.6vw,19px); line-height: 1.4; font-weight: 500; color: #fff; letter-spacing: -.015em; }
.rm-basis { display: block; margin-top: 12px; font-size: 12px; color: rgba(244,242,238,.5); }
.rm-acts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.rm-out .dt-act { background: rgba(244,242,238,.1); border: 1px solid rgba(244,242,238,.2); color: #fff; }
.rm-out .dt-act.is-primary { background: var(--pink); border-color: var(--pink); }
@media (max-width: 620px) {
  .rm-out { padding: 20px; }
  .rm-acts .dt-act { font-size: 12.5px; }
}

/* ============================================================
   10c · AUTOMATION — the rep is the hero, the rule supports.
   ============================================================ */
.auto-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 26px; align-items: start;
}
.auto-side { display: flex; flex-direction: column; gap: 22px; }
.sig-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px;
}
.sig-card .av { width: 40px; height: 40px; }
.sig-card b { font-size: 14px; }
.auto-after {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px;
  opacity: .45; transition: opacity .45s var(--ease-out);
}
.auto-after .tl-dot { margin-top: 4px; }

/* the DM panel scales up as the section's stage */
.auto-stage .ar { border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.auto-stage .ar-thread { min-height: 236px; padding: 14px; gap: 9px; }
.auto-stage .ar-msg p { font-size: 13.5px; padding: 10px 13px; }
.auto-stage .ar-head { padding: 12px 14px; }
.auto-stage .ar-booked { margin: 0 14px 14px; }

/* signal highlight while the rule evaluates */

@media (max-width: 1100px) {
  .auto-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .auto-side { flex-direction: row; flex-wrap: wrap; }
  .auto-side .side-block { flex: 1 1 240px; }
}
@media (max-width: 900px) {
  .eco-field { height: auto; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 8px 0 4px; }
  .eco-core { position: static; transform: none; order: -1; flex: 0 0 100%; height: 60px; width: auto;
    background: transparent; border: 0; box-shadow: none; }
  .eco-line { display: none; }
  .eco-node { position: static; transform: none; }
}
@media (max-width: 620px) {
  .auto-side { flex-direction: column; }
  .auto-stage .ar-thread { min-height: 0; }
}

/* ============================================================
   10c · AUTOMATION — one conversation, at scale.
   80% DM, 20% supporting context. The rule is one quiet line.
   ============================================================ */
.rep-context {
  max-width: 680px; margin: 0 auto 18px;
  font-size: 14px; line-height: 1.55; color: var(--ink-65);
  text-align: center;
}
.rep-rule {
  display: inline-block; margin-left: 10px; padding: 3px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-50);
  background: var(--paper); white-space: nowrap;
}

.rep {
  max-width: 680px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px -28px rgba(17,16,20,.25), var(--sh-2);
  overflow: hidden; position: relative;
}
.rep-head {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: #FCFBFA;
}
.rep-head .av { width: 40px; height: 40px; }
.rep-head b { font-size: 15.5px; letter-spacing: -.015em; }
.rep-sub { font-size: 12px; color: var(--ink-50); }
.rep-state {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-65);
  padding: 7px 14px 7px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper);
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.rep-state svg { width: 22px; height: 22px; }
.rep-state i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); display: block;
  transition: background .4s var(--ease-out);
}
.js-motion #automation[data-rep="1"] .rep-state,
.js-motion #automation[data-rep="2"] .rep-state,
.js-motion #automation[data-rep="3"] .rep-state,
.js-motion #automation[data-rep="4"] .rep-state,
.js-motion #automation[data-rep="5"] .rep-state { border-color: rgba(22,185,140,.4); color: var(--ink); }
.js-motion #automation[data-rep="1"] .rep-state i,
.js-motion #automation[data-rep="2"] .rep-state i,
.js-motion #automation[data-rep="3"] .rep-state i,
.js-motion #automation[data-rep="4"] .rep-state i,
.js-motion #automation[data-rep="5"] .rep-state i,
.js-motion #automation[data-rep="6"] .rep-state i { background: var(--mint); }
#automation[data-rep="0"] .rep-state i { background: var(--mint); }

/* the thread reserves its finished height — nothing below ever jumps */
.rep-thread {
  padding: 22px; display: grid; gap: 12px; align-content: start;
}
.rep-day {
  justify-self: center; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50);
  padding: 2px 0;
}
.rep-msg { max-width: 78%; }
.rep-msg p {
  margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: -.005em;
  padding: 12px 16px; border-radius: 16px;
}
.rep-msg.is-out { justify-self: start; }
.rep-msg.is-out p { background: var(--bone); border-bottom-left-radius: 5px; }
.rep-msg.is-in { justify-self: end; }
.rep-msg.is-in p { background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.rep-msg.is-past { opacity: .55; }

/* staged arrival — geometry reserved, only opacity/lift move */
.rep-day[data-r], .rep-msg[data-r], .rep-card, .rep-done {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js-motion #automation[data-rep="1"] .rep-day[data-r="1"],
.js-motion #automation[data-rep="2"] .rep-day[data-r="1"],
.js-motion #automation[data-rep="3"] .rep-day[data-r="1"],
.js-motion #automation[data-rep="4"] .rep-day[data-r="1"],
.js-motion #automation[data-rep="5"] .rep-day[data-r="1"],
.js-motion #automation[data-rep="6"] .rep-day[data-r="1"] { opacity: 1; transform: none; }
.js-motion #automation[data-rep="2"] .rep-msg[data-r="2"],
.js-motion #automation[data-rep="3"] .rep-msg[data-r="2"],
.js-motion #automation[data-rep="4"] .rep-msg[data-r="2"],
.js-motion #automation[data-rep="5"] .rep-msg[data-r="2"],
.js-motion #automation[data-rep="6"] .rep-msg[data-r="2"] { opacity: 1; transform: none; }
.js-motion #automation[data-rep="3"] .rep-msg[data-r="3"],
.js-motion #automation[data-rep="4"] .rep-msg[data-r="3"],
.js-motion #automation[data-rep="5"] .rep-msg[data-r="3"],
.js-motion #automation[data-rep="6"] .rep-msg[data-r="3"] { opacity: 1; transform: none; }
.js-motion #automation[data-rep="4"] .rep-msg[data-r="4"],
.js-motion #automation[data-rep="5"] .rep-msg[data-r="4"],
.js-motion #automation[data-rep="6"] .rep-msg[data-r="4"] { opacity: 1; transform: none; }
.js-motion #automation[data-rep="5"] .rep-card,
.js-motion #automation[data-rep="6"] .rep-card { opacity: 1; transform: none; }
.js-motion #automation[data-rep="6"] .rep-done { opacity: 1; transform: none; }

/* typing indicators hold their space so the thread never reflows */
.rep-typing {
  display: flex; gap: 4px; padding: 12px 15px; width: fit-content;
  border-radius: 16px; opacity: 0; transition: opacity .25s var(--ease-out);
}
.rep-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-50); animation: repDot 1.1s infinite; }
.rep-typing span:nth-child(2) { animation-delay: .18s; }
.rep-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes repDot { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; transform: translateY(-2px); } }
.rep-typing-out { justify-self: start; background: var(--bone); border-bottom-left-radius: 5px; }
.rep-typing-in  { justify-self: end; background: var(--ink); border-bottom-right-radius: 5px; }
.rep-typing-in span { background: rgba(255,255,255,.7); }
.js-motion #automation[data-rep="1"] .rep-typing-out { opacity: 1; }
.js-motion #automation[data-rep="2"] .rep-typing-in { opacity: 1; }
/* each indicator overlays the slot of the message it precedes, so
   the thread height is identical at every state — no jumps */
.rep-slot { display: grid; }
.rep-slot > * { grid-area: 1 / 1; }
.rep-slot.is-start { justify-items: start; }
.rep-slot.is-end { justify-items: end; }
.rep-slot .rep-msg { justify-self: inherit; }

/* the action grows out of the conversation */
.rep-card {
  justify-self: start; max-width: 78%;
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; background: #FCFBFA;
}
.rep-card b { font-size: 14.5px; }
.rep-card span { font-size: 12.5px; color: var(--ink-65); }
.rep-book {
  flex: none; cursor: pointer;
  background: var(--pink); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 10px 20px; min-height: 40px;
  transition: transform .15s ease, background .2s ease;
}
.rep-book:hover { background: var(--pink-deep); }
.rep-book:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.js-motion #automation[data-rep="6"] .rep-book { background: var(--ink); pointer-events: none; }
.rep-done {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 700; color: #2E9E6E;
  padding: 10px 16px; border: 1px solid rgba(53,179,126,.34);
  background: rgba(53,179,126,.08); border-radius: 999px;
}
.rep-done svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }

/* no JS: the finished conversation, fully readable */
#automation[data-rep="0"] .rep-day[data-r],
#automation[data-rep="0"] .rep-msg[data-r],
#automation[data-rep="0"] .rep-card,
#automation[data-rep="0"] .rep-done { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .rep-thread { padding: 16px; gap: 10px; }
  .rep-msg { max-width: 88%; }
  .rep-msg p { font-size: 14px; padding: 10px 13px; }
  .rep-card { max-width: 100%; flex-wrap: wrap; gap: 10px; }
  .rep-book { width: 100%; min-height: 46px; }
  .rep-context { text-align: left; }
  .rep-rule { margin-left: 0; margin-top: 6px; display: inline-block; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .rep-day[data-r], .rep-msg[data-r], .rep-card, .rep-done {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .rep-typing { display: none !important; }
}

/* ============================================================
   Connected ecosystem — the Roommaster principle in Flock's
   language: one editorial block balancing a designed field of
   tiles with real hierarchy. Not its blue, grid, or logos.
   ============================================================ */
.ecox {
  margin-top: 64px;
  display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.ecox-say h3 { margin: 14px 0 12px; }
.ecox-say p { font-size: 15px; line-height: 1.6; color: var(--ink-65); max-width: 34ch; margin: 0 0 10px; }
.ecox-say .meta { font-size: 12px; }

.ecox-field {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; padding: 26px;
  background: var(--bone); border-radius: var(--r-2xl);
}
.ecox-tile {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px 16px;
  box-shadow: var(--sh-1);
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ecox-tile i {
  font-style: normal; width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
  background: var(--ink); color: #fff;
}
.ecox-tile b { font-size: 13.5px; letter-spacing: -.01em; display: block; }
.ecox-tile small { display: block; font-size: 10.5px; color: var(--ink-50); }
.ecox-tile.is-strong { box-shadow: var(--sh-2); }
.ecox-tile.is-dim { opacity: 0; }
.ecox-tile.is-mcp { grid-column: span 2; }
.ecox-tile.is-mcp i { background: var(--sky); }
.ecox-ghost {
  position: absolute; left: var(--gx); top: var(--gy);
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--paper); opacity: .38; pointer-events: none;
}

/* the field settles in with a stagger once the section is running */
.js-motion #automation:not([data-rep="0"]) .ecox-tile { opacity: 1; transform: none; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile.is-dim { opacity: .55; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(2) { transition-delay: .07s; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(3) { transition-delay: .14s; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(4) { transition-delay: .21s; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(5) { transition-delay: .28s; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(6) { transition-delay: .35s; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(7) { transition-delay: .42s; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile:nth-child(8) { transition-delay: .49s; }
/* Calendar wakes when the seat is reserved; MCP shows its state */
.js-motion #automation[data-rep="6"] .ecox-tile[data-eco="calendar"] {
  border-color: var(--mint); box-shadow: 0 14px 34px -14px rgba(22,185,140,.5);
}
#automation[data-rep="0"] .ecox-tile { opacity: 1; transform: none; }
#automation[data-rep="0"] .ecox-tile.is-dim { opacity: .55; }

@media (max-width: 1000px) {
  .ecox { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .ecox-say p { max-width: 56ch; }
}
@media (max-width: 620px) {
  .ecox-field { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 16px; gap: 10px; }
  .ecox-tile { padding: 12px 13px; }
  .ecox-tile i { width: 30px; height: 30px; }
  .ecox-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ecox-tile { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ecox-tile.is-dim { opacity: .55 !important; }
}

/* real marks in the ecosystem and the CRM rail */
.ecox-tile i { background: var(--paper); border: 1px solid var(--line); }
.ecox-tile i img { width: 20px; height: 20px; display: block; }
.ecox-tile.is-mcp i { background: var(--paper); }
.ecox-t { min-width: 0; }
.intg-mark.intg-logo { background: var(--paper); border: 1px solid var(--line); }
.intg-mark.intg-logo img { width: 16px; height: 16px; display: block; }

/* the ecosystem field sits on ink — the tiles carry the light */
.ecox-field { background: var(--ink); }
.ecox-ghost { background: rgba(255,255,255,.07); opacity: 1; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile.is-dim,
#automation[data-rep="0"] .ecox-tile.is-dim { opacity: .8; }
.ecox-tile.is-dim b { color: var(--ink-65); }
.ecox-tile { border-color: transparent; }

/* Layering fix: decorative ghosts can never sit over the cards.
   Tiles own the upper paint order; ghosts live strictly beneath.
   Receding is done by the card's own opacity alone. */
.ecox-field { position: relative; }
.ecox-tile { position: relative; z-index: 2; }
.ecox-ghost { z-index: 1; }
.ecox-tile.is-dim { opacity: .85; }
.js-motion #automation:not([data-rep="0"]) .ecox-tile.is-dim { opacity: .85; }
.ecox-i svg { width: 19px; height: 19px; stroke: #fff; stroke-width: 1.8; fill: none; }
.ecox-tile i { background: var(--chip, var(--ink)); border: 0; }

/* ============================================================
   THE MERGED STAGE — conversation and ecosystem in one frame.
   Paper pane carries the DM at full scale; ink pane answers with
   the connected field. One product story, ~460px shorter.
   ============================================================ */
.rep-stage {
  display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr);
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 34px 90px -30px rgba(17,16,20,.28), var(--sh-2);
}
.rep-pane { background: var(--paper); min-width: 0; display: flex; flex-direction: column; }
.rep-when {
  margin: 0; padding: 13px 24px;
  border-bottom: 1px solid var(--line); background: #FCFBFA;
  font-size: 12.5px; color: var(--ink-65); letter-spacing: .01em;
}
.rep-when b {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink-deep); margin-right: 6px;
}
/* the DM sheds its card chrome inside the stage and scales up */
.rep.rep-in-stage {
  max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  flex: 1; display: flex; flex-direction: column;
}
.rep-in-stage .rep-head { padding: 18px 24px; }
.rep-in-stage .rep-head .av { width: 44px; height: 44px; }
.rep-in-stage .rep-head b { font-size: 16px; }
.rep-in-stage .rep-thread { padding: 24px; gap: 13px; flex: 1; }
.rep-in-stage .rep-msg p { font-size: 16px; padding: 13px 17px; }
.rep-in-stage .rep-card b { font-size: 15px; }
.rep-in-stage .rep-card span { font-size: 13px; }

.eco-pane {
  background: var(--ink); color: var(--cream);
  padding: 26px; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.eco-say h3 { color: #fff; margin: 0 0 8px; }
.eco-say p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: rgba(244,242,238,.72); }
.eco-say .eco-meta { font-size: 11px; color: rgba(244,242,238,.45); }
/* the field loses its own dark card — the pane is the dark ground */
.eco-pane .ecox-field {
  background: transparent; padding: 0; border-radius: 0;
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
  flex: 1; align-content: start;
}
.eco-pane .ecox-tile { padding: 12px 13px; border-radius: var(--r-md); }
.eco-pane .ecox-tile b { font-size: 12.5px; }
.eco-pane .ecox-tile small { font-size: 10px; }
.eco-pane .ecox-tile i { width: 30px; height: 30px; border-radius: 9px; }
.eco-pane .ecox-tile i svg { width: 16px; height: 16px; }
.eco-pane .ecox-tile.is-mcp { grid-column: span 2; }
.eco-pane .ecox-ghost { display: none; }

@media (max-width: 1100px) {
  .rep-stage { grid-template-columns: minmax(0,1fr); }
  .eco-pane { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .eco-pane .ecox-field { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .eco-pane .ecox-tile.is-mcp { grid-column: span 3; }
}
@media (max-width: 620px) {
  .rep-when { padding: 11px 16px; font-size: 11.5px; }
  .rep-in-stage .rep-thread { padding: 16px; }
  .rep-in-stage .rep-msg p { font-size: 14.5px; }
  .eco-pane { padding: 18px; }
  .eco-pane .ecox-field { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eco-pane .ecox-tile.is-mcp { grid-column: span 2; }
}
/* tiles are paper cards — they must not inherit the pane's cream text */
.eco-pane .ecox-tile { color: var(--ink); }
.eco-pane .ecox-tile small { color: var(--ink-50); }

/* ============================================================
   HERO C — the ceremony. Centered editorial axis over a composed
   field of community artifacts: a conversation becomes people
   becomes a room. Marketer-informed confidence, Flock language.
   ============================================================ */
.hx {
  position: relative; background: var(--paper); color: var(--ink);
  padding-top: calc(var(--nav-h) + clamp(40px, 6vh, 76px));
  overflow: hidden;
}
/* texture at the threshold of perception */
.hx-dots {
  position: absolute; inset: 0 0 38% 0; pointer-events: none;
  background-image: radial-gradient(rgba(17,16,20,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.hx-top {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0;
}
.hx-h {
  margin: 22px 0 0; font-size: clamp(44px, 7.6vw, 96px);
  line-height: .98; letter-spacing: -.048em; font-weight: 900;
  text-wrap: balance;
}
.hx-u { position: relative; white-space: nowrap; }
.hx-u svg { position: absolute; left: 2%; right: 0; bottom: -.1em; width: 96%; height: .17em; overflow: visible; }
.hx-sub {
  margin: 22px 0 0; font-size: clamp(15.5px, 1.5vw, 19px); line-height: 1.6;
  color: var(--ink-65); max-width: 52ch;
}
.hx-acts { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.hx-cta { display: inline-flex; align-items: center; gap: 12px; padding: 9px 26px 9px 9px; font-size: 16px; min-height: 56px; }
.hx-arr {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
}
.hx-arr svg { width: 18px; height: 18px; }
.hx-find {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--line-2);
  padding-bottom: 2px; transition: border-color .18s ease;
}
.hx-find svg { width: 15px; height: 15px; }
.hx-find:hover, .hx-find:focus-visible { border-color: var(--pink); }
.hx-proof {
  margin: 26px 0 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 6px 14px; font-size: 13px; color: var(--ink-50); font-variant-numeric: tabular-nums;
}
.hx-proof b { color: var(--ink); font-weight: 700; }
.hx-proof i { font-style: normal; color: var(--line-2); }

/* ---- the field: a dense window into live communities ----
   Large photo-led cards nearly touching, running past both viewport
   edges, cut by the fold. Density and scale, not floaters. */
.hx-field { position: relative; margin-top: clamp(36px, 5vh, 58px); height: clamp(300px, 36vh, 372px); }
.hx-field::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -60px; width: min(1360px, calc(100% - 20px)); top: 22px;
  background: var(--ink); border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.hx-scene { position: relative; height: 100%; max-width: 1280px; }
.hx-a {
  position: absolute; margin: 0;
  background: var(--paper);
  box-shadow: 0 30px 70px -24px rgba(17,16,20,.35), 0 2px 8px rgba(17,16,20,.06);
  opacity: 0; transform: translateY(16px);
  border-radius: var(--r-lg); overflow: hidden;
}
.js-motion .hero-panel[data-hero="c"]:not([hidden]) .hx.is-live .hx-a {
  animation: hxIn .6s cubic-bezier(.2,.8,.3,1) var(--d, 0s) forwards;
}
.hero-panel[data-hero="c"] .hx:not(.is-live) .hx-a,
html:not(.js-motion) .hx-a { opacity: 1; transform: none; }
@keyframes hxIn { to { opacity: 1; transform: none; } }

/* photo-led community cards share one confident scale */
.hx-card img { width: 100%; height: 186px; object-fit: cover; display: block; }
.hx-card figcaption { padding: 15px 18px 18px; display: grid; gap: 3px; background: var(--paper); }
.hx-card .eyebrow { font-size: 10.5px; }
.hx-card b { font-size: 17px; letter-spacing: -.018em; }
.hx-card figcaption span:last-child { font-size: 12.5px; color: var(--ink-50); }

/* strip geometry: past the left edge → thread → room → past the right edge */
.hx-edge   { left: -180px; top: 46px; width: 340px; z-index: 1; }
.hx-thread { left: 13.5%; top: -16px; width: min(430px, 40%); padding: 20px 22px; z-index: 3; background: var(--paper); }
.hx-room   { left: 49%; top: 26px; width: min(400px, 36%); z-index: 2; }
.hx-edge-r { right: -190px; top: 60px; width: 350px; z-index: 1; }

.hx-thread > p { margin: 10px 0 12px; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; }
.hx-thread .fp-reply p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-80); }

/* the join moment lives inside the thread, not floating in space */
.hx-joined {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--pink-deep);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.hx-joined b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-joined i { font-style: normal; color: var(--line-2); }
.hx.hx-joined-on .hx-joined { opacity: 1; }
html:not(.js-motion) .hx-joined { opacity: 1; }
.hx-avs { display: flex; }
.hx-avs img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); margin-right: -7px; }

/* live state sits on the room's photo, where it belongs */
.hx-live {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(17,16,20,.82); color: #fff;
  -webkit-backdrop-filter: blur(8px); -webkit--webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 7px 14px;
  font-size: 12px; font-weight: 600;
}
.hx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .hx-live-dot { animation: hxBreathe 2.6s ease-in-out infinite; }
}
@keyframes hxBreathe { 0%,100% { box-shadow: 0 0 0 0 rgba(22,185,140,.4); } 50% { box-shadow: 0 0 0 6px rgba(22,185,140,0); } }

@media (max-width: 1100px) {
  .hx-edge { left: -240px; }
  .hx-edge-r { right: -250px; }
  .hx-thread { left: 6%; width: min(420px, 46%); }
  .hx-room { left: 54%; width: min(390px, 40%); }
}
@media (max-width: 900px) {
  .hx-field { height: 330px; }
  .hx-edge, .hx-edge-r { display: none; }
  .hx-thread { left: 0; top: -14px; width: min(430px, 58%); }
  .hx-room { left: auto; right: 0; top: 30px; width: min(360px, 40%); }
}
@media (max-width: 620px) {
  .hx-h { font-size: clamp(38px, 11vw, 52px); }
  .hx-proof { font-size: 12px; gap: 4px 10px; }
  .hx-field { height: 400px; }
  .hx-thread { width: 92%; top: -12px; }
  .hx-room { right: -6%; left: auto; top: 218px; width: 78%; }
  .hx-card img { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-a { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hx-joined { opacity: 1 !important; }
  .hx-live-dot { animation: none !important; }
}

/* ============================================================
   EXPANSION PASS — 26 Aug 2026 (local only)
   ============================================================ */

/* ---- A · CRM connected-context rail ---- */
.cx-block { gap: 10px; }
.cx-lede { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-65); }
.cx-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; position: relative; }
.cx-cap {
  position: relative; z-index: 2;                 /* nothing may overlay these */
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); padding: 8px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: -.005em;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.cx-cap i {
  font-style: normal; width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center; background: var(--chip, var(--ink));
}
.cx-cap i svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 1.9; fill: none; }
.cx-cap i img { display: block; }
.cx-mcp { grid-column: 1 / -1; border-color: var(--ink); }
.cx-mcp i { background: var(--ink); }
.cx-mcp-t { display: grid; gap: 0; min-width: 0; }
.cx-mcp-t b { font-size: 11.5px; }
.cx-mcp-t small { font-size: 9.5px; color: var(--ink-50); font-weight: 500; }
/* wake with the CRM sequence, staggered; visible at rest state 0 */
.js-motion #ops[data-ops="1"] .cx-cap, .js-motion #ops[data-ops="2"] .cx-cap,
.js-motion #ops[data-ops="3"] .cx-cap, .js-motion #ops[data-ops="4"] .cx-cap,
.js-motion #ops[data-ops="5"] .cx-cap, .js-motion #ops[data-ops="6"] .cx-cap,
#ops[data-ops="0"] .cx-cap { opacity: 1; transform: none; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(2) { transition-delay: .06s; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(3) { transition-delay: .12s; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(4) { transition-delay: .18s; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(5) { transition-delay: .24s; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(6) { transition-delay: .30s; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(7) { transition-delay: .36s; }
.js-motion #ops:not([data-ops="0"]) .cx-cap:nth-child(8) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) { .cx-cap { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- B · Automation: the DM alone, at scale ---- */
.rep-solo { max-width: 740px; margin: 0 auto; }
.rep-solo .rep-pane {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 34px 90px -30px rgba(17,16,20,.28), var(--sh-2);
}
.rep-done-t { display: grid; gap: 1px; min-width: 0; }
.rep-done-t b { font-size: 13.5px; }
.rep-done-t small { font-size: 11px; color: var(--ink-65); font-weight: 600; }
@media (max-width: 760px) { .rep-solo { max-width: none; } }

/* ---- C · comparison matrix ---- */
.cmp {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
}
.cmp-row {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
}
.cmp-row:first-child { border-top: 0; }
.cmp-head { background: var(--surface); }
.cmp-head .cmp-col { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.cmp-mark { height: 20px; width: auto; display: block; }
.cmp-dim {
  padding: 15px 18px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink-65); align-self: center;
}
.cmp-col {
  padding: 15px 16px; font-size: 13px; line-height: 1.45; color: var(--ink-80);
  border-left: 1px solid var(--line); align-self: stretch; display: flex; align-items: center;
}
.cmp-col sup { color: var(--pink-deep); font-weight: 700; margin-left: 2px; }
.cmp-col.is-flock {
  background: var(--blush); font-weight: 600; color: var(--ink);
  border-left-color: rgba(228,93,160,.35); border-right: 1px solid rgba(228,93,160,.35);
  position: relative;
}
.cmp-head .cmp-col.is-flock { background: var(--pink); }
.cmp-note { margin-top: 12px; max-width: 72ch; }

@media (max-width: 1024px) {
  .cmp-row { grid-template-columns: .95fr 1.3fr 1fr 1fr 1fr; }
  .cmp-col, .cmp-dim { padding: 12px 12px; font-size: 12px; }
}
/* mobile: each dimension becomes its own card, Flock leads it */
@media (max-width: 760px) {
  .cmp { border: 0; background: transparent; overflow: visible; display: grid; gap: 10px; }
  .cmp-head { display: none; }
  .cmp-row {
    grid-template-columns: 1fr; border: 1px solid var(--line) !important;
    border-radius: var(--r-md); background: var(--paper); overflow: hidden;
  }
  .cmp-dim { padding: 13px 16px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-50); }
  .cmp-col { border-left: 0; padding: 10px 16px; font-size: 13.5px; }
  .cmp-col.is-flock { border: 0; border-top: 1px solid rgba(228,93,160,.3); border-bottom: 1px solid rgba(228,93,160,.3); order: -1; margin-top: 34px; position: relative; }
  .cmp-col.is-flock::before { content: 'Flock'; position: absolute; top: -24px; left: 16px; font-size: 11px; font-weight: 800; color: var(--pink-deep); letter-spacing: .06em; }
  .cmp-col:not(.is-flock)::before { content: attr(data-who); font-weight: 700; margin-right: 8px; color: var(--ink-50); font-size: 12px; flex: none; }
  .cmp-dim { order: -2; }
}

/* ---- D · social proof ---- */
.pf { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 22px; align-items: stretch; }
.pf-main {
  margin: 0; background: var(--ink); color: var(--cream);
  border-radius: var(--r-xl); padding: clamp(28px, 3.6vw, 46px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.pf-main blockquote {
  margin: 0; font-size: clamp(21px, 2.4vw, 31px); line-height: 1.3;
  letter-spacing: -.025em; font-weight: 700; color: #fff; max-width: 20ch;
}
.pf-main figcaption { display: flex; align-items: center; gap: 13px; }
.pf-main figcaption b { font-size: 14.5px; color: #fff; }
.pf-main figcaption span { font-size: 12.5px; color: rgba(244,242,238,.6); }
.pf-side { display: grid; gap: 12px; align-content: stretch; }
.pf-fact {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; display: grid; gap: 3px; align-content: center;
}
.pf-fact b { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pf-fact span { font-size: 13px; color: var(--ink-65); line-height: 1.4; }
@media (max-width: 860px) {
  .pf { grid-template-columns: 1fr; }
  .pf-side { grid-template-columns: 1fr; }
}

/* Hero C spacing correction: the chip is gone, the composition starts
   higher. Editorial air kept, dead band above the headline removed. */
.hx { padding-top: calc(var(--nav-h) + clamp(16px, 3vh, 36px)); }
.hx-h { margin-top: 0; }
@media (max-width: 620px) {
  .hx { padding-top: calc(var(--nav-h) + 10px); }
  .hx-sub { margin-top: 16px; }
  .hx-acts { margin-top: 24px; }
}
/* the sticky nav already occupies flow space above the panel — the
   nav-h compensation was doubling it as a dead band */
.hx { padding-top: clamp(26px, 4.5vh, 52px); }
@media (max-width: 620px) { .hx { padding-top: 18px; } }

/* Hero C — the composer is the hero's primary interaction.
   Same field language as the earlier approved hero. */
.hx-starter {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px;
  background: #fff; border-radius: 999px;
  padding: 9px 9px 9px 26px;
  box-shadow: 0 22px 54px -14px rgba(17,16,20,.30), 0 2px 6px rgba(17,16,20,.08);
  max-width: 100%;
}
.hx-st-label {
  font-size: 16.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; min-width: 0;
}
.hx-st-label .starter-word { min-width: 8.6em; display: inline-block; text-align: left; }
.hx-starter .btn { flex: none; white-space: nowrap; min-height: 48px; }
@media (max-width: 700px) {
  .hx-starter {
    flex-direction: column; align-items: stretch; gap: 12px;
    border-radius: 20px; padding: 16px; width: 100%; max-width: 460px;
  }
  .hx-st-label { white-space: normal; text-align: left; line-height: 1.4; min-height: 2.7em; }
  .hx-st-label .starter-word { min-width: 0; }
  .hx-starter .btn { width: 100%; justify-content: center; }
}
/* Automation polish: modestly larger DM, tighter frame spacing */
.rep-solo { max-width: 830px; }
.rep-in-stage .rep-msg p { font-size: 16.5px; }
#automation { padding-bottom: 52px; }
#automation .sec-head { margin-bottom: 22px !important; }

/* ============================================================
   COMPARISON — editorial index. Typography and hairlines, not a
   spreadsheet. The Flock column is a quiet warm band.
   ============================================================ */
.cmx { max-width: 1160px; }
.cmx-row {
  display: grid;
  grid-template-columns: .78fr 1.3fr 1fr 1fr 1fr;
  gap: 0 26px; align-items: start;
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.cmx-row.cmx-head { border-top: 0; padding: 0 0 14px; align-items: end; }
.cmx-head .cmx-c {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-65); padding: 0 0 12px;
}
.cmx-mark { height: 22px; width: auto; display: block; margin-bottom: -2px; }
.cmx-crit {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-50); padding-top: 4px;
}
.cmx-c { font-size: 14.5px; line-height: 1.45; color: var(--ink-80); min-width: 0; }
.cmx-c sup { color: var(--pink-deep); font-weight: 700; margin-left: 1px; }
/* the Flock band: one continuous warm field with a pink crown */
.cmx-c.is-flock {
  background: var(--blush);
  margin: -20px 0; padding: 20px 18px;
  font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  align-self: stretch;
}
.cmx-head .cmx-c.is-flock {
  margin: 0; padding: 14px 18px 12px;
  border-top: 3px solid var(--pink); background: var(--blush);
}
.cmx-row:last-child { border-bottom: 1px solid var(--line); }
.cmx-row:last-child .cmx-c.is-flock { margin-bottom: -21px; padding-bottom: 21px; }
.cmx-note { margin: 16px 0 0; font-size: 12px; color: var(--ink-50); max-width: 70ch; line-height: 1.55; }

@media (max-width: 1024px) {
  .cmx-row { grid-template-columns: .7fr 1.25fr 1fr 1fr 1fr; gap: 0 16px; }
  .cmx-c { font-size: 13px; }
  .cmx-c.is-flock { font-size: 14px; padding: 20px 13px; }
}
@media (max-width: 900px) {
  /* Five columns cannot hold this copy at 390px: the competitor cells wrap to
     two lines, the criteria wrap to two, and only the criterion and Flock
     columns are ever on screen - the comparison hides behind a swipe. So each
     criterion becomes ONE bordered block that carries all four platforms, in
     the desktop order, every value labelled. Same matrix, read vertically. */
  .cmx { overflow: visible; }
  .cmx-row {
    display: block; min-width: 0; padding: 0; margin-bottom: 14px;
    border: 1px solid var(--line); border-top: 1px solid var(--line);
    border-radius: 14px; overflow: hidden;
  }
  .cmx-row.cmx-head { display: none; }
  .cmx-row:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }

  /* block header - the criterion every platform is answering */
  .cmx-crit {
    display: block; padding: 12px 16px 10px; background: var(--bone);
    border-bottom: 1px solid var(--line);
    font-size: 10.5px; letter-spacing: .13em; color: var(--ink-65);
  }

  /* Flock keeps the ink treatment and leads, as it does on desktop */
  .cmx-c.is-flock {
    display: block; margin: 0; border-radius: 0;
    padding: 28px 16px 15px; position: relative;
    font-size: 14.5px; line-height: 1.4;
  }
  .cmx-c.is-flock::before {
    content: 'Flock'; position: absolute; top: 10px; left: 16px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pink);
  }
  .cmx-row:last-child .cmx-c.is-flock { margin: 0; padding-bottom: 15px; border-radius: 0; }

  /* competitors - name locked to its value, never a loose line of text */
  .cmx-c:not(.is-flock) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 11px 16px; border-top: 1px solid var(--line);
    font-size: 13px; text-align: right;
  }
  .cmx-c:not(.is-flock)::before {
    content: attr(data-who); flex: none; text-align: left;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: var(--ink-50);
  }
}

/* ---- social proof: evidence as a ledger, not KPI cards ---- */
.pf { grid-template-columns: minmax(0,1.4fr) minmax(0,.9fr); align-items: stretch; }
.pf-ledger { display: grid; align-content: center; }
.pf-ev {
  /* the figure sits centred against the two-line block, as set in Figma
     (counter-axis CENTER). Baseline alignment hung it 21px high and made the
     three rows read as scattered rather than a ledger. */
  display: flex; align-items: center; gap: 18px;
  padding: 22px 4px; border-top: 1px solid var(--line);
}
.pf-ev:first-child { border-top: 0; padding-top: 8px; }
.pf-ev b {
  font-size: clamp(30px, 3vw, 42px); letter-spacing: -.035em;
  /* 3.2ch fitted "946" but not "1,284"/"2,140", so each row's copy started at a
     different x. Reserve the widest figure so the ledger reads as one column. */
  font-variant-numeric: tabular-nums; line-height: 1; flex: none; min-width: 5.4ch;
}
.pf-ev span { font-size: 14px; line-height: 1.45; color: var(--ink-80); }
.pf-ev span i { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-deep); margin-top: 4px; }
@media (max-width: 860px) { .pf-ledger { padding-top: 6px; } }

@media (max-width: 860px) {
  .pf { grid-template-columns: minmax(0, 1fr); }
  .pf-ledger { width: 100%; }
  .pf-ev { min-width: 0; }
  .pf-ev span { min-width: 0; }
}

/* transitions: demonstration → evaluation → validation */
#automation { padding-bottom: 72px; }
#compare { padding-top: 96px; padding-bottom: 84px; background: var(--paper); }
#proof { padding-top: 84px; }

/* ============================================================
   DESTINATION — “Not another scroll.” One place, entered.
   ============================================================ */
.dest {
  margin-top: 40px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(17,16,20,.22), var(--sh-2);
  max-width: 1160px;
}
.dest-top {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: #FCFBFA;
}
.dest-top b { font-size: 16px; letter-spacing: -.015em; }
.dest-here {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-65);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.dest-here i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.dest-rooms {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-bottom: 1px solid var(--line);
}
.dest-room {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  color: var(--ink-65); background: var(--bone);
}
.dest-room.is-on { background: var(--ink); color: #fff; }
.dest-rooms-meta { margin-left: auto; font-size: 12px; color: var(--ink-50); }
.dest-body {
  display: grid; grid-template-columns: minmax(0,1fr) 264px;
}
.dest-thread { padding: 22px; min-width: 0; }
.dt-post { display: flex; gap: 12px; }
.dt-post .av { flex: none; }
.dt-body { min-width: 0; }
.dt-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.dt-head b { font-weight: 700; }
.dt-body p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; letter-spacing: -.005em; }
.dt-replies {
  margin: 16px 0 0 18px; padding-left: 22px;
  border-left: 2px solid var(--line);
  display: grid; gap: 16px;
}
.dt-replies .dt-body p { font-size: 14.5px; }
.dest-new {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js-motion #dest[data-d="1"] .dest-new,
.js-motion #dest[data-d="2"] .dest-new,
#dest[data-d="0"] .dest-new { opacity: 1; transform: none; }
.dest-side {
  border-left: 1px solid var(--line); background: #FCFBFA;
  padding: 20px; display: grid; gap: 20px; align-content: start;
}
.dest-blk { display: grid; gap: 9px; }
.dest-people { display: flex; align-items: center; gap: 12px; }
.dest-pin { margin: 0; display: grid; gap: 2px; }
.dest-pin b { font-size: 13.5px; }
.dest-pin span { font-size: 12px; color: var(--ink-50); }
.dest-active { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dest-active i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.dest-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 22px; border-top: 1px solid var(--line); background: #FCFBFA;
  font-size: 13px; font-weight: 600; color: var(--ink-80);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.js-motion #dest[data-d="2"] .dest-foot,
#dest[data-d="0"] .dest-foot { opacity: 1; }
@media (max-width: 900px) {
  .dest-body { grid-template-columns: 1fr; }
  .dest-side { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr 1fr; }
  .dest-rooms-meta { display: none; }
}
@media (max-width: 620px) {
  .dest-side { grid-template-columns: 1fr; gap: 14px; }
  .dest-rooms { padding: 9px 14px; overflow-x: auto; scrollbar-width: none; }

  /* This panel illustrates the product inside a marketing page. Its type and
     avatars are sized for a ~640px panel within a 1440px layout; carried
     unchanged to a 390px phone that same scale filled 94% of the viewport and
     read as the running app rather than a picture of it. Re-scale the density
     for the phone - every element is kept, nothing is transformed. */
  .dest-top { padding: 12px 14px; gap: 10px; }
  .dest-top > img.av { width: 34px; height: 34px; }
  .dest-top b { font-size: 14.5px; }
  .dest-top .meta { font-size: 12px; }
  /* "9 here now" wrapped to two lines and became a 50px blob */
  .dest-here { font-size: 11.5px; padding: 5px 11px; gap: 6px; white-space: nowrap; align-self: flex-start; }
  .dest-here i { width: 6px; height: 6px; }
  .dest-room { font-size: 12px; padding: 6px 12px; }

  .dest-thread { padding: 14px; }
  .dt-post { gap: 10px; }
  .dt-post > img.av { width: 30px; height: 30px; }
  .dt-post.is-reply > img.av { width: 24px; height: 24px; }
  .dt-head { font-size: 12px; gap: 6px; }
  .dt-body p { font-size: 13.5px; line-height: 1.45; }
  .dt-replies { margin-left: 6px; padding-left: 12px; }
  .dt-replies .dt-body p { font-size: 12.5px; }

  .dest-side { padding: 16px 14px; }
  .dest-side .p-label { font-size: 10px; margin-bottom: 8px; }
  .dest-people img.av { width: 26px; height: 26px; }
  .dest-people .meta { font-size: 12px; }
  .dest-pin b { font-size: 12.5px; }
  .dest-pin span, .dest-active { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dest-new, .dest-foot { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.js-motion #dest[data-d="s"] .dest-new,
.js-motion #dest[data-d="s"] .dest-foot { opacity: 0; }
.js-motion #dest[data-d="s"] .dest-new { transform: translateY(8px); }
/* the destination shares the heading's left edge inside .wrap */
.dest { width: 100%; max-width: 1160px; margin-left: 0; margin-right: auto; }

/* ---- comparison refinement: Flock owns the black column ---- */
.cmx-c.is-flock {
  background: var(--ink); color: #fff;
}
.cmx-c.is-flock sup { color: var(--pink); }
.cmx-head .cmx-c.is-flock {
  background: var(--ink);
  border-top: 3px solid var(--pink);
  border-radius: 14px 14px 0 0;
}
.cmx-row:last-child .cmx-c.is-flock { border-radius: 0 0 14px 14px; }
.cmx-mark { height: 24px; }
/* competitor identities */
.cmx-brand { display: inline-flex; align-items: center; gap: 8px; }
.cmx-brand img { width: 18px; height: 18px; border-radius: 4px; display: block; }
/* competitor values slightly more present */
.cmx-c { color: var(--ink); }
.cmx-row:not(.cmx-head) .cmx-c:not(.is-flock) { color: rgba(17,16,20,.78); }
/* quieter note */
.cmx-note { font-size: 11px; color: var(--ink-50); opacity: .85; }
/* mobile: flock block goes ink too */
/* The ink column keeps the desktop treatment at every width now that the table
   itself survives on mobile: one continuous band, crowned in pink, rounded top
   and bottom. The per-row card styling and the 'FLOCK' caption both belonged to
   the stacked layout and would fight the column. */
/* the block owns the rounding on mobile, so the ink cell must stay square */
@media (max-width: 900px) {
  .cmx-c.is-flock, .cmx-head .cmx-c.is-flock { border-radius: 0; }
}

/* ============================================================
   CLIENT-TRANSCRIPT PASS — 28 Aug 2026
   ============================================================ */

/* ---- A · CRM record: two columns, record is the story ---- */
.app-ops { grid-template-columns: 208px minmax(0,1fr); }
.crm-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.crm-cell { background: var(--paper); padding: 13px 16px; display: grid; gap: 3px; min-width: 0; }
.crm-cell .k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.crm-cell .v { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pipe-step {
  position: relative; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-50);
}
.pipe-step + .pipe-step::before {
  content: ''; position: absolute; left: -8px; top: 50%; width: 8px; height: 1px; background: var(--line-2);
}
.pipe-step.is-done { color: var(--ink); }
.pipe-step.is-done::after { content: ' ✓'; color: var(--mint); }
.pipe-step.is-now { background: var(--ink); border-color: var(--ink); color: #fff; }
.p-stat.is-ltv .v { color: var(--pink-deep); }
@media (max-width: 900px) { .crm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .pipe { gap: 6px; } .pipe-step { padding: 7px 11px; font-size: 11.5px; } }

/* ---- B · Integrations + MCP: editorial block + legible field ---- */
#integrations { padding-top: 26px; }
.ig {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr);
  gap: clamp(20px, 3vw, 40px); align-items: stretch;
}
.ig-say {
  background: var(--ink); color: var(--cream);
  border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.ig-h { color: #fff; margin: 4px 0 0; max-width: 15ch; }
.ig-say > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(244,242,238,.72); max-width: 36ch; }
.ig-mcp {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md);
  padding: 14px 16px; margin-top: 6px; width: 100%;
}
.ig-mcp-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
}
.ig-mcp b { font-size: 13.5px; color: #fff; }
.ig-mcp span { font-size: 12px; color: rgba(244,242,238,.62); line-height: 1.45; }
.ig-note { margin-top: auto; font-size: 11px; color: rgba(244,242,238,.42); }
.ig-field {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px; align-content: center;
}
.ig-tile {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 17px 18px; box-shadow: var(--sh-1);
}
.ig-tile i {
  font-style: normal; width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--chip, var(--ink));
}
.ig-tile i svg { width: 19px; height: 19px; stroke: #fff; stroke-width: 1.8; fill: none; }
.ig-tile b { font-size: 14.5px; letter-spacing: -.012em; }
@media (max-width: 1000px) {
  .ig { grid-template-columns: minmax(0,1fr); }
  .ig-field { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .ig-field { grid-template-columns: 1fr 1fr; gap: 9px; }
  .ig-tile { padding: 13px 13px; gap: 10px; }
  .ig-tile i { width: 32px; height: 32px; }
  .ig-tile b { font-size: 12.5px; }
}

/* ---- C · Automation: DM dominant + IF/THEN sidebar ---- */
.rep-duo {
  display: grid; grid-template-columns: minmax(0,1fr) 288px;
  gap: 22px; max-width: 1080px; margin: 0 auto; align-items: start;
}
.rep-duo .rep-pane {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 34px 90px -30px rgba(17,16,20,.28), var(--sh-2);
}
.rep-rule {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
  display: grid; gap: 8px; margin: 0; min-width: 0; white-space: normal;
}
.rr-step {
  display: flex; align-items: baseline; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #FCFBFA; padding: 11px 13px;
  font-size: 13px; line-height: 1.4;
}
.rr-kind {
  flex: none; width: 38px; font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50);
}
.rr-step > span:last-child { min-width: 0; }
.rr-step b { font-weight: 700; }
.rr-step.is-then { border-color: rgba(228,93,160,.4); background: var(--blush); }
.rr-step.is-then .rr-kind { color: var(--pink-deep); }
.rr-link { width: 1px; height: 10px; background: var(--line-2); margin-left: 24px; }
.rr-meta { margin: 6px 0 0; font-size: 11.5px; }
@media (max-width: 1000px) {
  .rep-duo { grid-template-columns: minmax(0,1fr); }
  .rep-rule { position: static; order: 2; }
}

/* ---- D · footer: five columns that actually fit ---- */
.foot-cols { display: grid; grid-template-columns: repeat(5, auto); gap: 28px clamp(22px, 3.4vw, 56px); }
@media (max-width: 1100px) { .foot-cols { grid-template-columns: repeat(3, auto); } }
@media (max-width: 640px) { .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } }

/* Keep the footer columns evenly distributed as the navigation grows. */
.foot-top { grid-template-columns: minmax(260px, .9fr) minmax(0, 1.8fr); }
.foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.foot-cols .foot-link { width: auto; }
@media (max-width: 1100px) {
  .foot-top { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr); gap: 32px; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
}
@media (max-width: 640px) {
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}

/* ---- Mobile CRM: keep the Flock rail, but make the record the readable surface ----
   A late desktop .app-ops rule previously overrode the shared app mobile
   treatment, leaving a 208px rail beside a 148px record at 390px. */
@media (max-width: 900px) {
  #ops .app.app-ops { grid-template-columns: minmax(0, 1fr); }
  #ops .app-rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px;
    gap: 6px;
    scrollbar-width: none;
  }
  #ops .app-rail::-webkit-scrollbar { display: none; }
  #ops .app-brand, #ops .app-rail-label, #ops .rail-foot { display: none; }
  #ops .app-nav { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  #ops .p-sec { padding: 18px 16px; }
  #ops .ops-person { gap: 13px; align-items: flex-start; }
  #ops .ops-person .av { width: 52px; height: 52px; }
  #ops .ops-name { font-size: 20px; }
  #ops .p-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
  #ops .p-stat .v { font-size: 23px; }
  #ops .p-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: start;
  }
  #ops .p-row:has(.tl-dot) { padding-left: 18px; }
  #ops .p-row .tl-dot { position: absolute; left: 0; top: 18px; }
  #ops .p-row b { min-width: 0; }
  #ops .p-row .sub { min-width: 0; margin-left: 0; }
  #ops .p-row .num { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 0; white-space: nowrap; font-size: 12.5px; }
}

@media (max-width: 420px) {
  #ops .crm-grid { grid-template-columns: minmax(0, 1fr); }
  #ops .crm-cell { padding: 12px 14px; }
  #ops .pipe-step { padding: 7px 10px; }
}

/* Hero C field: all four cards fully inside the mat — nothing cropped
   by the fold/ticker below, nothing leaving the frame left or right. */
.hx-field { height: clamp(340px, 40vh, 400px); }
.hx-field::before { bottom: 0; width: min(1360px, calc(100% - 20px)); }
.hx-edge   { left: 1.5%; top: 44px; width: min(280px, 22%); }
.hx-thread { left: 24%; top: -16px; width: min(400px, 34%); }
.hx-room   { left: 55%; top: 34px; width: min(360px, 30%); }
.hx-edge-r { right: 1.5%; top: 56px; width: min(300px, 23%); }
@media (max-width: 1100px) {
  .hx-edge { left: 1%; }
  .hx-edge-r { right: 1%; }
  .hx-thread { left: 20%; width: min(380px, 38%); }
  .hx-room { left: 56%; width: min(340px, 32%); }
}
/* Cards may run wide, but never past the viewport edge. Anchoring the
   outer two to the scene edges guarantees that at any width, since the
   scene always sits inside the wrap. Bottom stays clear of the ticker. */
.hx-edge   { left: 0;  top: 44px; width: min(320px, 25%); }
.hx-thread { left: 25.5%; top: -16px; width: min(420px, 35%); }
.hx-room   { left: 56%; top: 32px; width: min(380px, 31%); }
.hx-edge-r { right: 0; top: 56px; width: min(320px, 25%); }
@media (max-width: 1100px) {
  .hx-thread { left: 22%; width: min(390px, 38%); }
  .hx-room { left: 57%; width: min(350px, 32%); }
}

/* ---- CRM right sidebar: compact CRM context on the member ---- */
.app-ops { grid-template-columns: 208px minmax(0,1fr) 268px; }
#ops .app.app-ops { grid-template-columns: 208px minmax(0,1fr) 268px; }
.crm-list { display: grid; gap: 0; }
.crm-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line); min-width: 0;
}
.crm-row:first-child { border-top: 0; padding-top: 2px; }
.crm-row .k { font-size: 11.5px; color: var(--ink-50); flex: none; }
.crm-row .v { font-size: 12.5px; font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-pipe { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-step {
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-50);
}
.cp-step.is-done { color: var(--ink); }
.cp-step.is-done::after { content: ' ✓'; color: var(--mint); }
.cp-step.is-now { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-pipe-note { margin-top: 8px; font-size: 11px; line-height: 1.45; }
.crm-ltv-main { display: flex; align-items: baseline; gap: 7px; }
.crm-ltv-main b { font-size: 26px; letter-spacing: -.03em; color: var(--pink-deep); font-variant-numeric: tabular-nums; }
.crm-ltv-main span { font-size: 11.5px; color: var(--ink-50); }
.crm-ltv-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.crm-ltv-sub span { font-size: 11.5px; color: var(--ink-65); }
.crm-ltv-sub b { color: var(--ink); font-weight: 700; }
@media (max-width: 1100px) {
  #ops .app.app-ops { grid-template-columns: 200px minmax(0,1fr); }
  .ops-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px; border-top: 1px solid var(--line); border-left: 0; padding-top: 18px; }
}
@media (max-width: 760px) {
  #ops .app.app-ops { grid-template-columns: minmax(0,1fr); }
  .ops-side { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Integrations: dense icon ecosystem, no per-icon labels ---- */
.ig-field {
  display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px);
  justify-content: center; align-items: center; padding: clamp(18px, 2.4vw, 34px) 0;
}
.ic-row { display: flex; gap: clamp(12px, 1.6vw, 22px); justify-content: center; flex-wrap: wrap; }
/* offset alternate rows so the field reads as a field, not a grid */
.ic-row:nth-child(even) { margin-left: clamp(14px, 2vw, 30px); }
.ic-row:nth-child(3) { margin-left: calc(-1 * clamp(10px, 1.4vw, 22px)); }
.ic {
  width: clamp(46px, 4.6vw, 62px); height: clamp(46px, 4.6vw, 62px);
  border-radius: clamp(13px, 1.3vw, 17px); flex: none;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.ic img { width: 54%; height: 54%; display: block; object-fit: contain; }
/* subtle depth: outer rows sit back a touch */
.ic-row:first-child .ic, .ic-row:last-child .ic { opacity: .88; }
@media (max-width: 1000px) {
  .ig-field { padding: 12px 0; }
  .ic { width: clamp(42px, 8.4vw, 54px); height: clamp(42px, 8.4vw, 54px); border-radius: 13px; }
}
@media (max-width: 560px) {
  .ic-row { gap: 9px; }
  .ic-row:nth-child(even), .ic-row:nth-child(3) { margin-left: 0; }
  .ic { width: 44px; height: 44px; border-radius: 12px; }
  .ig-field { gap: 9px; }
}

/* ---- Integrations: balanced vertical rhythm + a field with life ---- */
#integrations { padding-top: 64px; padding-bottom: 64px; }
.ig { align-items: center; gap: clamp(24px, 3.4vw, 52px); }

/* the field fills its column and scatters rather than sitting in a block */
.ig-field { padding: 0; gap: clamp(10px, 1.3vw, 16px); align-items: stretch; }
.ic-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 1.3vw, 16px); flex-wrap: nowrap; width: 100%;
}
.ic-row:nth-child(even) { margin-left: 0; }
.ic-row:nth-child(3) { margin-left: 0; }
/* the short last row centres instead of stretching two tiles apart */
.ic-row:last-child { justify-content: center; gap: clamp(12px, 1.6vw, 20px); }

/* size + lift variation gives the field its rhythm */
.ic {
  width: auto; height: auto; aspect-ratio: 1;
  flex: 1 1 0; min-width: 0; max-width: 78px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.ic-row:nth-child(1) .ic:nth-child(2),
.ic-row:nth-child(2) .ic:nth-child(4),
.ic-row:nth-child(3) .ic:nth-child(1),
.ic-row:nth-child(4) .ic:nth-child(5) {
  transform: scale(1.14); box-shadow: 0 14px 30px -12px rgba(17,16,20,.28), var(--sh-1);
  z-index: 2; position: relative;
}
.ic-row:nth-child(1) .ic:nth-child(4),
.ic-row:nth-child(2) .ic:nth-child(1),
.ic-row:nth-child(3) .ic:nth-child(4),
.ic-row:nth-child(4) .ic:nth-child(2) { transform: scale(.86); opacity: .78; }
.ic-row:nth-child(2) .ic:nth-child(6),
.ic-row:nth-child(4) .ic:nth-child(6) { transform: translateY(-8px); }
.ic-row:nth-child(1) .ic:nth-child(5),
.ic-row:nth-child(3) .ic:nth-child(3) { transform: translateY(7px); }
.ic-row:first-child .ic, .ic-row:last-child .ic { opacity: 1; }

@media (max-width: 1000px) {
  #integrations { padding-top: 44px; padding-bottom: 48px; }
  .ic { max-width: 64px; }
}
@media (max-width: 560px) {
  .ic { max-width: 52px; }
  .ic-row { gap: 8px; }
  .ic-row:nth-child(1) .ic:nth-child(2),
  .ic-row:nth-child(2) .ic:nth-child(4),
  .ic-row:nth-child(3) .ic:nth-child(1),
  .ic-row:nth-child(4) .ic:nth-child(5) { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .ic { transition: none; } }

/* ============================================================
   FIX 1 · CRM activity: the pink rail was touching the dot.
   ============================================================ */

/* ============================================================
   FIX 2 · Hero C field: a row that cannot overlap. Cards keep
   their stagger through vertical offset, never horizontal bleed.
   ============================================================ */
.hx-scene {
  display: flex; align-items: flex-start;
  gap: clamp(12px, 1.5vw, 22px);
  height: 100%; padding-top: 8px;
}
.hx-a {
  position: static !important; left: auto !important; right: auto !important; top: auto !important;
  flex: 1 1 0; min-width: 0; width: auto !important; max-width: none;
}
.hx-edge   { margin-top: 44px; }
.hx-thread { margin-top: 0; flex-grow: 1.25; }
.hx-room   { margin-top: 26px; }
.hx-edge-r { margin-top: 58px; }
.hx-card img { height: clamp(120px, 11vw, 168px); }
.hx-thread > p { font-size: clamp(13px, 1.05vw, 15px); }
.hx-thread .fp-reply p { font-size: clamp(12px, .95vw, 13.5px); }
.hx-joined { font-size: 11.5px; flex-wrap: wrap; row-gap: 4px; }

@media (max-width: 1100px) {
  .hx-edge-r { display: none; }
  .hx-edge { margin-top: 40px; }
}
@media (max-width: 860px) {
  .hx-edge { display: none; }
  .hx-scene { gap: 14px; }
  .hx-thread { flex-grow: 1.3; }
  .hx-room { margin-top: 18px; }
}
@media (max-width: 620px) {
  .hx-field { height: auto; }
  .hx-scene { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0 4px; }
  .hx-a { margin-top: 0 !important; }
  /* `flex: 1 1 0` above is for the desktop ROW: it sets the basis on the main
     axis. Once this scene becomes a COLUMN the main axis is vertical, so that
     basis collapsed every card's height to 0 - the scene shrank, the cards
     spilled out and .hx (overflow:hidden) cut them mid-card. In a column they
     must size to their own content. */
  .hx-a { flex: 0 0 auto !important; }
  .hx-card img { height: 132px; }

  /* Desktop says "there are many Flocks" by putting them side by side. Hiding
     every card but one lost that idea on a phone, so keep the row and let the
     next Flock run past the right edge - .hx clips it, so the viewport shows a
     whole card plus the promise of another. */
  /* Mobile hero: the four Flocks become a swipeable carousel that advances on
     its own. Desktop says "there are many Flocks" by placing them side by
     side; a phone says it by moving through them. Scroll-snap keeps it
     touchable, so the animation is an invitation rather than the only way in. */
  .hx-field { display: block; height: auto; margin-top: clamp(22px, 4vh, 34px); }
  .hx-field::before { display: none; }
  .hx-scene {
    display: flex; flex-direction: row; align-items: stretch !important;
    gap: 14px; margin: 0;
    /* the side padding is what lets the first and last Flock sit dead centre,
       so every card in the set is reached the same way */
    padding: 4px calc((100vw - 78vw) / 2) 18px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hx-scene::-webkit-scrollbar { display: none; }
  /* one size for all four: the set reads as a set, and the centred card is
     the focus with a slice of its neighbours showing either side */
  .hx-edge, .hx-edge-r, .hx-room, .hx-thread {
    display: flex !important; flex-direction: column;
    flex: 0 0 78vw !important; max-width: 78vw !important;
    width: 78vw !important; min-width: 0;
    margin-top: 0 !important; scroll-snap-align: center;
    align-self: stretch !important; overflow: hidden;
  }
  /* the media in a photo card takes the slack so all four end up level */
  .hx-card img { height: auto !important; flex: 1 1 auto; min-height: 132px; object-fit: cover; }
  /* superseded by the carousel block above: the four Flocks are one size now,
     so the old lead-plus-peek widths must not fight it */
  .hx-room .hx-card, .hx-room img { width: 100%; }
}
/* the lit row's pink rail sat flush against the timeline dot — give the
   dot real clearance from it so the two read as separate marks */
#ops .p-row { padding-left: 18px; }
#ops .p-row.is-lit { box-shadow: inset 3px 0 0 var(--pink); }
#ops .p-row .tl-dot { margin-left: 2px; margin-right: 8px; }
/* mobile: the dot is absolutely positioned at left:0, so it needs its
   own offset to clear the lit row's pink rail */
@media (max-width: 1100px) {
  #ops .p-row { padding-left: 26px; }
  #ops .p-row:has(.tl-dot) { padding-left: 26px; }
  #ops .p-row .tl-dot { left: 11px; }
}

/* ============================================================
   Hero C field: the cards sit ON the black slab and break past
   its edges. Row layout keeps them from ever touching each other;
   negative offsets lift them over the slab's top edge.
   ============================================================ */
.hx-field { height: clamp(300px, 34vh, 360px); margin-top: clamp(52px, 6vh, 84px); }
/* the slab starts below where the cards begin, so they overhang it */
.hx-field::before { top: 74px; bottom: 0; }
.hx-scene { padding-top: 0; align-items: flex-start; }
/* each card crosses the slab's top edge by a different amount */
.hx-edge   { margin-top: 34px; }
.hx-thread { margin-top: 0; }
.hx-room   { margin-top: 18px; }
.hx-edge-r { margin-top: 48px; }

@media (max-width: 1100px) {
  .hx-field::before { top: 66px; }
  .hx-edge { margin-top: 30px; }
}
@media (max-width: 860px) {
  .hx-field { height: clamp(280px, 32vh, 330px); }
  .hx-field::before { top: 58px; }
  .hx-room { margin-top: 14px; }
}
@media (max-width: 620px) {
  .hx-field { height: auto; margin-top: 40px; padding-bottom: 0; }
  /* The slab is a desktop staging device - it reads because four cards
     overhang its top edge. Stacked to a single card on mobile it has nothing
     to stage, and its tail showed as a stray black band above the ticker. */
  .hx-field::before { display: none; }
  /* keep the centring gutters from the carousel block above */
  .hx-scene { padding: 4px calc((100vw - 78vw) / 2) 18px; }
}
/* the slab hugs the cards: its height follows the tallest one, leaving a
   constant breathing gap at the bottom instead of a fixed dead height */
.hx-field { height: auto !important; }
.hx-scene { padding-bottom: clamp(18px, 2vh, 26px); }
@media (max-width: 620px) { .hx-scene { padding-bottom: 18px; } }

/* ---- the ecosystem breathes: each icon drifts a few px on its own
   clock, so the field never looks synchronised or busy. `translate`
   is used rather than `transform` so the size/lift rhythm survives. ---- */
@media (prefers-reduced-motion: no-preference) {
  .ic { will-change: translate; }
  .ic-row:nth-child(1) .ic:nth-child(1) { animation: icDriftA 11s ease-in-out infinite; }
  .ic-row:nth-child(1) .ic:nth-child(2) { animation: icDriftB 13s ease-in-out .6s infinite; }
  .ic-row:nth-child(1) .ic:nth-child(3) { animation: icDriftC 12s ease-in-out 1.4s infinite; }
  .ic-row:nth-child(1) .ic:nth-child(4) { animation: icDriftA 14s ease-in-out .9s infinite reverse; }
  .ic-row:nth-child(1) .ic:nth-child(5) { animation: icDriftB 10.5s ease-in-out 2.1s infinite; }

  .ic-row:nth-child(2) .ic:nth-child(1) { animation: icDriftC 12.5s ease-in-out .3s infinite reverse; }
  .ic-row:nth-child(2) .ic:nth-child(2) { animation: icDriftA 13.5s ease-in-out 1.7s infinite; }
  .ic-row:nth-child(2) .ic:nth-child(3) { animation: icDriftB 11.5s ease-in-out .5s infinite reverse; }
  .ic-row:nth-child(2) .ic:nth-child(4) { animation: icDriftC 14.5s ease-in-out 2.4s infinite; }
  .ic-row:nth-child(2) .ic:nth-child(5) { animation: icDriftA 12s ease-in-out 1.1s infinite; }
  .ic-row:nth-child(2) .ic:nth-child(6) { animation: icDriftB 13s ease-in-out 3s infinite reverse; }

  .ic-row:nth-child(3) .ic:nth-child(1) { animation: icDriftB 12.5s ease-in-out .8s infinite; }
  .ic-row:nth-child(3) .ic:nth-child(2) { animation: icDriftC 11s ease-in-out 2.2s infinite reverse; }
  .ic-row:nth-child(3) .ic:nth-child(3) { animation: icDriftA 14s ease-in-out .4s infinite; }
  .ic-row:nth-child(3) .ic:nth-child(4) { animation: icDriftB 13.5s ease-in-out 1.9s infinite reverse; }
  .ic-row:nth-child(3) .ic:nth-child(5) { animation: icDriftC 12s ease-in-out 2.8s infinite; }

  .ic-row:nth-child(4) .ic:nth-child(1) { animation: icDriftA 13s ease-in-out 1.2s infinite reverse; }
  .ic-row:nth-child(4) .ic:nth-child(2) { animation: icDriftC 11.5s ease-in-out .2s infinite; }
  .ic-row:nth-child(4) .ic:nth-child(3) { animation: icDriftB 14s ease-in-out 2.6s infinite; }
  .ic-row:nth-child(4) .ic:nth-child(4) { animation: icDriftA 12.5s ease-in-out 1.5s infinite; }
  .ic-row:nth-child(4) .ic:nth-child(5) { animation: icDriftC 13s ease-in-out .7s infinite reverse; }
  .ic-row:nth-child(4) .ic:nth-child(6) { animation: icDriftB 11s ease-in-out 3.2s infinite; }

  .ic-row:nth-child(5) .ic:nth-child(1) { animation: icDriftA 12s ease-in-out 1.8s infinite; }
  .ic-row:nth-child(5) .ic:nth-child(2) { animation: icDriftC 13.5s ease-in-out .5s infinite reverse; }
}
@keyframes icDriftA { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes icDriftB { 0%,100% { translate: 0 0; } 50% { translate: 3px -3px; } }
@keyframes icDriftC { 0%,100% { translate: 0 0; } 50% { translate: -3px -4px; } }
@media (prefers-reduced-motion: reduce) { .ic { animation: none !important; translate: none !important; } }

/* Removing a row in the CMS hides the elements that rendered it. Only the
   hydration layer ever sets [hidden], so this cannot affect the static page. */
[hidden] { display: none !important; }