/* ═══════════════════════════════════════════
   Memoroam — marketing site
   ───────────────────────────────────────────
   ⚠ READ BEFORE REDESIGNING THIS SITE.

   The look is yours to change completely. Four things underneath it are wired
   into external systems that will not notice a redesign until they break, and
   three of them break loudly at store review.

   1. THE URLS /privacy, /terms AND /delete-account CANNOT MOVE. They are filed
      with Google's OAuth branding verification, Play's Data Safety form (the
      account-deletion URL is a REQUIREMENT there, not a nicety) and the App
      Store privacy field. A redesign that files them under /legal/privacy
      breaks every one of those at once, and a dead privacy URL is an App Store
      rejection rather than a warning. If the structure must change, keep the
      old paths alive as redirects and update all four consoles first.
      ⚠ This site has no 404.html, so Pages answers an unknown path with the
      HOMEPAGE at HTTP 200. A moved legal page therefore looks FINE to any
      status check while serving marketing copy to a reviewer. Verify by body.

   2. THE COMPANY FOOTER IS A LEGAL REQUIREMENT, NOT A DESIGN ELEMENT.
      Registered name, company number, place of registration and registered
      office must appear on the company website under the Companies (Trading
      Disclosures) Regulations. It is also the block that ties this domain to
      MEMOROAM LTD, which is what Apple and Dun & Bradstreet verified for the
      organisation account. Restyle it freely; do not drop a line of it.

   3. THE APP NAME AND THE PANDA MARK MUST STAY VISIBLE. Google's OAuth
      branding verification approves the consent screen by comparing it against
      this website. Remove the mark or the name in a redesign and a later
      re-review has nothing to match the consent screen to.

   4. /privacy AND /terms ARE GENERATED, NEVER HAND-EDITED. They come from
      docs/legal/*.md via tools/legal-site/build-legal-pages.mjs, which emits
      the page shell and depends on the class names below: .site-head,
      .wordmark, .head-note, .hero, .eyebrow, .lede, .doc (+ h2, h3),
      .doc-updated, .clause, .cnum, .plain, .plain.nested, .legal-ol,
      .contact-link, .site-foot, .foot-nav, .foot-brand, .foot-legal,
      .mono-num, .foot-meta. Rename or delete any of those and the legal pages
      keep their correct text while losing their layout — and hand-editing the
      HTML to compensate is wasted, because the next generator run wipes it.
      Change the shell in the generator, then re-run it.

   ALSO WAITING ON THIS REDESIGN (founder call, 2026-08-21): the app's Settings
   has seven dead `settingsAction` cases with no row calling them — manageData,
   locationPermissions, contactSupport, faq, website, rateApp, supportEmail
   (js/profile/profile.js, comment at the block). Two of them are site
   decisions: 'faq' points at /faq, which does not exist here, and 'website'
   points at the homepage. Settle whether this site gains an FAQ page while you
   are redesigning it, then wire or delete those cases to match.
   ───────────────────────────────────────────
   Deliberately light-only. The app's cream ground is its signature, and a
   marketing page that flips to dark loses the one thing a visitor is meant
   to recognise later. Tokens mirror css/variables.css in the app so the two
   never drift apart.

   GOLD IS CEREMONIAL, NOT FUNCTIONAL — same rule as the app. Gold marks a
   moment (rules, the wordmark, a single accent) and never carries meaning
   on its own. --accent measures 2.4 on cream and must never hold body text;
   --accent-deep is the readable one at 4.8.
   ═══════════════════════════════════════════ */

