/*
  The site's whole stylesheet, lifted out of index.html when the legal pages arrived.

  Three pages needing the same 140 lines is the point at which a copy stops being
  cheaper than a file. The tokens matter more than the layout: privacy.html and
  support.html are the two pages a reviewer and an unhappy keeper actually read, and
  a legal page that looks like it came from a different company reads as boilerplate
  someone pasted rather than a position the app holds.
*/

/* The four colours, and nothing else. Red means a mark was made — never failure. */
:root {
  --paper: #f2eee4;
  --ink: #1a1d22;
  --graphite: #8a8578;
  --seal: #a8342a;
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --serif: "Newsreader", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

/* The hero is two columns and everything under it is one, so the outer container
   opens to the wider measure and the prose is pulled back in by `.narrow`. Reading
   copy set to 1080px is unreadable; a phone beside a headline at 640px does not fit.
   Two measures, one page. */
main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 640px; margin: 0 auto; }

.caption {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--graphite);
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 4.6vw, 28px);
  line-height: 1.2;
  margin: 12px 0 0;
}

p { margin: 14px 0 0; }
.lede { font-size: 17px; }
.quiet { color: var(--graphite); }
.seal { color: var(--seal); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
section { padding: 56px 0; }
header { padding: 56px 0 56px; }

/* Oni, above the fold and above the headline. Oni is the reason anyone taps
   through from a video, so Oni is the first thing on the page — not a screenshot
   of a list, and not a logo. The file is the app's own drawing, exported, so the
   creature on the site and the creature in the app are the same animal. */
/* ── The hero ────────────────────────────────────────────────────────────────
   Copy left, the product right, and the product is a real phone rather than a
   list of adjectives. Nobody downloads a habit tracker because of a paragraph;
   they download it because they saw the thing and wanted it.

   The handset is drawn in CSS rather than dropped in as a screenshot, for three
   reasons that all matter more than the hour it cost. It cannot go stale when a
   screen is redesigned — and this one has been redesigned twice already. It stays
   sharp on every display instead of shipping a 2x PNG and hoping. And it weighs
   nothing, on a page whose entire job is to load fast enough to keep somebody who
   arrived from a video. */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0 64px;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: 64px; padding: 76px 0 88px; }
}
.hero h1 { font-size: clamp(32px, 5.4vw, 52px); }
.hero-copy { min-width: 0; }
.hero .lede { margin-top: 18px; max-width: 34em; }

/* The kicker carries the one line the whole launch is written around. It sits
   above the outcome rather than replacing it: the headline says what you get, and
   this says what it will not do to you on the way. */
.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--seal);
  border: 1px solid color-mix(in srgb, var(--seal) 30%, transparent);
  padding: 7px 11px;
  margin-bottom: 20px;
}

/* ── The download ────────────────────────────────────────────────────────────
   The page used to ask for an email and nothing else, which was right while there
   was nowhere to send anybody. The moment a listing exists, the email is the
   *second* thing a visitor should be offered and the download is the first —
   asking a person who is ready to install for their address instead is a step
   added to a journey that was already complete.

   Drawn rather than badged. Apple supplies a PNG lockup, and it is a rounded black
   pill with a hairline and a gradient in it: three things this design does not have
   anywhere else, sat in the most prominent position on the page. The Apple mark is
   kept — that is the part that has to be recognisable — and everything around it is
   set in the app's own ink, square, on the same grid as the rest.

   Centred, and alone on its line. It shared a row with "Free, permanently — or get one
   email when it opens", which read as a caption but behaved as competition: the eye lands
   on the darkest object on the page, then is immediately handed two more things to read
   and a second link to weigh. Centring it costs the left margin the rest of the hero is
   set on, and buys the one thing worth more than alignment here — nothing else at that
   height for the eye to go to. */
.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 15px 30px 15px 24px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.appstore:hover { background: var(--seal); border-color: var(--seal); }
.appstore svg { flex: 0 0 auto; }
.appstore .a {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  opacity: 0.7;
}
.appstore .b {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.1;
}

