.landing-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  padding: 4rem 1.5rem;
}
@media (min-width: 768px) { .section { padding: 6rem 2rem; } }
@media (min-width: 1100px) { .section { padding: 7rem 3rem; } }

.section__inner {
  max-width: 64rem;
  margin: 0 auto;
}

.section--soft     { background: var(--color-bg); }
.section--surface  { background: var(--color-surface); }
.section--ink      { background: #14110f; color: #f5efe6; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fbf5eb; }
.section--ink .muted, .section--ink .lede { color: #b8b1a6; }

.section + .section { border-top: 1px solid var(--color-border); }
.section--ink + .section, .section + .section--ink { border-top-color: rgba(255,255,255,0.08); }

.eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}
.section--ink .eyebrow { color: #b8b1a6; }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.75rem;
  opacity: 0.6;
}

.display {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 6vw + 0.5rem, 4.25rem);
  margin: 0 0 1.5rem;
  max-width: 22ch;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: clamp(1.875rem, 3vw + 0.75rem, 2.75rem);
  margin: 0 0 1.25rem;
  max-width: 24ch;
}

.section__lede {
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  color: var(--color-text-muted);
  max-width: 40ch;
  line-height: 1.6;
  margin: 0;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  isolation: isolate;
}
/* Brand emblem bled off the lower-left as an ambient watermark — the
   signature move from the brand layout boards. */
.hero::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -34%;
  width: 46%;
  aspect-ratio: 867 / 543;
  background: var(--color-accent);
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: url("/static/icons/emblem.9bd03d15ba31.svg") center / contain no-repeat;
          mask: url("/static/icons/emblem.9bd03d15ba31.svg") center / contain no-repeat;
}
@media (min-width: 768px) {
  .hero { padding-top: 4rem; padding-bottom: 6rem; min-height: calc(100vh - 64px); display: flex; align-items: center; }
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.hero::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(28,27,26,0.08) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 35%, transparent 75%);
}
.hero::after {
  background:
    radial-gradient(ellipse 50% 35% at 80% 10%, rgba(224, 148, 182,0.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 80%, rgba(224, 148, 182,0.06), transparent 70%);
}

.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.hero__copy { max-width: 36rem; }

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  align-items: stretch;
}
@media (min-width: 480px) {
  .hero__cta { flex-direction: row; align-items: center; }
  .hero__cta .btn { flex: 0 0 auto; }
}

.hero__signal {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.hero__signal-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(63,107,78,0.18);
  flex: 0 0 auto;
}

