/* Self-hosted, latin subset only, pulled from Google's own WOFF2 builds.
   NOT @import from fonts.googleapis.com — that chained a second stylesheet
   request behind this one before a single glyph could start downloading, and
   it leaked every visitor's IP to Google, which sits badly with a site whose
   pitch is "private by design".
   Caveat is subsetted to "0123456789Error " — the FAQ counters and the 404
   heading. If either of those strings gains a new character, re-subset it. */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/be-vietnam-pro-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/be-vietnam-pro-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/be-vietnam-pro-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/be-vietnam-pro-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/caveat-700.woff2') format('woff2');
}

:root {
  --bg: #FBF8F8;
  --card: #FFFFFF;
  --ink: #4A3B38;
  --ink-soft: #8A7A76;
  --coral: #FF8C77;
  --coral-soft: #FFA595;
  --blush: #FECCCC;
  --sky: #EFF6FF;
  --sky-ink: #4C6FA3;
  --mint: #8FD9B9;
  --lemon: #FBE197;
  --lilac: #D9C8FA;
  --line: #EFE3E1;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --max: 1080px;
  --shadow: 0 18px 40px -22px rgba(90, 60, 55, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(var(--line) 1.4px, transparent 1.4px),
    radial-gradient(var(--line) 1.4px, transparent 1.4px);
  background-size: 34px 34px;
  background-position: 0 0, 17px 17px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

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

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

/* ---------- Header ---------- */
.site-head {
  padding: 46px 0 8px;
  text-align: center;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.15s ease;
}

/* The header and footer marks both link home; without this there was no hover
   feedback at all, so neither read as clickable. */
.logo:hover { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .logo { transition: none; }
}

.logo-mark {
  height: 104px;
  width: auto;
}

.logo-mark--sm { height: 54px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-coral {
  background: var(--coral-soft);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(255, 140, 119, 0.9);
}

.btn-coral:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -14px rgba(255, 140, 119, 1);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-coral:hover { transform: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 8px 0 30px; }

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 40px;
  align-items: start;
}

/* Clears the star, which sits at top 4% of the wrap and is 54px tall. */
.hero-copy { padding-top: 96px; }

.hero h1 {
  font-size: 43px;
  line-height: 1.16;
  letter-spacing: -0.9px;
  margin: 0 0 14px;
}

.hero-sub {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 16px;
  max-width: 42ch;
}

.lede {
  font-size: 16.5px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 44ch;
}

/* Scoped to the hero: on .btn-coral this also hit the "Notify me" submit and
   the 404's button. In a centred flex row the margin box is what gets centred,
   so the button sat half the margin (9px) above centre and stretched the
   field. Spacing belongs to the layout, not the component. */
.hero-copy .btn { margin-bottom: 18px; }

/* Apple's badge, placed but never restyled — no filters, no border-radius,
   no background. Only the box it sits in is ours. */
.appstore-link {
  display: inline-block;
  margin-bottom: 18px;
  line-height: 0;
}

.appstore-link img { width: 132px; height: auto; }

/* Stands in for the App Store badge until the app is approved. Stating
   availability in words is fine; only Apple's badge artwork is restricted.
   Ink on blush, not coral on the page background — coral text would only
   reach 2.2:1 against #FBF8F8, well under AA. */
.hero-status {
  display: inline-block;
  background: var(--blush);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 18px;
}

.hero-shot img {
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  /* drop-shadow, not box-shadow: the mockup is a transparent PNG, so the
     shadow has to follow the phone's silhouette rather than its bounding box. */
  filter: drop-shadow(0 26px 42px rgba(90, 60, 55, 0.30));
}

/* Scattered stickers. Positioned against .hero .wrap. */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  /* Required. The width/height ATTRIBUTES on these <img>s are presentational
     hints, and each rule below sets only `width` — so without this the height
     hint wins and every sticker renders squashed to its intrinsic 30px.
     `height: auto` hands the sizing back to the aspect ratio. */
  height: auto;
}

.deco--star     { width: 54px;  left: -6px;   top: 4%; transform: rotate(-12deg); }
.deco--teddy    { width: 56px;  left: 43%;    top: 21%; transform: rotate(9deg); }
.deco--calendar { width: 66px;  left: 0;      bottom: 4%; transform: rotate(-8deg); }
.deco--car      { width: 62px;  right: 34%;   top: -5%; transform: rotate(6deg); }
.deco--bag      { width: 58px;  right: -4px;  top: 42%; transform: rotate(10deg); }
.deco--chick    { width: 54px;  left: 40%;    bottom: 20%; transform: rotate(4deg); }
.deco--flower   { width: 82px;  right: 27%;   bottom: -4%; transform: rotate(-6deg); }

/* ---------- Sections ---------- */
section { padding: 60px 0; }

.section-head {
  margin: 0 0 36px;
}

/* The measure cap belongs on the body copy, not the heading — at 56ch the
   container was ~606px and "Not quite a habit tracker. Not quite a journal."
   broke onto a second line. */
.section-head p {
  max-width: 56ch;
}

.section-head h2 {
  font-size: 32px;
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 16.5px;
  margin: 0;
}

/* ---------- "What it looks like" ---------- */
.look-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Each card is ONE exported image — gradient panel, rounded corners and the
   app art already composited, with the top ~25% left empty by design. The
   heading and copy are overlaid into that empty band. */
.look {
  position: relative;
  margin: 0;
}

.look-img {
  width: 100%;
  height: auto;
  /* drop-shadow, not box-shadow: the export's corners are transparent, so the
     shadow has to follow the rounded silhouette. */
  filter: drop-shadow(0 16px 30px rgba(90, 60, 55, 0.16));
}

.look figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8% 6.5% 0;
  text-align: center;
}

