/* ===========================================================================
   NEST'S PUBLIC SITE — one stylesheet for every page under landing/.

   The design language is the app's, and the app is the source of it: the
   colour tokens below are copied from the :root block of
   frontend/src/index.css, not imported, because this site has no build step.
   When a token changes there, change it here in the same pull request.

   The app's one rule holds here too: colour lives in the pictures, the
   interface stays quiet. The one picture on this site is the day strip on the
   home page, and it is the only place amber appears. Everything else is oat,
   sage and deep teal.

   Three faces, all the reader's own (no web font, so nothing loads from
   anywhere but this site):
     --font-round  the app's rounded face: the wordmark, headlines, buttons
     --font-text   body copy
     --font-mono   small tracked labels: the eyebrow, the strip's hours

   Type is in rem, so a reader's own text size is honoured. Light only, like
   the app (night is a choice made in the app's settings, never the OS's).
   =========================================================================== */

:root {
  --canvas: #faf6ed;
  --surface: #fffdfa;
  --ink: #204b49;
  --ink-soft: #526b67;
  --on-ink: #fffdfa;
  --line: #dce3da;
  --control-line: #7b8d84;
  --sage: #e7eee7;
  --sage-deep: #d8e6dc;
  /* The illustration palette: the day strip only. */
  --amber: #e8a33d;
  --amber-deep: #d18f2e;

  --font-round: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --page-max: 1180px;
  --prose-max: 680px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* For a keyboard user, the first stop skips the header. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* --- the frame ------------------------------------------------------------ */
.frame {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: 20px;
}

/* The app's wordmark: four capitals in the rounded face, tracked open so
   they do not touch. */
.wordmark {
  font-family: var(--font-round);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
}

/* --- controls --------------------------------------------------------------
   The app's buttons: pills, filled deep teal for the one thing to do, an
   outline for everything else. 48px and up, as in the app. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-round);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    transform 0.16s ease;
}
.button:hover {
  background: #2a5f5c;
}
.button:active {
  transform: scale(0.97);
}
.button-quiet {
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
}
.button-quiet:hover {
  background: var(--sage);
}

/* The small tracked label stylinai's issue line taught us: mono, caps, air. */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- the home page: a card, one screen tall where the screen allows -------- */
.card {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(32px, 5vh, 56px);
  padding-top: clamp(16px, 4vh, 48px);
  padding-bottom: clamp(40px, 7vh, 72px);
}

.headline {
  max-width: 15.5ch;
  font-family: var(--font-round);
  font-size: clamp(2.5rem, 1.1rem + 5.6vw, 6.25rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* The promise in two tones: the offer in ink, the reassurance after it in
   the softer teal, the way the app sets a value beside its label. */
.headline-soft {
  color: var(--ink-soft);
}
.headline-line {
  display: block;
}

.eyebrow {
  margin-bottom: 20px;
}

.offer {
  display: grid;
  gap: 28px;
  align-items: start;
}
.lede {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- the waitlist form ---------------------------------------------------- */
.join {
  width: 100%;
  max-width: 520px;
}
.join-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.join-input {
  width: 100%;
  min-height: 52px;
  padding: 0 22px;
  border: 1.5px solid var(--control-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
}
.join-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}
.join-input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}
.join-row .button {
  min-height: 52px;
}
.join-note {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* The honeypot. Off-screen rather than display:none, which form-filling
   bots skip; aria-hidden and out of the tab order, so no person meets it. */
.join-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* On a wider screen the field and its button share one pill. */
@media (min-width: 560px) {
  .join-row {
    flex-direction: row;
    gap: 0;
    padding: 5px;
    border: 1.5px solid var(--control-line);
    border-radius: 999px;
    background: var(--surface);
  }
  .join-row:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--ink);
  }
  .join-input {
    min-height: 46px;
    padding: 0 18px;
    border: none;
    background: transparent;
  }
  .join-input:focus-visible {
    outline: none;
  }
  .join-row .button {
    min-height: 46px;
  }
}

@media (min-width: 900px) {
  .offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 48px;
    align-items: end;
  }
}

/* --- the day strip: the site's one picture ---------------------------------
   One illustrated day, midnight to midnight: sleeps in deep teal, the
   stretches between them in sage, and one of those stretches in amber, which
   is what NEST is for. Drawn as SVG rects (attributes, not inline styles, so
   the Content-Security-Policy holds), stretched to the column. */
.day {
  position: relative;
  padding-top: 34px;
}
.day-bar {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 64px);
  border-radius: 12px;
}
.day-sleep {
  fill: var(--ink);
}
.day-awake {
  fill: var(--sage-deep);
}
.day-nest {
  fill: var(--amber);
  transform-box: fill-box;
  transform-origin: left center;
  animation: day-fill 0.9s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* The label above the amber stretch, which starts at 09:00 (37.5% of the
   day). Kept in step with the rect in index.html by hand. */
.day-callout {
  position: absolute;
  top: 0;
  left: 37.5%;
  display: flex;
  align-items: flex-end;
  height: 34px;
  padding-left: 10px;
  padding-bottom: 8px;
  border-left: 1.5px solid var(--amber-deep);
  color: var(--ink);
  white-space: nowrap;
}
.day-hours {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.day-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.day-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.swatch-sleep {
  background: var(--ink);
}
.swatch-awake {
  background: var(--sage-deep);
}
.swatch-nest {
  background: var(--amber);
}
.day-caption {
  margin-left: auto;
}

@keyframes day-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* The headline settles in once, line by line, then the amber stretch fills:
   one orchestrated moment on arrival, nothing ambient after it. */
.rise {
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rise-2 {
  animation-delay: 0.08s;
}
.rise-3 {
  animation-delay: 0.16s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .day-nest {
    animation: none;
  }
  .button {
    transition: none;
  }
}

/* --- footer --------------------------------------------------------------- */
.site-footer {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 0;
  list-style: none;
}
.footer-links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a[aria-current="page"] {
  text-decoration: underline;
}

/* --- the reading pages: privacy, terms, and the short ones ---------------- */
.page {
  flex: 1 0 auto;
  padding-top: clamp(24px, 6vh, 64px);
  padding-bottom: 80px;
}
.prose {
  max-width: var(--prose-max);
}
.prose h1 {
  margin-top: 14px;
  font-family: var(--font-round);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.prose h2 {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-round);
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.prose p,
.prose ul {
  margin-top: 14px;
}
.prose .intro {
  margin-top: 28px;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.prose ul {
  padding-left: 1.25em;
}
.prose li + li {
  margin-top: 8px;
}
.prose li::marker {
  color: var(--control-line);
}
.prose strong {
  font-weight: 600;
}
/* "The short version": what a parent reads if they read nothing else. */
.prose .summary {
  margin-top: 36px;
  padding: 8px 28px 26px;
  border-radius: 24px;
  background: var(--sage);
}
.prose .summary h2 {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
}
.prose .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.prose .join {
  margin-top: 28px;
}