/* Flooring Made Simple site styles (brands/flms/public/app/brand.css has the same tokens, the books' palette): ink core
   on warm cream, oak button, brand teal for links, clay for Book 1, tile teal for Book 2, oak for Book 3, slate 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 {
  /* ink core on warm paper; oak is a fill (the button), never body text; brand teal for links and emphasis */
  --navy: #26211D; --navy-deep: #1A1613; --navy-raised: #3A332D;
  --cream: #F8F5EF; --paper: #FFFDF9; --sand: #EEE8DE; --line: #DDD5C8;
  --ink: #26211D; --ink-2: #4A423B; --muted: #5E554D;
  --gold: #D4A86A; --gold-hover: #C49553; --gold-edge: #9C7440; --gold-tint: #F6EBDA; --gold-deep: #7A4E1C;
  --accent: #1D6259;
  --cover-page: #F6EBDA;
  --rose-tint: #F9E8DC; --rose: #E0A27A; --rose-deep: #8A4520;
  --sage-tint: #E7ECF2; --sage: #93A4B8; --sage-deep: #34475E;
  --sky-tint: #E1F2EF; --sky: #6FB8AE; --sky-deep: #1D6259;
  --butter-tint: #F6EBDA; --butter: #D4A86A; --butter-deep: #7A4E1C;
  --plum-tint: #E9E5E0; --plum: #26211D; --plum-deep: #26211D;
  --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(38, 33, 29, 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: #F0CBB2; }
.tag.sage { background: var(--sage-tint); color: var(--sage-deep); border-color: #C9D3DF; }
.tag.sky { background: var(--sky-tint); color: var(--sky-deep); border-color: #BCE0DA; }
.tag.butter { background: var(--butter-tint); color: var(--butter-deep); border-color: #E9D2AE; }
.tag.plum { background: var(--plum-tint); color: var(--plum-deep); border-color: #D2CBC2; }
.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: #D2CBC2; margin-bottom: .6em; line-height: 1.55; }
.site-footer .copy { color: var(--cream); }