/* Fambook site styles.
   Palette lifted verbatim from the shipping app tokens in
   ~/Projects/familybook/src/theme/index.ts — the `pure` theme, which is the
   one the app falls back to when the theme setting is left on "system":
     themes.pure       pageBg #FFFFFF, cardBg #F2F2F7, cardBgAlt #E8E8ED,
                       border #E5E5EA, ink #000000, inkFaint #83838A,
                       accent #2C4A7C, accentBright #3D5F96
     darkThemes.pure   pageBg #0A0D12, cardBg #12171E, cardBgAlt #1A202B,
                       border #28303E, ink #E9ECF1, inkFaint #9CADC9,
                       accent #7093CC, accentBright #96AFDA
   --accent-2 is `semantic.income` #06703E (light) / `semantic.incomeOnDark`
   #4ADE80 (dark) from the same file. The hero-art swatches are the real CATS
   colours from src/config/constants.ts.
   No web fonts, no CDN, no client JS. */

:root {
  --bg: #ffffff;
  --panel: #f2f2f7;
  --panel-2: #e8e8ed;
  --line: #e5e5ea;
  --ink: #000000;
  --ink-dim: #3c3c43;
  --accent: #2c4a7c;
  --accent-2: #06703e;
  --btn-ink: #ffffff;
  --radius: 14px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0d12;
    --panel: #12171e;
    --panel-2: #1a202b;
    --line: #28303e;
    --ink: #e9ecf1;
    --ink-dim: #9cadc9;
    --accent: #7093cc;
    --accent-2: #4ade80;
    --btn-ink: #0d1626;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        "Hiragino Sans", "Noto Sans CJK JP", "Apple SD Gothic Neo", Arial, sans-serif;
  overflow-wrap: break-word;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- chrome */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--ink); padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

.topbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto; padding: 18px 20px;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none;
}
.brand-mark {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 8px; font-size: 15px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--btn-ink);
}

.topnav { display: flex; gap: 18px; flex-wrap: wrap; margin-inline-start: auto; }
.topnav a { color: var(--ink-dim); text-decoration: none; font-size: 15px; }
.topnav a:hover { color: var(--ink); }

.btn {
  display: inline-block; background: var(--accent); color: var(--btn-ink);
  text-decoration: none; font-weight: 700; border-radius: 999px;
  padding: 13px 26px; border: 1px solid transparent;
}
.btn:hover { filter: brightness(1.08); }
.btn-small { padding: 8px 16px; font-size: 14px; }
.btn-big { font-size: 17px; }

/* ---------------------------------------------------------- hero */

.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 40px 20px 12px;
  display: grid; gap: 40px; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; align-items: center; padding-top: 64px; }
}

.kicker {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.hero h1 { margin: 0 0 18px; font-size: clamp(30px, 5.2vw, 50px); }
.lede { color: var(--ink-dim); font-size: 17px; margin: 0 0 26px; max-width: 60ch; }
.cta-row { margin: 0; }
.cta-note { color: var(--ink-dim); font-size: 14px; margin: 12px 0 0; }

/* A month of a family ledger, drawn in CSS - no image, no request.
   Mirrors the home screen: a four-week bar chart with the current period
   highlighted, a few entries tagged by category colour and by the family
   member who spent it, and the category palette itself. No amounts are drawn,
   because any amount printed here would be invented. */
.hero-art { display: flex; justify-content: center; }
.fb {
  width: 100%; max-width: 400px; padding: 18px;
  border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}

/* Four weeks of spending. The highlighted bar is the period the home screen
   is currently showing; the others are the three before it. */
.fb-chart {
  display: flex; align-items: flex-end; gap: 10px;
  height: 96px; padding: 0 2px;
}
.fb-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.fb-bar > span {
  display: block; width: 100%; border-radius: 6px 6px 3px 3px;
  background: color-mix(in srgb, var(--accent) 30%, var(--panel-2));
}
.fb-bar.cur > span { background: var(--accent); }

/* Entries. The left dot is the category colour, the right dot is the member. */
.fb-list { margin-top: 16px; display: grid; gap: 10px; }
.fb-row { display: flex; align-items: center; gap: 10px; }
.fb-dot {
  width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.fb-line {
  flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.fb-line > span {
  display: block; height: 100%;
  background: color-mix(in srgb, var(--ink-dim) 45%, transparent);
}
.fb-who {
  width: 14px; height: 14px; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

/* The category colours, straight from CATS in src/config/constants.ts. */
.fb-swatches { display: flex; gap: 5px; margin-top: 16px; }
.fb-sw {
  flex: 1 1 0; height: 20px; border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

/* ---------------------------------------------------------- sections */

section { max-width: var(--maxw); margin: 0 auto; padding: 34px 20px; }
section h2 { font-size: clamp(23px, 3.4vw, 32px); margin: 0 0 18px; }

.stats ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 700px) { .stats ul { grid-template-columns: repeat(4, 1fr); } }
.stats li {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-align: center;
}
.stats strong { display: block; font-size: 30px; color: var(--accent); }
.stats span { color: var(--ink-dim); font-size: 14px; }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--ink-dim); font-size: 15px; }

.setup { border-top: 1px solid var(--line); }
.steps { counter-reset: step; list-style: none; margin: 8px 0 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 20px 46px; border-inline-start: 2px solid var(--line);
  margin-inline-start: 13px;
}
.steps li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: -15px; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--btn-ink);
  font-size: 14px; font-weight: 700;
}
.steps strong { display: block; }
.steps span { color: var(--ink-dim); font-size: 15px; }
.note { color: var(--ink-dim); font-size: 14px; }

.privacy, .pricing { border-top: 1px solid var(--line); }
.privacy p, .pricing p { color: var(--ink-dim); max-width: 72ch; }

.faq { border-top: 1px solid var(--line); }
.faq details {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
}
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--ink-dim); margin: 10px 0 0; }

/* ---------------------------------------------------------- guides
   Additive only: these classes exist solely on /guides/ and the long-tail
   pages, so nothing above changes on the home pages. */

.guide {
  max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 8px;
}
.guide h1 { margin: 8px 0 14px; font-size: clamp(26px, 4.2vw, 40px); }
.guide h2 { margin: 34px 0 12px; font-size: 22px; }
.guide h3 { margin: 24px 0 8px; font-size: 18px; }
.guide p { color: var(--ink-dim); max-width: 72ch; line-height: 1.65; }
.guide ul, .guide ol { color: var(--ink-dim); max-width: 72ch; line-height: 1.65; }
.guide li { margin-bottom: 8px; }
.guide .faq, .guide .pricing { border-top: none; padding: 0; }
.crumbs { font-size: 14px; color: var(--ink-dim); }
.guide-index { list-style: none; margin: 0; padding: 0; }
.guide-index li { margin-bottom: 22px; }
.guide-index h2 { margin: 0 0 6px; font-size: 19px; }
.guide-index p { margin: 0; font-size: 15px; }
.related { list-style: none; margin: 0 0 18px; padding: 0; }

/* ---------------------------------------------------------- footer */

.footer {
  max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 56px;
  border-top: 1px solid var(--line);
}
.langs ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin: 0 0 16px; padding: 0; font-size: 15px;
}
.lang-current { color: var(--ink); font-weight: 700; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin-bottom: 12px; }
.small { color: var(--ink-dim); font-size: 13px; margin: 0; }