/* ===========================================================================
   Foreverthread — website (home + privacy + terms)
   Warm, calm, premium. Brand gradient + a single drawn thread that loops into "e".
   =========================================================================== */

:root {
  /* palette */
  --ink:         #2C2622;
  --ink-soft:    #655B52;  /* secondary text — darkened to clear WCAG AA (>=4.5:1) on cream & gradient */
  --placeholder: #756A5F;  /* input placeholder — AA on the card background */
  --cream:       #FBF6F0;
  --card:        #FFFDFB;
  --terra:       #C2674F;  /* brand terracotta — icons / graphics only */
  --terra-deep:  #A8543E;  /* terracotta for white text (button) — 5.25:1 */
  --terra-deeper:#94432F;  /* button hover */
  --terra-ink:   #8F4632;  /* terracotta as small text on light/gradient — AA */
  --terra-soft:  #F6E4DC;
  --gold:        #D99A52;
  --gold-soft:   #F6E7D2;
  --blue:        #6E8FA8;
  --blue-soft:   #E3ECF1;
  --lav:         #CBB6C8;
  --lav-deep:    #8F73A1;  /* on-brand deepened lavender (assistant accent) */
  --lav-soft:    #EAE3F1;
  --blush:       #E8C6CB;
  --blush2:      #F3D6CF;
  --hairline:    rgba(44, 38, 34, 0.10);
  --hairline-2:  rgba(44, 38, 34, 0.06);

  /* type */
  --font-display: 'Spline Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;

  /* rhythm */
  --maxw: 1120px;
  --readw: 720px;
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--cream);
  font-size: clamp(16px, 1.05vw + 14px, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip; /* more robust than hidden; doesn't create a scroll container */
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
em { font-style: italic; }
.ink { color: var(--ink); }
.serif { font-family: var(--font-serif); }

a { color: inherit; }

/* ---- accessibility helpers ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--cream); padding: 10px 16px;
  border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.9rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

:focus-visible {
  outline: 2.5px solid var(--terra);
  outline-offset: 3px;
  border-radius: 6px;
}

/* layout primitives */
.section {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  padding-block: clamp(60px, 8.5vw, 112px);
}

.section__title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  max-width: 20ch;
  margin-inline: auto;
}
.eyebrow {
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  max-width: 42ch;
}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(40px, 7vw, 90px);
}

/* layered, dreamy brand gradient — "morning light through linen" */
.hero__bg {
  position: absolute;
  inset: -10% -10% 0 -10%;
  z-index: -2;
  background:
    radial-gradient(60% 44% at 50% 42%, rgba(251, 246, 240, 0.5),  rgba(251,246,240,0) 68%),
    radial-gradient(66% 54% at 12% 4%,  rgba(203, 182, 200, 0.62), rgba(203,182,200,0) 60%),
    radial-gradient(58% 48% at 90% 12%, rgba(243, 214, 207, 0.85), rgba(243,214,207,0) 58%),
    radial-gradient(80% 58% at 62% 0%,  rgba(232, 198, 203, 0.6),  rgba(232,198,203,0) 56%),
    linear-gradient(176deg, #EAD3D0 0%, #F0DCD5 30%, #F8EEE4 64%, var(--cream) 92%);
  animation: gradientDrift 16s ease-in-out infinite alternate;
}
@keyframes gradientDrift {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to   { transform: translate3d(-1.5%, 0.8%, 0) scale(1.06); }
}

.hero__thread {
  position: absolute;
  top: clamp(70px, 13vw, 150px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, 132vw);
  height: auto;
  z-index: -1;
  opacity: 0.92;
  pointer-events: none;
}
.thread-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawThread 2.6s var(--ease) 0.25s forwards;
}
@keyframes drawThread { to { stroke-dashoffset: 0; } }
/* gentle "breathing" once drawn */
.hero__thread { animation: threadBreathe 8s ease-in-out 3s infinite; }
@keyframes threadBreathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}

