/*
 * The landing page, and nothing else.
 *
 * It is a separate stylesheet from app.css rather than a section of it because
 * the two have almost nothing in common. app.css is eighteen hundred lines of
 * application furniture — a tab bar, sheets, a timeline, controls — and a
 * document with none of those would be paying for all of them. What the two do
 * share is imported below, which is the part that actually matters: the same
 * type scale, the same spacing, the same palette and the same dark mode, so the
 * page a person reads first and the application they open next are recognisably
 * the same thing rather than a marketing site and a product that happen to have
 * the same name.
 *
 * The page this styles has one inline script and loads none, which is a claim it
 * makes as much as a fact about it: it says nothing is being sent anywhere, and
 * a page that fetches no code from anybody is the cheapest way to be believed.
 * That one script reads the palette the person chose in the application, so a
 * returning visitor gets the colours they already use rather than the default —
 * without it, walking out of a warm cream application into a cool grey page
 * about it made the two look like different products. A stranger has chosen
 * nothing, and for them this renders in the default palette, light or dark by
 * the system setting, exactly as it would with scripting switched off.
 *
 * The brand is spent freely here and nowhere else in the product. Every screen
 * of the application has category colour on it, and orange and red are already
 * Family and Distracted, so an orange accent there would read as data. This
 * page has no data on it at all, which is what makes it the one surface where
 * the brand can be the loudest thing.
 */

@import url('./tokens.css');
@import url('./themes.css');

/* ── reset ─────────────────────────────────────────────────────────── */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* A person who has asked their system for less motion has asked for this too.
   The application routes every transition through the motion tokens so one rule
   can switch them off; this page has no transitions to switch off, and the only
   thing that moves is the jump an in-page anchor makes. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

/* The skip link, which is invisible until it is the thing you are on. Off
   screen rather than `display: none`, because a hidden element is not focusable
   and a skip link that cannot be tabbed to is decoration. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus,
.skip:focus-visible {
  left: var(--space-3);
  top: var(--space-3);
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
}

/* ── the shared measure ────────────────────────────────────────────── */

/*
 * Everything on the page is centred in the same column, and the column is the
 * application's own `--page-max`. That is what stops this reading as a wide
 * marketing site that then hands over to a narrow app.
 */
.hero__inner,
.section,
.closing,
.footer {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ── the hero ──────────────────────────────────────────────────────── */

/*
 * The same glow as the application's first screen, from the same two tokens and
 * in the same proportions, so arriving here and then opening the app is one
 * continuous surface rather than two designs.
 *
 * Nothing sets a text colour on top of it, and that is deliberate rather than
 * incidental: the warm end of the brand carries no legible ink at all — white
 * on it is 2.2:1 — so the only safe arrangement is the one where the glow is
 * mixed down into the page and what a person actually reads on is the page.
 */
.hero {
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
  background:
    radial-gradient(
      120% 62% at 50% 0%,
      color-mix(in srgb, var(--brand-warm) 18%, transparent) 0%,
      color-mix(in srgb, var(--brand-deep) 7%, transparent) 45%,
      transparent 72%
    )
    no-repeat;
}

/* No radius and no box-shadow: the file arrives with its own rounded tile and
   is transparent outside it, so a radius would clip corners that are already
   cut and a shadow would be thrown by the square the drawing sits in. */
.hero__mark {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto var(--space-4);
}

.hero__name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.hero__tagline {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.hero__lede {
  max-width: 34rem;
  margin: var(--space-5) auto 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.hero__actions {
  margin-top: var(--space-5);
}

.hero__terms {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/*
 * The one control on the page, and the one place in the whole product where the
 * brand is an action rather than a decoration.
 *
 * `--brand-deep` and not `--brand-ink`, which is what everything else here that
 * wears the brand uses. The two are answering different questions. `--brand-ink`
 * is the brand written *on the page*, so it has to flip by theme to stay legible
 * against a background that changes. This is the brand *as* the background, with
 * white on it, and that pairing is the same in every theme: white on the deep
 * end is 5.5:1 and clears AA, white on the warm end is 2.2:1 and does not.
 * tests/tokens.test.js holds both halves of that.
 */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-comfortable);
  padding-inline: var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: #ffffff;
  text-decoration: none;
  background: var(--brand-deep);
  border-radius: var(--radius-pill);
}

.cta:hover {
  /* Towards the warm end rather than to it: enough to answer the pointer,
     nowhere near far enough to take the text below its contrast floor. */
  background: color-mix(in srgb, var(--brand-warm) 22%, var(--brand-deep));
}

/* ── sections ──────────────────────────────────────────────────────── */

.section {
  padding-block: var(--space-6);
}

.section__heading {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.section__lede {
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--text-secondary);
}

/* ── the example day ───────────────────────────────────────────────── */

/*
 * A bar of proportional segments, each one grown by the hours it stands for.
 * `flex-grow` does the arithmetic, so the numbers in the markup are hours and
 * not percentages nobody can check.
 *
 * The segments have no gaps between them because a day has none. The whole bar
 * is `role="presentation"`: it says nothing the legend below it does not say in
 * words, which is what keeps colour from being the only carrier here.
 */
.strip {
  display: flex;
  height: var(--space-6);
  margin-top: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius);
  /* Not a decorative edge. Several category colours are light, and the palest
     of them against a white surface is a segment with no visible boundary. */
  box-shadow: inset 0 0 0 1px var(--border);
}

.strip__part {
  flex-grow: var(--span);
  background: var(--fill);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.legend__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--fill);
}

.legend__value {
  font-family: var(--font-numeric);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── how it works ──────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* The number is generated rather than written, so the markup stays an ordered
   list and the steps cannot be renumbered wrongly by an edit. */
.step__heading::before {
  content: counter(step);
  font-family: var(--font-numeric);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-ink);
}

.step__body {
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

/* ── the promise ───────────────────────────────────────────────────── */

.section--promise {
  padding-block: var(--space-6);
}

.promise {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.promise__item {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-secondary);
}

/* A rule, not a tick. A tick in a list of things the product does *not* do
   reads as a feature checklist, which is the tone this section is trying not
   to have.

   `--brand-ink` rather than `--brand-deep` even though this is a mark and not
   text: it is 2px of colour and the only thing separating one item from the
   next, and the deep end against a dark page is 3.4:1 — enough to pass as a
   graphic, not enough to be seen. */
.promise__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: var(--space-3);
  height: 2px;
  background: var(--brand-ink);
}

/* ── features ──────────────────────────────────────────────────────── */

.features {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 34rem) {
  .features {
    grid-template-columns: 1fr 1fr;
  }
}

.feature {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.feature__heading {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.feature__body {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── closing ───────────────────────────────────────────────────────── */

.closing {
  padding-block: var(--space-6);
  text-align: center;
}

.closing__heading {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.closing__body {
  max-width: 34rem;
  margin: var(--space-3) auto 0;
  color: var(--text-secondary);
}

/* ── footer ────────────────────────────────────────────────────────── */

.footer {
  padding-block: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  border-top: 1px solid var(--border);
}

.footer__line--quiet {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
}