/* Fonts are served from this domain, not from Google.
     Loading them from fonts.gstatic.com sends every visitor's IP address to
     Google before they have agreed to anything, which a German court found to
     breach the GDPR. Self-hosting removes the transfer entirely, and four latin
     subsets come to 77 KB. */
  @font-face {
    font-family: 'Caprasimo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/caprasimo-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/figtree-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/figtree-600.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/figtree-700.woff2') format('woff2');
  }

  /* Tokens mirror src/theme/tokens.ts. Keep them in step — the landing page and
     the app being visibly different products is worse than either being wrong. */
  :root {
    --bg: #f5ead8;
    --surface: #ebddc5;
    --surface-high: #e3d3b7;
    --text: #201e1d;
    --muted: #645c50;
    --accent: #215c37;
    --accent-600: #357c4d;
    --accent-100: #eef7ef;
    --accent-800: #164025;
    --accent2: #8c491a;
    --accent2-100: #fff2eb;
    --accent2-800: #643312;
    --divider: rgba(32, 30, 29, 0.16);
    --radius: 28px;
    --radius-card: 32px;
    --shadow-sm: 0 1px 2px rgba(46, 43, 37, 0.14);
    --shadow-md: 0 3px 10px rgba(46, 43, 37, 0.16);
    --font-display: "Caprasimo", Georgia, serif;
    --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.5em; }
  h1 { font-size: clamp(34px, 6vw, 54px); }
  h2 { font-size: clamp(26px, 4vw, 34px); }
  h3 { font-size: 20px; }
  p { margin: 0 0 1em; }
  a { color: var(--accent); text-underline-offset: 3px; }
  a:hover { color: var(--accent-600); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

  /* --- header --- */
  header { padding: 22px 0; }
  .bar { display: flex; align-items: center; gap: 16px; }
  .brand { font-family: var(--font-display); font-size: 24px; color: var(--accent); text-decoration: none; margin-right: auto; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 15px; line-height: 1;
    padding: 14px 22px; border-radius: 999px; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; min-height: 48px;
  }
  .btn-primary { background: var(--accent); color: var(--bg); }
  .btn-primary:hover { background: var(--accent-800); color: var(--bg); }
  .btn-secondary { border-color: var(--divider); color: var(--text); }
  .btn-secondary:hover { background: var(--surface); color: var(--text); }

  /* --- hero --- */
  .hero { padding-block: 48px 72px; }
  .hero p.lead { font-size: 20px; max-width: 34em; }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
  .cta-note { font-size: 15px; color: var(--muted); }

  /* --- sections --- */
  /* Generous and symmetric: a rule sitting tight against the text above it
     reads as a mistake rather than as a separator. */
  section { padding-block: 64px; border-top: 1px solid var(--divider); }
  section > h2:first-child { margin-top: 0; }
  .features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .card {
    background: var(--surface); border-radius: var(--radius-card);
    padding: 24px; box-shadow: var(--shadow-sm);
  }
  .card h3 { margin-bottom: 0.35em; }
  .card p { margin: 0; font-size: 16px; color: var(--muted); }

  /* --- pricing --- */
  .plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .plan { background: var(--surface); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-sm); }
  .plan.paid { box-shadow: var(--shadow-md); }
  .price { font-family: var(--font-display); font-size: 38px; line-height: 1; margin: 6px 0 4px; }
  .per { font-size: 15px; color: var(--muted); }
  .plan ul { list-style: none; padding: 0; margin: 18px 0 0; }
  .plan li { padding: 7px 0; border-bottom: 1px solid var(--divider); font-size: 16px; }
  .plan li:last-child { border-bottom: 0; }
  .tag {
    display: inline-block; font-size: 13px; padding: 4px 12px; border-radius: 999px;
    background: var(--accent2-100); color: var(--accent2-800);
  }

  /* --- honest note --- */
  .note {
    background: var(--accent-100); border-radius: var(--radius-card);
    padding: 26px; box-shadow: var(--shadow-sm);
  }
  .note p:last-child { margin-bottom: 0; }

  footer { padding: 56px 0 64px; border-top: 1px solid var(--divider); font-size: 15px; color: var(--muted); }
  footer a { color: var(--muted); }
  .foot { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
  .foot .spacer { margin-left: auto; }

  /* --- legal pages --- */
  .legal { padding-block: 8px 72px; max-width: 720px; }
  .legal h1 { margin-bottom: 0.2em; }
  .legal h2 { font-size: 24px; margin-top: 2em; }
  .legal p, .legal li { font-size: 16px; }
  .legal ul { padding-left: 1.2em; }
  .legal li { margin-bottom: 0.4em; }
  .legal table { width: 100%; border-collapse: collapse; margin: 1em 0 1.5em; font-size: 15px; }
  .legal th {
    text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); padding: 8px; border-bottom: 1px solid var(--divider);
  }
  .legal td { padding: 10px 8px; border-bottom: 1px solid var(--divider); vertical-align: top; }
  /* Unfinished business, visible on purpose. Removing the styling would hide
     the note rather than resolve it. */
  .todo {
    background: var(--accent2-100); color: var(--accent2-800);
    border-radius: 16px; padding: 14px 18px; font-size: 15px;
  }