/* ===== Hero visual: cohort constellation ===== */
.cluster {
  position: relative;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.cluster svg { width: 100%; height: 100%; display: block; }

/* ===== Stat strip ===== */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--color-bg);
  padding: 2rem 1.25rem;
  text-align: center;
}
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1;
}
.stat__label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ===== Steps ===== */
.steps {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.step__num {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-accent-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.step h3 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.step p { margin: 0; color: var(--color-text-muted); }

/* ===== Feature grid ===== */
.feature-grid {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  margin-top: 3rem;
}
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature {
  background: var(--color-surface);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.feature__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0;
  background: #f3eee5;
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.feature__icon svg { width: 1.25rem; height: 1.25rem; }
.feature h3 {
  font-size: 1.125rem;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.feature p { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }

/* ===== Anti-noise list (ink section) ===== */
.no-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 720px) { .no-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.no-list li {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
}
.no-list__mark {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8c8b3;
  font-size: 0.875rem;
}
.no-list__title { font-weight: 600; color: #f5efe6; margin: 0 0 0.25rem; }
.no-list__body { color: #b8b1a6; margin: 0; font-size: 0.9375rem; line-height: 1.55; }

/* ===== FAQ ===== */
.faq {
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}
.faq details {
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform 200ms ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div {
  margin-top: 1rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.65;
}

/* ===== Final CTA ===== */
.final {
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(28,27,26,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,27,26,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
}
.final .section__title { margin-left: auto; margin-right: auto; }
.final .section__lede  { margin-left: auto; margin-right: auto; }
.final__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
  align-items: center;
}
@media (min-width: 480px) {
  .final__cta { flex-direction: row; justify-content: center; }
}

/* ===== Sticky landing nav ===== */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: rgba(250, 247, 242, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background 200ms ease, padding 200ms ease;
}
@media (min-width: 768px) {
  .landing-nav { padding: 1rem 2rem; }
}

.landing-nav.is-scrolled {
  background: rgba(250, 247, 242, 0.92);
  border-bottom-color: var(--color-border);
}

.landing-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
/* Designed SVG wordmark (arcs included, so no separate emblem). Height-
   constrained so the sticky nav never grows; width follows aspect ratio. */
.landing-nav__brand img {
  display: block;
  height: 24px;
  width: auto;
}
.landing-nav__brand:hover { text-decoration: none; }

.landing-nav__links {
  display: none;
  gap: 0.125rem;
  flex: 1 1 auto;
  justify-content: center;
}
@media (min-width: 900px) { .landing-nav__links { display: flex; } }

.landing-nav__link {
  padding: 0.5rem 0.9375rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.landing-nav__link:hover {
  background: rgba(28, 27, 26, 0.06);
  text-decoration: none;
}
.landing-nav__link.is-active {
  color: var(--color-accent-text);
  background: rgba(224, 148, 182, 0.10);
}

.landing-nav__cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.landing-nav__login {
  display: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 0.5rem 0.75rem;
}
@media (min-width: 600px) { .landing-nav__login { display: inline-block; } }
.landing-nav__login:hover { color: var(--color-accent-text); text-decoration: none; }

.landing-nav__cta .btn {
  min-height: 38px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Section anchor offset so the sticky nav doesn't cover the heading */
#how-it-works, #features, #faq {
  scroll-margin-top: 5.5rem;
}

/* ──────────────────────────────────────────────────────────────────
   Phone mockups — hero + "inside your circle" preview cards
   ────────────────────────────────────────────────────────────────── */

.hero__device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.hero__device-blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(224, 148, 182, 0.28) 0%, rgba(224, 148, 182, 0.10) 45%, rgba(224, 148, 182, 0) 75%);
  filter: blur(8px);
}

.phone {
  position: relative;
  z-index: 1;
  width: 280px;
  aspect-ratio: 9 / 19;
  background: #1c1b1a;
  border-radius: 46px;
  padding: 8px;
  box-shadow:
    0 30px 60px -20px rgba(28, 27, 26, 0.45),
    0 8px 20px -8px rgba(224, 148, 182, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone--hero {
  transform: rotate(-2deg);
}
.phone--mini {
  width: 220px;
  border-radius: 40px;
  padding: 6px;
}

.phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #1c1b1a;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.phone__screen {
  position: relative;
  height: 100%;
  background: var(--color-surface, #faf5ee);
  border-radius: 34px;
  overflow: hidden;
  padding: 36px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone--mini .phone__screen {
  border-radius: 34px;
  padding: 30px 12px 12px;
  gap: 8px;
}

/* Avatars (warm-tinted disks with initials) */
.ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #d9c8a8;
  color: #1c1b1a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--color-surface, #faf5ee);
}
.ava--1 { background: #c4b8a0; }
.ava--2 { background: #e0c6b8; }
.ava--3 { background: #d4b89e; }
.ava--4 { background: #c8a896; }
.ava--5 { background: #e094b6; color: #fff; }
.ava--more {
  background: #1c1b1a;
  color: #fff;
  font-size: 10px;
}
.ava--sm { width: 24px; height: 24px; font-size: 9px; }

/* Hero phone content */
.phone-app {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.phone-app__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-app__hello {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: #1c1b1a;
}
.phone-app__sub {
  font-size: 10px;
  color: rgba(28, 27, 26, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.phone-app__circle-row {
  display: flex;
  gap: -4px;
  margin: 4px 0 6px;
}
.phone-app__circle-row .ava {
  margin-left: -8px;
  width: 28px;
  height: 28px;
  font-size: 10px;
}
.phone-app__circle-row .ava:first-child { margin-left: 0; }

.phone-app__card {
  background: linear-gradient(135deg, #e094b6 0%, #d57aa4 100%);
  border-radius: 0;
  padding: 12px;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(224, 148, 182, 0.5);
}
.phone-app__pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.25);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.phone-app__card-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.25;
}
.phone-app__card-meta {
  font-size: 10px;
  opacity: 0.85;
  margin: 0;
}

.phone-app__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.phone-app__msg-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(28, 27, 26, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 2px;
}
.phone-app__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(0,0,0,0.03);
  border-radius: 0;
  padding: 8px 10px;
}
.phone-app__msg p {
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
  color: rgba(28, 27, 26, 0.85);
}
.phone-app__msg em { font-style: normal; color: var(--color-accent-text, #b46a91); }

/* Hero device + copy: stack on mobile, side-by-side on desktop */
.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
  }
}

/* "Inside your circle" preview grid */
.inside-grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 800px) {
  .inside-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.inside-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}
.inside-card figcaption {
  text-align: center;
  max-width: 22rem;
}
.inside-card figcaption h3 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.inside-card figcaption p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

/* Mini phone screens (each card uses its own layout) */
.mini-app {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.mini-app__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(28, 27, 26, 0.5);
  margin: 0 0 4px;
}
.mini-app__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 0;
}
.mini-app__row:hover { background: rgba(0,0,0,0.03); }
.mini-app__row div { display: flex; flex-direction: column; min-width: 0; }
.mini-app__row strong {
  font-size: 11px;
  font-weight: 600;
  color: #1c1b1a;
  line-height: 1.2;
}
.mini-app__row span {
  font-size: 9px;
  color: rgba(28, 27, 26, 0.55);
  margin-top: 1px;
}

/* Mini chat layout */
.mini-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.mini-chat__bubble {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.mini-chat__bubble--in p {
  background: rgba(0,0,0,0.05);
  border-radius: 0;
  padding: 7px 10px;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #1c1b1a;
  max-width: 80%;
}
.mini-chat__bubble--out {
  justify-content: flex-end;
}
.mini-chat__bubble--out p {
  background: #e094b6;
  color: #fff;
  border-radius: 0;
  padding: 7px 10px;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  max-width: 80%;
}
.mini-chat__link {
  display: flex;
  gap: 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 0;
  padding: 8px 10px;
  align-items: center;
  margin-left: 30px;
}
.mini-chat__link span:first-child { font-size: 14px; }
.mini-chat__link div { display: flex; flex-direction: column; min-width: 0; }
.mini-chat__link strong {
  font-size: 10px;
  font-weight: 600;
  color: #1c1b1a;
  line-height: 1.25;
}
.mini-chat__link span:last-child {
  font-size: 9px;
  color: rgba(28, 27, 26, 0.5);
  margin-top: 1px;
}

/* Mini library layout */
.mini-lib { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.mini-lib__hero {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #e094b6 0%, #c87a9d 100%);
  border-radius: 0;
  padding: 12px;
  color: #fff;
}
.mini-lib__play {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.mini-lib__hero div { display: flex; flex-direction: column; min-width: 0; }
.mini-lib__hero strong {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.mini-lib__hero span {
  font-size: 9px;
  opacity: 0.85;
  margin-top: 2px;
}
.mini-lib__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 0;
}
.mini-lib__icon {
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,0.05);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.mini-lib__row div { display: flex; flex-direction: column; min-width: 0; }
.mini-lib__row strong {
  font-size: 11px;
  font-weight: 600;
  color: #1c1b1a;
  line-height: 1.2;
}
.mini-lib__row span {
  font-size: 9px;
  color: rgba(28, 27, 26, 0.5);
  margin-top: 1px;
}

#inside { scroll-margin-top: 5.5rem; }