/* beeldr.budgts.com: Beeldr's home, privacy policy and support pages. Light only, like the app.
   Fonts are served from this site, so nothing loads from anywhere else. */
@font-face { font-family: 'Bricolage Display'; src: url('/fonts/BricolageGrotesqueDisplay-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --navy: #122436; --navy-2: #16304A; --honey: #FFC63D; --honey-soft: #FFF2C7; --honey-ink: #7A4300;
  --ink: #24201B; --ink-2: #6A625A; --line: #EEE7DA; --paper: #FFFFFF; --faint: #FFFCF2;
  --display: 'Bricolage Display', 'Segoe UI', system-ui, sans-serif;
  --text: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); }
a { color: var(--honey-ink); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; border-radius: 4px; }

/* Top bar on the inner pages */
.bar { background: var(--navy); }
.bar .in { max-width: 760px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.bar a { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font: 800 22px/1 var(--display); letter-spacing: -0.4px; }
.bar img { width: 34px; height: 34px; border-radius: 9px; }

/* Home */
.hero { background: radial-gradient(60% 50% at 50% 80%, rgba(255,198,61,.22), rgba(255,198,61,0) 70%), linear-gradient(180deg, var(--navy-2), var(--navy) 70%); color: #FFFFFF; }
.hero .in { max-width: 760px; margin: 0 auto; padding: 72px 20px 80px; display: grid; gap: 20px; justify-items: start; }
.hero img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.hero .name { font: 800 22px/1 var(--display); color: var(--honey); letter-spacing: -0.3px; margin: 6px 0 0; }
.hero h1 { margin: 0; font: 800 clamp(40px, 8vw, 64px)/1.02 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--honey); }
.hero p { margin: 0; max-width: 34em; font-size: 19px; color: #D3DCE5; }
.soon { display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: var(--honey); color: var(--navy); font-weight: 700; font-size: 15px; }
.points { max-width: 760px; margin: 0 auto; padding: 48px 20px 8px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.point { padding: 18px 18px 16px; border-radius: 20px; background: var(--faint); border: 2px solid #F4E2AE; box-shadow: 0 4px 0 #EFD48C; }
.point b { display: block; font: 800 20px/1.2 var(--display); letter-spacing: -0.3px; }
.point span { color: var(--ink-2); font-size: 16px; }

/* Text pages */
main.doc { max-width: 760px; margin: 0 auto; padding: 40px 20px 24px; }
main.doc h1 { margin: 0 0 6px; font: 800 clamp(34px, 6vw, 46px)/1.08 var(--display); letter-spacing: -0.03em; }
main.doc .date { margin: 0 0 28px; color: var(--ink-2); font-size: 15px; }
main.doc h2 { margin: 34px 0 8px; font: 800 24px/1.2 var(--display); letter-spacing: -0.4px; }
main.doc p, main.doc li { max-width: 40em; }
main.doc ul { padding-left: 22px; }
main.doc li { margin: 6px 0; }
.lead { font-size: 19px; }
.box { margin: 22px 0; padding: 18px 20px; border-radius: 18px; background: var(--honey-soft); }
.box p { margin: 0; }
.mail { font-weight: 700; font-size: 20px; }

footer { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; color: var(--ink-2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--ink-2); }