/*
 * The Fatigue App - marketing site. Light aesthetic.
 *
 * This page and both applications share one light aesthetic, so a screenshot
 * here looks like the product a visitor will actually open.
 *
 * The TRUE brand purple carries it - #5B2A86 measures 9.9:1 on white, and is
 * used exactly as supplied. See packages/shared/src/tokens.ts for the same
 * palette on the app side.
 *
 * No web fonts and no third-party requests: the page loads its own two files
 * and its own images, nothing else. Nothing to disclose in a privacy notice,
 * and an instant first paint.
 */

:root {
  --paper: #ffffff;
  --tint: #f6f4f9;
  --ink: #16232b;
  --ink-2: #4a5c68;
  --muted: #6b7c88;
  --line: #e3e0ea;
  --line-soft: #efedf3;

  --brand: #5b2a86;          /* 9.90:1 on white */
  --brand-light: #b77bf0;
  /* The soft wash used by the image placeholders and the closing CTA.
     These two stops are duplicated in images/placeholder-*.svg - change both
     together, or the CTA and the photo slots stop matching. */
  --wash-1: #efe7f7;
  --wash-2: #dde9ec;
  --petrol: #146a79;         /* 6.24:1 on white */

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1140px;
  /* Photography sits flat on the page; a light lift is enough. */
  --shadow: 0 1px 2px rgb(22 35 43 / 6%), 0 12px 34px rgb(22 35 43 / 8%);

  /* Product screenshots need more. They are light images on a light page, so
     without a defined edge they float free - three layers (contact, mid,
     ambient) read as elevation rather than as a blur. */
  --shadow-screen:
    0 2px 6px rgb(22 35 43 / 9%),
    0 12px 26px rgb(22 35 43 / 11%),
    0 34px 64px rgb(22 35 43 / 17%);

  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.14; letter-spacing: -0.023em; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.centred { text-align: center; }
.sub { color: var(--ink-2); max-width: 60ch; margin-inline: auto; font-size: 17px; }
.note { color: var(--muted); font-size: 14px; margin-top: 24px; max-width: 52ch; }

.pull {
  border-left: 3px solid var(--brand-light);
  padding-left: 16px;
  color: var(--ink);
  font-size: 17px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: #fff; padding: 10px 16px; font-weight: 700; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

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

.nav {
  position: sticky; top: 0; z-index: 5;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
/* min-height rather than height: the bar keeps its 64px on every normal screen,
   but a button that grows -- large text settings, a longer label -- pushes it
   taller instead of overflowing it. */
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; padding: 9px 0;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 17.5px; letter-spacing: -0.02em;
  /* The product name is a name; breaking it across two lines reads as two
     things. It is short enough to always fit once the button beside it stops
     taking more width than it needs. */
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.nav__links a:hover { color: var(--ink); }
/* `.nav__links a` outranks `.btn` on specificity, which silently turned the
   nav button's label the same colour as its background. */
.nav__links a.btn { color: #fff; }
.nav__links a.btn:hover { color: #fff; }

/* ---------------------------------------------------------------- button */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  padding: 13px 22px; border-radius: 8px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  min-height: 44px;   /* same 44px floor as the apps */
  border: 1px solid transparent;
  /* justify-content centres the flex line, not the text inside it. The moment
     a label wraps, the line fills the button and the text falls back to `start`
     -- which is why the nav button read as left-aligned on a narrow screen. */
  text-align: center;
}
.btn:hover { background: #6d34a0; }
.btn--small { padding: 8px 15px; font-size: 14px; min-height: 38px; }
.btn--big { padding: 16px 30px; font-size: 16.5px; }
.btn--quiet { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: var(--tint); border-color: var(--brand-light); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-row--centred { justify-content: center; }

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

.hero { padding: 76px 0 68px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(33px, 4.6vw, 54px); font-weight: 800; }
.lede { color: var(--ink-2); font-size: clamp(16px, 1.6vw, 19px); max-width: 54ch; margin-top: 20px; }

.eyebrow {
  color: var(--brand); font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px;
}

.hero__figure { margin: 0; }
.hero__figure img { border-radius: 12px; box-shadow: var(--shadow); }

/* ----------------------------------------------------------------- bands */

.band { padding: 74px 0; }
.band--tint { background: var(--tint); }
.band h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 16px; }
.band .sub { margin-bottom: 44px; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.split + .split { margin-top: 68px; }
.split__copy p { color: var(--ink-2); }
.split__figure { margin: 0; }
.split__figure img { border-radius: 10px; box-shadow: var(--shadow); }
/* Source order keeps the image first for a sensible reading order; this only
   swaps the visual columns. */
.split--reverse .split__copy { order: -1; }

/* ------------------------------------------------------------ screenshots */

.shot { margin: 0; }
.shot img {
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-screen);
}
.shot--wide { margin-bottom: 0; }

/* The clinician block now closes the section rather than opening it, so the
   separating space belongs above it. */
.product__clinician { margin-top: 76px; }
.shot figcaption { color: var(--muted); font-size: 13.5px; text-align: center; margin-top: 14px; }
.shot--phone img {
  max-width: 300px;
  margin-inline: auto;
  border-radius: 22px;
  border: 6px solid #1b2a33;
  /* The phone reads as floating above the page, so it carries the most. */
  box-shadow:
    0 4px 10px rgb(22 35 43 / 10%),
    0 18px 34px rgb(22 35 43 / 14%),
    0 44px 76px rgb(22 35 43 / 22%);
}

/* ----------------------------------------------------------------- steps */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.steps__n {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 14.5px;
  margin-bottom: 14px;
}
.steps h3 { font-size: 17.5px; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 14.5px; }

/* ----------------------------------------------------------------- scale */

.scale { list-style: none; margin: 0; padding: 0; max-width: 640px; margin-inline: auto; }
.scale li {
  display: grid; grid-template-columns: 42px 108px 1fr;
  align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.scale li:last-child { border-bottom: 0; }
.scale__n {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 7px;
  /* Colour is never the only channel - number and name are always present. */
  background: color-mix(in srgb, var(--c) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 40%, #fff);
  color: var(--c); font-weight: 800;
}
.scale strong { font-size: 15.5px; }
.scale em { color: var(--muted); font-style: normal; font-size: 14.5px; }

/* ----------------------------------------------------------------- tiles */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--brand-light);
  border-radius: 10px; padding: 24px;
}
.tile h3 { font-size: 16.5px; margin-bottom: 9px; }
.tile p { color: var(--ink-2); font-size: 14.5px; }

/* ----------------------------------------------------------------- ticks */

.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 28px; margin-bottom: 14px;
  color: var(--ink-2); font-size: 15px;
}
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 9px; height: 5px;
  border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg);
}
.ticks strong { color: var(--ink); }

/* ---------------------------------------------------------------- closer */

/* Same diagonal wash as the image placeholders, so the closing section reads
   as part of the same family rather than a flat block of tint. */
.closer { background: linear-gradient(135deg, var(--wash-1) 0%, var(--wash-2) 100%); }

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

.foot { padding: 42px 0 60px; border-top: 1px solid var(--line-soft); }
.foot__inner { display: flex; flex-direction: column; gap: 12px; }
.foot__by { font-size: 14.5px; color: var(--ink-2); }
.foot__by a { color: var(--brand); font-weight: 600; text-decoration: none; }
.foot__small { color: var(--muted); font-size: 12.5px; max-width: 72ch; }

/* -------------------------------------------------------------- narrower */

@media (max-width: 900px) {
  .hero__grid, .split, .steps, .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .split--reverse .split__copy { order: 0; }
  .nav__links a:not(.btn) { display: none; }
  .hero { padding: 52px 0 46px; }
  .band { padding: 54px 0; }
  .split + .split { margin-top: 44px; }
  .product__clinician { margin-top: 48px; }
  .scale li { grid-template-columns: 42px 1fr; }
  .scale em { grid-column: 2; }
}

/* Phones. Below this the header is only the brand and one button, and the two
   of them were fighting for a viewport that 48px of gutter had already eaten
   into -- so the button's label wrapped, which made it taller than the bar and
   pushed the product name onto two lines. */
@media (max-width: 600px) {
  /* 24px each side is a twelfth of a 375px screen. The gutter narrows for the
     whole page, not just the header, so the brand still lines up with the
     content beneath it. */
  .wrap { padding: 0 16px; }

  /* The label is the button. Wrapping it is what broke the header, and there
     is no width at which "Request a / demo" is better than a smaller button. */
  .nav__links a.btn { white-space: nowrap; padding: 8px 13px; font-size: 13.5px; }

  .brand { font-size: 16.5px; gap: 8px; }
  .brand svg { width: 24px; height: 24px; }

  /* The rest of the buttons come down with the header, or the page reads as
     though only one of them was designed for a phone.
     `min-height: 44px` is NOT relaxed: these are the primary actions and 44px
     is the tap-target floor the apps hold themselves to. The padding shrinks,
     the target does not -- so the buttons get tighter, never harder to hit. */
  .btn { padding: 11px 18px; font-size: 14.5px; }
  .btn--big { padding: 14px 24px; font-size: 15.5px; }

  /* At 22px of padding the hero's two buttons totalled a pixel more than a
     375px screen allows, so they stacked. They fit side by side now. */
  .cta-row { gap: 10px; }
}

/* 320px -- an SE, or anything at a large browser zoom. The brand and the button
   are both nowrap by now, so there is no reflow left to absorb the last few
   pixels and the row simply overflows. Tightening the gap between them is what
   buys it back; shrinking the product name further would cost more than it
   saves. */
@media (max-width: 360px) {
  .nav__inner { gap: 10px; }
  .nav__links a.btn { padding: 8px 11px; font-size: 13px; }
  .brand { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}