/* ── The handset ─────────────────────────────────────────────────────────────
   Rounded, because it is hardware and hardware is rounded. The app inside it
   keeps the square corners the product actually holds to, so the one curve on
   the page is the one curve that exists in the world. No shadow: the bezel is
   ink on paper and needs no help separating from it. */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 300 / 626;
  background: var(--ink);
  border-radius: 46px;
  padding: 11px;
  position: relative;
}
.phone::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 22px;
  background: var(--ink);
  border-radius: 11px;
  z-index: 2;
}
.screen {
  height: 100%;
  background: var(--paper);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40px 18px 0;
}
.screen .bar {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: 14px;
}
/* Oni, mid-screen and unmistakably the point of the app. */
.screen .creature { display: flex; justify-content: center; padding: 6px 0 2px; }
.screen .creature img { width: 108px; height: auto; }
.screen .said {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: var(--graphite);
  margin: 6px 0 0;
}
.screen .lines { margin-top: 16px; border-top: 1px solid var(--rule); }
.screen .l {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--rule);
}
.screen .l .m { font-family: var(--mono); font-size: 11px; color: var(--seal); width: 9px; }
.screen .l .t { font-family: var(--serif); font-size: 14px; }
.screen .l.kept .t { text-decoration: line-through; text-decoration-color: var(--seal); }
/* The tab bar sits on the bottom edge, which is what makes the picture read as a
   phone rather than a card with a border around it. Six berths now rather than
   five, and REMINDERS is nearly twice the width of the shortest label, so the type
   comes down and the tracking with it — exactly the same compromise the real bar
   makes on a 320pt handset, for exactly the same reason.

   Each berth carries its real mark above the word now. Labels alone were accurate
   and still misleading: the bar the app opens on is six drawn icons, and a picture
   of the product that leaves out the thing a person will look at every day is not
   a picture of the product. The marks scale to 13px because the handset is drawn at
   300px against a real 393pt screen — the same 20pt icon, at the same ratio. */
.screen .tabs {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
  padding: 9px 2px 15px;
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--graphite);
}
.screen .tabs .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.screen .tabs svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The live berth: seal, and a hairline over it, which is exactly how the real bar
   marks where you are — the same struck-through gesture as a kept line. */
.screen .tabs .on { color: var(--seal); position: relative; }
.screen .tabs .on::before {
  content: "";
  position: absolute;
  top: -9px;
  width: 20px;
  height: 1px;
  background: var(--seal);
}

.oni { display: block; margin: 0 0 2px -14px; width: 210px; height: auto; }
.oni-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--graphite);
}
.oni-small { display: block; margin: 0 0 10px -8px; width: 96px; height: auto; }

/* The three lines, drawn the way the app draws them. This is the product in one
   picture, and it has to be legible before anybody scrolls. */
.sheet {
  margin-top: 32px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, #fff 34%, var(--paper));
  padding: 22px 22px 6px;
}
.line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.line:last-child { border-bottom: 0; }
.line .mark { font-family: var(--mono); font-size: 13px; color: var(--seal); width: 14px; }
.line .text { font-family: var(--serif); font-size: 19px; }
.line.kept .text { text-decoration: line-through; text-decoration-color: var(--seal); }
.line .cadence { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }

.grid { display: grid; gap: 0; margin-top: 26px; }
.row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row .n { font-family: var(--mono); font-size: 12px; color: var(--seal); padding-top: 4px; }
.row h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0; }
.row p { margin: 4px 0 0; font-size: 14px; color: var(--graphite); }

.free { margin-top: 22px; padding: 0; list-style: none; }
.free li { padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--rule); }
.free li::before { content: "—"; color: var(--seal); padding-right: 12px; }
/* The 404 reuses this list as its way out, and it was the first place on the site to put
   a link inside one — which came out as default browser blue, underlined, on a page whose
   entire palette is four colours. Ink with a seal underline: still unmistakably a link,
   in the app's own hand. */
.free li a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--seal); text-underline-offset: 3px; }
.free li a:hover { color: var(--seal); }

/* The capture. Everything above it exists to get someone this far. */

/* The label was carrying `class="visually-hidden"` with no such rule and a `hidden`
   attribute doing the actual work — which does not hide it *visually*, it removes it
   from the accessibility tree, leaving the input with nothing but a placeholder to
   announce. This is the rule that was always meant to be here: gone from the page,
   still read aloud. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

form { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 15px 16px;
  border-radius: 0;
}
input[type="email"]:focus { outline: 0; border-color: var(--ink); }
button {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper);
  background: var(--seal);
  border: 0;
  padding: 16px 26px;
  cursor: pointer;
}
.fine { margin-top: 12px; font-size: 12px; color: var(--graphite); }

footer { padding: 48px 0 72px; border-top: 1px solid var(--rule); }
footer a { color: var(--graphite); }

/* ── The prose pages ─────────────────────────────────────────────────────────
   privacy.html, terms.html and support.html are long-form reading rather than a
   pitch, so they get a heading level the landing page never needed and a table
   that can carry "what is collected / why" without becoming a spreadsheet. */

.doc { padding: 40px 0 24px; }
.doc h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 34px 0 0;
}
.doc p:first-of-type { margin-top: 10px; }
.doc a { color: var(--seal); }

/* The one thing a keeper is owed at a glance, so it is set as a table rather than
   buried in a paragraph: what leaves the device, and what does not. */
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--graphite);
  border-bottom-color: var(--ink);
}
td:first-child { width: 38%; padding-right: 20px; }
td.no { color: var(--graphite); }

ul.plain { margin: 14px 0 0; padding-left: 18px; }
ul.plain li { padding: 4px 0; }

/* A back-link that does not pretend to be navigation. There are four pages. */
.back {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
.back:hover { color: var(--ink); }