/*
 * Landing page (index.html). Legal pages use styles.css; the phone frame and
 * the live app demo live in demo.css.
 *
 * Soft grey canvas washed with lavender and peach, near-black ink, tangerine
 * #FF7043 for the second line of every headline and for actions, indigo
 * #5146CD for eyebrows, step numbers and line icons.
 */
:root {
  --bg: #f4f3f1;
  --lav: #ecebf8;
  --peach: #fbe7de;
  --card: #ffffff;
  --card-soft: rgba(255, 255, 255, 0.72);
  --line: rgba(20, 20, 20, 0.07);
  --text: #141414;
  --muted: #6e6e6e;
  --accent: #ff7043;
  --accent-deep: #f2602f;
  --indigo: #5146cd;
  --green: #2e9b5b;
  --shadow: 0 24px 60px rgba(60, 40, 30, 0.14);
  --shadow-card: 0 10px 30px rgba(40, 30, 60, 0.08);
  --radius: 20px;
  --gutter: clamp(16px, 5vw, 64px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  /* The app uses the platform system font (SF Pro on iOS, Roboto on
     Android); only the wordmark is SF Pro Rounded, and that's an image. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.page {
  overflow-x: clip;
}

h1,
h2,
h3,
p {
  margin: 0;
}

p {
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type ---------- */

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
}

.display,
.hero h1 {
  text-wrap: balance;
}

.display {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.display .hl {
  display: block;
  color: var(--accent);
}

.display .hl-inline {
  color: var(--accent);
}

.section-head {
  text-align: center;
  max-width: 54rem;
  margin: 0 auto;
}

.section-head .display {
  margin-top: 14px;
}

.section-head .lede {
  margin-top: 12px;
}

.lede {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.section {
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 112, 67, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, background 0.2s;
}

.btn:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(255, 112, 67, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn:focus-visible,
.nav a:focus-visible,
.faq-q:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

.btn.block {
  width: 100%;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
}

.brand-wordmark {
  display: block;
  height: 22px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
  font-size: 0.88rem;
  font-weight: 500;
  color: #3a3a3a;
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-actions .btn {
  padding: 10px 18px;
  font-size: 0.85rem;
}

.icon-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-menu {
  display: none;
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
  }

  .icon-btn {
    display: inline-flex;
  }

  .nav-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(20, 20, 20, 0.06);
  }

  .nav-menu[hidden] {
    display: none;
  }

  .nav-menu a {
    display: block;
    padding: 12px 0;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }

  .nav-menu a:last-child {
    border-bottom: 0;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(40px, 7vw, 76px);
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(251, 214, 197, 0.9), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 30%, var(--lav) 62%, var(--peach) 100%);
  overflow: hidden;
}

.hero-copy {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.hero h1 .hl {
  display: block;
  color: var(--accent);
}

.hero .lede {
  max-width: 34rem;
  margin: 18px auto 0;
  font-size: 1.02rem;
}

.hero-cta {
  margin-top: 26px;
}

.proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a3a3a;
}

.pstack {
  display: flex;
}

/* Keeps its height while the count loads so nothing below jumps. */
.proof.is-loading {
  visibility: hidden;
}

.proof[hidden] {
  display: none;
}

.proof-note {
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a3a3a;
}

.wl-count {
  color: var(--text);
}

.wl-count strong {
  display: inline-block;
  color: var(--indigo);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pstack .pav + .pav {
  margin-left: -8px;
}

/* Avatars: a photo in a white-ringed disc (the gradient shows while it
   loads). Sizes via --s. */
.pav {
  --s: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: calc(var(--s) * 0.4);
  font-weight: 800;
  color: #fff;
  border: 2px solid #fff;
  background: linear-gradient(140deg, #ffa27f, #ff7043);
}

.pav img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.pav.a2 { background: linear-gradient(140deg, #8d84ee, #5146cd); }
.pav.a3 { background: linear-gradient(140deg, #f6c177, #e08e3b); }
.pav.a4 { background: linear-gradient(140deg, #6fcf9b, #2e9b5b); }
.pav.a5 { background: linear-gradient(140deg, #f49ac1, #d45d8f); }
.pav.a6 { background: linear-gradient(140deg, #7cc4ec, #3a86c8); }

/* The stage: the live demo phone in the middle, orbit rings behind it and app
   cards floating either side. Cards are placed from the centre line so they
   hug the phone at any width; the outer ones bleed off-screen on small
   viewports, as in the app-store style mockups. */
.hero-stage {
  --pw: clamp(220px, 24vw, 292px);
  position: relative;
  margin-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 72px);
  display: flex;
  justify-content: center;
}

.hero-stage .phone-body {
  width: var(--pw);
}

.hero-stage .phone {
  z-index: 3;
  box-shadow: 0 40px 80px rgba(60, 40, 30, 0.22);
}

.stage-rings {
  position: absolute;
  top: 12%;
  left: 50%;
  width: calc(var(--pw) * 2.9);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.stage-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(81, 70, 205, 0.14);
}

.stage-rings span:nth-child(1) {
  inset: 0;
}

.stage-rings span:nth-child(2) {
  inset: 14%;
  border-color: rgba(255, 112, 67, 0.2);
}

.stage-rings span:nth-child(3) {
  inset: 28%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
}

.float {
  position: absolute;
  z-index: 2;
  width: 250px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card-soft);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
  animation: bob 7s ease-in-out infinite;
}

.float.fl1 { right: calc(50% + var(--pw) / 2 + 36px); top: 23%; }
.float.fl2 { right: calc(50% + var(--pw) / 2 + 36px); top: 42%; animation-delay: -2s; }
.float.fl3 { right: calc(50% + var(--pw) / 2 + 310px); top: 30%; animation-delay: -4s; }
.float.fr1 { left: calc(50% + var(--pw) / 2 + 36px); top: 23%; animation-delay: -1s; }
.float.fr2 { left: calc(50% + var(--pw) / 2 + 36px); top: 56%; animation-delay: -3s; }
.float.fr3 { left: calc(50% + var(--pw) / 2 + 310px); top: 30%; animation-delay: -5s; width: 210px; }

@keyframes bob {
  50% {
    transform: translateY(-8px);
  }
}

/* Card internals */
.fc-title {
  font-size: 12px;
  font-weight: 700;
}

.f-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.f-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.f-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.f-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.f-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--green);
  background: #e3f4ea;
}

.f-group + .f-group {
  margin-top: 12px;
}

.f-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.f-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #ecebfb;
  color: var(--indigo);
  flex-shrink: 0;
}

.f-label b {
  display: block;
  font-size: 11px;
}

.f-label small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
}

.f-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 7px;
}

.f-chips span {
  padding: 5px 4px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  color: #444;
}

.f-chips span.on {
  color: var(--accent);
  background: #fff1eb;
  border-color: rgba(255, 112, 67, 0.35);
}

.f-sub {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
}

.f-list em {
  margin-left: auto;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.f-link {
  color: var(--indigo);
  font-weight: 700;
  font-size: 9.5px;
}

.f-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.f-btns span {
  padding: 7px 0;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  background: var(--accent);
}

.f-btns.three {
  grid-template-columns: 1fr 1fr 1.3fr;
  margin-top: 6px;
}

.f-btns span + span {
  color: var(--accent);
  background: #fff;
  border: 1px solid rgba(255, 112, 67, 0.45);
}

.f-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-weight: 600;
}

.f-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

/* Group chat snippet */
.f-chat {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-chat li {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.f-chat li > span:last-child {
  padding: 7px 10px;
  border-radius: 12px 12px 12px 4px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 11px;
}

.f-chat li.me {
  justify-content: flex-end;
}

.f-chat li.me > span:last-child {
  border-radius: 12px 12px 4px 12px;
  background: var(--accent);
  color: #fff;
}

/* iOS-style push notification */
.f-notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.f-notif b {
  display: block;
  font-size: 11.5px;
}

.f-notif small {
  display: block;
  margin-top: 2px;
  color: #3a3a3a;
  font-size: 10.5px;
}

.f-notif em {
  margin-left: auto;
  color: var(--muted);
  font-style: normal;
  font-size: 9.5px;
}

.f-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}

.f-app svg {
  width: 17px;
  height: 17px;
}

.f-list .f-ico {
  background: #fff4ef;
  font-size: 12px;
}

@media (max-width: 1320px) {
  .float.fl3,
  .float.fr3 {
    display: none;
  }
}

/* Tablet/phone: the cards shrink and tuck in behind the phone's edges. */
@media (max-width: 960px) {
  .float {
    transform-origin: center;
    scale: 0.66;
  }

  .float.fl1,
  .float.fl2 {
    right: calc(50% + var(--pw) / 2 - 60px);
  }

  .float.fr1,
  .float.fr2 {
    left: calc(50% + var(--pw) / 2 - 60px);
  }
}

@media (max-width: 560px) {
  .hero-stage {
    --pw: 210px;
  }

  .float {
    scale: 0.52;
  }

  .float.fl1,
  .float.fl2 {
    right: calc(50% + var(--pw) / 2 - 80px);
  }

  .float.fr1,
  .float.fr2 {
    left: calc(50% + var(--pw) / 2 - 80px);
  }
}

/* ---------- the honest part ---------- */

.honest {
  background: linear-gradient(180deg, var(--peach) 0%, var(--bg) 35%);
  padding-bottom: clamp(48px, 7vw, 80px);
}

.honest .section-head {
  max-width: 72rem;
}

.one-liners {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
}

.one-liners > span {
  display: block;
}

@media (min-width: 900px) {
  .one-liners > span {
    white-space: nowrap;
  }
}

.honest .section-head .lede {
  max-width: 38rem;
  margin: 18px auto 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.advice-head {
  margin-top: clamp(48px, 7vw, 72px);
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.advice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  max-width: 1000px;
  margin: 36px auto 0;
}

/* Each piece of "usual advice" is a sticky note: pastel paper, a strip of
   tape, the advice in handwriting, reality underneath, and a NOPE stamp.
   rotate/translate (not transform) so the scroll-reveal can't clobber the
   tilt. They straighten and lift on hover. */
.note {
  --paper: #ffe3d6;
  position: relative;
  margin: 0;
  padding: 34px 26px 28px;
  min-height: 250px;
  background: var(--paper);
  border-radius: 3px 3px 18px 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 14px 28px rgba(60, 40, 30, 0.13);
  rotate: var(--tilt, 0deg);
  transition: rotate 0.4s var(--ease-out), translate 0.4s var(--ease-out), box-shadow 0.4s,
    opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.note.lavender {
  --paper: #e6e2fb;
}

.note.butter {
  --paper: #fff1c4;
}

.note:hover {
  rotate: 0deg;
  translate: 0 -6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 22px 40px rgba(60, 40, 30, 0.18);
}

.note-tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 92px;
  height: 24px;
  translate: -50% 0;
  rotate: -3deg;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.note blockquote {
  margin: 0;
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: #2a2522;
}

.note figcaption {
  margin-top: 16px;
  color: #5c534d;
  font-size: 0.92rem;
  line-height: 1.5;
}

.note-stamp {
  position: absolute;
  right: 18px;
  bottom: 16px;
  padding: 2px 10px;
  border: 2.5px solid #e2532b;
  border-radius: 6px;
  rotate: -12deg;
  color: #e2532b;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- how it works ---------- */

.how {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 40%, var(--lav) 100%);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(48px, 7vw, 80px);
  text-align: center;
}

.step-art {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-n {
  display: block;
  margin-top: 22px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--indigo);
}

.step h3 {
  margin-top: 6px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.step p {
  max-width: 17rem;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Step 1: profile card */
.profile-card {
  width: 190px;
  padding: 16px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #e3e0fb 0%, #fde6dc 100%);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.profile-card .pav {
  --s: 58px;
  border-width: 3px;
  position: relative;
}

.profile-card .badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--indigo);
  border: 2px solid #fff;
}

.profile-card h4 {
  margin: 8px 0 0;
  font-size: 14px;
}

.profile-card .f-meta {
  justify-content: center;
}

.p-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.p-stats span {
  padding: 7px 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 8.5px;
  color: var(--muted);
}

.p-stats b {
  display: block;
  font-size: 12px;
  color: var(--text);
}

.profile-card q {
  display: block;
  margin-top: 10px;
  font-size: 9px;
  color: #444;
}

/* Step 2: the "finding your circle" ring (styles in demo.css), a bit larger
   than the CTA's to fill the step's art area. */
.step-art .ring {
  width: 200px;
  margin: 0;
}

/* Step 3: chat + plan */
.mini-chat {
  display: grid;
  gap: 10px;
  width: 230px;
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.bubble-row.me {
  justify-content: flex-end;
}

.bubble {
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 11px;
  font-weight: 500;
}

.bubble-row.me .bubble {
  border-radius: 14px 14px 4px 14px;
  background: var(--accent);
  color: #fff;
}

.plan-card {
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 11px;
  text-align: left;
}

/* ---------- a week in a circle ---------- */

.week {
  background: linear-gradient(180deg, var(--lav) 0%, var(--bg) 25%, var(--bg) 75%, var(--lav) 100%);
}

/* Vertical timeline: time on the left, a line with dots, moments on the right. */
.timeline {
  --time-w: 116px;
  --gap: 32px;
  position: relative;
  max-width: 700px;
  margin: clamp(48px, 7vw, 72px) auto 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--time-w) + var(--gap) / 2);
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 112, 67, 0.5), rgba(81, 70, 205, 0.35));
  translate: -50% 0;
}

.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--time-w) 1fr;
  column-gap: var(--gap);
  align-items: start;
}

.timeline > li + li {
  margin-top: 36px;
}

/* The dot on the line. */
.timeline > li::before {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(var(--time-w) + var(--gap) / 2);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
  translate: -50% 0;
}

.timeline time {
  padding-top: 2px;
  text-align: right;
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.timeline > li > :not(time) {
  grid-column: 2;
}

.tl-card {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.tl-card p {
  margin-top: 10px;
  color: #3a3a3a;
  font-size: 0.95rem;
}

.tl-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.tl-title {
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.tl-event .f-meta {
  font-size: 0.8rem;
}

.tl-rsvp {
  color: var(--muted);
  font-size: 0.85rem;
}

.tl-rsvp b {
  color: var(--green);
}

.tl-chat {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-chat li {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tl-chat li.me {
  justify-content: flex-end;
}

.tl-bubble {
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 18px 18px 18px 5px;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.06);
  font-size: 0.95rem;
  line-height: 1.4;
}

.tl-bubble b {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.tl-chat li.me .tl-bubble {
  border-radius: 18px 18px 5px 18px;
  background: var(--accent);
  color: #fff;
}

/* Reaction pill tucked under the last (outgoing) bubble. */
.tl-react {
  justify-self: end;
  width: fit-content;
  margin: -8px 10px 0 0;
  position: relative;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 2px 6px rgba(20, 20, 20, 0.1);
  font-size: 0.78rem;
}

/* Saturday: four friends around a table, seen from above. */
.tl-table {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0;
}

.table-top {
  position: absolute;
  inset: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9dd, #fbd3c0);
  box-shadow: inset 0 -6px 14px rgba(200, 110, 70, 0.18), 0 10px 24px rgba(60, 40, 30, 0.12);
  font-size: 1.7rem;
  letter-spacing: 6px;
}

.seat {
  position: absolute;
  translate: -50% -50%;
}

.seat .pav {
  border-width: 3px;
  box-shadow: 0 6px 14px rgba(40, 30, 60, 0.18);
}

.seat.n { left: 50%; top: 22px; }
.seat.e { left: calc(100% - 22px); top: 50%; }
.seat.s { left: 50%; top: calc(100% - 22px); }
.seat.w { left: 22px; top: 50%; }

.tl-table figcaption {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  width: 180px;
  translate: 0 -50%;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .timeline {
    --time-w: 0px;
    --gap: 0px;
    padding-left: 28px;
  }

  /* Line and dots sit in the 28px left padding, clear of the time labels. */
  .timeline::before {
    left: 7px;
  }

  .timeline > li::before {
    left: -21px;
  }

  .timeline > li {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .timeline time {
    text-align: left;
  }

  .timeline > li > :not(time) {
    grid-column: 1;
  }

  .timeline > li::before {
    top: 4px;
  }

  .tl-table {
    width: 200px;
    height: 200px;
    margin-bottom: 44px;
  }

  .table-top {
    inset: 38px;
  }

  .tl-table figcaption {
    left: 0;
    top: calc(100% + 10px);
    width: 280px;
    translate: none;
  }
}

/* ---------- founder's note ---------- */

.founder {
  background: var(--lav);
}

.note-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) clamp(24px, 6vw, 64px);
  border-radius: 28px;
  background: linear-gradient(170deg, #fff 0%, #fff 60%, #fdf0ea 100%);
  box-shadow: var(--shadow-card);
}

/* Big soft quote mark in the corner. */
.note-card::before {
  content: '\201C';
  position: absolute;
  top: clamp(4px, 2vw, 16px);
  right: clamp(20px, 4vw, 44px);
  font: 800 clamp(6rem, 14vw, 9rem) / 1 Georgia, serif;
  color: #fbe3d8;
  pointer-events: none;
}

.note-card blockquote {
  position: relative;
  margin: 18px 0 0;
}

.note-card p {
  color: #4a4a4a;
  font-size: 1rem;
  line-height: 1.75;
}

.note-card p + p {
  margin-top: 14px;
}

.note-card .note-lede {
  color: var(--text);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.note-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.note-sign img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(40, 30, 60, 0.15);
}

.note-sign b {
  display: block;
  font-size: 1rem;
}

.note-sign span {
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------- faq ---------- */

.faq-section {
  background: linear-gradient(180deg, var(--lav) 0%, var(--bg) 70%);
}

.faq {
  max-width: 720px;
  margin: clamp(40px, 6vw, 56px) auto 0;
}

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

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

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

.faq-toggle {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: background 0.25s;
}

.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease-out), background 0.25s;
}

.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-toggle {
  background: var(--accent);
}

.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
  background: #fff;
}

.faq-item[open] .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-a {
  padding: 0 48px 20px 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.faq-more {
  margin-top: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.faq-more a {
  margin-left: 6px;
  color: var(--accent);
  font-weight: 700;
}

.faq-more a:hover {
  text-decoration: underline;
}

/* ---------- closing cta ---------- */

.cta {
  padding: 0 0 clamp(72px, 10vw, 112px);
}

.cta-card {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
  border-radius: 32px;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(160deg, #e8e5fb 0%, #fbe3d8 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.cta-card .ring {
  width: min(180px, 48vw);
  margin-bottom: 24px;
}

.cta-card .lede {
  max-width: 28rem;
  margin: 16px auto 28px;
}

.cta-card .btn {
  padding: 14px 28px;
  font-size: 1rem;
}

/* ---------- footer ---------- */

.footer {
  padding: clamp(48px, 7vw, 72px) 0 32px;
  background: linear-gradient(180deg, #fbe6dc 0%, #f9ece6 100%);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer .brand-wordmark {
  height: 26px;
}

.footer-tag {
  margin-top: 16px;
  color: #555;
  font-size: 0.92rem;
}

.footer h4 {
  margin: 0 0 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

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

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 22px;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
  color: #555;
  font-size: 0.8rem;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-bottom a:hover {
  color: var(--text);
}

/* ---------- waitlist dialog ---------- */

.wl-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 32px 28px 26px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(170deg, #fff 0%, #fff 55%, #fdf0ea 100%);
  color: var(--text);
  box-shadow: 0 40px 100px rgba(20, 10, 5, 0.3);
  text-align: center;
}

.wl-dialog:focus {
  outline: none;
}

.wl-dialog::backdrop {
  background: rgba(24, 18, 30, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.wl-dialog[open] {
  animation: pop 0.35s var(--ease-out);
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

.wl-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f4f3f1;
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wl-dialog .brand-mark {
  justify-content: center;
}

.wl-dialog h2 {
  margin-top: 12px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.wl-dialog .lede {
  margin-top: 8px;
  font-size: 0.92rem;
}

.waitlist {
  margin-top: 22px;
}

.waitlist-row {
  display: grid;
  gap: 10px;
}

.waitlist input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.waitlist select {
  width: 100%;
  padding: 14px 42px 14px 16px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236e6e6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Placeholder option still selected: read as a hint, like the input placeholder. */
.waitlist select:invalid {
  color: var(--muted);
}

.waitlist select option {
  color: var(--text);
}

.waitlist input[hidden] {
  display: none;
}

.waitlist input:focus,
.waitlist select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.16);
}

.waitlist .btn {
  padding: 14px 22px;
  font-size: 0.95rem;
}

.waitlist-error {
  margin-top: 10px;
  color: #d93a2b;
  font-size: 0.85rem;
  font-weight: 600;
}

.waitlist-done {
  margin-top: 22px;
  padding: 16px;
  border-radius: 14px;
  background: #e8f6ee;
  color: #1f6e41;
  font-weight: 600;
  font-size: 0.95rem;
}

.fine {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.fine a {
  text-decoration: underline;
}

/* ---------- cookie banner ---------- */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(20, 10, 5, 0.18);
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cookie-banner-text {
  flex: 1 1 320px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cookie-banner-text a {
  color: var(--accent);
  font-weight: 600;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
}

.cookie-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.cookie-btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cookie-btn-ghost {
  background: #fff;
  color: var(--text);
}

/* ---------- scroll reveal (only when JS is on) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .advice {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 420px;
    margin-inline: auto;
  }

  .note {
    min-height: 0;
    padding-bottom: 56px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-top > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .faq-a {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .float {
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}