/* ============================================================================
   LumiJar marketing site — shared styles for the tooth-fairy SEO cluster.
   Mirrors the calculator page (brand book: Baloo 2 self-hosted, warm gold /
   midnight purple, warm-light with auto night mode). The calculator itself
   stays self-contained; these content pages share this sheet.
   ============================================================================ */
@font-face{font-family:'Baloo 2';src:url('/fonts/baloo2-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('/fonts/baloo2-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('/fonts/baloo2-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('/fonts/baloo2-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('/fonts/baloo2-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --card:#ffffff; --ink:#241b3a; --ink-soft:rgba(36,27,58,0.82);
  --gold:#ffc850; --violet:#7c3aed; --lavender:#c084fc; --mint:#0d9488;
  --line:rgba(124,58,237,0.14); --glow:rgba(255,200,80,0.35);
  --input-bg:#faf5e9; --hero:#d16c12;
  --bg1:#fdf9f0; --bg2:#f6eeda; --bg-glow:rgba(255,200,80,0.30);
}
@media (prefers-color-scheme: dark){
  :root{
    --card:#1d1440; --ink:#f5efff; --ink-soft:rgba(245,239,255,0.82);
    --line:rgba(192,132,252,0.2); --input-bg:#251a49; --hero:#ffc850; --glow:rgba(255,200,80,0.22);
    --bg1:#0d0a1e; --bg2:#1a0533; --bg-glow:rgba(124,58,237,0.34);
  }
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65;min-height:100vh;font-size:16px;
     background:radial-gradient(circle at 50% -8%, var(--bg-glow), transparent 58%), linear-gradient(180deg, var(--bg1), var(--bg2));
     background-attachment:fixed}
.wrap{max-width:640px;margin:0 auto;padding:26px 20px 64px}

/* Top nav — the fairy mark links home; wordmark in Baloo 2 */
.topnav{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.topnav a{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px}
.topnav .mark{font-size:24px;filter:drop-shadow(0 0 12px var(--glow))}
.brand{font-family:'Baloo 2',sans-serif;font-weight:700;font-style:normal;color:var(--ink)}

h1{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(26px,6vw,36px);line-height:1.18;margin:8px 0 6px}
h2{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:clamp(19px,4.5vw,23px);margin:34px 0 8px}
.lede{color:var(--ink-soft);font-size:17px;margin:0 0 8px}
p{margin:0 0 14px}
a{color:var(--violet)}
strong{font-weight:700}
.big-num{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--hero);text-shadow:0 0 26px var(--glow)}

/* Callout card (answer boxes, tips) */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin:22px 0;box-shadow:0 6px 30px rgba(36,27,58,0.06)}
.card.warm{background:linear-gradient(180deg,var(--card),var(--input-bg))}
.tip{background:rgba(192,132,252,0.1);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:18px 0;font-size:15px}

/* Data table (regional rates) */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:16px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--ink)}
td.rate{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--hero);text-align:right;white-space:nowrap}
caption{caption-side:bottom;color:var(--ink-soft);font-size:12.5px;margin-top:10px;text-align:left}

/* The calculator invite — the cluster always routes back to the hub */
.calc-cta{display:block;text-decoration:none;background:linear-gradient(180deg,var(--card),var(--input-bg));border:1.5px solid var(--line);
          border-radius:20px;padding:20px 22px;margin:26px 0;color:var(--ink)}
.calc-cta .k{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;display:block;margin-bottom:2px}
.calc-cta .go{color:var(--violet);font-weight:600;font-size:15px}

/* LumiJar conversion block (below the useful content, never gating it) */
.convert{margin:34px 0 0;text-align:center}
.convert p{font-size:15px;color:var(--ink-soft);max-width:460px;margin:0 auto 14px}
.cta{display:inline-block;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;color:#fff;text-decoration:none;
     background:linear-gradient(135deg,var(--violet),#ec4899);padding:13px 30px;border-radius:16px}
.cta:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Non-clickable placeholder until the app launches (Start free → LumiJar). */
.cta-static{cursor:default;user-select:none}
.convert-sub{font-size:13px;color:var(--ink-soft);margin:16px auto 0;max-width:380px}

/* Related links */
.related{margin-top:34px}
.related h2{margin-bottom:10px}
.related ul{list-style:none;padding:0;margin:0}
.related li{border-bottom:1px solid var(--line)}
.related a{display:block;padding:13px 4px;text-decoration:none;color:var(--ink);font-weight:600}
.related a:hover{color:var(--violet)}
.related .q{color:var(--ink-soft);font-weight:400;font-size:14px;display:block;margin-top:1px}

footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;color:var(--ink-soft)}
footer .wordmark{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--ink);font-size:14px}