/* ==========================================================================
   ANNIE'S ACTION AI — BRAND KIT
   Drop this file into any new site, link it in <head>, and every page
   inherits the anniesactionai.com look automatically.

   Extracted from the live anniesactionai.com stylesheet — these are the
   real production values, not approximations.

   USAGE
   -----
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet"
         href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="/assets/annies-brand.css">

   NEVER hard-code a hex value in a page. Always use var(--blue) etc.
   That is the whole point: change a color here, every page follows.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — the single source of truth
   -------------------------------------------------------------------------- */
:root {

  /* ---- Brand colors ---- */
  --navy:          #14263F;  /* Headlines, footer bg, dark CTA banners        */
  --blue:          #1F78E8;  /* THE action color. Primary buttons, links,
                                eyebrows, accent words, icon glyphs           */
  --blue-hover:    #1867C8;  /* Primary button hover only                     */
  --green:         #41C94A;  /* Success / "go" / positive proof. Use sparingly
                                — roughly 1 green element per screen          */
  --green-hover:   #37AF3F;

  /* ---- Neutrals (light → dark) ---- */
  --white:         #FFFFFF;  /* Default section background                    */
  --soft-white:    #F8FAFC;  /* Alternating section background (.section-alt) */
  --light-gray:    #EEF2F6;  /* Heavier band background, form fills           */
  --medium-gray:   #D5DEE8;  /* Borders, dividers, input outlines             */
  --dark-gray:     #667085;  /* Body copy on white, captions, footer links    */
  --nearly-black:  #202632;  /* Default text color on <body>                  */

  /* ---- Derived tints (from the live CSS) ---- */
  --blue-tint:     #EAF3FE;  /* Icon badge bg, secondary-button hover fill    */

  /* ---- Type ---- */
  --font-headline: 'Montserrat', sans-serif;  /* h1–h5, buttons, nav, eyebrow */
  --font-body:     'Inter', sans-serif;       /* everything else              */

  /* ---- Radii ---- */
  --radius-btn:    10px;
  --radius-card:   18px;
  --radius-form:   10px;
  --radius-img:    18px;
  --radius-badge:  14px;  /* .icon-badge */

  /* ---- Elevation ---- */
  --shadow-card:        0 8px 24px rgba(20, 38, 63, 0.08);
  --shadow-card-hover:  0 14px 32px rgba(20, 38, 63, 0.14);
  --shadow-header:      0 1px 0 rgba(20, 38, 63, 0.06);

  /* ---- Layout ---- */
  --max-width:     1180px;
  --gutter:        24px;
  --section-pad:   88px;   /* vertical padding on every <section>             */
  --grid-gap:      28px;
}


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--nearly-black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 16px;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 16px; color: var(--dark-gray); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; border-radius: var(--radius-img); }


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: var(--section-pad) 0; }

/* Alternate these down the page so sections read as distinct bands:
   white → .section-alt → white → .section-light-gray → white ... */
.section-alt        { background: var(--soft-white); }
.section-light-gray { background: var(--light-gray); }

.section-head {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}

.grid   { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }


/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */

/* Small uppercase kicker above a headline. Always blue. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

/* Intro paragraph under an h1/h2 — larger than body copy. */
.lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--dark-gray);
}

/* One word in a headline pulled out in blue. Use ONCE per headline. */
.highlight,
.accent-word { color: var(--blue); }

/* Green variant of the same idea — for proof/positive headlines only. */
.accent-green { color: var(--green); }

.navy { color: var(--navy); }
.green { color: var(--green); }


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: 0.18s;
}
.btn:hover { text-decoration: none; }

/* Primary — the main action. One per screen region. */
.btn-primary        { background: var(--blue); color: var(--white); }
.btn-primary:hover  { background: var(--blue-hover); color: var(--white); }

/* Secondary — the alternative next to a primary. */
.btn-secondary       { background: var(--white); border-color: var(--blue); color: var(--blue); }
.btn-secondary:hover { background: var(--blue-tint); }

/* Success — "start", "sign up free", confirmations. */
.btn-success        { background: var(--green); color: var(--white); }
.btn-success:hover  { background: var(--green-hover); color: var(--white); }

/* Outline white — for use ON the navy CTA banner or footer only. */
.btn-outline-white       { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline-white:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn-lg { padding: 17px 34px; font-size: 1.05rem; }


/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  border-top: 3px solid transparent;
  transition: transform .2s, box-shadow .2s, border-top-color .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-top-color: var(--blue);
}

/* Whole card is a link */
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { text-decoration: none; }

/* Rounded square holding an icon at the top of a card. */
.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-tint);
  margin-bottom: 18px;
}
.icon-badge svg { width: 24px; height: 24px; stroke: var(--blue); }

/* Green variant — pair with green content */
.icon-badge-green { background: #E8F8E9; }
.icon-badge-green svg { stroke: var(--green); }


/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: var(--shadow-header);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-wordmark {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
}

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.main-nav a:hover,
.main-nav a.active { border-bottom-color: var(--green); text-decoration: none; }

.nav-cta { margin-left: 8px; }


/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { padding: 96px 0 88px; background: var(--white); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-trust   { margin-top: 40px; display: flex; gap: 28px; flex-wrap: wrap;
                font-size: .9rem; color: var(--dark-gray); }

.hero-visual-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}


/* --------------------------------------------------------------------------
   9. STATS
   -------------------------------------------------------------------------- */
.stat-num {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--blue);
  line-height: 1.1;
}
.stat-label {
  font-size: .9rem;
  color: var(--dark-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* --------------------------------------------------------------------------
   10. CTA BANNER — the navy block near the bottom of every page
   -------------------------------------------------------------------------- */
.cta-banner {
  background: var(--navy);
  border-radius: var(--radius-card);
  padding: 64px;
  text-align: center;
  color: var(--white);
}
.cta-banner h2,
.cta-banner h3 { color: var(--white); }
.cta-banner p  { color: rgba(255,255,255,.78); }


/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: var(--white); padding: 64px 0 28px; }
.site-footer h4 { color: var(--white); font-size: .95rem; margin-bottom: 14px; }
.site-footer a  { color: rgba(255,255,255,.76); font-size: .92rem; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer-grid   { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .85rem;
  color: rgba(255,255,255,.6);
}


/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: 6px; }

input[type=text], input[type=email], input[type=tel], input[type=url],
select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--nearly-black);
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-form);
  transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}


/* --------------------------------------------------------------------------
   13. TAGS / BADGES
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
}
.tag-green { background: #E8F8E9; color: var(--green-hover); }
.tag-gray  { background: var(--light-gray); color: var(--dark-gray); }


/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --section-pad: 60px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 24px; }
  .card { padding: 24px; }
  .main-nav { display: none; }   /* replace with your mobile drawer */
}