/* 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 */

  --measure: 56rem;          /* max-w-4xl */
  --measure-narrow: 48rem;   /* max-w-3xl */
  --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; }

/* 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: 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: 70%;
  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: 5rem; }
  .hero__screens { margin-top: -120px; }
  .hero__title { font-size: 2.25rem; }
}

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

/* ---------- 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); }

.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; }

/* ---------- 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); }

/* ---------- 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; }