/* Landscaper Made Simple site styles. Tokens from brands/lms/brand.ts and brands/lms/public/app/brand.css (deep pine
   core on warm cream, marigold button, sunflower for Book 1, pond blue for Book 2, meadow green for Book 3, terracotta
   for the workbook). Token names are kept from the reference consumer frame (navy = the heading colour, gold = the
   button) so the page layout stays the same. Fonts: Lora (display) and Inter (body), self-hosted Latin subsets, SIL OFL
   1.1 (licenses in assets/fonts/). No Google Fonts calls. */
@font-face { font-family: 'Lora'; src: url('fonts/Lora.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('fonts/Lora-Italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* deep pine core on warm cream (the books' palette); marigold is a fill (the button), never body text */
  --navy: #22392D; --navy-deep: #18291F; --navy-raised: #2E4A3B;
  --cream: #F9F7EF; --paper: #FFFDF7; --sand: #EDE8D8; --line: #DEDACA;
  --ink: #1D2A22; --ink-2: #465549; --muted: #5B695F;
  --gold: #E9A23B; --gold-hover: #D38D24; --gold-edge: #B97A1C; --gold-tint: #FCF0D2; --gold-deep: #7A5208;
  --accent: #2F6B2A;
  --cover-page: #EEF4E4;
  --rose-tint: #FBE6DB; --rose: #E59A72; --rose-deep: #9A4220;
  --sage-tint: #E7F2E0; --sage: #8DC47A; --sage-deep: #2F6B2A;
  --sky-tint: #E2EEF6; --sky: #7FB1CF; --sky-deep: #255A7A;
  --butter-tint: #FCF0D2; --butter: #EDB64A; --butter-deep: #7A5208;
  --plum-tint: #E3E9E5; --plum: #22392D; --plum-deep: #22392D;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius-card: 20px;
  --shadow-soft: 0 10px 30px rgba(34, 57, 45, 0.09);
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sky-deep); }
h1, h2, h3, .price { font-family: var(--font-display); font-weight: 600; color: var(--navy); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.005em; }
h1 em, h2 em, h3 em, .emphasis { font-style: italic; font-weight: 600; color: var(--accent); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
section { padding: 56px 0; }
section.alt { background: var(--sand); }
.lede { font-size: 19px; color: var(--ink-2); max-width: 680px; }
.center { text-align: center; }
.center .lede, .lede.center { margin-left: auto; margin-right: auto; }
.label { font: 800 0.78rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); display: block; margin-bottom: 12px; }
.pill { display: inline-block; font: 800 0.75rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; padding: 0.5em 0.9em; border-radius: 999px; white-space: nowrap; background: var(--gold-tint); color: var(--gold-deep); }
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: var(--navy); font: 800 1.05rem/1 var(--font-body); padding: 1.05em 1.8em; border-radius: 14px; border: 0; border-bottom: 3px solid var(--gold-edge); text-decoration: none; cursor: pointer; text-align: center; transition: background .15s, transform .15s; }
.btn:hover { background: var(--gold-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.band { background: var(--navy); color: var(--cream); }
.band h2, .band h3 { color: var(--cream); }
.band h2 em { color: var(--gold); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.hat-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 16px; width: 240px; }
.hat-rule::before, .hat-rule::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: var(--gold); }
.hat-rule svg { width: 26px; height: 26px; flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; white-space: nowrap; font: 800 13px/1 var(--font-body); padding: 7px 11px; border-radius: 999px; border: 1px solid transparent; }
.tag.rose { background: var(--rose-tint); color: var(--rose-deep); border-color: #F2C2B4; }
.tag.sage { background: var(--sage-tint); color: var(--sage-deep); border-color: #C3E3BE; }
.tag.sky { background: var(--sky-tint); color: var(--sky-deep); border-color: #BDD6EE; }
.tag.butter { background: var(--butter-tint); color: var(--butter-deep); border-color: #F3D68C; }
.tag.plum { background: var(--plum-tint); color: var(--plum-deep); border-color: #C6D1DE; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.trust svg { width: 16px; height: 16px; flex: none; }
.trust i { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-deep); align-items: center; justify-content: center; }
.fine { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Policy pages */
.policy { max-width: 720px; margin: 0 auto; padding: 48px 20px 72px; }
.policy h1 { font-size: clamp(32px, 5vw, 44px); }
.policy h2 { font-size: 24px; margin-top: 1.6em; }
.policy .effective { color: var(--muted); font-weight: 700; margin-bottom: 2em; }
.policy ul { padding-left: 1.2em; }
.policy li { margin-bottom: .5em; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; max-width: var(--wrap); margin: 0 auto; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); font-family: var(--font-display); font-weight: 600; font-size: 21px; }
.brand-lockup img { width: 38px; height: 38px; flex: none; border-radius: 9px; }
.header-rule { height: 4px; background: linear-gradient(90deg, var(--gold-tint), var(--gold) 50%, var(--gold-tint)); }
.site-footer { background: var(--navy-deep); color: var(--cream); padding: 40px 20px 48px; font-size: 14px; text-align: center; }
.site-footer .wrap { max-width: 860px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 18px; font-weight: 700; }
.site-footer nav a { color: var(--cream); text-decoration: none; white-space: nowrap; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer p { color: #CBD5E1; margin-bottom: .6em; line-height: 1.55; }
.site-footer .copy { color: var(--cream); }