/* brand.css — the look shared by the pages that carry the landing-page design
 * (the landing page and /pricing), after site.css. Body class "branded".
 *
 * site.css still supplies the masthead, the footer and the skip link; where
 * its generic rules (main, p, .btn, code, .eyebrow) would fight the design
 * they are reset here. Page-specific styles are in landing.css and
 * pricing.css.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Self-hosted, Google Fonts' latin slices, all SIL OFL 1.1: see
   /fonts/OFL.txt. Bricolage Grotesque and Public Sans are preloaded by the
   page (the headline and the body copy above the fold); JetBrains Mono swaps
   in when first needed. The handwriting is the system's script face
   (--script): a web font for a handful of words was 51 KB. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/public-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokens ────────────────────────────────────────────────────────────────
   bookfunnel.com's palette, as site.css. One departure, for WCAG AA: text on
   an orange fill is the deep brown (5.4:1; white is 3.1:1). */
:root{
  color-scheme:light dark;
  --bg:#fff; --surface:#fff; --fg:#222; --muted:#666; --rule:#e5e5e5;
  --accent:#f4663f; --accent-ink:#c43200; --on-accent:#2c1a14; --brand:#f4663f;
  --ground:#faf8f7; --dark:#2c1a14;
  --shadow:0 22px 48px -22px rgba(70,30,15,.38), 0 2px 6px -2px rgba(70,30,15,.12);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --script:"Bradley Hand","Segoe Print","Snell Roundhand",cursive;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:64rem; --gutter:clamp(16px,4vw,40px);
  /* site.css's names for the same things, so its footer follows the theme */
  --ink:var(--fg); --accent-text:var(--accent-ink);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15100e; --surface:#211916; --fg:#f6eee9; --muted:#b6a79f; --rule:#3a2e29;
    --accent-ink:#ff9471; --ground:#1b1411; --tint:#2a1d18; --tint-deep:#3a261e;
    --shadow:0 22px 48px -20px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.4);
  }
}

/* ── Base, and site.css's generic rules undone ─────────────────────────── */
body.branded{background:var(--bg);color:var(--fg);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
.branded main{max-width:none;margin:0;padding:0}
.branded h1,.branded h2,.branded h3,.branded h4{font-family:var(--display);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;margin:0}
.branded main p{margin:0}
.branded main a{color:var(--accent-ink)}
.branded main a:hover{color:var(--fg)}
.branded main code{background:none;padding:0;border-radius:0;font-size:inherit}
.branded .footer{background:var(--ground);border-top-color:var(--rule)}
.branded .footer-note{color:var(--muted)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* ── Shared bits ───────────────────────────────────────────────────────── */
.branded .eyebrow{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.branded .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:999px;padding:10px 18px;font:600 16px/1.4 var(--body);cursor:pointer;text-decoration:none;transition:opacity .15s}
.branded .btn+.btn{margin-left:0}
.branded .btn:hover{opacity:.88}
.branded .btn-buy,.branded .btn-buy:hover{background:var(--accent);color:var(--on-accent)}
.branded .btn-ghost,.branded .btn-ghost:hover{background:var(--surface);color:var(--fg);border:1px solid var(--rule)}
.muted{color:var(--muted)}
.acts2{display:flex;gap:10px;flex-wrap:wrap}
.acts2.center{justify-content:center}

@media (prefers-reduced-motion:reduce){
  .branded *,.branded *::before,.branded *::after{animation:none!important;transition:none!important}
}