/* ==========================================================================
   landing.css - the public website at /, and the legal pages beside it
   ==========================================================================
   Written from scratch on 13 August 2026. It deliberately does NOT import or
   extend styles.css.

   WHY NOT. styles.css is 240 KB and it is the entire visual language of the
   client and coach applications, organised by date rather than by concern.
   Sharing it would mean that widening `.card` or changing an `h2` here could
   move a client's meal plan screen, and there would be nothing to tell you
   until a client said so. The website is allowed to look like the app. It is
   not allowed to depend on it.

   THE `lp-` PREFIX IS LOAD-BEARING, not tidiness. dev/tools/collect-css.mjs
   finds dead rules in styles.css by asking whether a class name appears
   anywhere in the repository. A class shared between the two files would read
   as "still used" for ever, and a dead app rule would ship to every phone
   permanently. Every selector in this file starts `lp-`.

   The colour values below are copied from the app's tokens by hand, on
   purpose: copied values drift visibly and can be re-copied, whereas a shared
   import is a dependency that cannot be undone later.

   TWO KINDS OF PAGE READ THIS FILE, and they are styled differently.

   privacy.html and terms.html are the 13 August scaffold: class-based, using
   the header, footer, buttons and the LEGAL PAGES block below. Those rules
   stay because those pages use them. The scaffold's own hero, feature rows
   and pricing tiers went on 6 September 2026 with the placeholder page that
   used them.

   index.html is the designed page, which arrived from Claude Design on
   6 September 2026 and replaced the scaffold. Its layout is INLINE `style`
   attributes on the markup, which the Content-Security-Policy allows
   (style-src keeps 'unsafe-inline') and which is how the design tool wrote
   it. The rules under THE LANDING PAGE below are only what an inline style
   cannot express: hover, the phone breakpoint, keyboard focus and the
   open/closed state of a FAQ item. Every value in them is one the design
   already used inline. When the page is re-exported from the design tool the
   markup is what changes; this block should not need to.

   MOBILE FIRST, on both. Most visitors arrive from Instagram on a phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --lp-bg: #f2f5f5;
  --lp-surface: #ffffff;
  --lp-text: #142226;
  --lp-muted: #5f6e74;
  --lp-line: rgba(20, 34, 38, 0.10);
  --lp-accent: #1f7d8c;

  --lp-wrap: 1100px;
  --lp-gutter: 20px;

  --lp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset, kept to what these pages actually need
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.lp-body {
  margin: 0;
  font-family: var(--lp-font);
  color: var(--lp-text);
  background: var(--lp-bg);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.lp-body img { max-width: 100%; height: auto; display: block; }

.lp-skip {
  position: absolute;
  left: -9999px;
}
.lp-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  background: var(--lp-surface);
  padding: 10px 14px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.lp-wrap {
  width: 100%;
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding-left: var(--lp-gutter);
  padding-right: var(--lp-gutter);
}

.lp-section { padding: 56px 0; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.lp-h1 {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 14px;
}

.lp-lead {
  font-size: 18px;
  color: var(--lp-muted);
  margin: 0 0 22px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity 0.15s ease;
}
.lp-btn:active { opacity: 0.82; }

.lp-btn-quiet { background: transparent; color: var(--lp-text); border-color: var(--lp-line); }

/* --------------------------------------------------------------------------
   Header. Shared by all three pages: the designed page keeps its own inner
   markup but takes the sticky, translucent bar from here.
   -------------------------------------------------------------------------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(242, 245, 245, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--lp-line);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
}

.lp-logo { display: flex; align-items: center; }
.lp-logo img { width: 150px; height: auto; }

.lp-nav { display: flex; align-items: center; gap: 6px; }

/* The two text links are noise on a phone: the Sign in button is the only
   thing anyone taps up here, and the page has its own section links. */
.lp-nav-link {
  display: none;
  color: var(--lp-muted);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 12px;
}
.lp-nav .lp-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Footer (legal pages)
   -------------------------------------------------------------------------- */
.lp-footer {
  border-top: 1px solid var(--lp-line);
  padding: 32px 0 40px;
}
.lp-footer-inner { display: block; }
.lp-footer-brand { font-weight: 600; margin: 0 0 12px; }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.lp-footer-nav a { color: var(--lp-muted); text-decoration: none; font-size: 15px; }
.lp-footer-legal { font-size: 13px; color: var(--lp-muted); margin: 0; }

/* ==========================================================================
   700px and up: the legal pages' nav links appear and the type grows
   ========================================================================== */
@media (min-width: 700px) {
  .lp-body { font-size: 17.5px; }

  .lp-nav-link { display: inline-flex; }

  .lp-section { padding: 76px 0; }

  .lp-h1 { font-size: 46px; }

  .lp-footer-inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .lp-footer-nav { margin-bottom: 0; }
}

