/* Unfold — hand-authored stylesheet for the static build.
   Design lifted from the Bolt/Tailwind build so the visual result is unchanged.
   British English throughout. No external requests: system font stack only,
   which matters for a product that sells on privacy. */

/* ---------- Tokens ---------- */
:root {
  --cream: #f8faef;          /* page ground, and the hero/waitlist/footer bands */
  --white: #ffffff;
  --purple: #8b46fd;         /* primary, buttons, links */
  --purple-dark: #7a3de6;    /* button hover */
  --stone-50: #fafaf9;       /* alternating section band */
  --stone-200: #e7e5e4;      /* input borders */
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;      /* headings */
  --brown: #473323;          /* footer text only */
  --error: #b3261e;          /* form validation — a firm red, not an alarm */
  --purple-wash: #f3edfe;    /* tint behind pulled-out quotes */

  --measure: 75rem;          /* ~1200px page grid */
  --measure-narrow: 45rem;   /* reading measure for body copy */
  --measure-form: 28rem;     /* max-w-md */

  --radius: 0.5rem;
  --radius-lg: 1rem;

  --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--stone-700);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

h1, h2, h3 { color: var(--stone-800); line-height: 1.25; margin: 0; }

p { margin: 0; }

a { color: var(--purple); }

/* Respect a reduced-motion preference. The audience is people managing
   overwhelm, so motion is a comfort setting, not a decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: 1.5rem; }
.wrap-narrow { max-width: var(--measure-narrow); margin-inline: auto; }
.centre { text-align: center; }
@media (min-width: 64rem) { .wrap { padding-inline: 2rem; } }

/* Visible to a screen reader, gone from the page. */
.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;
}

.band { padding-block: 3.5rem; }
@media (min-width: 48rem) { .band { padding-block: 4.5rem; } }
.band--cream { background-color: var(--cream); }
.band--white { background-color: var(--white); }
.band--stone { background-color: var(--stone-50); }

@media (max-width: 40rem) {
  .wrap { padding-inline: 1rem; }
}

/* ---------- Header ---------- */
/* Sticky, centred logo that shrinks once the page is scrolled. Height is
   transitioned rather than the layout reflowing, so nothing below it jumps. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--cream);
  transition: none;
}

.site-header__inner {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 300ms ease;
}

/* Every Unfold logo, header and footer, is a link home. The <a> just wraps
   the image — line-height reset so it adds no height of its own. */
.site-header__inner a { display: flex; }
.site-header__logo { height: 48px; width: auto; transition: height 300ms ease; }

.site-header.is-scrolled .site-header__inner { height: 60px; }
.site-header.is-scrolled .site-header__logo { height: 24px; }

/* ---------- Hero ---------- */
/* Reproduces the original's responsive steps exactly. From 768px up the
   screens image carries a -120px top margin that tucks it under the sticky
   header; below that it sits in normal flow. Padding steps 3 / 4 / 5 / 8rem. */
.hero { padding-block: 3rem; }

/* A <picture> is inline by default, which would break the auto margins, so
   the sizing lives on the wrapper and the img just fills it. */
.hero__screens {
  display: block;
  width: 100%;
  max-width: min(70%, 620px);
  margin-inline: auto;
  margin-bottom: 2rem;
}

.hero__screens img { width: 100%; }

.hero__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 1.5rem;
  padding-inline: 0.5rem;
}

.hero__sub {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--stone-600);
  margin-bottom: 2rem;
}

.hero__note { color: var(--stone-600); font-size: 0.875rem; margin-top: 1rem; }

@media (min-width: 40rem) {          /* sm */
  .hero { padding-block: 4rem; }
  .hero__screens { margin-bottom: 3rem; }
  .hero__title { font-size: 1.875rem; margin-bottom: 2rem; }
  .hero__sub { font-size: 1.25rem; }
  .hero__note { font-size: 1rem; }
}

@media (min-width: 48rem) {          /* md — the tuck begins here */
  .hero { padding-block: 4rem; }
  .hero__screens { margin-top: -120px; }
  .hero__title { font-size: 2.25rem; }
}

