/* ============================================================================
   FONTS
   Bricolage Grotesque carries headings and interface labels; Fraunces carries
   body copy. Both are weight-variable, so one file each covers 400–800 and
   replaces the five static faces this block used to load.
   Young Serif stays the brand wordmark — the Habibti name and logo are unchanged.
   All self-hosted woff2 — nothing is fetched from a third party.
   ========================================================================= */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"); }
/* Caveat — the handwriting captions. Self-hosted too, so the Google Fonts
   request (and the third-party dependency it carried) is gone for good. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2"); }

/* ============================================================================
   TOKENS — every value below is copied verbatim from PALETTE.md. The two
   `oklch()` entries are the only derived colours: they exist because
   --muted (#7A7580) measures 4.49:1 on white, which is under the 4.5:1 floor
   for body-size text, so --muted is used only at 24px+ and the derived tone
   carries body copy.
   ========================================================================= */
:root {
  /* Brand */
  --plum: #1c0f24;
  --brand: #5b2da3;
  --brand-deep: #2e1652;
  --gold: #f4c542;
  --like: #ff4458;

  /* Surfaces */
  --bg: #ffffff;
  --page-tint: #FBF9FD;
  --soft: #f7f2ff;
  --chip-fill: #f3e8ff;
  --chip-border: #d4b8f0;
  --choice-fill: #f7efff;
  --choice-border: #d1adef;

  /* Typography */
  --ink: #0a070b;
  --muted: #7a7580;
  --subtle: #9a949e;
  --muted-body: oklch(0.455 0.014 318);      /* derived from --muted, 6.0:1 on white */
  --on-plum-soft: oklch(0.88 0.022 310);     /* derived, 11:1 on --plum */

  /* Borders */
  --border: #e8e5ea;
  --hairline: #ece9ee;

  /* Form */
  --shadow-offset: 0.5rem 0.5rem 0 var(--plum);
  --shadow-offset-sm: 0.25rem 0.25rem 0 var(--plum);
  --r-card: 20px;
  --r-box: 14px;
  --r-chip: 18px;

  --section-gap: clamp(4.5rem, 5.5vw, 6.5rem);
  /* Type scale. These four values are the ones the Date and Community cards
     and the measured navbar were built with, promoted to tokens so the rest of
     the page uses the same ones instead of a per-component guess. Everything
     that used to sit below the body size — 0.875 and 0.9375rem captions, card
     copy, chips, footer links, dialog text — now reads at --t-body or --t-ui.
     The display scale above (.display-1/2/3, .lead, .statement)
     is untouched: headlines were never the thing that was too small. */
  --t-label: 0.8125rem;                      /* uppercase micro-labels only */
  --t-body: 1.0625rem;                       /* all running text */
  --t-body-lh: 1.6;
  --t-ui: 1.0625rem;                         /* interactive labels */
  --t-title: clamp(1.375rem, 2vw, 1.75rem);  /* card and panel sub-headings */

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Fraunces", Georgia, serif;
  --font-wordmark: "Young Serif", Georgia, serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;
  --container: min(88%, 76rem);
  /* The hero photograph bleeds up behind the sticky header, so it needs the
     header's height. This is the desktop measurement; the page script replaces
     it with the real one on load and on resize, where it differs (the nav wraps
     to two rows on a phone). */
  --header-h: 5.25rem;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: var(--header-h, 5.25rem);
}
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
:target {
  scroll-margin-top: 0;
}
main > section[id] {
  scroll-margin-top: 0;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.panel--plum :where(a, button, [tabindex]):focus-visible { outline-color: var(--gold); }
.wrap { width: var(--container); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type scale -------------------------------------------------- */
/* The wordmark is the only thing set in Young Serif (--font-wordmark); every
   headline stays on the site's display sans so the brand face stays distinct
   from the content faces. */
.display-1 { font-size: clamp(2.75rem, 5.4vw, 4.75rem); line-height: 1.04; font-weight: 700; margin: 0 0 1.5rem; }
.display-2 { font-size: clamp(2.125rem, 3.6vw, 3.125rem); line-height: 1.12; font-weight: 700; margin: 0 0 1.25rem; }
.display-3 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.25; font-weight: 600; margin: 0 0 0.875rem; }
.lead { font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); line-height: 1.5; margin: 0 0 1.5rem; }
.body { margin: 0 0 1.125rem; color: var(--muted-body); max-width: 36rem; }
.body:last-child { margin-bottom: 0; }
.eyebrow {
  display: block;
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 1.25rem;
}
.panel--plum .eyebrow { color: var(--gold); }
.accent { color: var(--brand); }
.panel--plum .accent { color: var(--gold); }

/* The single flourish, echoing the marker stroke of the real Habibti logo.
   Used exactly once, on the hero headline. */
.marker { position: relative; white-space: nowrap; }
.marker svg {
  position: absolute; left: 0; right: 0; bottom: -0.3em; width: 100%; height: 0.28em;
  overflow: visible; color: var(--brand); pointer-events: none;
}