:root {
  --bg:          #F0EBE3;
  --card:        #FDFAF7;
  --text:        #1C1713;
  --muted:       #8A7D72;
  --muted-strong:#6E6256;
  --accent:      #C68A3A;
  --accent-deep: #8F5E2E;
  --gold-soft:   #E8B871;
  --accent-wash: rgba(198, 138, 58, .10);
  --rule:        #DCD3C7;

  /* ⚠ ONE FAMILY ACROSS THE WHOLE SITE. Plus Jakarta Sans replaced Playfair
     Display and DM Sans on 2026-08-29. Playfair is a HIGH-CONTRAST serif and
     this file only ever loaded weights 400 and 600, so every large heading
     rendered as hairlines: that is what made the old homepage read as cheap,
     and the document pages had the same problem one size down. Both tokens
     point at the same family deliberately, because two geometric sans on one
     page is a difference nobody can name and everybody sees.
     ⚠ The APP still uses Playfair and DM Sans. The site diverging from it was
     the founder's call, made against a reference site they chose. */
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  padding: 0 24px;
}

/* ── Header ── */

.site-head {
  max-width: 62rem;
  margin: 0 auto;
  padding: 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ⚠ THE IDENTITY IS SHARED BY EVERY PAGE AND MUST STAY THAT WAY. The homepage
   was redesigned on 2026-08-29 and for a few hours the document pages still
   carried the old one: lowercase "memoroam", the app icon on its white square,
   and a serif wordmark, while the homepage had "Memoroam" transparent in a
   geometric sans. Two brands on one domain, and the split ran exactly along the
   link a store reviewer follows from the listing to the privacy policy.
   The wordmark, the mark and the footer brand are therefore defined ONCE here,
   unscoped, and inherited by the homepage and the document pages alike. */
.wordmark {
  font-family: 'Plus Jakarta Sans', var(--sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* The panda mark. Present so the site shows the same face as the app icon, the
   store listings and the Google sign-in consent screen — Google's OAuth
   branding review approves the consent screen by comparing it against this
   site, so the mark is corroboration, not decoration. alt is empty on purpose:
   the wordmark beside it already says the name, and announcing it twice is
   worse for a screen reader than announcing it once. */
/* mark.png, the web-only transparent variant, not icon-512.png. Regenerate with
   tools/legal-site/make-web-mark.py. Sized to the drawing rather than to a box
   that was four-fifths white padding. */
.mark {
  width: auto;
  height: 40px;
  display: block;
  flex: none;
}

.head-note {
  font-family: 'Plus Jakarta Sans', var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid rgba(198, 138, 58, .26);
  white-space: nowrap;
}

/* ── Hero ── */

main { max-width: 62rem; margin: 0 auto; }

.hero {
  padding: 92px 0 84px;
  max-width: 40rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin: 0 0 22px;
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  text-wrap: balance;
}

.lede {
  font-size: 1.16rem;
  line-height: 1.7;
  color: var(--muted-strong);
  margin: 0 0 30px;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════
   HOMEPAGE (index.html only)
   ───────────────────────────────────────────
   ⚠ EVERY RULE BELOW IS SCOPED UNDER .home, WHICH IS ON THE HOMEPAGE BODY AND
   NOWHERE ELSE. That is not tidiness. Two of the other three pages are
   GENERATED from docs/legal/*.md, and the generator emits .hero, .eyebrow,
   .lede and a bare <main>. Styling any of those for a marketing hero would
   silently restyle the privacy policy, and the next generator run would not
   put it back — it would keep producing pages that inherit the marketing look.
   The homepage therefore carries its own `hm-` prefix throughout, following
   the same per-feature prefix convention the app uses.

   The old .features / .feature / .closing / .hero-status rules lived here and
   were removed with the layout they served. .contact-link stays: the document
   pages use it too.
   ═══════════════════════════════════════════ */

/* ── The homepage's own type ──
   ⚠ ONE VARIABLE CONTROLS THE DISPLAY FACE. Swapping back to Playfair is a
   single line here, and the fallback stack already covers it.

   Fraunces rather than Playfair, and the reason is mechanical rather than
   taste: Playfair is a HIGH-CONTRAST serif, so its thin strokes are very thin,
   and the site only loaded weights 400 and 600. A 66px headline at weight 400
   therefore rendered as hairlines and read as weak. Fraunces is variable, so
   the weight is a real dial rather than two fixed cuts, and its SOFT and WONK
   axes deliberately break the mathematical evenness that makes a stock webfont
   read as machine-set.

   The document pages are NOT affected: they use --display, which is untouched. */
.home {
  --display-home: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The panel tint. This is the palette switch: the reference lays its brand
     green over near-white; the same move in this palette is gold over cream. */
  --panel: #F7EFE1;
  --panel-edge: rgba(198, 138, 58, .20);
}

/* One family across the homepage, display and body, the way the reference uses
   one throughout. The document pages keep DM Sans and Playfair, untouched. */
.home body, .home, .home main { font-family: var(--display-home); }

/* The document pages keep the 62rem column. The homepage runs wider, because
   its hero is a panel rather than a paragraph. */
.home main {
  max-width: 72rem;
}

/* ── The top panel ──
   Header and hero share one tinted ground, edge to edge, with the page colour
   showing as a margin around it. The reference's whole opening is one panel and
   that is most of why it reads as composed rather than stacked. */
.hm-top {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 30px;
  margin: 20px 0 0;
  padding: 0 clamp(20px, 4vw, 44px);
  overflow: hidden;
  position: relative;
  /* Gives the artwork room to be seen even when the copy above it is short. */
  min-height: clamp(460px, 46vw, 660px);
  display: flex;
  flex-direction: column;
}

/* The artwork, filling the panel behind everything else.
   ⚠ NO DARK SCRIM AND NO BLUR. The founder's instruction was to raise the
   artwork's presence, not bury it, so the contrast has to come from the
   PAINTING having a quiet centre rather than from a veil laid over it. That is
   written into the brief as a hard requirement. If a future piece of art fails
   there, replace the art; do not add a scrim and darken the whole panel. */
.hm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  /* Scaled up to crop the painting's own deckled paper edge, which the model
     renders on all four sides and which reads as a torn rectangle sitting
     inside the panel rather than as the panel's own surface. object-fit alone
     cannot do this: it fits the whole image, edge included. The panel clips
     the overflow. */
  transform: scale(1.12);
  /* The painting is pale by brief, so it needs help to hold up under the ink
     mask. Both stay modest: the mask is doing the heavy lifting. */
  filter: saturate(1.28) contrast(1.04);
}

/* ── The dark mask ──
   A single ink layer over the painting, slightly deeper top and bottom than
   through the middle so the artwork keeps some life in the centre.

   ⚠ THE STRENGTH IS NOT A FREE CHOICE. Cream type over this has to clear 4.5:1
   against the DARKENED painting, not against the ink. The watercolour averages
   around #F0E4D8, so at 55% ink the blend lands near mid grey and cream text
   measures about 3.6:1, which fails. It needs roughly 68% before cream clears
   the threshold. If this is ever lightened, re-check the headline and subhead
   rather than trusting how it looks on a bright monitor. */
.hm-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 23, 19, .76) 0%,
    rgba(28, 23, 19, .64) 38%,
    rgba(28, 23, 19, .68) 68%,
    rgba(28, 23, 19, .80) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Everything in the panel sits above both the artwork and the mask. */
.hm-top > .site-head,
.hm-top > .hm-hero { position: relative; z-index: 1; }

/* ── The panel's type, inverted for the dark ground ──
   ⚠ EVERY SELECTOR HERE IS PREFIXED .hm-top, AND NOT MERELY FOR TIDINESS. These
   rules sit EARLIER in this file than the light-ground originals they are meant
   to override, and at equal specificity the LATER rule wins — so an unprefixed
   .hm-store here is silently beaten by the .hm-store further down, and the
   buttons stay light on a dark panel while the CSS looks correct. The prefix
   raises specificity past them, and it is also the honest description of what
   these are: the panel's own inverted set. */
.hm-top .wordmark { color: #FFF9F0; }
.hm-top .hm-h1 { color: #FFF9F0; }
/* --accent-deep is the readable gold on CREAM and the unreadable one on ink.
   --gold-soft is the reverse, so the pairing flips with the ground. */
.hm-top .hm-h1 em { color: var(--gold-soft); }
.hm-top .hm-lede { color: rgba(255, 249, 240, .88); }

/* Three classes, not two. `.hm-top .head-note` and `.home .head-note` are both
   0-2-0, and the light one is further down the file, so it won. Same trap as
   the buttons above, one level deeper. */
.home .hm-top .head-note {
  background: rgba(255, 249, 240, .14);
  border: 1px solid rgba(255, 249, 240, .32);
  color: #FFF9F0;
}

/* Primary keeps the gold and gains weight against the dark; secondary becomes a
   glass outline rather than a solid cream slab, which would punch a hole in the
   panel. */
.hm-top .hm-store {
  background: rgba(255, 249, 240, .12);
  border-color: rgba(255, 249, 240, .36);
  color: #FFF9F0;
}

.hm-top .hm-store.is-primary {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: #241A10;
}

.hm-top .hm-store.is-primary .hm-store-pre { opacity: .74; }

/* The mark is a dark figure, so on ink it loses its outline. A soft light halo
   separates it without reintroducing the white tile that was just removed. */
.hm-top .mark { filter: drop-shadow(0 0 10px rgba(255, 249, 240, .38)); }

/* The header is inside the panel on the homepage, so it drops the document
   pages' own centring and width. */
.home .site-head {
  max-width: none;
  margin: 0;
  padding: 22px 0 0;
}

.home .wordmark {
  font-family: var(--display-home);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  gap: 12px;
}

/* The mark is now transparent and cropped, so it can be sized to the drawing
   rather than to a box that is four-fifths white. No radius: there is no tile
   to round any more. */
.home .mark {
  width: auto;
  height: 42px;
  border-radius: 0;
}

/* "Coming soon" as a solid pill, matching the reference's top-right button. */
.home .head-note {
  white-space: nowrap;
  font-family: var(--display-home);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #FFF9F0;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent-deep);
}

/* Links on the homepage are DM Sans with a gold rule under them. They were
   IBM Plex Mono, which put four separate mono elements on one page and made a
   travel brand read as a developer template. Mono stays where it belongs: the
   company number and the legal pages. */
.hm-link,
.hm-notify a {
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(198, 138, 58, .45);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}

.hm-link:hover, .hm-link:focus-visible,
.hm-notify a:hover, .hm-notify a:focus-visible { border-bottom-color: var(--accent-deep); }

/* ── Homepage hero ──
   One tinted panel carrying the whole opening statement. The warm wash at the
   top is --accent-wash, the app's own 10% gold, fading out before it reaches
   any text — gold stays ceremonial, it lights the panel and never colours a
   word that has to be read. */
.hm-hero {
  padding: clamp(52px, 8vw, 104px) 0 clamp(40px, 6vw, 76px);
  text-align: center;
  position: relative;
}

.hm-h1 {
  font-family: var(--display-home);
  font-weight: 800;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 auto 22px;
  max-width: 15ch;
  text-wrap: balance;
}

/* The one coloured word. --accent-deep rather than --accent: the lighter gold
   measures 2.4 against this ground and fails even the large-text threshold,
   while the deep one reads as rich bronze and passes at 4.8. */
.hm-h1 em {
  font-style: normal;
  color: var(--accent-deep);
}


/* ⚠ NO SILHOUETTE FILTER. brightness(0) invert(1) was tried and it renders the
   panda as a featureless white blob: the mark is a low-poly figure whose whole
   legibility is the black-and-cream contrast between its patches, so flattening
   it to one colour destroys the only thing that makes it a panda. It goes on a
   pale tile in its own colours instead — which also makes it read as the app
   icon set into the sentence, rather than a generic glyph. */

.hm-lede {
  font-size: 1.08rem;
  line-height: 1.62;
  font-weight: 500;
  color: var(--muted-strong);
  margin: 0 auto 34px;
  max-width: 34rem;
  text-wrap: pretty;
}

/* ── The two store slots ──
   Sized to the proportions of the real App Store and Google Play badges
   (roughly 3.4:1) so the official artwork can be dropped in on release day
   without the layout shifting. See the warning in index.html before touching
   the contents: neither store permits its badge or its logo on an unreleased
   app, and neither permits the artwork to be altered. */
.hm-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
  position: relative;
  z-index: 2;
}

.hm-store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Two of these at 186px plus the gap need 384px, which does not fit inside a
     390px phone once the page and panel padding are taken off. They wrap onto
     two rows there instead, so the min-width has to be able to give. */
  min-width: min(184px, 100%);
  flex: 0 1 auto;
  min-height: 58px;
  padding: 9px 26px;
  /* The reference's two buttons are pills. These carry two lines of text, so
     they sit between a pill and a badge: rounded hard, but not a capsule. */
  border-radius: 16px;
  background: #FFFCF7;
  border: 1px solid var(--panel-edge);
  color: var(--text);
  text-align: left;
}

/* Primary and secondary, exactly the reference's pairing: one solid in the
   brand colour, one light with a hairline. */
.hm-store.is-primary {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #FFF9F0;
}

.hm-store-pre {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.66;
}

.hm-store.is-primary .hm-store-pre { opacity: 0.8; }

.hm-store-name {
  font-family: var(--display-home);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ── Clouds ──
   Behind the illustration, in front of the panel. Pulled out past the panel's
   own padding so they run the full width, and pushed up under the buttons so
   the illustration appears to rise out of them. */




/* ── Repeating section shape ──
   kicker → heading → sub → content. Used by every section below the hero so the
   page has one rhythm instead of three. */
.hm-section,
.hm-close {
  padding: clamp(64px, 8vw, 96px) 0 0;
  text-align: center;
}

.hm-close {
  padding-bottom: clamp(72px, 10vw, 120px);
}

/* The kicker sits on a short gold rule. A line of small caps floating on its
   own was doing nothing; anchored to a rule it reads as a section marker, and
   it is the cheapest way to get the accent onto every screenful. */
.hm-kicker {
  font-family: var(--display-home);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hm-kicker::before,
.hm-kicker::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.hm-kicker::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }

.hm-h2 {
  font-family: var(--display-home);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 0 auto 20px;
  max-width: 20ch;
  text-wrap: balance;
}

.hm-sub {
  color: var(--muted-strong);
  margin: 0 auto;
  max-width: 36rem;
  text-wrap: pretty;
}

/* ── Feature cards ── */

.hm-grid {
  display: grid;
  /* min(20rem, 100%) rather than a bare 20rem: a bare minimum track cannot
     shrink below itself, so on a narrow viewport the grid overflows and the
     whole page scrolls sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 16px;
  margin-top: clamp(40px, 6vw, 60px);
  text-align: left;
}

.hm-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px 28px 32px;
  transition: border-color .2s ease, transform .2s ease;
}

.hm-card:hover {
  border-color: rgba(198, 138, 58, .4);
  transform: translateY(-2px);
}

/* The icon disc. Six empty white rectangles was the single biggest reason the
   grid read as filler — there was nothing to look at above the heading. Line
   work rather than filled glyphs, so it sits with the watercolours instead of
   looking like an app toolbar dropped onto a painting. */
.hm-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 0 18px;
  border-radius: 13px;
  background: var(--accent-wash);
  border: 1px solid rgba(198, 138, 58, .22);
  color: var(--accent-deep);
}

.hm-ico svg { width: 30px; height: 30px; display: block; }

.hm-card h3 {
  font-family: var(--display-home);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
}

.hm-card p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 1rem;
  line-height: 1.68;
  text-wrap: pretty;
}

/* ── Breather band ──
   One painting, one line. The page is otherwise three text blocks in a row, and
   this is what gives it a change of pace. The text sits on a scrim rather than
   straight on the watercolour: the paintings are pale and a gold or ink line
   laid directly over one is unreadable at the light end. */
.hm-band {
  position: relative;
  margin-top: clamp(72px, 10vw, 120px);
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(200px, 26vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px clamp(24px, 6vw, 72px);
  border: 1px solid rgba(198, 138, 58, .18);
}

.hm-band-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The painting is a 5.6:1 panorama; object-fit crops it to the band rather
     than squashing it. object-position keeps the horizon in frame. */
  object-position: 50% 55%;
}

/* An even cream veil across the whole painting, rather than a scrim behind the
   words. The localised version put a visible pale oval in the middle of the
   band, which read as a smudge on the artwork. A flat veil reads as a deliberate
   treatment, and it lifts contrast everywhere the line might fall. */
.hm-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(253, 250, 247, .55), rgba(253, 250, 247, .78));
  pointer-events: none;
}