@media (min-width: 64rem) {          /* lg */
  .hero { padding-block: 5.5rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background-color: var(--purple);
  color: var(--stone-50);
  border: 0;
  border-radius: var(--radius);
  padding: 0.875rem 2.5rem;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transition: background-color 200ms ease;
}

.btn:hover { background-color: var(--purple-dark); }
.btn:focus-visible { outline: 3px solid var(--purple-dark); outline-offset: 3px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 40rem) {
  .btn { width: 100%; max-width: 20rem; }
}

/* ---------- Prose sections ---------- */
.lede {
  font-size: 1.875rem;        /* text-3xl */
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.pull-quote { font-size: 1.25rem; font-style: italic; color: var(--stone-700); }
.lede-attr { margin-top: -1rem; margin-bottom: 2rem; font-size: 0.9375rem; color: var(--stone-500); }

.stack > * + * { margin-top: 1.5rem; }
.stack-tight > * + * { margin-top: 1rem; }

/* Privacy-policy prose: readable measure, tighter rhythm than the marketing
   sections, plain bulleted lists. */
.legal { font-size: 1rem; color: var(--stone-700); line-height: 1.6; }
.legal > * + * { margin-top: 1.25rem; }
.legal h2 { margin-top: 2.25rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin-top: 0.75rem; padding-left: 1.35rem; }
.legal li { margin-top: 0.4rem; }

.body-lg { font-size: 1.125rem; color: var(--stone-700); }

.section-title {
  font-size: 1.875rem;        /* text-3xl */
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Both headings step up to text-4xl at lg, as in the original. */
@media (min-width: 64rem) {
  .lede { font-size: 2.25rem; }
  .section-title { font-size: 2.25rem; }
}

/* ---------- Numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { display: flex; gap: 1.25rem; align-items: flex-start; }
.steps > li + li { margin-top: 1.5rem; }

.steps__num {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: var(--stone-200);
  color: var(--stone-600);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

.steps__title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; }
.steps__body { color: var(--stone-600); line-height: 1.45; }

/* Row variant: the four steps side by side from 48rem up, number stacked
   above the text. Falls back to the stacked list on mobile. */
@media (min-width: 48rem) {
  .steps--row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
  .steps--row > li { flex-direction: column; gap: 0.75rem; }
  .steps--row > li + li { margin-top: 0; }
}

/* ---------- Founder cards ---------- */
.founders { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .founders { grid-template-columns: 1fr 1fr; } }

.founder {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.founder__photo {
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.founder__name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.founder__role { color: var(--stone-600); margin-bottom: 1rem; }
.founder__words { color: var(--stone-700); }
.founder__words p { font-style: italic; }
.founder__words > * + * { margin-top: 1rem; }
.founder__words > div > p + p { margin-top: 1rem; }
.founder__words > [hidden] + * { margin-top: 0; }

/* The expander is a real button so it is reachable by keyboard and announced
   by a screen reader. No layout shift: the extra paragraphs are hidden with
   [hidden], and the card grows downwards only. */
.founder__toggle {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--purple);
  cursor: pointer;
}

.founder__toggle:hover { text-decoration: underline; }
.founder__toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ---------- Waitlist section ---------- */
.waitlist__intro { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; margin-bottom: 3rem; }
@media (min-width: 48rem) { .waitlist__intro { flex-direction: row; } }

.waitlist__photo { width: 260px; height: 260px; border-radius: var(--radius-lg); object-fit: cover; flex-shrink: 0; }

.small-print { color: var(--stone-600); font-size: 0.875rem; }

/* The signup form. Left-aligned so the consent text + privacy link read as a
   sentence, not a caption. Block flow when stacked, so the source order —
   email, status, consent, button, turnstile — is the visual order (checkbox
   above the button). A grid from 40rem up lifts email + button onto one row. */
.waitlist-form { max-width: var(--measure-form); margin-inline: auto; text-align: left; }

.waitlist-form__input {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font: inherit;
  color: var(--stone-800);
  background-color: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.waitlist-form__input::placeholder { color: var(--stone-500); }
.waitlist-form__input:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.waitlist-form__input[aria-invalid="true"] { border-color: var(--error); }
.waitlist-form__input[aria-invalid="true"]:focus-visible { outline-color: var(--error); }

.waitlist-form__submit { margin-top: 1.25rem; white-space: nowrap; }

/* Collapsed to nothing until it has a message, then it pushes the rest down.
   Stays in the DOM (not display:none) so aria-live still announces. */
.waitlist-form__status { font-size: 0.9375rem; color: var(--stone-700); }
.waitlist-form__status:not(:empty) { margin-top: 0.625rem; }
.waitlist-form__status.is-error { color: var(--error); font-weight: 500; }

/* Honeypot: pushed off-screen rather than display:none — some bots skip
   fields that are genuinely hidden but fill ones that are merely positioned. */
.waitlist-form__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist-form__consent {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--stone-600);
  line-height: 1.45;
}
.waitlist-form__consent input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--purple);
}

/* Reserve the widget's height so nothing below it jumps when it resolves. */
.waitlist-form__turnstile { margin-top: 1.25rem; min-height: 65px; }

@media (min-width: 40rem) {
  .waitlist-form {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
  }
  .waitlist-form__input  { grid-column: 1; grid-row: 1; }
  .waitlist-form__submit { grid-column: 2; grid-row: 1; margin-top: 0; }
  .waitlist-form__status,
  .waitlist-form__consent,
  .waitlist-form__turnstile { grid-column: 1 / -1; align-self: start; }
}

.waitlist-form__done { max-width: var(--measure-form); margin-inline: auto; text-align: center; }
.waitlist-form__done-icon { color: var(--purple); margin-bottom: 0.5rem; }
.waitlist-form__done .steps__title { margin-bottom: 0.5rem; }
.waitlist-form__done:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }

/* ---------- Footer ---------- */
.site-footer { background-color: var(--cream); padding-block: 3rem; text-align: center; }
.site-footer__logo { display: inline-block; margin-bottom: 1rem; }
.site-footer img { height: 32px; width: auto; }
.site-footer p { color: var(--brown); font-size: 0.75rem; }
.site-footer p + p { margin-top: 0.5rem; }
.site-footer .copyright { font-size: 0.875rem; }
.site-footer a { color: var(--brown); }

/* ---------- Site-copy v3 (draft, branch site-copy-v3) ---------- */
/* Attributed alpha-user quotes (§3, §4). Tinted card with a purple edge and
   a large opening mark, so real voices stand out from the surrounding prose. */
.quote {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.75rem 1.5rem 2.5rem;
  background-color: var(--purple-wash);
  border-left: 4px solid var(--purple);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote::before {
  content: "\201C";
  position: absolute;
  left: 0.65rem;
  top: 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--purple);
}
.quote blockquote {
  margin: 0;
  font-size: 1.25rem;      /* ~20px */
  font-style: italic;
  line-height: 1.5;
  color: var(--stone-800);
}
.quote__cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--purple-dark);
}
/* Quotes held pending a participant's consent — greyed so they read as slots. */
.quote--pending { background-color: var(--stone-50); border-left-color: var(--stone-200); }
.quote--pending::before { color: var(--stone-200); }
.quote--pending blockquote { color: var(--stone-500); font-style: italic; }