/* ---------- Sections ---------------------------------------------------- */
.panel {
  --nav-bg: var(--bg); --nav-tone: light;
  padding: var(--section-gap) 0; position: relative;
}
.panel--soft { --nav-bg: var(--soft); background: var(--soft); }
.panel--plum { --nav-bg: var(--plum); --nav-tone: dark; background: var(--plum); color: #fff; }
.panel--plum .body { color: var(--on-plum-soft); }
#problem { --nav-bg: var(--page-tint); background: var(--page-tint); color: var(--plum); padding-block: clamp(5rem, 6vw, 7rem); }
#problem .wrap { width: min(82%, 92rem); }
#problem .two-col { grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); gap: clamp(4rem, 7vw, 8.5rem); }
#problem h2 { max-width: 48rem; margin: 0 0 2.2rem; font: 400 clamp(3.4rem, 4.4vw, 5rem)/1.07 var(--font-body); letter-spacing: -.04em; }
#problem h2 em, #problem .pullquote em { color: #9a7be0; font-weight: 400; }
#problem .body { max-width: 43rem; color: #474353; font: 400 clamp(1.15rem, 1.4vw, 1.45rem)/1.5 var(--font-display); }
#problem .body + .body { margin-top: 1.5rem; }
#problem .pullquote { width: min(90%, 100rem); margin: clamp(3.5rem, 5vw, 5rem) auto 0; border-top: 1px solid #ded6e4; padding: clamp(2rem, 3vw, 3rem) 1rem 0; text-align: center; }
#problem .pullquote p { margin: 0; font: 400 clamp(2.5rem, 4.1vw, 4.5rem)/1.15 var(--font-body); letter-spacing: -.04em; }
.panel--hairline { border-top: 1px solid var(--hairline); }
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
.two-col--art-first > .two-col__art { order: -1; }
.measure { max-width: 34rem; }
.measure-wide { max-width: 48rem; }
.problem-flow { min-width: 0; }
.stair { counter-reset: problem; list-style: none; margin: 0; padding: 0; }
.stair li { counter-increment: problem; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid #ded6e4; font: 400 clamp(1.35rem, 1.62vw, 1.8rem)/1.4 var(--font-display); }
.stair li::before { content: counter(problem, decimal-leading-zero) "."; color: #625a6d; }
.stair li:last-child { border-bottom: 0; }
.questions { display: grid; gap: .8rem; list-style: none; margin: 0 0 0 4.5rem; padding: 0; }
.questions li { color: #514a5d; font: 400 clamp(1.1rem, 1.35vw, 1.4rem)/1.4 var(--font-display); }
@media (max-width: 1080px) {
  #problem .wrap { width: min(88%, 48rem); }
  #problem .two-col { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 720px) {
  #problem { padding-block: 4rem; }
  #problem .wrap { width: 90%; }
  #problem h2 { font-size: clamp(2.55rem, 10vw, 3.65rem); margin-bottom: 1.75rem; }
  #problem .body { font-size: 1.05rem; }
  .stair li { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .55rem; padding: 1rem 0; font-size: clamp(1.12rem, 4.8vw, 1.4rem); }
  .questions { margin-left: 2.95rem; }
  .questions li { font-size: 1rem; }
  #problem .pullquote { margin-top: 3rem; padding-top: 2rem; }
  #problem .pullquote p { font-size: clamp(2.25rem, 8.2vw, 3.25rem); }
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  font-family: var(--font-display); font-size: var(--t-ui); font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.25rem; padding: 0 1.625rem; border-radius: 999px;
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Primary — flat deep plum (#1C0F24), white label. Hover deepens further, so
   the press reads as a deliberate step rather than a highlight. */
.btn--primary { background: var(--plum); color: #fff; }
.btn--primary:hover { background: #0d050f; color: #fff; }
.btn--primary:active { transform: translateY(1px); }
/* Secondary — plum label on white, never lightened. */
.btn--secondary { background: var(--bg); color: var(--plum); border-color: var(--chip-border); }
.btn--secondary:hover { background: var(--chip-fill); color: var(--plum); border-color: var(--brand); box-shadow: var(--shadow-offset-sm); }
.btn--secondary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--plum); }
.btn--ghost {
  background: transparent; color: var(--brand-deep); border-color: transparent;
  padding: 0 0.5rem; min-height: 2.75rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
}
.btn--ghost:hover { color: var(--plum); background: var(--chip-fill); }
.btn__arrow { flex: none; width: 1.5rem; height: 1.5rem; }

/* ---------- Header ------------------------------------------------------
   Bumble's navbar: the links live in one rounded track that floats over the
   page, and the item you are on — or hovering — fills as a lighter pill inside
   it. Measured from bumble.com rather than eyeballed (`tools/nav-recon.mjs`,
   RECON/bumble-nav.json): track radius 16px with a 1px hairline at 8% ink and
   a 16px gap, links 17px/20px at weight 500 with 14×22px padding and 0.3px
   tracking, the track 52px tall, no shadow.

   Two things stay ours. The palette: their cream-on-yellow becomes lavender on
   white, and the label colour stays --plum. Like Hinge, the sticky header is
   the same surface as the section beneath it - white, lavender, plum, or
   transparent over the hero - instead of becoming a separate glass panel. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg, transparent);
  border-bottom: none;
  transition: background-color .2s ease, transform .25s ease, opacity .2s ease;
}
.site-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* Dark panels and the hero share one high-contrast navbar treatment. The page
   script sets the tone from the section crossing the header. */
[data-nav-tone="dark"] .site-header .brand__word { color: #fff; }
[data-nav-tone="dark"] .site-header .brand__tile { background: transparent; }
[data-nav-tone="dark"] .site-header .brand__tile svg { color: #fff; }
[data-nav-tone="dark"] .site-header .nav__links {
  background: rgba(255, 255, 255, .14); border: none;
}
[data-nav-tone="dark"] .site-header .nav__links a { color: #fff; }
[data-nav-tone="dark"] .site-header .nav__links a:hover,
[data-nav-tone="dark"] .site-header .nav__links a[aria-current] {
  background: rgba(255, 255, 255, .22); border: none;
}
[data-nav-tone="dark"] .site-header :is(.btn--secondary, .nav__toggle) {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
[data-nav-tone="dark"] .site-header :is(.btn--secondary, .nav__toggle):hover {
  background: rgba(255, 255, 255, .16); color: #fff; border-color: #fff; box-shadow: none;
}
/* The crossing itself: colours ease rather than snap. */
.brand__word, .brand__tile, .brand__tile svg, .nav__toggle,
.nav__links, .nav__links a, .site-header .btn--secondary {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Three tracks, so the link track is centred on the page and not on whatever
   the brand and the Join button happen to measure. */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.6875rem; text-decoration: none; }
.brand__tile {
  width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #fff;
  display: grid; place-items: center; flex: none;
}
.brand__tile svg { width: 1.5rem; height: 1.75rem; color: #2e1652; }
.site-header .brand__tile { background: transparent; }
.brand__word { font-family: var(--font-wordmark); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.014em; color: var(--plum); }
.brand__accent { color: #5B2DA3; }
.site-header .brand__accent { color: #5B2DA3; }
.brand__initial { display: inline-block; line-height: 1; }
.nav__links {
  display: flex; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none;
  /* Track floats without an outer border, keeping the soft tint pill. */
  background: var(--soft); border: none; border-radius: 1rem;
}
.nav__links a {
  display: flex; align-items: center; font-family: var(--font-display);
  font-size: var(--t-ui); font-weight: 500; line-height: 1.25rem; letter-spacing: 0.3px;
  text-decoration: none; color: var(--plum);
  padding: 0.875rem 1.375rem; border-radius: 0.875rem; border: none;
  transition: background-color .18s var(--m-ease), color .2s ease;
}
/* Lighter than the track, the way Bumble's marked item is lighter than theirs. */
.nav__links a:hover,
.nav__links a[aria-current] { background: var(--bg); border: none; }
.nav__end { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }
.nav__end .btn { min-height: 2.75rem; padding: 0 1.25rem; }
.nav__toggle { display: none; }

/* ---------- Hero -------------------------------------------------------- */
.hero {
  --nav-bg: #fff; --nav-tone: light;
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--plum); background: #fff;
  min-height: calc(100svh - var(--header-h)); display: grid;
  grid-template-columns: minmax(5.5%, 1fr) minmax(0, 42rem) minmax(0, 42rem) minmax(5.5%, 1fr);
  grid-template-rows: auto; align-content: center; align-items: center;
  column-gap: clamp(1rem, 2vw, 3rem);
  padding: clamp(1.5rem, 4svh, 3.5rem) 0;
}
.hero__grid { position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 100%; display: block; text-align: left; }
.hero__copy { width: 100%; max-width: 43rem; }
.hero h1 {
  margin: 0 0 2rem; font: 400 clamp(4.25rem, 5.3vw, 6rem)/.98 var(--font-body);
  letter-spacing: -.025em; white-space: normal;
}
.hero h1 .marker { display: block; color: #9A7BE0; font-style: italic; font-weight: 400; white-space: normal; }
.hero__figure {
  position: relative; z-index: 0; grid-column: 3; grid-row: 1;
  width: calc(100% + 7vw); height: min(clamp(38rem, 51vw, 50rem), calc(100svh - var(--header-h) - 2rem)); margin: -4rem 0 -3rem -2rem; overflow: hidden;
}
.hero__figure picture { display: block; width: 100%; height: 100%; }
.hero__figure img {
  position: absolute; bottom: 0; right: 0; left: auto; width: 100%; max-width: none; height: 100%;
  object-fit: cover; object-position: center top; filter: none; transform: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 83%, transparent 100%);
  border: 0; border-radius: 0; box-shadow: none;
}
.hero .eyebrow { color: #8746a7; font-size: .95rem; letter-spacing: .17em; margin-bottom: 2.5rem; }
.hero__lead { max-width: 35rem; margin: 0; color: #4f4a67; font: 400 clamp(1.25rem, 1.55vw, 1.55rem)/1.42 var(--font-display); }
.hero__benefits {
  display: grid; grid-column: 3; grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(90%, 35rem); margin: 0 auto; padding: 0; list-style: none;
  color: var(--plum); text-align: center; font: 400 clamp(.98rem, 1.2vw, 1.15rem)/1.25 var(--font-display);
}
.hero__benefits li { min-width: 0; padding: 1rem .5rem; border: 0; }
.hero__benefits li:nth-child(2n) { border-left: 1px solid #d8ccdf; }
.hero__benefits li:nth-child(n+3) { border-top: 1px solid #d8ccdf; }
.hero__benefits--mobile { display: none; }
.hero__benefits--desktop {
  display: grid; grid-template-columns: .8fr 1.2fr 1fr .8fr;
  width: 100%; margin: 2.4rem 0 0; text-align: left;
  color: #4f4a67; font-size: clamp(.9rem, 1vw, 1.05rem);
}
.hero__benefits--desktop li { padding: 0 clamp(.7rem, 1.2vw, 1.2rem); border-top: 0; }
.hero__benefits--desktop li:first-child { padding-left: 0; }
.hero__benefits--desktop li + li { border-left: 1px solid #c9bed5; }
.hero__benefits--desktop li:nth-child(n+3) { border-top: 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1rem; margin-top: 2.7rem; }
.hero .btn--primary { min-height: 4.5rem; min-width: 15rem; background: var(--plum); color: #fff; font-weight: 500; }
.hero .btn--primary:hover { background: #0d050f; color: #fff; }
.hero .btn--ghost { min-height: 4.5rem; min-width: 15rem; padding-inline: 1.5rem; border-color: #8746a7; color: var(--brand-deep); text-decoration: none; }
.hero .btn--ghost:hover { color: var(--plum); background: var(--soft); }
.hero__caption {
  margin: 2.2rem 0 0; color: #625b73; font: 400 1rem/1.4 var(--font-display);
}
@media (max-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; padding: 0; }
  .hero__grid { grid-column: 1; grid-row: 1; width: min(88%, 46rem); margin-inline: auto; padding-block: clamp(3rem, 7vw, 5rem) 1rem; }
  .hero__copy { max-width: 46rem; }
  .hero h1 { font-size: clamp(3.4rem, 6.6vw, 5.5rem); }
  .hero__figure { grid-column: 1; grid-row: 2; width: min(100%, 46rem); height: clamp(24rem, 60vw, 34rem); margin: 0 auto; overflow: visible; }
  .hero__figure img { right: auto; left: 50%; width: 120%; height: auto; object-fit: contain; transform: translateX(-50%); }
  .hero__benefits--desktop { display: none; }
  .hero__benefits--mobile { display: grid; grid-column: 1; grid-row: 3; width: min(88%, 35rem); margin: 0 auto 3rem; }
}
@media (min-width: 721px) and (max-width: 1200px) {
  .hero {
    grid-template-columns: 5% minmax(0, 1.1fr) minmax(0, .9fr) 5%;
    grid-template-rows: auto; min-height: calc(100svh - var(--header-h));
    align-content: center; column-gap: clamp(.75rem, 2vw, 1.5rem);
    padding: clamp(1.5rem, 3svh, 2.5rem) 0;
  }
  .hero__grid { grid-column: 2; grid-row: 1; width: 100%; margin: 0; padding: 0; }
  .hero__copy { max-width: none; }
  .hero h1 { margin-bottom: 1rem; font-size: clamp(2.8rem, 4.4vw, 4rem); }
  .hero__lead { font-size: clamp(1rem, 1.5vw, 1.2rem); }
  .hero__figure {
    grid-column: 3; grid-row: 1; width: calc(100% + 5vw); height: auto;
    aspect-ratio: 1327 / 1186; margin: 0 0 0 -1rem; overflow: visible;
  }
  .hero__figure img {
    position: absolute; right: auto; bottom: 0; left: 0;
    width: 100%; height: 100%; object-fit: contain; transform: none;
  }
  .hero__benefits--desktop {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.4rem; font-size: .9rem;
  }
  .hero__benefits--desktop li { padding: .45rem .7rem; border: 0; }
  .hero__benefits--desktop li:first-child { padding-left: .7rem; }
  .hero__benefits--desktop li:nth-child(2n) { border-left: 1px solid #c9bed5; }
  .hero__benefits--desktop li:nth-child(n+3) { border-top: 1px solid #c9bed5; }
  .hero__benefits--mobile { display: none; }
  .hero__actions { margin-top: 1.3rem; gap: .6rem; }
  .hero .btn--primary, .hero .btn--ghost { min-width: 0; min-height: 3.5rem; }
  .hero__caption { margin-top: 1rem; }
}
@media (min-width: 900px) and (max-width: 1200px) and (orientation: landscape) {
  .hero h1 { font-size: clamp(3.5rem, 5.8vw, 4.5rem); }
  .hero__lead { font-size: clamp(1.15rem, 1.75vw, 1.35rem); }
  .hero__benefits--desktop { font-size: 1.05rem; }
  .hero__figure { width: calc(100% + 13vw); margin-left: -2rem; }
  .hero .btn--primary, .hero .btn--ghost { min-height: 3.75rem; }
  .hero__caption { font-size: 1.05rem; }
}
@media (min-width: 1201px) and (max-height: 700px) {
  .hero h1 { margin-bottom: 1.2rem; font-size: clamp(3.25rem, 4.5vw, 4.7rem); }
  .hero__benefits--desktop { margin-top: 1.2rem; }
  .hero__actions { margin-top: 1.4rem; }
  .hero .btn--primary, .hero .btn--ghost { min-height: 3.5rem; }
  .hero__caption { margin-top: 1rem; }
}
@media (max-width: 720px) {
  .hero__grid { padding-block: 2rem .75rem; }
  .hero .eyebrow { margin-bottom: 1.25rem; font-size: .72rem; }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 3.5rem); margin-bottom: 1.25rem; line-height: 1.05; }
  .hero h1 .marker { white-space: nowrap; }
  .hero__lead { margin-bottom: 0; font-size: clamp(1rem, 4.2vw, 1.15rem); }
  .hero__actions { margin-top: 1.6rem; gap: .65rem; }
  .hero__actions .btn { width: 100%; min-width: 0; min-height: 3.6rem; }
  .hero__caption { margin-top: 1.3rem; font-size: .95rem; }
  .hero__figure { height: auto; aspect-ratio: 1327 / 1186; }
  .hero__figure img { width: 100%; }
  .hero__benefits--mobile { width: min(88%, 35rem); margin: .25rem auto 2.5rem; font-size: clamp(.94rem, 3.8vw, 1.1rem); }
  .hero__benefits--mobile li { padding: 1rem .35rem; }
}

/* ---------- Chips ------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.chips li {
  font-family: var(--font-display); font-size: var(--t-ui); font-weight: 500; line-height: 1.3;
  background: var(--chip-fill); color: var(--brand-deep);
  border: 1px solid var(--chip-border); border-radius: var(--r-chip);
  padding: 0.5rem 0.875rem;
}
#belief { --nav-bg: var(--page-tint); background: var(--page-tint); color: var(--plum); }
#belief .eyebrow { color: var(--brand); }
#belief .two-col { align-items: center; }
#belief h2 {
  max-width: 39rem; margin: 0 0 1.5rem;
  font: 700 clamp(2.5rem, 4.2vw, 3.75rem)/1.04 var(--font-display);
  letter-spacing: -0.035em;
}
#belief h2 em { color: #9A7BE0; }
#belief .belief-summary em { color: #9A7BE0; }
.belief-pills { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.belief-pills li {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.375rem 0.875rem; border: 1px solid var(--chip-border); border-radius: 999px;
  background: var(--chip-fill); color: var(--plum);
  font: 500 var(--t-ui)/1.35 var(--font-display);
}
.belief-pill__icon {
  display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center;
  border: 1px solid rgba(91, 45, 163, .12); border-radius: 50%; background: #fff; color: var(--brand-deep);
}
.belief-pill__icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.belief-pills { --m-enter: 320ms; --m-step: 240ms; }
.belief-summary {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #d8d8d8;
  color: var(--plum); font: 700 clamp(1.5rem, 2.5vw, 2rem)/1.13 var(--font-display);
}
.belief-summary p { margin: 0; }
.belief-summary em { display: block; margin-top: 0.5rem; }
.belief-phone {
  position: relative; width: min(100%, 22rem); margin: 0 auto; padding: 8px;
  border: 2px solid #59555e; border-radius: 46px; overflow: visible; isolation: isolate;
  background: #141217;
  box-shadow: 0 18px 40px rgb(28 15 36 / 16%), inset 0 0 0 2px #28252d;
}
.belief-phone::before {
  content: ""; position: absolute; z-index: 3; top: .7rem; left: 50%; transform: translateX(-50%);
  width: 5.25rem; height: 1.55rem; border-radius: 999px; background: #080709;
}
.belief-phone__screen {
  width: 100%; aspect-ratio: 1178 / 2556; overflow: hidden;
  border-radius: 37px; clip-path: inset(0 round 37px); contain: paint;
}
.belief-phone__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.belief-phone__left-buttons, .belief-phone__right-button {
  position: absolute; z-index: 4; width: 3px; background: #302c35;
}
.belief-phone__left-buttons {
  left: -3px; top: 7rem; height: 2rem; border-radius: 2px 0 0 2px;
  box-shadow: 0 2.4rem 0 #302c35;
}
.belief-phone__right-button {
  right: -3px; top: 8rem; height: 3.4rem; border-radius: 0 2px 2px 0;
}
.statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.statement em { font-style: normal; color: #9A7BE0; }

/* ---------- Differentiator collage ------------------------------------ */
#differentiator { overflow: hidden; }
#differentiator { --nav-bg: var(--page-tint); background: var(--page-tint); }
#differentiator .wrap { width: min(90%, 110rem); }
.diff-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1.05fr; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.diff-copy { position: relative; z-index: 1; }
.diff-copy .eyebrow {
  font: 700 var(--t-label)/1 var(--font-display); letter-spacing: .32em;
}
.diff-copy h2 { margin: 0 0 1.25rem; color: var(--ink); font: 700 clamp(2.5rem, 4.25vw, 4.125rem)/1.05 var(--font-display); letter-spacing: -.02em; }
.diff-copy > p:not(.eyebrow) { margin: 0; color: #9A7BE0; font: 500 clamp(1.625rem, 2.6vw, 2.5rem)/1.12 var(--font-body); }
.diff-collage { position: relative; min-height: 33rem; }
.diff-photo { position: absolute; margin: 0; background: #fffdf9; box-shadow: 0 1.1rem 2.75rem rgba(28, 15, 36, .16); }
.diff-photo img { width: 100%; height: 100%; object-fit: cover; }
.diff-photo--main {
  z-index: 2; top: .75rem; left: 16%; width: 76%; height: 23.5rem;
  padding: .9rem .9rem 4.25rem; transform: rotate(7deg);
}
.diff-photo--main figcaption {
  position: absolute; right: 1rem; bottom: .45rem; left: 20%; text-align: left;
  color: #5d4d68; font: 600 1.45rem/1.25 var(--font-hand); transform: rotate(-1deg);
}
.diff-photo--small { z-index: 1; left: 0; bottom: -1.75rem; width: 58%; height: 13.5rem; padding: .75rem .75rem 2.5rem; transform: rotate(-5deg); }
.diff-tape { position: absolute; z-index: 3; top: -.1rem; left: 47%; width: 6rem; height: 1.9rem; background: rgba(203, 168, 238, .78); transform: rotate(9deg); }
.diff-note { position: absolute; z-index: 3; left: -31%; bottom: -5%; color: #5d4d68; font: 600 1.3rem/1.1 var(--font-hand); transform: rotate(-9deg); text-align: center; }
.diff-note svg { display: block; width: 4.25rem; height: 3rem; margin: .15rem 0 0 3.5rem; color: #8c65b4; }
.diff-doodle { position: absolute; z-index: 3; top: -2.4rem; right: 2%; width: 4.5rem; height: 3.4rem; color: #8c65b4; }
.diff-principles { margin: 0; padding: 0; list-style: none; }
.diff-principles li { display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; gap: 1.1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--chip-border); color: var(--plum); font: 400 clamp(1.05rem, 1.25vw, 1.3rem)/1.4 var(--font-body); }
.diff-principles li:first-child { border-top: 1px solid var(--chip-border); }
.diff-principles li:last-child { border-bottom: 0; }
.diff-principles svg { width: 3.4rem; height: 3.4rem; padding: .8rem; border-radius: 50%; background: var(--chip-fill); color: var(--brand-deep); }
.diff-grid .statement { position: relative; margin-top: 2.25rem; font: 700 clamp(1.625rem, 2.5vw, 2.375rem)/1.2 var(--font-display); }
.diff-grid .statement .brush {
  position: relative; display: inline-block; padding: .1em .45em .12em .55em; margin-left: -.55em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M10 20 C55 9 150 5 290 11 C297 20 296 40 287 47 C210 56 85 57 16 51 C5 43 2 29 10 20 Z' fill='%23e2cff6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.diff-grid .statement .sparkle { position: absolute; top: -.4rem; right: -2.9rem; width: 2.4rem; height: 2.4rem; color: var(--brand); }
.diff-grid .statement { padding-right: 3rem; }
.diff-grid .statement .sparkle { right: 0; }
@media (max-width: 720px) {
  .diff-grid .statement .sparkle { display: none; }
  /* The pinned canvas becomes a flowing stack: the polaroids size themselves
     from their photographs, so the collage can neither collapse to nothing nor
     let the decorations land where the photos aren't. */
  .diff-collage { min-height: 0; padding: .75rem 0 .5rem; }
  .diff-photo--main {
    position: relative; inset: auto; z-index: 2;
    width: min(100%, 21rem); height: auto; margin: 0 auto;
    /* Deep bottom frame: the caption lives in its top half and the small
       photo tucks over the empty lower half, so neither hides the other. */
    padding: .7rem .7rem 4.75rem; transform: rotate(3deg);
  }
  .diff-photo--main img { height: auto; aspect-ratio: 5 / 4; }
  /* The caption joins the frame as a flowing line; pinned to the bottom it
     would sit exactly where the small photo overlaps. */
  .diff-photo--main figcaption {
    position: static; margin: .5rem .25rem 0; transform: rotate(-1deg);
  }
  .diff-photo--small {
    position: relative; inset: auto; z-index: 3;
    width: min(62%, 12.5rem); height: auto; margin: -2.25rem 0 0 3%;
    padding: .6rem .6rem 2.1rem; transform: rotate(-5deg);
  }
  .diff-photo--small img { height: auto; aspect-ratio: 5 / 4; }
  .diff-tape { top: .1rem; left: 57%; }
  .diff-note {
    left: auto; right: 0; bottom: 3rem; width: 32%;
    margin: 0; font-size: clamp(1rem, 5vw, 1.3rem); transform: rotate(-6deg);
  }
  .diff-note svg { margin: .15rem 0 0; transform: scaleX(-1); }
  .diff-doodle { display: none; }
}

/* ---------- Connection preferences ------------------------------------ */
#dating { --nav-bg: var(--page-tint); background: var(--page-tint); }
#dating > .wrap { width: min(90%, 80rem); }
.connection-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center; gap: clamp(3rem, 7vw, 7rem);
}
.connection-copy h2 {
  max-width: 13ch; margin: 0 0 1.5rem; color: var(--plum);
  font: 400 clamp(3rem, 4.8vw, 4.75rem)/1.08 var(--font-body); letter-spacing: -.025em;
}
.connection-copy h2 em { color: #9A7BE0; font-weight: 400; }
.connection-copy .body { max-width: 32ch; margin: 0; color: #62566d; font: 400 clamp(1.1rem, 1.4vw, 1.3rem)/1.6 var(--font-body); }
.blueprint { min-width: 0; }
.blueprint__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.blueprint__header h3 { margin: 0; color: var(--plum); font: 600 1.5rem/1.2 var(--font-display); }
.blueprint__example { color: #62566d; font: 400 .95rem/1.4 var(--font-display); }
.preference-list { margin: 0; font: 400 1.0625rem/1.5 var(--font-display); }
.preference-list > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.5rem; padding: 1.1rem 0; border-top: 1px solid #ddd5df; }
.preference-list dt { color: #62566d; }
.preference-list dd { margin: 0; color: var(--plum); font-weight: 500; }
.blueprint__cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #ddd5df; }
.blueprint__cta p { margin: 0; max-width: 20ch; color: #62566d; font: 400 1rem/1.5 var(--font-display); }
.blueprint__cta .btn { gap: 1rem; flex-shrink: 0; margin-left: auto; }
.blueprint__cta .btn__arrow { width: 1.2rem; height: 1.2rem; }
@media (max-width: 900px) {
  .connection-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .connection-copy h2 { max-width: 17ch; }
  .connection-copy .body { max-width: 45ch; }
}
@media (max-width: 480px) {
  .connection-copy h2 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .preference-list > div { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
  .blueprint__cta { align-items: stretch; flex-direction: column; gap: 1rem; }
  .blueprint__cta p { max-width: none; }
  .blueprint__cta .btn { justify-content: center; }
}

/* ---------- Date and Community ---------------------------------------- */
#modes { --nav-bg: var(--page-tint); background: var(--page-tint); padding-block: var(--section-gap); }
#modes .wrap { width: min(90%, 90rem); }
.modes__heading { margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }
.modes__heading h2 { margin: 0; font: 700 clamp(2.5rem, 4.5vw, 4rem)/1.08 var(--font-display); letter-spacing: -.02em; }
.modes { display: grid; grid-template-columns: 1fr; gap: 0; }
.mode { display: grid; grid-template-columns: 1.45fr .85fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.mode + .mode { padding-top: clamp(1.5rem, 2.5vw, 2.5rem); border-top: 1px solid var(--border); }
.mode--community { grid-template-columns: .85fr 1.45fr; }
.mode__media { position: relative; z-index: 0; isolation: isolate; margin: 0; padding: .65rem; border-radius: 2rem; background: #fff; box-shadow: 0 .75rem 2.5rem rgba(28, 15, 36, .08); transform: perspective(900px) rotateX(0) rotateY(0); transition: transform 220ms ease, box-shadow 220ms ease; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .mode__media:hover { box-shadow: 0 1.25rem 3rem rgba(28, 15, 36, .14); transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px); }
}
.mode__media::before { content: ""; position: absolute; z-index: -1; inset: -.5rem .15rem .35rem -.65rem; border-radius: 2rem; background: var(--chip-fill); transform: rotate(-1.5deg); }
.mode--community .mode__media::before { transform: rotate(1.5deg); }
.mode__media img { position: relative; display: block; width: 100%; aspect-ratio: 1.8 / 1; object-fit: cover; object-position: center; border-radius: 1.5rem; }
.mode--community .mode__media img { object-position: center 38%; }
.mode__copy { max-width: 30rem; }
.mode--community .mode__copy { grid-column: 1; grid-row: 1; }
.mode--community .mode__media { grid-column: 2; grid-row: 1; }
.mode__index { display: flex; align-items: center; gap: .85rem; margin: 0 0 .7rem; color: var(--brand); font: 700 1rem/1 var(--font-display); }
.mode--community .mode__index { color: var(--brand); }
.mode__copy h3 { margin: 0 0 .5rem; color: var(--plum); font: 700 clamp(2.5rem, 4vw, 4rem)/1.05 var(--font-display); letter-spacing: -.02em; }
.mode--community .mode__copy h3 { font-size: clamp(2.5rem, 3.3vw, 3.5rem); }
.mode__copy > p:not(.mode__index) { max-width: 25ch; margin: 0 0 1.5rem; color: var(--plum); font: 400 clamp(1.1rem, 1.6vw, 1.5rem)/1.45 var(--font-display); }
.mode__copy .btn { min-width: 18rem; min-height: 3.5rem; justify-content: space-between; padding-inline: 1.8rem; }
.mode__copy .btn__arrow { width: 1.25rem; height: 1.25rem; }
@keyframes mode-from-left { from { opacity: 0; translate: -3rem 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mode-from-right { from { opacity: 0; translate: 3rem 0; } to { opacity: 1; translate: 0 0; } }
[data-motion="on"] #modes .modes.is-in > .mode--dating { animation: mode-from-left 750ms var(--m-ease) both; }
[data-motion="on"] #modes .modes.is-in > .mode--community { animation: mode-from-right 750ms var(--m-ease) 850ms both; }

/* ---------- Trust & Safety ----------------------------------------------- */
#safety { --nav-bg: var(--page-tint); background: var(--page-tint); color: var(--plum); padding-block: clamp(4rem, 5vw, 5rem); }
#safety .safety-duo {
  width: min(88%, 90rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 4.5vw, 5rem);
  align-items: start;
}
#safety .safety-duo__copy { align-self: stretch; padding: clamp(7rem, 13vw, 14rem) 0 0 2vw; }
#safety .eyebrow { color: #9b71b6; letter-spacing: .2em; margin-bottom: 1.65rem; }
#safety .safety-duo__title {
  margin: 0 0 1.7rem;
  font: 400 clamp(2.75rem, 4vw, 4.5rem)/.98 var(--font-body);
  letter-spacing: -.025em; white-space: nowrap; translate: 0 1rem;
}
#safety .safety-duo__title em { color: #8754a6; font-weight: 400; }
#safety .safety-duo__lead {
  max-width: 37rem; margin: clamp(4rem, 6vw, 6rem) 0 0;
  color: #77717d; font: 400 clamp(1.35rem, 1.9vw, 1.9rem)/1.28 var(--font-body);
  letter-spacing: -.02em;
}
#safety .safety-list { counter-reset: safety; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
#safety .safety-list li {
  counter-increment: safety;
  display: grid; grid-template-columns: 5.5rem 1px minmax(0, 1fr) 2.5rem;
  align-items: center; gap: clamp(1rem, 1.8vw, 2rem);
  min-height: 7.5rem; padding: 1rem 1.5rem;
  border: 1px solid #ebe5f0; border-radius: 1.6rem;
  background: #fefcff;
}
#safety .safety-list li::before {
  content: counter(safety, decimal-leading-zero); grid-column: 4; grid-row: 1;
  justify-self: end; color: #b99ad0;
  font: 600 clamp(1.2rem, 1.5vw, 1.6rem)/1 var(--font-display);
}
#safety .safety-list li::after {
  content: ""; grid-column: 2; grid-row: 1;
  width: 1px; height: 4.25rem; background: #dfd1e8;
}
#safety .safety-tag {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center; width: 5.5rem; height: 5.2rem;
  border-radius: 1.25rem; background: #f7effb; color: #5c3d77;
  font: 600 .72rem/1 var(--font-display); text-transform: uppercase;
}
#safety .safety-list li > div { grid-column: 3; grid-row: 1; min-width: 0; }
#safety .safety-list h3 { margin: 0 0 .35rem; font: 700 clamp(1.2rem, 1.55vw, 1.6rem)/1.16 var(--font-display); letter-spacing: -.025em; }
#safety .safety-list p { margin: 0; color: #89838d; font: 400 clamp(1rem, 1.25vw, 1.25rem)/1.3 var(--font-display); }
@media (max-width: 1100px) {
  #safety .safety-duo { width: min(88%, 48rem); grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  #safety .safety-duo__copy { padding: 0; }
  #safety .safety-duo__title { font-size: clamp(3rem, 6.5vw, 4.5rem); }
  #safety .safety-duo__lead { margin-top: 0; }
}
@media (max-width: 600px) {
  #safety { padding-block: 3.5rem; }
  #safety .safety-duo { width: 90%; gap: 2rem; }
  #safety .eyebrow { margin-bottom: 1.25rem; }
  #safety .safety-duo__title { font-size: clamp(1.85rem, 8.5vw, 3rem); margin-bottom: 1.25rem; translate: 0 .25rem; }
  #safety .safety-duo__lead { font-size: 1.2rem; line-height: 1.4; }
  #safety .safety-list { gap: .75rem; }
  #safety .safety-list li {
    grid-template-columns: 4.5rem 1px minmax(0, 1fr) 1.5rem;
    gap: .75rem; min-height: 6.25rem; padding: .7rem;
    border-radius: 1.1rem;
  }
  #safety .safety-tag { width: 4.5rem; height: 4.5rem; border-radius: .9rem; font-size: .65rem; }
  #safety .safety-list li::after { height: 3.5rem; }
  #safety .safety-list h3 { font-size: 1rem; }
  #safety .safety-list p { font-size: .88rem; }
  #safety .safety-list li::before { font-size: 1rem; }
}

/* ---------- Honest list (When it doesn't work) -------------------------- */
.rule-list { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 42rem; }
.rule-list li {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.5;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.rule-list li:first-child { border-top: 1px solid var(--border); }
#honest { --nav-bg: var(--page-tint); isolation: isolate; overflow: hidden; padding: 0; background: var(--page-tint); }
#honest .wrap { width: min(90%, 116rem); }
.honest-layout {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.25rem, 2.5vw, 3rem);
  min-height: clamp(34rem, 42vw, 50rem); padding-block: var(--section-gap);
}
.honest-copy .eyebrow { color: #a27aac; letter-spacing: .15em; }
.honest-copy h2 { margin: 0 0 clamp(1.5rem, 2vw, 2.5rem); color: var(--ink); font: 700 clamp(2.65rem, 4.2vw, 4.5rem)/1.05 var(--font-display); letter-spacing: -.02em; }
.honest-copy h2 em { color: var(--ink); font-style: italic; }
.honest-copy .honest-lead { margin: 0 0 1.25rem; color: var(--ink); font: 500 clamp(1.65rem, 2.2vw, 2.8rem)/1.18 var(--font-body); }
.honest-copy .body { max-width: 38rem; margin: 0; color: #62586b; font: 400 clamp(1.05rem, 1.3vw, 1.45rem)/1.5 var(--font-body); }
.honest-photo { width: 100%; margin: 0; }
.honest-photo img { display: block; width: 100%; height: auto; aspect-ratio: .96; object-fit: cover; object-position: center; }
.rule-list.honest-rules { counter-reset: honest; max-width: none; margin: 0; }
.rule-list.honest-rules li {
  counter-increment: honest; display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: clamp(.75rem, 1.25vw, 1.5rem);
  min-height: clamp(6rem, 7.4vw, 9.5rem); padding: 1rem 0; border-top: 0; border-bottom: 1px solid #ded8df;
  color: var(--ink); font: 400 clamp(1.05rem, 1.45vw, 1.75rem)/1.3 var(--font-body);
}
.rule-list.honest-rules li:last-child { border-bottom: 0; }
.honest-rules li::before {
  content: counter(honest, decimal-leading-zero);
  color: #aa87b4; font: 400 clamp(1.75rem, 2.3vw, 2.5rem)/1 var(--font-body);
}
.honest-rules li span { display: flex; align-items: center; min-height: 3.2rem; padding-left: clamp(1rem, 1.5vw, 1.75rem); border-left: 1px solid #cbaed1; }
@media (min-width: 701px) and (max-width: 1050px) {
  #honest .wrap { width: min(90%, 110rem); }
  .honest-layout { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1rem, 2vw, 2rem); }
}
@media (max-width: 1050px) {
  .honest-rules { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (max-width: 700px) {
  #honest .wrap { width: min(90%, 110rem); }
  .honest-layout { grid-template-columns: 1fr; gap: 2rem; padding-block: 4rem; }
  .honest-photo { max-width: 30rem; }
  .honest-rules { grid-column: auto; grid-template-columns: 1fr; }
}

/* ---------- Community --------------------------------------------------- */
#community { --nav-bg: var(--page-tint); padding-block: 0 var(--section-gap); background: var(--page-tint); overflow: clip; }
#community .community-intro {
  position: relative; z-index: 1; display: grid;
  width: 100vw; margin-left: calc(50% - 50vw);
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  min-height: clamp(39rem, 48vw, 48rem);
  background: var(--page-tint);
}
.community-intro__copy {
  align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(3rem, 6vw, 5rem) 1rem 4rem max(6vw, 2rem);
}
.community-intro h2 { margin: 0 0 1rem; color: #09070B; font: 600 clamp(2.9rem, 4vw, 5rem)/1 var(--font-body); letter-spacing: -.055em; }
.community-intro h2 span { letter-spacing: -.06em; }
.community-intro__lead { margin: clamp(3rem, 5vw, 5rem) 0 1.4rem; color: #7655b7; font: italic 500 clamp(1.35rem, 1.8vw, 2rem)/1.2 var(--font-body); }
.community-intro__description { max-width: 35rem; margin: 0 0 1.8rem; color: #443269; font: 400 clamp(1.05rem, 1.3vw, 1.45rem)/1.36 var(--font-body); }
.community-intro__cta { min-height: 3.25rem; margin: auto 0 0; padding-inline: 1.5rem; justify-content: center; background: var(--plum); font: 500 1rem/1 var(--font-body); }
.community-intro__cta:hover,
.community-intro__cta:active { background: var(--plum); }
.community-intro__visual { display: grid; place-items: center; min-width: 0; min-height: 39rem; overflow: hidden; background: var(--page-tint); }
.community-intro__video {
  display: block; width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(#000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 82%, transparent 100%);
}
@media (min-width: 901px) and (max-width: 1050px) {
  .community-intro__copy { padding: 2.5rem 1rem 2.5rem 4vw; }
  .community-intro h2 { font-size: clamp(2.6rem, 4vw, 3rem); }
  .community-intro__lead { margin-top: 2rem; }
  .community-intro__description { font-size: 1.05rem; }
  .community-intro__visual { min-height: 0; }
}
@media (max-width: 900px) {
  #community .community-intro { grid-template-columns: 1fr; min-height: 0; }
  .community-intro__copy { padding: 4rem 6% 2rem; }
  .community-intro__lead { margin-top: 1.5rem; }
  .community-intro__cta { margin: 1.5rem 0 0; }
  .community-intro__visual { width: min(100%, 56rem); min-height: 0; margin: auto; }
}
@media (max-width: 600px) {
  .community-intro__copy { padding: 3rem 6% 1rem; }
  .community-intro h2 { font-size: clamp(2.8rem, 10vw, 4rem); }
  .community-intro__lead { font-size: clamp(1.25rem, 5vw, 1.7rem); }
  .community-intro__description { font-size: 1.05rem; }
}
@media (max-width: 480px) {
  .community-intro__cta { max-width: 100%; padding-inline: 1rem; font-size: .9rem; }
}
/* ---------- Community how it works ------------------------------------ */
.community-flow { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(3rem, 4vw, 5rem) max(4vw, 2rem) 1rem; background: var(--page-tint); }
.community-flow__eyebrow { margin: 0 0 .65rem; color: #9a75d4; font: 700 .78rem/1.2 var(--font-display); letter-spacing: .28em; text-transform: uppercase; }
.community-flow h3 { margin: 0; color: var(--brand-deep); font: 400 clamp(2.25rem, 3.7vw, 4.25rem)/1.08 var(--font-body); letter-spacing: -.035em; }
.community-flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(2rem, 2.4vw, 3rem); margin: clamp(2.5rem, 4vw, 5rem) 0 0; padding: 0; list-style: none; }
.community-flow__steps li { position: relative; min-width: 0; min-height: 12rem; padding: 1.1rem clamp(1rem, 1.1vw, 1.35rem); border: 1px solid #eee9f2; border-radius: 1rem; box-shadow: 0 .25rem 1rem #2e165208; }
.community-flow__steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(1rem, 1.2vw, 1.5rem));
  width: .65rem;
  height: .65rem;
  border-top: 2px solid #7651a4;
  border-right: 2px solid #7651a4;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
.community-flow__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .7rem; border-radius: 50%; background: #f5edfc; color: #7130a9; }
.community-flow__icon svg { width: 1.5rem; height: 1.5rem; }
.community-flow__number { display: block; color: #5b3584; font: 700 1rem/1.2 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.community-flow__steps strong { display: block; margin-top: .2rem; color: var(--brand-deep); font: 600 clamp(1.15rem, 1.4vw, 1.6rem)/1.12 var(--font-body); }
.community-flow__steps p { margin: .3rem 0 0; color: #655d6e; font: 400 clamp(.9rem, 1vw, 1.1rem)/1.35 var(--font-display); }
.community-flow__story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.community-flow__story img { display: block; width: 100%; aspect-ratio: 1.7; object-fit: cover; border-radius: 1rem; }
.community-flow__story h3 { max-width: 16ch; margin: 0 0 1.2rem; font-size: clamp(2rem, 3.2vw, 3.7rem); }
.community-flow__story p:not(.community-flow__eyebrow) { max-width: 37rem; margin: 0 0 1.1rem; color: #625b6b; font: 400 clamp(1rem, 1.15vw, 1.3rem)/1.5 var(--font-display); }
.community-flow__story strong { color: var(--brand-deep); font: 600 clamp(1.1rem, 1.3vw, 1.5rem)/1.3 var(--font-body); }
.community-flow__join { margin-top: clamp(2.5rem, 4vw, 5rem); padding: 1.5rem 0 1rem; border-top: 1px solid #e6dff0; text-align: center; }
.community-flow__join p { margin: .8rem 0 1.25rem; color: #655d6e; font: 400 clamp(1rem, 1.2vw, 1.35rem)/1.4 var(--font-display); }
.community-flow__join .btn { background: var(--plum); }
.community-flow__join .btn:hover { background: #0d050f; }
@media (max-width: 1200px) {
  .community-flow__steps { grid-template-columns: 1fr; gap: 0; max-width: 48rem; margin-inline: auto; }
  .community-flow__steps li::after { display: none; }
  .community-flow__steps li {
    display: grid; grid-template-columns: 4.25rem minmax(0, 1fr);
    grid-template-rows: auto auto auto; column-gap: 1rem; align-content: center;
    min-height: 8.5rem; padding: 1.15rem .25rem;
    border: 0; border-bottom: 1px solid #e5deed; border-radius: 0; box-shadow: none;
  }
  .community-flow__steps li:last-child { border-bottom: 0; }
  .community-flow__steps li::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 2rem;
    width: 1px; background: #ddc9ee;
  }
  .community-flow__steps li:first-child::before { top: 2.5rem; }
  .community-flow__steps li:last-child::before { bottom: calc(100% - 2.5rem); }
  .community-flow__icon {
    position: relative; z-index: 1; grid-column: 1; grid-row: 1 / 4;
    width: 3.5rem; height: 3.5rem; margin: 0;
  }
  .community-flow__icon svg { width: 1.8rem; height: 1.8rem; }
  .community-flow__number { grid-column: 2; grid-row: 1; color: #9a75c1; font-size: 1.1rem; }
  .community-flow__steps strong { grid-column: 2; grid-row: 2; margin-top: .2rem; font-size: clamp(1.7rem, 6vw, 2.2rem); }
  .community-flow__steps p { grid-column: 2; grid-row: 3; margin-top: .4rem; font-size: 1.1rem; }
  .community-flow__story { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
  .community-flow__story { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }
}
@media (max-width: 700px) {
  .community-flow { padding-inline: 6%; }
  .community-flow__steps { max-width: none; }
  .community-flow__steps li { min-height: 8rem; padding-block: 1rem; }
  .community-flow__steps p { font-size: 1rem; }
  .community-flow__story { grid-template-columns: 1fr; gap: 1.5rem; }
  .community-flow__story img { aspect-ratio: 1.5; }
}
@media (max-width: 420px) {
  .community-flow__join .btn { max-width: 100%; padding-inline: 1rem; font-size: .9rem; }
}

/* ---------- Philosophy -------------------------------------------------- */
#philosophy { --nav-bg: var(--page-tint); background: var(--page-tint); color: var(--brand-deep); padding: 0; }
#philosophy .philosophy-layout {
  width: min(90%, 116rem); margin-inline: auto; padding-block: var(--section-gap);
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 5vw, 7rem); align-items: center;
}
.philosophy-copy { padding-left: clamp(0rem, 1.5vw, 2rem); }
.philosophy-copy .eyebrow { color: var(--brand); letter-spacing: .2em; margin-bottom: 1.25rem; }
.philosophy-copy h2 { max-width: 21ch; margin: 0 0 1rem; color: var(--plum); font: 700 clamp(3rem, 4.1vw, 4.3rem)/.98 var(--font-display); letter-spacing: -.02em; }
.philosophy-copy .philosophy-lead { margin: 0 0 clamp(1.5rem, 2vw, 2.5rem); color: #62586b; font: 400 clamp(1.6rem, 2.1vw, 2.7rem)/1.2 var(--font-body); }
.philosophy-willing { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 2.2rem; list-style: none; padding: 0; margin: 0 0 clamp(2rem, 2.5vw, 3rem); }
.philosophy-willing::before { content: ""; position: absolute; left: 50%; top: .3rem; bottom: .3rem; width: 1px; background: #e7e0f2; }
.philosophy-willing li { display: flex; align-items: center; gap: .8rem; color: #62586b; font: 400 clamp(1rem, 1.25vw, 1.7rem)/1.35 var(--font-body); }
.philosophy-willing svg { flex: none; box-sizing: content-box; width: 1.4rem; height: 1.4rem; padding: .5rem; border-radius: 50%; background: #f3edfb; color: #7c5fa8; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.philosophy-copy .philosophy-statement { max-width: 48rem; margin: 0; color: var(--plum); font: 500 clamp(1.3rem, 1.7vw, 2.25rem)/1.2 var(--font-display); letter-spacing: -.02em; }
.philosophy-statement em { display: block; margin-top: .4rem; color: #824bb5; font-style: italic; }
.philosophy-photo {
  margin: 0;
  /* Stretch past the centered container to the viewport's right edge, then
     carve the left side into one organic arc — a cutout, not a card. */
  margin-right: calc((min(90vw, 116rem) - 100vw) / 2);
  clip-path: ellipse(78% 50% at 100% 50%);
}
.philosophy-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 1050px) {
  #philosophy .philosophy-layout { grid-template-columns: 1fr; width: min(88%, 48rem); gap: 2.5rem; padding-block: 4rem; }
  .philosophy-copy { padding-left: 0; }
  .philosophy-photo { margin-right: calc((min(88vw, 48rem) - 100vw) / 2); }
}
@media (max-width: 600px) {
  /* Keep the two columns on phones — the phrases are short, and one long
     column of eight lines reads like filler. */
  .philosophy-willing { gap: .35rem 1rem; }
}

#philosophy { background: var(--page-tint); overflow: hidden; margin-top: var(--section-gap); }
#philosophy .philosophy-layout {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 49% 51%;
  gap: 0;
  align-items: stretch;
  min-height: 824px;
}
#philosophy .philosophy-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 58px 48px 48px max(4vw, calc((100vw - 1368px) / 2));
}
#philosophy .eyebrow { color: #9871b4; margin: 0 0 28px; font-size: 13px; letter-spacing: .24em; }
#philosophy h2 { font-size: 58px; line-height: .98; letter-spacing: 0; margin: 0 0 14px; max-width: none; }
#philosophy .philosophy-lead { font-size: 34px; line-height: 1.15; margin-bottom: 28px; color: #625b6a; }
#philosophy .philosophy-willing { gap: 8px 40px; margin: 0 0 40px; }
#philosophy .philosophy-willing li { min-height: 48px; gap: 18px; font-size: 20px; line-height: 1.2; }
.belief-icon { flex: none; }
#philosophy .philosophy-willing svg { width: 24px; height: 24px; padding: 11px; color: #65417d; }
#philosophy .philosophy-willing::before { left: calc(50% - 8px); }
#philosophy .philosophy-statement { font: 400 23px/1.18 var(--font-body); letter-spacing: 0; }
#philosophy .philosophy-statement em { color: #9672b3; margin-top: 4px; }
/* The artwork has its own transparent feather, so keep its full silhouette
   visible and let it overlap the copy like the supplied reference. */
#philosophy .philosophy-photo {
  position: relative; z-index: 0; width: calc(100% + 7vw); min-height: 824px;
  margin: 0 0 0 -7vw; overflow: visible; clip-path: none; min-width: 0;
}
#philosophy .philosophy-photo img {
  position: absolute; top: 50%; left: 0; width: 100%; height: 100%; max-width: none;
  transform: translateY(-50%); object-fit: contain; object-position: center;
}
@media (max-width: 1200px) {
  #philosophy .philosophy-copy { padding: 48px 28px 40px max(4vw, 2rem); }
  #philosophy h2 { font-size: 44px; }
  #philosophy .philosophy-lead { font-size: 26px; }
  #philosophy .philosophy-willing { column-gap: 24px; }
  #philosophy .philosophy-willing li { font-size: 16px; gap: 10px; }
  #philosophy .philosophy-statement { font-size: 20px; }
  #philosophy .philosophy-layout { min-height: 740px; }
  #philosophy .philosophy-photo { min-height: 740px; }
}
@media (max-width: 1050px) and (min-width: 851px) {
  #philosophy .philosophy-photo {
    width: 100%; height: auto; min-height: 0; margin: 0; aspect-ratio: auto;
  }
  #philosophy .philosophy-photo img {
    position: relative; top: auto; left: auto; width: 100%; height: auto;
    transform: none; object-fit: contain;
  }
}
@media (max-width: 850px) {
  #philosophy .philosophy-layout { grid-template-columns: 1fr; min-height: 0; }
  #philosophy .philosophy-copy { padding: 40px 6%; }
  #philosophy .philosophy-photo { width: 100%; height: auto; min-height: 0; margin: 0; aspect-ratio: 1 / 1; }
  #philosophy .philosophy-photo img { inset: 0; width: 100%; height: 100%; transform: none; object-fit: contain; }
  #philosophy .philosophy-willing { max-width: 620px; }
}
@media (max-width: 450px) {
  #philosophy h2 { font-size: 36px; }
  #philosophy .philosophy-lead { font-size: 23px; }
  #philosophy .philosophy-willing li { align-items: start; font-size: 15px; gap: 8px; }
  #philosophy .philosophy-willing svg { width: 20px; height: 20px; padding: 8px; }
  #philosophy .philosophy-statement { font-size: 18px; }
  #philosophy .philosophy-photo { height: auto; aspect-ratio: 1 / 1; }
}

/* ---------- Intentions (interactive) ------------------------------------ */
#intentions {
  --nav-bg: var(--page-tint);
  background: var(--page-tint);
  padding-block: var(--section-gap);
}
#intentions .intentions-layout {
  width: min(90%, 88rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.intentions-copy .eyebrow {
  margin-bottom: 1rem; color: #75657e; letter-spacing: .12em;
}
.intentions-copy h2 {
  max-width: 15ch; margin: 0 0 1.5rem;
  color: var(--brand-deep); font: 400 clamp(3.2rem, 5.5vw, 6rem)/.98 var(--font-body);
  letter-spacing: -.035em;
}
.intentions-copy h2 em { color: #9A7BE0; font-style: italic; }
.intentions-copy .body { max-width: 35rem; margin: 0; color: #62566d; font: 400 clamp(1.15rem, 1.45vw, 1.5rem)/1.45 var(--font-display); }
.intent-card {
  width: 100%; margin: 0;
  background: rgba(255,255,255,.9); border: 1px solid #eee5ef; border-radius: 1.3rem;
  box-shadow: 0 .7rem 2.5rem rgba(60,35,66,.08); padding: clamp(1.5rem, 2.3vw, 2.4rem);
}
.intent-card > legend { float: left; width: 100%; padding: 0; margin: 0 0 .3rem; color: var(--brand-deep); font: 400 clamp(1.7rem, 2.25vw, 2.5rem)/1.1 var(--font-body); }
.intent-card__hint { clear: both; max-width: 26rem; margin: 0 0 1rem; font: 400 clamp(.98rem, 1.1vw, 1.15rem)/1.35 var(--font-display); color: #71647b; }
.intent { display: grid; gap: .45rem; }
.intent__row { position: relative; display: block; }
.intent__row input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.intent__face {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  color: var(--plum); background: #fff; border: 1px solid #e8dfea; border-radius: .8rem;
  padding: .6rem 1rem; min-height: 4.15rem;
  transition: background-color .16s ease, border-color .16s ease;
}
.intent__face::before {
  content: ""; flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1.5px solid #d3c7d6; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.intent__face > span { display: grid; gap: .1rem; min-width: 0; }
.intent__face strong { font: 700 clamp(.95rem, 1vw, 1.05rem)/1.2 var(--font-display); }
.intent__face small { color: #6f6378; font: 400 clamp(.82rem, .9vw, .95rem)/1.25 var(--font-display); }
.intent__row:hover .intent__face { background: #faf6fc; border-color: #b493c2; }
.intent__row input:focus-visible + .intent__face { outline: 3px solid var(--brand); outline-offset: 3px; }
.intent__row input:checked + .intent__face {
  background: #faf1fc; border-color: #9e62cf; color: var(--plum);
}
.intent__row input:checked + .intent__face::before {
  border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff;
}
.intent-card__continue {
  display: block; width: 100%; min-height: 4.15rem; margin-top: 1rem;
  border: 0; border-radius: 999px; background: var(--plum); color: #fff;
  font: 500 1.15rem/1.2 var(--font-display); cursor: pointer;
}
.intent-card__continue:hover { background: #0d050f; }
.intent-card__continue:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (max-width: 1080px) {
  #intentions .intentions-layout { width: min(88%, 48rem); grid-template-columns: 1fr; gap: 2.5rem; }
  .intentions-copy h2 { max-width: 15ch; }
}
@media (max-width: 600px) {
  #intentions { padding-block: 4rem; }
  .intentions-copy h2 { font-size: clamp(2.6rem, 10vw, 3.5rem); }
  /* Phones: the option label wraps to two lines under a 1.45rem radio, which
     left the radio floating against the first line and the row over-tall.
     Smaller radio, top-aligned to the title, and padding instead of a fixed
     height so each row is exactly as tall as its own copy. */
  .intent-card { padding: 1.1rem; border-radius: 1.1rem; }
  .intent-card > legend { font-size: clamp(1.5rem, 6.4vw, 1.85rem); margin-bottom: .25rem; }
  .intent-card__hint { font-size: .92rem; line-height: 1.4; margin-bottom: .85rem; }
  .intent { gap: .4rem; }
  .intent__face { align-items: flex-start; gap: .75rem; min-height: 0; padding: .8rem .85rem; border-radius: .7rem; }
  .intent__face::before { width: 1.2rem; height: 1.2rem; margin-top: .1rem; border-width: 1.5px; }
  .intent__face strong { font-size: .98rem; line-height: 1.25; }
  .intent__face small { font-size: .85rem; line-height: 1.35; }
  .intent-card__continue { min-height: 3.5rem; margin-top: .85rem; font-size: 1.05rem; }
}

/* ---------- Coming soon ------------------------------------------------- */
.coming-soon {
  --nav-bg: var(--page-tint); --nav-tone: light;
  background: var(--page-tint);
  color: var(--plum);
}
.coming-soon__inner { width: min(83%, 92.5rem); margin-inline: auto; padding: clamp(4.5rem, 6vw, 6rem) 0 clamp(3rem, 4vw, 4rem); }
.coming-soon__main {
  display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1fr);
  grid-template-areas: "message countdown" "signup countdown";
  column-gap: clamp(3rem, 6vw, 7.5rem); row-gap: 2.7rem;
}
.coming-soon__message { grid-area: message; }
.coming-soon__signup-wrap { grid-area: signup; }
.coming-soon__countdown-wrap { grid-area: countdown; }
.coming-soon__countdown-title {
  margin: 0; color: #695b80; text-align: center;
  font: 700 clamp(.9rem, 1.28vw, 1.4rem)/1.2 var(--font-display);
  letter-spacing: .25em; text-transform: uppercase;
}
.coming-soon h2 {
  margin: 0 0 1.3rem; color: var(--plum);
  font: 700 clamp(3.5rem, 4.4vw, 5.5rem)/1.02 var(--font-display); letter-spacing: -.055em;
}
.coming-soon__copy {
  max-width: 40rem; margin: 0; color: #736484;
  font: 400 clamp(1.18rem, 1.5vw, 1.65rem)/1.47 var(--font-display);
}
.coming-soon__signup { display: grid; gap: .75rem; width: min(100%, 38rem); }
.coming-soon__signup label { font: 500 clamp(1rem, 1.2vw, 1.25rem)/1.2 var(--font-display); }
.coming-soon__signup input {
  width: 100%; min-width: 0; min-height: 4.4rem; padding: .8rem 1.4rem;
  border: 1px solid #d7cde2; border-radius: 1rem; background: #fff; color: var(--plum);
  font: 400 clamp(1.05rem, 1.3vw, 1.4rem)/1.3 var(--font-body);
}
.coming-soon__signup input::placeholder { color: #736484; }
.coming-soon__signup button {
  width: 100%; min-height: 4.15rem; margin-top: .2rem; padding: .75rem 1.4rem;
  border: 0; border-radius: 999px; background: var(--plum); color: #fff;
  font: 400 clamp(1rem, 1.35vw, 1.4rem)/1.2 var(--font-display); cursor: pointer;
}
.coming-soon__signup button:hover { background: var(--brand-deep); }
.coming-soon__status { min-height: 1.4rem; margin: 1rem 0 0; color: #736484; font: 400 clamp(.95rem, 1.1vw, 1.18rem)/1.4 var(--font-display); }
.coming-soon__countdown-wrap { min-width: 0; display: flex; flex-direction: column; align-items: center; align-self: center; }
.coming-soon__countdown {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%;
  margin-top: 1.5rem; padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(.75rem, 1.5vw, 1.5rem);
  border: 1px solid #ddcef2; border-radius: 1.25rem;
  background: linear-gradient(135deg, #fcfaff, #f8f4ff);
}
.coming-soon__group { min-width: 0; text-align: center; }
.coming-soon__group + .coming-soon__group { border-left: 1px solid #d8c7ee; }
.coming-soon__cards { display: flex; justify-content: center; }
.coming-soon__digit {
  color: var(--plum); font: 400 clamp(2.75rem, 4.2vw, 5.25rem)/1 var(--font-body);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.05em;
}
.coming-soon__unit {
  display: block; margin-top: .7rem; color: #695b80; text-align: center;
  font: 600 clamp(.68rem, .86vw, .92rem)/1.2 var(--font-display);
  letter-spacing: .15em; text-transform: uppercase;
}
@media (max-width: 950px) {
  .coming-soon__inner { width: min(88%, 50rem); }
  .coming-soon__main { grid-template-columns: 1fr; grid-template-areas: "message" "countdown" "signup"; row-gap: 0; }
  .coming-soon__countdown-wrap { margin-top: 3rem; align-items: center; }
  .coming-soon__countdown { margin-top: 1.5rem; }
  .coming-soon__signup-wrap { margin-top: 3.5rem; }
  .coming-soon__signup { width: 100%; }
}
@media (max-width: 600px) {
  .coming-soon__inner { width: min(90%, 34rem); padding-top: 4.5rem; }
  .coming-soon h2 { font-size: clamp(3.5rem, 13vw, 5.5rem); }
  .coming-soon__countdown-wrap { margin-top: 2.5rem; }
  .coming-soon__countdown-title { font-size: .9rem; }
  .coming-soon__signup-wrap { margin-top: 3rem; }
  .coming-soon__countdown { padding: 1.2rem .25rem; border-radius: .9rem; }
  .coming-soon__digit { font-size: clamp(1.65rem, 8vw, 2.5rem); }
  .coming-soon__unit { margin-top: .5rem; font-size: .6rem; letter-spacing: 0; }
}
@media (max-width: 480px) {
  .coming-soon h2 { font-size: clamp(2.4rem, 11vw, 3.5rem); }
}
/* ---------- Final invitation ------------------------------------------- */
.final-cta {
  --nav-bg: #fff; --nav-tone: light;
  padding: clamp(5rem, 7vw, 7.5rem) 0;
  background:
    radial-gradient(ellipse 62% 70% at 0% 100%, #f8f1ff 0%, transparent 75%),
    radial-gradient(ellipse 62% 70% at 100% 100%, #f8f1ff 0%, transparent 75%),
    #fff;
  color: var(--ink); text-align: center;
}
.coming-soon + .final-cta { padding-top: clamp(3.5rem, 5vw, 5rem); }
.final-cta__inner { display: flex; flex-direction: column; align-items: center; }
.final-cta h2 {
  max-width: 18ch; margin: 0 0 clamp(2rem, 3.5vw, 3.5rem);
  font: 700 clamp(3rem, 5.5vw, 6.25rem)/1.04 var(--font-display);
  letter-spacing: -.035em;
}
.final-cta p {
  max-width: 56ch; margin: 0 0 1.5rem;
  color: #615a66; font: 500 clamp(1.2rem, 1.85vw, 2rem)/1.45 var(--font-body);
}
.final-cta__button {
  min-width: clamp(13rem, 20vw, 22rem); min-height: clamp(3.6rem, 5.5vw, 6rem);
  margin-top: clamp(1rem, 2.5vw, 2rem); padding-inline: 2rem;
  background: var(--plum);
  font-size: clamp(1.15rem, 1.75vw, 1.8rem);
}
.final-cta__button:hover { background: #0d050f; }
@media (max-width: 650px) {
  .final-cta { padding-block: 4.5rem; }
  .final-cta h2 { font-size: clamp(2.6rem, 10.5vw, 4rem); }
  .final-cta p { font-size: clamp(1.1rem, 4.6vw, 1.45rem); }
  .final-cta__button { width: min(100%, 20rem); }
}
/* ---------- Footer reveal ------------------------------------------------
   Motion UI's <FooterReveal>: the footer sits under the page and is uncovered
   by the last screenful of scroll, fading, scaling and sharpening as it comes
   (motion.dev/ui/components/footer-reveal — the React source is behind Motion+,
   the three properties are its description).

   The uncovering is plain CSS and needs no script: the footer is pinned to the
   bottom of the viewport for the whole page and the page body is opaque on top
   of it, so it is hidden until the body's bottom edge rises past it. Motion
   uses z-index -1; z-index 0 under an explicitly stacked body does the same
   without relying on how a negative child paints against the canvas.

  `overflow-x: clip` on main is what stops the page overflowing sideways at
  all. Before clipping, oversized section art could reach the document and let
  Chrome's focus scroll-into-view offset the page — enough that opening the
  menu shifted everything 37px, with no way to scroll back. Clipping on main
  contains section artwork and leaves the document exactly
   one viewport wide. It has to be `clip`, not `hidden`: `hidden` on one axis
   forces the other to scroll, which would make main a scroll container and
   break the footer's sticky. Same reason it is not on `body` or `html`. */
main { position: relative; z-index: 1; background: var(--page-tint); overflow-x: clip; }
/* Reference: minimal white and purple footer. */
.habibti-footer,
.site-footer {
  width: 100%;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: var(--page-tint);
  padding: 39px 7.35% 24px;
  box-sizing: border-box;
  color: #2e2250;
}
.site-footer[data-footer-motion] > * { opacity: 1; transform: none; filter: none; }
.footer-container {
  width: 100%;
  max-width: none;
  margin: 0;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  row-gap: clamp(4.5rem, 9.8vw, 12.6rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}
.footer__brand { display: contents; }
.footer__brand > .brand { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
.footer__brand .brand__tile { display: none; }
.footer__word {
  font-family: var(--font-wordmark);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #2e2250;
}
.site-footer .brand__accent { color: #5B2DA3; }
.footer__top > nav { grid-column: 2; grid-row: 1; align-self: center; }
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__nav li {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.footer__nav li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.75rem;
  background: #dac8f8;
  flex-shrink: 0;
}
.footer__nav a {
  color: #2e2250;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: .375rem 0;
  white-space: nowrap;
}
.footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer__tag {
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  position: relative;
  margin: 0;
  padding-top: clamp(2.35rem, 2.9vw, 3.25rem);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.15vw, 5.125rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #2e2250;
}
.footer__tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(5.5rem, 6.5vw, 8.3125rem);
  height: clamp(8px, 0.75vw, 14px);
  border-radius: 999px;
  background: #dac8f8;
}
.footer__bloom {
  grid-column: 2;
  grid-row: 2;
  width: min(100%, 420px);
  max-width: 420px;
  justify-self: end;
  align-self: center;
  margin: -1rem -1rem 0 0;
}
.footer__bloom-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.footer__bloom-button[hidden] { display: none; }
.footer__bloom-button canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.footer__bloom-button:focus-visible { outline: 2px solid #9a7be0; outline-offset: 4px; }
.footer__qr-caption { margin: -.5rem auto 1rem; max-width: 320px; color: #2e2250; font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; line-height: 1.35; text-align: left; opacity: 0; transform: translateY(12px); visibility: hidden; }
.footer__qr-caption span { text-decoration: underline; text-underline-offset: 3px; }

.footer-divider {
  width: 100%;
  height: 1px;
  background: #dac8f8;
  margin-bottom: 20px;
}

.footer-copyright {
  margin: 0;
  color: #2e2250;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .footer__bloom {
    display: none;
  }
  .footer__top {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin-bottom: 24px;
  }
  .footer__brand > .brand { grid-column: 1; grid-row: 1; }
  .footer__top > nav { grid-column: 1; grid-row: 2; }
  .footer__tag {
    grid-column: 1;
    grid-row: 3;
    font-size: clamp(1.75rem, 6.5vw, 3.25rem);
    padding-top: 2.25rem;
  }
  .footer__tag::before {
    width: 6rem;
    height: 10px;
  }
}
@media (min-width: 540px) and (max-width: 1024px) {
  .footer__nav { column-gap: .5rem; }
  .footer__nav li { gap: .5rem; }
  .footer__nav a { font-size: .95rem; }
}
@media (max-width: 768px) {
  .habibti-footer,
  .site-footer {
    padding: 32px 6% 20px;
  }
  .footer-divider {
    margin-bottom: 16px;
  }
  .footer-copyright {
    font-size: 13px;
  }
}
@media (max-width: 700px) {
  .footer__brand > .brand { margin-top: 0; }
}
/* ---------- Download dialog --------------------------------------------- */
dialog#download {
  width: min(92vw, 34rem); padding: 0; border: 1px solid #ded2e6; border-radius: 1.75rem;
  background: #fff; color: var(--plum); box-shadow: 0 24px 60px rgba(28, 15, 36, .32);
}
dialog#download::backdrop { background: rgba(28, 15, 36, .58); backdrop-filter: blur(4px); }
.download__inner { position: relative; padding: clamp(1.75rem, 5vw, 2.75rem); }
.download__inner > .eyebrow { margin: 0 0 .85rem; color: #8c5baa; }
.download__inner h2 { margin: 0 0 .75rem; font: 400 clamp(2.25rem, 6vw, 3.5rem)/1 var(--font-body); letter-spacing: -.04em; }
.download__inner > p:not(.eyebrow, .download__status) { margin: 0; color: var(--muted-body); font: 1rem/1.55 var(--font-display); }
.download__close {
  position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--plum);
  font: 400 1.5rem/1 var(--font-display); cursor: pointer;
}
.download__close:hover { background: var(--soft); }
.download__options { margin-top: 1.5rem; }
.download-option {
  display: flex; align-items: center; gap: .75rem; width: min(100%, 17rem); min-height: 4.2rem; padding: .75rem 1rem;
  border: 1px solid #ded2e6; border-radius: 1rem; background: var(--plum); color: #fff; cursor: pointer;
  text-align: left;
}
.download-option:hover { background: var(--brand-deep); }
.download-option svg { width: 1.9rem; height: 1.9rem; flex: none; }
.download-option span { display: grid; font: 600 1rem/1.1 var(--font-display); }
.download-option small { margin-bottom: .2rem; font-size: .66rem; font-weight: 400; }
.download__status { min-height: 1.5rem; margin: 1rem 0 0; color: #765589; font: 600 .9rem/1.4 var(--font-display); }

/* ---------- Join dialog ------------------------------------------------- */
dialog#join {
  width: min(92vw, 32rem); max-height: calc(100dvh - 2rem); overflow-y: auto;
  padding: 0; border: 0; border-radius: 1.75rem;
  background: radial-gradient(circle at 100% 0, #f0e5fb 0, #fff 42%);
  color: var(--plum); box-shadow: 0 0 0 1px #e8deee, 0 1.5rem 4rem #1c0f2440;
}
dialog#join::backdrop { background: #1c0f2499; backdrop-filter: blur(5px); }
.join__inner { padding: clamp(1.5rem, 5vw, 2.75rem); }
.join__inner .join__eyebrow {
  display: inline-block; margin: 0 0 1.1rem; padding: .45rem .75rem;
  border-radius: 999px; background: #f1e9f8; color: #613c83;
  font: 700 .75rem/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase;
}
.join__inner h2 { margin: 0 0 .75rem; font: 700 clamp(2.25rem, 6vw, 3.25rem)/1 var(--font-display); letter-spacing: -.055em; }
.join__inner #join-description { max-width: 29rem; margin: 0 0 2rem; color: #62596b; font: 400 1.05rem/1.5 var(--font-display); }
.join__inner .field { display: block; margin: 0; }
.join__inner .field span { display: block; margin: 0 0 .6rem; color: var(--plum); font: 600 .95rem/1.2 var(--font-display); }
.join__inner .field input {
  width: 100%; min-height: 3.5rem; padding: 0 1rem;
  border: 1px solid #d9cce2; border-radius: .85rem;
  background: #fff; color: var(--plum); font: 400 1rem/1.3 var(--font-display);
}
.join__inner .field input::placeholder { color: #8f8797; }
.join__inner .field input:hover { border-color: #9c79bc; }
.join__inner .field input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px #eadcf8; outline: 0; }
.join__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }
.join__actions .btn { width: 100%; }
.join__actions .btn--primary { min-height: 3.5rem; font-size: 1rem; }
.join__actions .btn--ghost { min-height: 2.75rem; color: #62596b; text-decoration: none; }
.join__actions .btn--ghost:hover { background: transparent; color: var(--plum); }
.join__inner .join__note {
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid #eae3ef;
  color: #716a78; font: 400 .83rem/1.45 var(--font-display);
}
.join__status {
  margin: .9rem 0 0; color: var(--brand-deep);
  font: 600 .9rem/1.4 var(--font-display);
}
.join__status:empty { display: none; }
.join__status[data-state="error"] { color: #b3172c; }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1080px) {
  .two-col { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; gap: 3rem; }
  /* Explicit width, not max-width + auto margins: auto margins opt the item
     out of the grid's stretch, and with only absolutely positioned children
     the collage's fit-content width is zero — the photos collapse to strips. */
  .diff-collage { width: min(100%, 32rem); margin-inline: auto; }
  .two-col--art-first > .two-col__art { order: 0; }
  .modes { grid-template-columns: 1fr; }
  .mode, .mode--community { grid-template-columns: 1fr; gap: 1.5rem; }
  .mode { padding-bottom: 1.25rem; }
  .mode__media, .mode--community .mode__media { grid-column: 1; grid-row: 1; }
  .mode__copy, .mode--community .mode__copy { grid-column: 1; grid-row: 2; }
  .willing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links { display: none; }
  /* Brand, toggle, Join across the top; the track drops underneath when open. */
  .nav { grid-template-columns: 1fr auto auto; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
    background: var(--bg); color: var(--plum); border: 1.5px solid var(--chip-border); cursor: pointer;
  }
  .nav__toggle:hover { background: var(--chip-fill); }
  /* Hamburger lines — morph into an X when the menu opens. */
  .nav__lines { display: grid; gap: 5px; width: 20px; }
  .nav__lines i {
    display: block; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s var(--m-ease), opacity .2s ease;
  }
  .nav[data-open="true"] .nav__lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav[data-open="true"] .nav__lines i:nth-child(2) { opacity: 0; }
  .nav[data-open="true"] .nav__lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Hinge-style full-screen menu: big editorial links cascading in. The panel
     starts below the sticky header, so brand, toggle and Join stay visible. */
  .nav[data-open="true"] .nav__links {
    display: flex; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: auto; z-index: 59;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column; justify-content: safe center; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 1rem 8% 3rem; gap: 0;
    background: var(--bg); border-top: 1px solid var(--hairline); border-radius: 0;
    animation: m-fade-in 300ms ease backwards;
  }
  .nav[data-open="true"] .nav__links li { animation: m-rise 420ms var(--m-ease) backwards; }
  .nav[data-open="true"] .nav__links li:nth-child(1) { animation-delay: 60ms; }
  .nav[data-open="true"] .nav__links li:nth-child(2) { animation-delay: 120ms; }
  .nav[data-open="true"] .nav__links li:nth-child(3) { animation-delay: 180ms; }
  .nav[data-open="true"] .nav__links li:nth-child(4) { animation-delay: 240ms; }
  .nav[data-open="true"] .nav__links a {
    display: flex; background: transparent; border-radius: 0;
    font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 700; letter-spacing: -.02em;
    padding: 1rem 0; border-bottom: 1px solid var(--hairline);
    transition: color .18s ease, padding-left .25s var(--m-ease);
  }
  .nav[data-open="true"] .nav__links a:hover {
    background: transparent; color: var(--brand); padding-left: .5rem;
  }
  [data-nav-tone="dark"] .nav[data-open="true"] .nav__links {
    background: var(--plum);
    border: 1px solid rgba(255, 255, 255, .16);
  }
}
@media (max-width: 720px) {
  :root { --container: 90%; --section-gap: clamp(3.25rem, 9vw, 4.5rem); }
  .modes__heading h2 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  /* 72px of section padding per side is a lot on a 390px screen — pull the
     sections closer so the rhythm stays photo → text → photo. */
  /* Every section gets the same vertical gap on phones — the desktop rules
     give #modes/#how/#community/#honest/#philosophy their own values. */
  .panel, #modes, #how, #intentions, #community, #honest, #philosophy { padding-block: var(--section-gap); }
  #community { padding-top: 0; }
  .honest-layout, .philosophy-layout { padding-block: 0; }
  /* One shared page margin for every section on phones — the desktop widths
     gave some sections 3-6% side margins and others 5%. */
  #differentiator .wrap, #honest .wrap, #philosophy .philosophy-layout,
  #intentions .intentions-layout { width: min(90%, 48rem); }
  /* No body downscale here any more: one body size everywhere. */
  .willing { grid-template-columns: 1fr; }
  /* Brand, Menu and Join have to share 90% of a 390px screen: at the 1rem the
     wider layouts use, the row overflows and focusing the toggle scrolls the
     whole page sideways. */
  .nav { gap: 0.5rem; padding: .65rem 0; }
  /* Slim the bar for phones: the desktop-scale wordmark and pills crowd a
     390px row. */
  .brand { gap: .5rem; }
  .brand__tile { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
  .brand__tile svg { width: 1.3rem; height: 1.3rem; }
  .brand__word { font-size: 1.2rem; }
  .nav__end .btn { min-height: 2.35rem; padding: 0 .85rem; font-size: .95rem; }
  .nav__toggle { width: 2.35rem; height: 2.35rem; min-height: 0; }
  .nav__lines { width: 18px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__legal, .footer-copyright { text-align: left; }
}

/* ---------- How dating works ------------------------------------------- */
#how { --nav-bg: var(--page-tint); background: var(--page-tint); overflow: hidden; padding-block: var(--section-gap); }
#how .wrap { width: min(90%, 90rem); }
#how .eyebrow { color: #9475ad; letter-spacing: .2em; }
.how__intro { position: relative; z-index: 2; max-width: 46rem; }
.how__intro h2 {
  margin: 0; color: var(--plum);
  font: 700 clamp(3.25rem, 5.2vw, 4.5rem)/.99 var(--font-display);
  letter-spacing: -.02em;
}
.how__hello {
  width: fit-content; margin: 1.4rem 0 0 .5rem; color: #817b87;
  font: italic 400 clamp(1.5rem, 2.35vw, 2.25rem)/1.15 var(--font-body);
  transform: rotate(-5deg);
}
.how__journey { position: relative; height: 25rem; margin-top: -9.5rem; }
.how__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #75508c; stroke-width: 1.5; }
.how__portrait {
  position: absolute; z-index: 1; width: clamp(10rem, 15vw, 14.5rem); aspect-ratio: 1;
  margin: 0; padding: .4rem; border: 2px solid #eee4f7; border-radius: 50%;
  background: #fff; box-shadow: 0 1rem 2.5rem rgba(65, 31, 91, .11);
}
.how__portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.how__portrait--woman img { object-position: left center; }
.how__portrait--man img { object-position: right center; }
.how__portrait--woman { left: 6%; top: 9.2rem; }
.how__portrait--man { right: 0; top: -.8rem; }
.how__message {
  position: absolute; z-index: 2; padding: .65rem .85rem; border-radius: 1rem;
  font: 400 .9rem/1.35 var(--font-body); color: var(--plum);
  box-shadow: 0 .55rem 1.5rem rgba(40, 22, 52, .07);
}
.how__message--first { left: 55%; top: 1.5rem; background: #f7f7f7; }
.how__message--reply { left: 61%; top: 5rem; background: #f4e9ff; }
.how__steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.how__steps li { position: absolute; z-index: 2; width: 12.5rem; text-align: center; transform: translateX(-50%); }
.how__steps li:nth-child(1) { left: 31.5%; top: 11rem; }
.how__steps li:nth-child(2) { left: 47.5%; top: 14rem; }
.how__steps li:nth-child(3) { left: 65.3%; top: 9.5rem; }
.how__steps li:nth-child(4) { left: 80.5%; top: 14rem; }
.how__icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto .55rem;
  border-radius: 50%; background: #fcf8ff; color: var(--brand-deep);
  box-shadow: 0 .45rem 1.25rem rgba(91, 45, 163, .15);
}
.how__icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.how__steps h3 { margin: 0 0 .2rem; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -.02em; }
.how__steps p { margin: 0; color: var(--muted-body); font: 400 .95rem/1.3 var(--font-body); }
@keyframes how-ribbon-draw { to { stroke-dashoffset: 0; } }
@keyframes how-step-appear { from { opacity: 0; translate: 0 .65rem; } to { opacity: 1; translate: 0 0; } }
.how__journey[data-how-motion] .how__path path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.how__journey[data-how-motion]:not(.is-in) .how__steps li { opacity: 0; }
.how__journey[data-how-motion]:not(.is-in) .how__message { opacity: 0; }
.how__journey[data-how-motion].is-in .how__route { animation: how-ribbon-draw 5s linear forwards; }
.how__journey[data-how-motion].is-in .how__path-heart { animation: how-ribbon-draw .45s linear 3.5s forwards; }
.how__journey[data-how-motion].is-in .how__connector { animation: how-ribbon-draw .65s linear 4.5s forwards; }
.how__journey[data-how-motion].is-in .how__message--first { animation: how-step-appear .45s cubic-bezier(.16, 1, .3, 1) 3.85s both; }
.how__journey[data-how-motion].is-in .how__message--reply { animation: how-step-appear .45s cubic-bezier(.16, 1, .3, 1) 4.35s both; }
.how__journey[data-how-motion].is-in .how__steps li { animation: how-step-appear .45s cubic-bezier(.16, 1, .3, 1) both; }
.how__journey[data-how-motion].is-in .how__steps li:nth-child(1) { animation-delay: .8s; }
.how__journey[data-how-motion].is-in .how__steps li:nth-child(2) { animation-delay: 1.9s; }
.how__journey[data-how-motion].is-in .how__steps li:nth-child(3) { animation-delay: 3.25s; }
.how__journey[data-how-motion].is-in .how__steps li:nth-child(4) { animation-delay: 4.4s; }
.how__beat { display: none; }
@media (max-width: 1200px) {
  .how__journey { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; height: auto; margin-top: 1.5rem; }
  .how__path { display: none; }
  .how__portrait { position: static; width: min(100%, 12rem); justify-self: center; }
  .how__message { position: static; justify-self: center; max-width: 100%; font-size: .95rem; }
  .how__steps { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .5rem; }
  .how__steps li { position: static; width: auto; min-width: 0; padding: 1.25rem; border: 1px solid #eee4f7; border-radius: 1.25rem; background: #fcfaff; text-align: left; transform: none; }
  .how__icon { margin: 0 0 .75rem; }
}
@media (max-width: 1200px) {
  /* Use the portrait, chat, and timeline flow on tablets as well as phones. */
  .how__journey { position: relative; grid-template-columns: 1fr 1fr; gap: 0 1rem; max-width: 46rem; margin: 1.25rem auto 0; }
  .how__beat { display: block; position: absolute; z-index: 2; left: 50%; top: 5.25rem; transform: translateX(-50%); width: 6.5rem; height: auto; }
  .how__portrait { grid-row: 1; }
  .how__message { position: relative; left: 0; top: 0; max-width: 21rem; margin: 0 0 .9rem; }
  .how__message--first { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .how__message--first::after { content: ""; position: absolute; left: 1.5rem; top: -.5rem;
    border-left: .6rem solid transparent; border-right: .6rem solid transparent; border-bottom: .55rem solid #f7f7f7; }
  .how__message--reply { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
  .how__message--reply::after { content: ""; position: absolute; right: 1.5rem; top: -.5rem;
    border-left: .6rem solid transparent; border-right: .6rem solid transparent; border-bottom: .55rem solid #f4e9ff; }
  .how__steps { counter-reset: how; grid-template-columns: 1fr; margin-top: .75rem; }
  .how__steps li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1rem; padding: .6rem 0; border: 0; background: none; position: relative; left: 0; top: 0; }
  .how__steps li:nth-child(n) { left: 0; top: 0; }
  .how__steps li:not(:last-child)::before { content: ""; position: absolute; left: 1.5625rem; top: 3.9rem; bottom: -.6rem; width: 1.5px; background: rgba(117, 80, 140, .3); }
  .how__steps h3::before { counter-increment: how; content: "0" counter(how); display: block; color: #8a52b8; font: 700 .8rem/1 var(--font-display); letter-spacing: .12em; margin-bottom: .3rem; }
  .how__steps p { grid-column: 2; }
  .how__icon { width: 3.25rem; height: 3.25rem; margin: 0; box-shadow: none; }
  /* The desktop choreography staggers these across five seconds for the
     drawn path; phones have no path, so land everything in under a second. */
  .how__journey[data-how-motion].is-in .how__message--first { animation-delay: .35s; }
  .how__journey[data-how-motion].is-in .how__message--reply { animation-delay: .55s; }
  .how__journey[data-how-motion].is-in .how__steps li:nth-child(1) { animation-delay: .15s; }
  .how__journey[data-how-motion].is-in .how__steps li:nth-child(2) { animation-delay: .25s; }
  .how__journey[data-how-motion].is-in .how__steps li:nth-child(3) { animation-delay: .35s; }
  .how__journey[data-how-motion].is-in .how__steps li:nth-child(4) { animation-delay: .45s; }
}
@media (max-width: 600px) {
  .how__intro h2 { font-size: clamp(2.75rem, 11vw, 4rem); }
}
/* ---------- Footer reveal, the moving half ------------------------------
   `--fr` is the page script's reveal progress, 0 while the footer is still
   covered and 1 once it is fully uncovered. Without the script it stays 1, so
   the footer is simply there — the uncovering above is what does the work.

   Motion fades and scales the footer shell itself. Here it is the contents
   that move: the plum panel stays solid, so white-on-plum text is never asked
   to hold contrast against a half-faded background mid-scroll.

   ponytail: blur is the one non-compositor property on the page. It is 5px
   over one footer-sized layer, painted on scroll frames that are already
   cheap; if it ever costs a frame, drop `filter` and keep opacity and scale. */
.site-footer[data-footer-motion] > .wrap {
  opacity: 1;
  transform: none;
  filter: none;
}

/* #how's base rule sits after the mobile block above, so the uniform phone
   gap needs one more word here. */
@media (max-width: 720px) {
  #how { padding-block: var(--section-gap); }
  /* Keep the footer stable on phones while it enters the viewport. Scaling the
     inner wrapper here can crop the brand mark during the sticky reveal. */
  .site-footer { position: relative; bottom: auto; }
  .site-footer[data-footer-motion] > .wrap { opacity: 1; transform: none; filter: none; }
}

/* Keep narrow layouts sized by the viewport rather than their longest text. */
.two-col > *, .diff-grid > *, .mode > *, .philosophy-willing li > span,
.footer__top > * { min-width: 0; }
.philosophy-willing li > span:last-child { overflow-wrap: anywhere; }
@media (max-width: 1080px) {
  .two-col, .diff-grid, .mode, .mode--community {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero h1 { white-space: normal; }
}
@media (max-width: 720px) {
  .marker { white-space: normal; }
  .nav { padding-block: .45rem; }
  .mode__copy .btn { min-width: 0; width: min(100%, 22rem); }
  .diff-grid .statement { padding-right: 0; }
  #philosophy .philosophy-copy { padding-inline: 0; }
  #philosophy { padding-block: 0; }
  #philosophy .philosophy-copy { padding-block: var(--section-gap); }
  #philosophy .philosophy-layout { margin-inline: auto; }
  #philosophy .philosophy-lead br, #philosophy .philosophy-statement br { display: none; }
  #philosophy .philosophy-photo { margin-inline: 0; }
  #philosophy .philosophy-willing li { gap: 10px; }
  .nav__toggle { width: 44px; height: 44px; }
  .nav__end .btn { min-height: 44px; }
}
@media (max-width: 420px) {
  #philosophy .philosophy-willing { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #philosophy .philosophy-willing::before { display: none; }
  #philosophy .philosophy-willing li { align-items: center; }
}
@media (max-width: 360px) {
  #safety .safety-duo__title { font-size: 2.25rem; }
}

/* ---------- Editorial refinement ---------------------------------------
   Preserve the existing palette and photo treatment. Keep interface lists
   readable, remove ornamental containers, and give headings a shared rhythm. */
html { scrollbar-color: var(--brand-deep) var(--soft); }
::selection { background: var(--chip-fill); color: var(--plum); }
input { caret-color: var(--brand); }
a { text-underline-offset: .22em; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
main :is(h1, h2, h3) { text-wrap: balance; }
main p { text-wrap: pretty; }
main :is(.body, .safety-duo__lead) { line-height: 1.55; }
.hero__actions { margin-top: 2rem; }
.hero .btn--ghost { border: 0; min-width: 0; text-decoration: underline; }
#belief .belief-pills { gap: 0; }
#belief .belief-pills li { padding: .85rem 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
.belief-summary { margin-top: 1.5rem; }

.mode__copy .btn { min-width: 0; min-height: 2.75rem; padding: .5rem 0; border: 0; border-radius: 0; background: none; color: var(--brand-deep); text-decoration: underline; text-underline-offset: .25em; }
.mode__copy .btn:hover { color: var(--brand); background: none; }
.diff-grid .statement .brush { padding: 0; margin: 0; background: none; }
.diff-grid .statement { padding-right: 0; }
.diff-principles li { grid-template-columns: 1fr; }
.diff-principles svg { display: none; }
.rule-list.honest-rules li { grid-template-columns: 1fr; }
.rule-list.honest-rules li::before { content: none; }
.community-welcome { margin: 1.25rem 0; font: 500 1.15rem/1.5 var(--font-display); color: var(--brand-deep); }
#safety .safety-list { gap: 0; }
#safety .safety-list li { display: block; min-height: 0; padding: 1.25rem 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
#safety .safety-list li:first-child { border-top: 1px solid var(--border); }
#safety .safety-list li::before, #safety .safety-list li::after { content: none; }
#safety .safety-list p { color: var(--muted-body); line-height: 1.5; }
#safety .safety-duo__lead { color: var(--muted-body); }
#philosophy .philosophy-willing { gap: .4rem 2rem; }
#philosophy .philosophy-willing::before { content: none; }
#philosophy .philosophy-willing li { min-height: 0; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.intent-card { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.intent { gap: 0; }
.intent__face { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 1rem .75rem; }
.intent__face small { font-size: 1rem; line-height: 1.4; }
.coming-soon__launch-note { margin: 1.5rem 0; color: var(--brand-deep); font: 500 1.1rem/1.5 var(--font-display); }
@media (max-width: 600px) {
  #safety .safety-list h3 { font-size: 1.2rem; }
  #safety .safety-list p { font-size: 1rem; }
  #philosophy .philosophy-willing li { font-size: 1rem; line-height: 1.4; }
  .intent__face { padding-inline: .25rem; }
  .intentions-copy h2 { font-size: clamp(2.6rem, 10vw, 3.5rem); }
}

input::placeholder { color: var(--muted-body); opacity: 1; }
.download-option small { font-size: .875rem; }
#download, #join { border: 0; }
#philosophy .philosophy-lead, #philosophy .philosophy-statement { line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .how__journey[data-how-motion] :is(.how__steps li, .how__message) { opacity: 1; animation: none; }
  .how__journey[data-how-motion] .how__path path { stroke-dashoffset: 0; animation: none; }
}

/* Device adaptation: touch controls, tablet rhythm, and short viewports. */
main :is(.connection-layout, .coming-soon__main, .how__journey) > * { min-width: 0; }
dialog#download { max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 1200px) and (min-width: 701px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
  .how__steps li:not(:last-child)::before { content: none; }
  .how__message--first { grid-column: 1; }
  .how__message--reply { grid-column: 2; grid-row: 2; }
}
@media (max-width: 700px) {
  .blueprint__cta { flex-wrap: wrap; gap: 1rem; }
  input, select, textarea { font-size: max(1rem, 16px); }
}
@media (max-width: 360px) {
  .preference-list > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .how__steps li { column-gap: .75rem; }
}
@media (pointer: coarse) {
  .btn, .nav__toggle, .download__close { min-height: 44px; }
  .download__close { min-width: 44px; }
  .footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-height: 500px) and (max-width: 1080px) {
  .nav[data-open="true"] .nav__links { justify-content: flex-start; overflow-y: auto; }
  .nav[data-open="true"] .nav__links a { padding-block: .65rem; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mode__media, .mode__media:hover { transform: none; transition: none; }
  .site-footer { position: relative; bottom: auto; }
  .site-footer[data-footer-motion] > .wrap { opacity: 1; transform: none; filter: none; }
}

/* Restored opening splash and hero hand-off from main. */
/* App's H drawing at double speed, then its 150ms final-frame hold. */
:root { --intro-hold: 1921ms; }
.intro-splash {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #ffffff;
  color: var(--plum); pointer-events: auto;
  animation: intro-splash-out 16ms step-end calc(var(--intro-hold) + 750ms) forwards;
}
/* Fade the reference shadow background separately from the travelling H. */
.intro-splash__field {
  position: absolute; inset: 0; background: #ffffff;
  animation: intro-field-out 240ms ease var(--intro-hold) forwards;
}
.intro-splash__lockup {
  position: absolute; z-index: 1; top: var(--intro-y, 1rem); left: var(--intro-x, 5%);
  transform: none;
  transform-origin: center;
  color: #fff;
  /* Match the header brand exactly, then crossfade in place. */
  will-change: transform, opacity;
  animation: intro-lockup-travel 600ms cubic-bezier(.22,.61,.36,1) var(--intro-hold) both,
    intro-lockup-handoff 150ms ease calc(var(--intro-hold) + 600ms) forwards;
}
.intro-splash__lockup .brand__word { color: inherit; animation: intro-word-in 280ms cubic-bezier(.22,.61,.36,1) 200ms backwards; }
.intro-splash__lockup, .intro-splash__lockup * { transition: none; }
.intro-splash__lockup { mix-blend-mode: multiply; }
.intro-splash__lockup .brand__tile { width: var(--intro-w, 24px); height: var(--intro-h, 24px); background: transparent; border-radius: 0; }
.intro-splash__draw { display: block; width: 100%; height: 100%; object-fit: fill; }
.intro-splash__stroke {
  stroke-dasharray: 210; stroke-dashoffset: 210;
  animation: intro-mark-draw 260ms cubic-bezier(.5, 0, .09, 1) 80ms forwards;
}
.intro-splash__mark { width: clamp(3.5rem, 7vw, 5rem); aspect-ratio: 1; }
.intro-splash__mark { background: #fff; border-radius: 18px; padding: .6rem; box-sizing: content-box; animation: intro-logo-in 340ms cubic-bezier(.22,.61,.36,1) both; }
.intro-splash__word {
  font-family: var(--font-wordmark); font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 400; letter-spacing: -.014em; line-height: 1;
  opacity: 0; transform: translate3d(-.35rem, 0, 0);
  animation: intro-word-in 280ms cubic-bezier(.22, .61, .36, 1) 200ms forwards;
}
@keyframes intro-mark-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-word-in { from { opacity: 0; transform: translateX(-.35rem); } to { opacity: 1; transform: none; } }
@keyframes intro-field-out { to { opacity: 0; visibility: hidden; } }
@keyframes intro-lockup-handoff {
  0% { opacity: 1; }
  100% {
    opacity: 0;
  }
}
@keyframes intro-lockup-travel {
  from { transform: translate3d(calc(50vw - var(--intro-x, 5vw) - 50%), calc(50dvh - var(--intro-y, 1rem) - 50%), 0) scale(4.5); }
  to { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes intro-lockup-color { from { color: #fff; } to { color: var(--plum); } }
.site-header .brand__initial { animation: intro-brand-handoff 150ms ease calc(var(--intro-hold) + 600ms) backwards; }
@keyframes intro-brand-handoff { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-splash-out {
  from { opacity: 1; visibility: visible; pointer-events: auto; }
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* The photograph is revealed by a window that grows from a centred band to
   the full bleed — Hinge's move. clip-path, not transform, so the image
   itself never scales (nothing in the photograph jumps as the frame opens)
   and nothing can reflow mid-animation. `both` holds the closed band through
   the hold, under the opaque field. */
@keyframes intro-figure-reveal {
  from { clip-path: inset(42% 0 42% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.hero__figure {
  animation: intro-figure-reveal 750ms cubic-bezier(.65, .05, .36, 1) var(--intro-hold) both;
}
/* The surround steps aside once the photograph has covered it. `from` alone —
   each element's own background is already transparent. */
@keyframes intro-veil-out { from { background-color: #fff; } }
/* The veil and the arriving navigation sit on different elements: nav-in's
   opacity would otherwise fade the header's own plum hold along with it, and
   the top strip would flash white the moment the splash field steps aside. */
.site-header {
  animation: intro-veil-out 400ms ease calc(var(--intro-hold) + 550ms) backwards;
}
.site-header .nav {
  animation: intro-nav-in 150ms ease calc(var(--intro-hold) + 600ms) backwards;
}
.hero {
  animation: intro-veil-out 400ms ease calc(var(--intro-hold) + 550ms) backwards;
}
@keyframes intro-nav-in {
  from { opacity: 0; }
  to { opacity: 1; transform: none; }
}
/* Hinge reveals the photograph first, then the navigation and hero copy. */
[data-motion="on"] .hero__grid { --m-delay: calc(var(--intro-hold) + 550ms); --m-duration: 650ms; }


@keyframes intro-logo-in { from { opacity: 0; transform: scale(.82) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .intro-splash { display: none; } .hero__figure, .hero, .site-header, .site-header .nav, .site-header .brand, .site-header .brand__initial { animation: none; } }