.hm-band-line {
  position: relative;
  margin: 0;
  max-width: 24ch;
  text-align: center;
  font-family: var(--display-home);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
  z-index: 1;
}

/* ── Trust split ── */

.hm-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
  padding: clamp(72px, 10vw, 120px) 0 0;
  text-align: left;
}

/* The kicker is centred by default (flex, rule either side). In the split it is
   left-aligned, so the leading rule is dropped rather than left dangling off
   the column edge. */
.hm-split-lead .hm-kicker {
  margin-bottom: 14px;
  justify-content: flex-start;
}

.hm-split-lead .hm-kicker::before { display: none; }
.hm-split-lead .hm-kicker::after  { width: 34px; }

.hm-split-lead .hm-h2 {
  margin-left: 0;
  margin-right: 0;
  max-width: 16ch;
}

.hm-sub-left {
  margin-left: 0;
  margin-right: 0;
  max-width: 30rem;
}

.hm-split-link {
  margin: 26px 0 0;
  font-size: 0.95rem;
}

.hm-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hm-points li {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}

.hm-points li:first-child { border-top: 0; padding-top: 0; }
.hm-points li:last-child  { padding-bottom: 0; }

/* The tick is drawn in CSS rather than shipped as an icon: it is one glyph, and
   an <img> here would be a network request and a CORS surface for a checkmark.
   ::before is the disc, ::after is the tick — two rotated borders, which is the
   one construction that renders crisply at every density. Do not fold them into
   a single element with background gradients: an inset shadow or a second
   background paints OVER the gradients and the tick silently disappears. */