/* The single alpha figure, set a little apart from the recounted moments. */
.evidence {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stone-200);
  font-size: 1.0625rem;
  color: var(--stone-600);
}

/* §4 contrast + feature blocks: heading over a paragraph. Single column on
   mobile; the contrasts go to 3 columns and the features to 2 from 48rem up. */
.feature-list { display: grid; gap: 2rem; }
.feature-list h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--stone-800); }
.feature-list p { color: var(--stone-700); }
@media (min-width: 48rem) {
  .feature-list--3 { grid-template-columns: repeat(3, 1fr); }
  .feature-list--2 { grid-template-columns: repeat(2, 1fr); }
}
.feature-list .quote { margin-top: 1.25rem; padding: 1.1rem 1.25rem 1.1rem 2rem; }
.feature-list .quote::before { font-size: 2.25rem; }
.feature-list .quote blockquote { font-size: 1.1rem; }

/* §3 recounted moments — a scannable list rather than a run-on paragraph. */
.moment-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.moment-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-top: 0.6rem;
  font-size: 1.0625rem;
  color: var(--stone-700);
}
.moment-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--purple); }

/* Footer social row. */
/* Footer social: icon links. The link's aria-label carries the name for
   screen readers; the SVG is decorative (aria-hidden). */
.site-footer__social {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.site-footer__social a {
  color: var(--purple);
  display: inline-flex;
  padding: 0.5rem;
  border-radius: var(--radius);
}
.site-footer__social a:hover { color: var(--purple-dark); }
.site-footer__social a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.site-footer__social svg { display: block; }

/* ---------- Placeholder marker ---------- */
/* Deliberately loud. Nothing wearing this may ship. Every instance is listed
   in the Phase 4 content scaffold. */
.placeholder {
  display: inline-block;
  background-color: #fff3c4;
  border: 2px dashed #b45309;
  color: #7c2d12;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* ---------- Unsubscribe ---------- */
/* Space is reserved for the tallest of the three states so the page does not
   jump when the answer arrives. */
.status {
  min-height: 12rem;
  max-width: 34rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status .section-title { margin-bottom: 1.25rem; }