/* ============================================================================
   FundGuru.org public site - SHARED styles (5.0e, 2026-09-21)
   Tokens, header, footer, buttons, eyebrows, reveal-on-scroll. Loaded by
   index.html and features.html (and every public FundGuru page rebuilt from
   Bill's Claude Design). Page-specific sections stay inline in each page.
   NOT css/style.css - that is the app's dark theme and must never load here.
   ============================================================================ */
:root {
    --plum: #421288;        /* headings, links, nav */
    --plum-deep: #250A48;   /* hero + footer */
    --plum-hover: #3A0D72;
    --gold: #C69D47;        /* primary button */
    --gold-light: #DBBC7E;  /* hero accents, footer labels */
    --gold-dark: #765823;   /* eyebrows, script accents */
    --cream: #F8F5F1;       /* page */
    --cream-2: #F3EDE5;     /* alternating bands */
    --sand: #E7DDCB;
    --ink: #55495F;         /* body copy */
    --ink-2: #453D4F;
    --rule: rgba(66,18,136,0.13);
    --rule-gold: rgba(198,157,71,0.5);
    --wrap: 1200px;
    --gutter: 96px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--cream); }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
a { color: var(--plum); text-decoration: none; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; }
h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; color: var(--plum); margin: 0; letter-spacing: -0.015em; text-wrap: pretty; }
p { text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow { display: block; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); }
.eyebrow-rule { display: flex; align-items: center; gap: 18px; }
.eyebrow-rule .eyebrow { white-space: nowrap; }
.eyebrow-rule::after { content: ""; display: block; flex: 1 1 auto; height: 1px; background: var(--rule-gold); }
.script { font-family: Sacramento, cursive; color: var(--gold-dark); line-height: 1; transform: rotate(-3deg); margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background .18s, color .18s, transform .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--plum-deep); font-weight: 700; }
.btn-gold:hover { background: var(--gold-light); color: var(--plum-deep); }
.btn-plum { background: var(--plum); color: var(--cream); }
.btn-plum:hover { background: var(--plum-hover); color: #fff; }
.btn-ghost { border: 1.5px solid rgba(248,245,241,0.62); color: var(--cream); }
.btn-ghost:hover { background: rgba(248,245,241,0.12); color: #fff; }
.ticks { list-style: none; margin: 34px 0 0; padding: 0; max-width: 520px; }
.ticks li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 500; color: var(--plum); }
.ticks li:last-child { border-bottom: 1px solid var(--rule); }
.ticks li::before, .dots li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.photo { overflow: hidden; background: var(--plum-deep); border-radius: 16px; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ===== Header ===== */
/* ===== Header ===== */
.fg-nav { position: sticky; top: 0; z-index: 50; background: rgba(248,245,241,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(66,18,136,0.08); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.fg-nav.scrolled { background: rgba(219,208,237,0.96); border-bottom-color: rgba(66,18,136,0.16); box-shadow: 0 10px 28px rgba(37,10,72,0.10); }   /* 5.0g.1 (Bill) - light purple once the page has scrolled */
.fg-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 16px; padding-bottom: 16px; }
.fg-nav .brand img { display: block; height: 72px; width: auto; }   /* 5.0g.1 (Bill) - was 44px, too small */
.fg-links { display: flex; align-items: center; gap: 32px; }
.fg-links a { font-size: 16.5px; font-weight: 600; color: var(--plum); letter-spacing: -0.01em; white-space: nowrap; }
.fg-links a:hover, .fg-links a[aria-current="page"] { color: var(--gold-dark); }
.fg-links .btn { padding: 12px 24px; font-size: 15px; }
.fg-menu { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--plum); }
.fg-menu svg { display: block; }


/* ===== Footer ===== */
/* ===== Footer ===== */
.fg-foot { background: var(--plum-deep); color: #CFC4E2; }
.fg-foot .top { display: flex; gap: 64px; flex-wrap: wrap; justify-content: space-between; padding-top: 96px; padding-bottom: 40px; }
.fg-foot .about { flex: 1 1 300px; min-width: 260px; max-width: 320px; }
.fg-foot .about img { display: block; width: 186px; height: auto; }
.fg-foot .about p { margin: 26px 0 0; font-size: 15.5px; line-height: 1.66; }
.fg-foot .cols { flex: 2 1 620px; min-width: 280px; display: flex; gap: 40px; flex-wrap: wrap; }
.fg-foot .col { flex: 1 1 150px; min-width: 140px; }
.fg-foot .col p { margin: 0 0 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.fg-foot .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.fg-foot .col a { font-size: 15px; color: #EDE6F5; }
.fg-foot .col a:hover { color: var(--gold-light); }
.fg-foot .bottom { padding-bottom: 56px; }
.fg-foot .bottom div { padding-top: 28px; border-top: 1px solid rgba(219,188,126,0.28); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fg-foot .bottom p { margin: 0; font-size: 13.5px; color: #B7A9CE; }
.fg-foot .motto { display: flex; align-items: center; gap: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }
.fg-foot .motto::before { content: ""; display: block; width: 40px; height: 1px; background: rgba(219,188,126,0.6); }


/* ===== Reveal on scroll ===== */
/* ===== Reveal on scroll (subtle) ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }


/* ===== Tablet ===== */
@media (max-width: 1100px) { :root { --gutter: 48px; } }

/* ===== Phone ===== */
@media (max-width: 900px) {
    :root { --gutter: 20px; }
    .fg-nav .wrap { gap: 16px; padding-top: 10px; padding-bottom: 10px; }
    .fg-nav .brand img { height: 52px; }
    .fg-menu { display: block; }
    .fg-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); border-bottom: 1px solid rgba(66,18,136,0.12); box-shadow: 0 18px 32px rgba(37,10,72,0.12); padding: 8px 0 16px; }
    .fg-links.open { display: flex; }
    .fg-nav.scrolled .fg-links { background: #DBD0ED; }
    .fg-links a { padding: 13px 20px; font-size: 16px; }
    .fg-links .btn { margin: 8px 20px 0; }
    .fg-foot .top { padding-top: 64px; gap: 40px; }
    .fg-foot .bottom div { justify-content: flex-start; }
}