@media (min-width: 900px) {
  .lp-h1 { font-size: 56px; }
}

/* ==========================================================================
   Respect the setting. The app does this too.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lp-btn { transition: none; }
  .lp-faq-chevron { transition: none; }
}

/* ==========================================================================
   THE LANDING PAGE (index.html)
   ==========================================================================
   Added 6 September 2026 with the designed page. See the note at the top:
   the layout is inline on the markup, and these rules are the remainder.
   ========================================================================== */

/* The page's own reset. .lp-body is the scaffold's and sets a 17px / 1.55
   reading size for the legal prose; the designed page sizes every element
   itself and wants the browser's normal line-height underneath, or the 34px
   prices and the 10px day labels both come out taller than drawn. */
.lp-site {
  margin: 0;
  font-family: var(--lp-font);
  color: var(--lp-text);
  background: var(--lp-bg);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.lp-site img { max-width: 100%; }

/* Keyboard focus. The links and the FAQ summaries carry their colours
   inline, so the ring is the one thing this file has to draw for them. */
.lp-site a:focus-visible,
.lp-site summary:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Hover states. Each class is the design's style-hover attribute for that
   control; the resting style is inline on the element. */
.lp-cta:hover { background: #16616d; color: #ffffff; }
.lp-cta-soft:hover { background: rgba(31, 125, 140, 0.24); color: #16616d; }
.lp-nav-signin:hover { background: rgba(31, 125, 140, 0.08); }
.lp-nav-anchor:hover { color: var(--lp-text); background: rgba(31, 125, 140, 0.08); }
.lp-footer-link:hover { color: var(--lp-text); }

/* The hero phone: a 396 x 812 frame scaled into a shorter window that fades
   out at the bottom. The width, height and scale are what the phone
   breakpoint changes, so they live here rather than inline. */
.lp-hero-phone {
  width: 348px;
  height: 540px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, #000 76%, transparent);
}
.lp-hero-frame { transform: scale(0.88); }

/* The two flanking phones under "Everything in one place". */
.lp-side-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* FAQ. A <details> element: open and closed for free, reachable from the
   keyboard, announced as a disclosure. The chevron turns on [open]. */
.lp-faq-q { list-style: none; }
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq[open] .lp-faq-chevron { transform: rotate(180deg); }

/* The phone breakpoint, at the width the design was drawn against. */
@media (max-width: 760px) {
  .lp-nav-anchor { display: none; }
  .lp-side-phone { display: none; }
  .lp-hero-phone {
    width: 250px;
    height: 430px;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
  .lp-hero-frame { transform: scale(0.63); }
}

/* ==========================================================================
   LEGAL PAGES (privacy.html, terms.html)
   ==========================================================================
   Added 14 August 2026. Two documents of long prose, which the marketing page
   has none of: everything above styles a headline, a paragraph or a card, and
   nothing styles a numbered clause or a bulleted list.

   Scoped under `.lp-legal` rather than added to the bare element selectors, so
   a heading rule written for a privacy policy can never change the look of the
   sales page.

   These pages do NOT load landing.js. It forwards a returning client to /app/,
   which is right for "/" and wrong here: a signed-in client tapping Privacy in
   the footer would be bounced into the application without seeing the page.
   ========================================================================== */
.lp-legal { max-width: 720px; }

.lp-legal-meta {
  font-size: 14px;
  color: var(--lp-muted);
  margin: 0 0 32px;
}

.lp-legal h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  /* The header is sticky, so a jump from the contents list at the top of the
     page lands with the heading underneath it. Both pages are almost entirely
     navigated that way, so without this the reader arrives mid-paragraph. */
  scroll-margin-top: 80px;
}

.lp-legal h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 8px;
}

.lp-legal p,
.lp-legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--lp-text);
}

.lp-legal p { margin: 0 0 16px; }

.lp-legal ul { margin: 0 0 16px; padding-left: 22px; }
.lp-legal li { margin-bottom: 8px; }

.lp-legal a { color: var(--lp-accent); }

.lp-legal-contents {
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 20px 20px 12px;
  margin-bottom: 40px;
}

.lp-legal-contents p {
  font-weight: 600;
  margin: 0 0 10px;
}

.lp-legal-contents ol { margin: 0; padding-left: 20px; }

.lp-legal-contents li {
  font-size: 15px;
  margin-bottom: 6px;
}

.lp-legal-contents a { color: var(--lp-muted); text-decoration: none; }
.lp-legal-contents a:hover { color: var(--lp-accent); text-decoration: underline; }

/* The one thing on either page a reader must not skim past. */
.lp-legal-callout {
  border-left: 3px solid var(--lp-accent);
  padding: 4px 0 4px 16px;
  margin: 0 0 16px;
}

.lp-legal-callout p:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
  .lp-legal h2 { font-size: 25px; }
}