.look h3 {
  font-size: 17px;
  margin: 0 0 7px;
  letter-spacing: -0.2px;
}

.look figcaption p {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Use cases ---------- */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
}

.chip img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ---------- FAQ ---------- */
/* Deliberately NOT an accordion — see BACKLOG. Six short answers scan faster
   open than behind a click, and this section exists largely to be read by
   search and answer engines. Mirrored in FAQPage JSON-LD in the head. */
.faq-list {
  list-style: none;
  counter-reset: faq;
  padding: 0;
  margin: 0;
}

.faq-list li {
  counter-increment: faq;
  position: relative;
  padding: 20px 0 20px 40px;
  border-bottom: 1px solid var(--line);
}

.faq-list li:last-child { border-bottom: none; }

.faq-list li::before {
  content: counter(faq);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: 'Caveat', cursive;
  font-size: 30px;
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
}

.faq-list h3 {
  font-size: 16.5px;
  margin: 0 0 8px;
  letter-spacing: -0.1px;
}

.faq-list p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 78ch;
}

/* ---------- Support note ---------- */
/* Doubles as the App Store Connect support URL target (/#support), so it has
   to carry a real contact route, not just point back at the FAQ. */
.support-note {
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  scroll-margin-top: 28px;
}

.support-note h3 {
  font-size: 16.5px;
  margin: 0 0 6px;
}

.support-note p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 70ch;
}

.support-note a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}

.support-note a:hover { text-decoration: underline; }

/* ---------- 404 ---------- */
.notfound {
  position: relative;
  padding: 30px 0 90px;
  text-align: center;
}

.notfound .wrap {
  position: relative;
  max-width: 620px;
}

/* A dotty card, rebuilt in markup — same shapes as the app's own cards. */
.nf-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 20px 22px 24px;
  max-width: 420px;
  margin: 0 auto 42px;
  text-align: left;
}

.nf-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.nf-sticker {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
}

.nf-sticker img { width: 24px; height: 24px; }

.nf-title {
  font-weight: 600;
  font-size: 16.5px;
  flex: 1;
}

.nf-dots {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
}

.nf-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.nf-week > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.nf-letter {
  font-size: 11.5px;
  font-weight: 600;
}

.nf-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #F1EDEC;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* The day that was never logged. */
.nf-cell--miss {
  background: var(--blush);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--coral);
}

.nf-code {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 4px;
  line-height: 1;
}

.notfound h1 {
  font-size: 34px;
  letter-spacing: -0.6px;
  margin: 0 0 14px;
}

.nf-lede {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  max-width: 44ch;
}

.nf-links {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 22px 0 0;
}

.nf-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Reposition the two shared decorations for this shorter page. */
.notfound .deco--star { left: 2%; top: 6%; width: 50px; }
.notfound .deco--bag  { right: 5%; top: auto; bottom: 3%; width: 52px; }

@media (max-width: 700px) {
  .notfound h1 { font-size: 27px; }
  .notfound .deco { display: none; }
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
}

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.foot-links {
  display: flex;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.foot-links a { text-decoration: none; opacity: 0.75; }
.foot-links a:hover { opacity: 1; }

.foot-copy {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---------- Document pages (privacy / support) ---------- */
.doc { padding: 20px 0 70px; }
.doc .wrap { max-width: 760px; }

.back-link {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 18px;
}

.back-link:hover { color: var(--ink); }

.doc h1 {
  font-size: 36px;
  letter-spacing: -0.6px;
  margin: 0 0 8px;
}

.doc h2 {
  font-size: 20px;
  margin: 34px 0 10px;
  letter-spacing: -0.2px;
}

.doc p {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.updated {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

.callout {
  background: var(--sky);
  color: var(--sky-ink);
  border-radius: 16px;
  padding: 20px 22px;
  font-size: 15px;
  margin-bottom: 10px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.faq-item:last-of-type { border-bottom: none; }

.faq-item h3 {
  font-size: 16.5px;
  margin: 0 0 8px;
}

.faq-item p { margin: 0; }

.contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
}

.contact-card a {
  color: var(--coral);
  font-weight: 600;
  font-size: 17px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; }
  /* Single column: nothing to clear, and the star is hidden below. */
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: 34px; }
  .hero-copy { order: 1; }
  .hero-shot { order: 2; }
  .hero-shot img { margin-top: 26px; max-width: 320px; }
  .look-grid { grid-template-columns: 1fr; }
  .chip-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-mark { height: 78px; }
  .site-head { padding: 30px 0 4px; }
  /* The scattered stickers crowd a narrow column — keep only the two that
     sit clear of the text. */
  .deco { display: none; }
  .deco--bag { display: block; width: 44px; top: auto; bottom: 6%; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 29px; }
  .section-head h2 { font-size: 25px; }
  .chip-grid { grid-template-columns: 1fr; }
  .deco { display: none !important; }
}