.brandbar {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 22px clamp(20px, 5vw, 40px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.wordmark__mark { width: 38px; height: 24px; color: var(--ink); }
.wordmark__text { font-weight: 600; font-size: 1.18rem; letter-spacing: -0.02em; }
.brandbar__cta {
  font-size: 0.92rem; font-weight: 600; text-decoration: none;
  color: var(--ink); padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 253, 251, 0.78);
  backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .brandbar__cta { background: rgba(255, 253, 251, 0.94); }
}
.brandbar__cta:hover { background: rgba(255, 253, 251, 0.98); border-color: rgba(44,38,34,0.18); }

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(48px, 9vw, 110px) clamp(20px, 5vw, 40px) 0;
  text-align: center;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 600;
  color: #7C3A28; /* deep terracotta — clears AA even over the lavender gradient */
  margin-bottom: 22px;
}
.hero__title {
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
  line-height: 1.08;
  max-width: 16ch;
  margin-inline: auto;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.hero__sub {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.hero__note {
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.hero__platform {
  margin: 26px auto 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.apple-glyph { width: 14px; height: 14px; color: var(--ink); flex: 0 0 auto; }
.hero__scroll {
  margin: 32px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
}
.hero__scroll svg { width: 16px; height: 16px; animation: nudge 2.4s ease-in-out infinite; }
.hero__scroll:hover { color: var(--ink); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ===========================================================================
   THE QUIET DRIFT
   =========================================================================== */
.feeling { text-align: center; }
.feeling .eyebrow {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink-soft);
  margin-inline: auto;
  margin-bottom: 28px;
  font-weight: 400;
}
.feeling__body {
  max-width: 30ch;
  margin-inline: auto;
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #4A423B;
}
.feeling__body em { color: var(--ink-soft); }
.feeling__body .ink { display: inline; }

/* ===========================================================================
   HOW IT WORKS — steps stitched by a vertical thread
   =========================================================================== */
.steps { text-align: center; }
.steps__list {
  list-style: none;
  margin: clamp(44px, 6vw, 64px) auto 0;
  padding: 0;
  max-width: 560px;
  text-align: left;
  position: relative;
}
.steps__list::before {
  content: "";
  position: absolute;
  left: 27px; top: 26px; bottom: 26px;
  width: 2px;
  background: linear-gradient(180deg, var(--terra-soft), var(--blush2), var(--terra-soft));
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 18px 0;
}
.step__num {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1.5px solid var(--terra-soft);
  color: var(--terra);
  font-weight: 600;
  font-size: 1.4rem;
  box-shadow: 0 8px 22px -16px rgba(194,103,79,0.7);
}
.step__title { font-size: 1.22rem; font-weight: 600; margin-bottom: 4px; }
.step__text { color: var(--ink-soft); max-width: 40ch; }
.steps__close {
  margin-top: clamp(36px, 5vw, 52px);
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ===========================================================================
   FEATURES
   =========================================================================== */
.features { text-align: center; }
.features .eyebrow { margin-inline: auto; }
.features__grid {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
  text-align: left;
}
.fcard {
  background: var(--card);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 32px);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.fcard:hover {
  transform: translateY(-3px);
  /* fallback for engines without color-mix() — keeps the depth cue */
  border-color: var(--accent);
  box-shadow: 0 24px 50px -34px rgba(44, 38, 34, 0.3);
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--accent) 70%, transparent);
}
.fcard__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 18px;
}
.fcard__icon svg { width: 28px; height: 28px; }
.fcard__title { font-size: 1.28rem; font-weight: 600; margin-bottom: 10px; }
.fcard__text { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }

/* ===========================================================================
   A DAY WITH EVERTHREAD — message-thread beats
   =========================================================================== */
.day { text-align: center; }
.day__thread {
  margin: clamp(44px, 6vw, 64px) auto 0;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.beat {
  background: var(--card);
  border: 1px solid var(--hairline-2);
  border-radius: 20px;
  border-top-left-radius: 6px;
  padding: 20px 24px;
  box-shadow: 0 18px 40px -34px rgba(44,38,34,0.6);
  max-width: 92%;
}
.beat:nth-child(2) { align-self: flex-end; border-top-left-radius: 20px; border-top-right-radius: 6px; background: var(--terra-soft); }
.beat:nth-child(3) { background: var(--meetup, #E3ECF1); }
.beat__time {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.beat__text { font-size: 1.05rem; line-height: 1.5; color: #3A332D; }
.day__close {
  margin-top: clamp(36px, 5vw, 52px);
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 34ch;
  margin-inline: auto;
}

/* ===========================================================================
   PRIVACY — soft full-width gradient band
   =========================================================================== */
.privacy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 22% 0%,  rgba(203,182,200,0.55), rgba(203,182,200,0) 60%),
    radial-gradient(60% 80% at 82% 100%, rgba(243,214,207,0.6), rgba(243,214,207,0) 60%),
    linear-gradient(180deg, #F3EAE6, #F7EFE9);
}
.privacy__inner {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 40px);
  text-align: center;
}
.privacy__title {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.18;
  max-width: 20ch;
  margin-inline: auto;
}
.privacy__body {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 52ch;
  color: #5A5048;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}
.chips {
  list-style: none;
  margin: clamp(28px, 4vw, 38px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 253, 251, 0.8);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terra);
}

/* ===========================================================================
   WHO IT'S FOR
   =========================================================================== */
.forwho { text-align: center; }
.forwho__lead {
  max-width: 26ch;
  margin-inline: auto;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 600;
}
.forwho__sub { margin-top: 20px; color: var(--ink-soft); font-size: 1.05rem; }

/* ===========================================================================
   WAITLIST CLOSE
   =========================================================================== */
.join { }
.join__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.join__title { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.join__body {
  margin: 20px auto 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}
.join__note {
  margin: 16px auto 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  max-width: 44ch;
}

/* ===========================================================================
   HONEST SOCIAL PROOF
   =========================================================================== */
.proof {
  max-width: 640px;
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 40px) clamp(70px, 9vw, 110px);
  text-align: center;
}
.proof__line {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 50ch;
  margin-inline: auto;
}
.proof__mark { width: 40px; height: 24px; color: var(--lav); display: block; margin: 0 auto 14px; }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.footer {
  border-top: 1px solid var(--hairline-2);
  text-align: center;
  padding: clamp(48px, 7vw, 72px) clamp(20px, 5vw, 40px) clamp(56px, 8vw, 88px);
  background: var(--cream);
}
.footer__mark { width: 50px; height: 32px; color: var(--ink); margin-bottom: 16px; }
.footer__tag { font-weight: 600; font-size: 1.05rem; }
.footer__links {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.footer__links a {
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__whisper { margin-top: 12px; color: var(--ink-soft); font-size: 0.82rem; }

/* ===========================================================================
   REVEAL ANIMATIONS
   =========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* hero on-load entrance — staggered, timed to arrive as the thread settles */
.reveal-hero {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn 0.8s var(--ease) forwards;
}
.reveal-hero[data-d="0"] { animation-delay: 0.15s; }
.reveal-hero[data-d="1"] { animation-delay: 0.30s; }
.reveal-hero[data-d="2"] { animation-delay: 0.50s; }
.reveal-hero[data-d="3"] { animation-delay: 0.70s; }
.reveal-hero[data-d="4"] { animation-delay: 0.85s; }
.reveal-hero[data-d="5"] { animation-delay: 0.98s; }
.reveal-hero[data-d="6"] { animation-delay: 1.10s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* chips settle/pulse once when revealed */
.chips.in .chip { animation: chipSettle 0.6s var(--ease) backwards; }
.chips.in .chip:nth-child(1) { animation-delay: 0.05s; }
.chips.in .chip:nth-child(2) { animation-delay: 0.15s; }
.chips.in .chip:nth-child(3) { animation-delay: 0.25s; }
@keyframes chipSettle {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  60% { transform: translateY(0) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (min-width: 900px) {
  .features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .brandbar__cta { display: none; }
  .hero__title { letter-spacing: -0.02em; }
}

/* ===========================================================================
   APP STORE DOWNLOAD BADGE + CTAs
   =========================================================================== */
.hero__cta { margin: clamp(28px, 4vw, 38px) auto 0; display: flex; justify-content: center; }
.download-cta { margin: clamp(26px, 4vw, 36px) auto 0; display: flex; justify-content: center; }

.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.65); }
.appstore-badge:active { transform: translateY(0); }
.appstore-badge__logo { width: 26px; height: 26px; flex: 0 0 auto; }
.appstore-badge__text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.appstore-badge__small { font-size: 0.66rem; letter-spacing: 0.02em; opacity: 0.9; }
.appstore-badge__big { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }

.privacy__more { margin-top: clamp(24px, 3vw, 32px); }
.privacy__more a { color: var(--terra-ink); font-weight: 600; text-decoration: none; }
.privacy__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
   LEGAL PAGES (privacy, terms)
   =========================================================================== */
.legal {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 40px) clamp(60px, 9vw, 110px);
}
.legal__back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; text-decoration: none;
  color: var(--ink-soft); font-size: 0.9rem; font-weight: 600;
}
.legal__back:hover { color: var(--ink); }
.legal h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -0.03em; margin-top: 14px; }
.legal__updated { color: var(--ink-soft); font-size: 0.9rem; margin-top: 10px; }
.legal__lede { margin-top: 26px; }
.legal__lede p {
  font-size: clamp(1.06rem, 1.8vw, 1.24rem);
  line-height: 1.55; color: #4A423B; margin-top: 16px;
}
.legal h2 {
  font-size: 1.26rem; margin-top: 40px; letter-spacing: -0.01em;
  padding-top: 20px; border-top: 1px solid var(--hairline-2);
}
.legal__lede + h2 { border-top: none; padding-top: 0; }
.legal p { color: #4A423B; margin-top: 14px; line-height: 1.7; }
.legal ul { color: #4A423B; margin-top: 14px; line-height: 1.7; padding-left: 1.2em; }
.legal li { margin-top: 8px; }
.legal a { color: var(--terra-ink); }
.legal__closing {
  margin-top: 40px; padding: 18px 22px;
  background: var(--card); border: 1px solid var(--hairline-2);
  border-radius: 16px; color: #4A423B; font-size: 1rem; line-height: 1.6;
}
.legal__footer {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--hairline-2);
  display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center;
}
.legal__footer a {
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.legal__footer a:hover { color: var(--ink); }
.legal__footer span { color: var(--ink-soft); }

/* eyebrow, callout + entity boxes on legal pages */
.legal__eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--terra-ink);
}
.legal__callout {
  margin: 24px 0 8px; padding: 20px 22px;
  background: var(--terra-soft); border-left: 4px solid var(--terra-deep);
  border-radius: 0 16px 16px 0;
}
.legal__callout .ct {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--terra-ink); margin-bottom: 8px;
}
.legal__callout p { margin-top: 0; color: #4A423B; }
.legal__entity {
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: 14px;
  padding: 16px 20px; line-height: 1.75; color: #4A423B; margin: 10px 0 4px;
}
.legal__copyright {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline-2);
  color: var(--ink-soft); font-size: 0.85rem;
}
/* wrap long user-filled details (ABN, addresses, URLs) instead of clipping */
.legal p, .legal li, .legal a, .legal__entity, .footer__links a, .hero__sub {
  overflow-wrap: break-word;
}

/* ===========================================================================
   REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .thread-path { stroke-dashoffset: 0; }
  .hero__bg { animation: none; }
  .hero__thread { animation: none; transform: translateX(-50%); }
  .reveal, .reveal-hero { opacity: 1; transform: none; animation: none; }
  .knot path { stroke-dashoffset: 0; }
}