/* =====================================================================
   Bella AI - Brand Design System
   Auto-extracted from https://itsbella.ai with `dembrandt` (MIT, local).
   Single source of truth for lead magnets + landing pages.
   Tokens verified 2026-06-23. Re-run: npx dembrandt itsbella.ai --dtcg
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap');

:root{
  /* --- real Bella palette (dembrandt) --- */
  --bella-forest:    #0F201A;   /* primary / dark surfaces */
  --bella-green:     #1FA565;   /* accent / CTAs */
  --bella-green-br:  #75F995;   /* bright green / highlights */
  --bella-green-pl:  #D6FFDA;   /* pale green / fills, tints */
  --bella-surface:   #FAFAFB;   /* page background */
  --bella-ink:       #1A2620;   /* body text on light */
  --bella-grey:      #333333;
  --bella-muted:     #8D959D;
  --bella-line:      #E6EAE8;
  --bella-white:     #FFFFFF;
  --bella-grad:      linear-gradient(135deg, #0F201A 0%, #133527 55%, #1FA565 130%);
  --bella-grad-soft: linear-gradient(135deg, #D6FFDA 0%, #FAFAFB 100%);

  /* --- type --- */
  --bella-font-head: "Funnel Display", system-ui, sans-serif;
  --bella-font-body: "Onest", system-ui, sans-serif;

  /* --- radius (dembrandt) --- */
  --bella-r-pill: 999px;
  --bella-r-lg:   20px;
  --bella-r-md:   12px;
  --bella-r-sm:   8px;
}

/* ---- base ---- */
.bella{font-family:var(--bella-font-body);color:var(--bella-ink);background:var(--bella-surface);line-height:1.55;-webkit-font-smoothing:antialiased}
.bella h1,.bella h2,.bella h3,.bella h4{font-family:var(--bella-font-head);color:var(--bella-forest);letter-spacing:-.01em;line-height:1.15;margin:0 0 .4em}
.bella a{color:var(--bella-green)}

/* ---- cover / hero (dark, gradient, like itsbella.ai) ---- */
.bella-cover{background:var(--bella-grad);color:var(--bella-white);border-radius:var(--bella-r-lg);padding:40px 44px;position:relative;overflow:hidden}
.bella-cover h1{color:var(--bella-white);font-size:34px;font-weight:700}
.bella-cover .sub{color:var(--bella-green-pl);font-size:16px;max-width:60ch}
.bella-cover .edition{display:inline-block;font-family:var(--bella-font-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bella-forest);background:var(--bella-green-br);padding:5px 12px;border-radius:var(--bella-r-pill)}
.bella-wordmark{font-family:var(--bella-font-head);font-weight:700;font-size:20px;color:var(--bella-white)}
.bella-wordmark::before{content:"";display:inline-block;width:10px;height:10px;border-radius:var(--bella-r-pill);background:var(--bella-green-br);margin-right:8px;vertical-align:middle}

/* ---- sections ---- */
.bella-section{margin:30px 0}
.bella-section > h2{font-size:22px;display:flex;align-items:center;gap:10px}
.bella-section > h2::before{content:"";width:8px;height:22px;border-radius:var(--bella-r-pill);background:var(--bella-green)}
.bella-eyebrow{font-family:var(--bella-font-body);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bella-green)}

/* ---- cards / checklist / worksheet ---- */
.bella-card{background:var(--bella-white);border:1px solid var(--bella-line);border-radius:var(--bella-r-md);padding:18px 20px}
.bella-check{list-style:none;padding:0;margin:0}
.bella-check li{position:relative;padding:9px 0 9px 34px;border-bottom:1px solid var(--bella-line)}
.bella-check li::before{content:"";position:absolute;left:0;top:10px;width:20px;height:20px;border:2px solid var(--bella-green);border-radius:6px;background:var(--bella-white)}
.bella-flag{display:inline-block;font-size:11px;font-weight:600;color:#fff;background:var(--bella-green);padding:2px 8px;border-radius:var(--bella-r-pill);margin-left:6px}
.bella-table{width:100%;border-collapse:collapse;font-size:14px}
.bella-table th{background:var(--bella-forest);color:#fff;text-align:left;padding:10px 12px;font-family:var(--bella-font-head);font-weight:500}
.bella-table td{border:1px solid var(--bella-line);padding:10px 12px}
.bella-table tr:nth-child(even) td{background:#f4f7f5}

/* ---- CTA ---- */
.bella-cta{background:var(--bella-grad);color:#fff;border-radius:var(--bella-r-lg);padding:26px 28px;margin-top:28px}
.bella-cta h3{color:#fff;font-size:22px}
.bella-btn{display:inline-block;background:var(--bella-green-br);color:var(--bella-forest);font-family:var(--bella-font-head);font-weight:600;text-decoration:none;padding:12px 22px;border-radius:var(--bella-r-pill)}

/* ---- print (PDF) ---- */
@media print{
  .bella{background:#fff}
  .bella-cover,.bella-cta{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bella-section{break-inside:avoid}
}