.hm-points h3 {
  font-family: var(--display-home);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0 0 8px;
  padding-left: 32px;
  position: relative;
}

.hm-points h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-wash);
}

.hm-points h3::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.15em + 5px);
  width: 5px;
  height: 9px;
  border: solid var(--accent-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hm-points p {
  margin: 0;
  padding-left: 32px;
  color: var(--muted-strong);
  font-size: 0.98rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.hm-close-cta { margin: 26px 0 0; font-size: 1.02rem; }

/* A last horizon above the closing block, faded at both ends so it reads as a
   rule made of painting rather than a picture that got cropped. */
.hm-close-art {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: clamp(70px, 9vw, 110px);
  object-fit: cover;
  object-position: 50% 58%;
  margin: 0 auto clamp(36px, 5vw, 56px);
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* ── Footer top row ── */

.hm-foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
}

.hm-foot-top .foot-brand { margin-bottom: 0; }
.hm-foot-top .foot-nav   { margin-bottom: 0; }

.home .site-foot { margin-top: clamp(56px, 8vw, 88px); }

/* ⚠ THE COMPANY BLOCK CANNOT BE REMOVED. It is a statutory disclosure, not a
   design choice. The Company, Limited Liability Partnership and Business (Names
   and Trading Disclosures) Regulations 2015, regulation 25, requires every
   company to disclose, ON ITS WEBSITES as well as its letters and order forms:
   the part of the UK in which it is registered, its registered number, and the
   address of its registered office. Failing to is an offence.

   It is also the block that ties this domain to MEMOROAM LTD, which is what
   Apple and Dun & Bradstreet checked for the organisation developer account.

   So it is made QUIET rather than removed: smaller, lighter, and last on the
   page. That is the whole of the available room for manoeuvre. */
.home .foot-legal,
.home .foot-meta {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40rem;
}

.home .foot-legal {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.home .foot-legal strong { font-weight: 600; }

.contact-link {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 3px;
}

.contact-link:hover,
.contact-link:focus-visible { border-bottom-color: var(--accent-deep); }

/* ── Footer ── */

.site-foot {
  max-width: 62rem;
  margin: 0 auto;
  padding: 40px 0 64px;
  border-top: 1px solid var(--rule);
}

.foot-brand {
  font-family: 'Plus Jakarta Sans', var(--sans);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.foot-legal,
.foot-meta {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 10px;
  max-width: 44rem;
}

.foot-meta { margin-bottom: 0; }

/* Company number reads as a reference code, not prose. Tabular figures so the
   digits sit evenly. */
.mono-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Footer navigation. Present on every page: the app stores and Google's OAuth
   verification both check that the policy is reachable from the site, not only
   that its URL resolves. */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.foot-nav a {
  color: var(--muted-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}

.foot-nav a:hover,
.foot-nav a:focus-visible { color: var(--text); border-bottom-color: var(--accent-deep); }

/* ── Document pages (delete-account, privacy, terms) ── */

.doc {
  max-width: 40rem;
  padding: 0 0 96px;
  border-top: 1px solid var(--rule);
}

.doc h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  text-wrap: balance;
}

.doc p { margin: 0 0 16px; color: var(--muted-strong); text-wrap: pretty; }

.steps, .plain {
  margin: 0 0 18px;
  padding-left: 1.3em;
  color: var(--muted-strong);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.steps li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--accent-deep); }

/* ── Long-form legal pages (privacy, terms) ──
   Generated from docs/legal/*.md by tools/legal-site/build-legal-pages.mjs.
   These are documents people are sent to mid-argument or mid-refund, so the
   priority is finding a numbered clause fast, not reading top to bottom. */

.doc h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  margin: 30px 0 10px;
  color: var(--text);
}

.doc-updated {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted) !important;
  margin: 28px 0 0 !important;
}

/* Clause numbers hang in the left margin so 5.10. can be found by scanning a
   single column rather than reading the start of every paragraph. The margin
   collapses on narrow screens, where there is no room to hang anything. */
.doc .clause {
  padding-left: 3.6rem;
  text-indent: -3.6rem;
}

.doc .cnum {
  display: inline-block;
  width: 3.6rem;
  text-indent: 0;
  font-family: var(--mono);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}

.legal-ol {
  margin: 0 0 18px;
  padding-left: 1.6em;
  color: var(--muted-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-ol li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--accent-deep); }

.plain.nested {
  margin: 10px 0 0;
  padding-left: 1.2em;
}

@media (max-width: 34rem) {
  .doc .clause { padding-left: 0; text-indent: 0; }
  .doc .cnum { width: auto; margin-right: 0.5em; }
}

/* Deletion is irreversible, so the warning gets a tinted ground rather than
   being another grey paragraph the eye slides past. */
.warn {
  background: var(--accent-wash);
  padding: 16px 18px;
  margin: 0 0 16px;
  color: var(--text) !important;
  font-size: 0.97rem;
}

/* ── Focus + motion ── */

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

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

@media (max-width: 40rem) {
  body { padding: 0 20px; }
  .hero { padding: 64px 0 56px; }
  .feature { padding: 32px 24px 36px; }
  .closing { padding: 64px 0 72px; }
}