@font-face {
  font-display: block;
  font-family: Roboto;
  src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff");
}
@font-face {
  font-display: fallback;
  font-family: Roboto;
  font-weight: 600;
  src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff");
}
@font-face {
  font-display: fallback;
  font-family: Roboto;
  font-weight: 700;
  src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff");
}

:root {
  --sun: #FFD438;
  --sky: #4BBDE8;
  --orange: #FF7A2F;
  --navy: #1B2B5E;
  --navy-dark: #122047;
  --cream: #FFF8EC;
  --white: #FFFFFF;
  --green: #4D925B;
  --muted: #6a7d99;
  --shadow: 0 8px 32px rgba(27,43,94,0.13);
  --soft-shadow: 0 18px 50px rgba(27,43,94,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--navy);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

nav {
  background: var(--navy);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.nav-logo {
  font-family: 'Baloo 2', cursive;
  font-size: 1.4rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}
.nav-logo span { color: var(--sun); }
.nav-links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-link {
  color: #9ab0cc;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 20px;
  text-decoration: none;
  transition: color .2s, background .2s, transform .2s;
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.nav-link.active { color: var(--navy); background: var(--sun); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.btn-orange, .btn-navy, .btn-light {
  display: inline-block;
  font-family: 'Baloo 2', cursive;
  font-weight: 900;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn-orange {
  background: var(--orange);
  color: var(--white);
  font-size: 1.05rem;
  padding: 13px 32px;
  box-shadow: 0 6px 24px rgba(255,122,47,0.4);
}
.btn-orange:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(255,122,47,0.5); }
.btn-navy {
  background: var(--navy);
  color: var(--white);
  font-size: 0.98rem;
  padding: 12px 26px;
  box-shadow: 0 4px 16px rgba(27,43,94,0.25);
}
.btn-navy:hover, .btn-light:hover { transform: translateY(-2px); }
.btn-light {
  background: var(--white);
  color: var(--navy);
  font-size: 0.98rem;
  padding: 12px 26px;
  box-shadow: 0 4px 16px rgba(27,43,94,0.16);
}

.section-tag {
  display: inline-block;
  background: var(--sun);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 5px 15px;
  border-radius: 20px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hero {
  background: linear-gradient(180deg,#B8E8FF 0%,#D4F4B0 100%);
  padding: 64px 24px 76px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before { content:''; position:absolute; top:-60px; left:-60px; width:280px; height:280px; background:radial-gradient(circle,#FFD43860 0%,transparent 70%); border-radius:50%; }
.hero::after { content:''; position:absolute; bottom:-50px; right:-50px; width:240px; height:240px; background:radial-gradient(circle,#5BC26440 0%,transparent 70%); border-radius:50%; }
.hero > * { position: relative; z-index: 1; }
.home-logo { font-family:'Baloo 2',cursive; font-size:2rem; color:var(--navy); margin-bottom:6px; }
.home-logo span, .orange { color: var(--orange); }
.hero h1 {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2rem, 5vw, 3.35rem);
  color: var(--navy);
  line-height: 1.08;
  max-width: 800px;
  margin: 0 auto 14px;
}
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .sub {
  font-size: clamp(1rem,2vw,1.15rem);
  color: #3a4e6e;
  max-width: 650px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.hero-feature {
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(260px, 520px);
  gap: 34px;
  align-items: center;
  justify-content: center;
  margin: 34px auto 0;
  max-width: 930px;
  text-align: left;
}
.hero-feature img { border-radius: 22px; box-shadow: var(--soft-shadow); width: 100%; }
.hero-card {
  background: rgba(255,255,255,0.82);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.hero-card h2 { font-family:'Baloo 2',cursive; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px; }
.hero-card p { color:#3a4e6e; line-height:1.6; margin-bottom:16px; }
.check-list { list-style:none; display:grid; gap:9px; margin:16px 0 20px; }
.check-list li { display:flex; gap:9px; align-items:flex-start; color:#2e4264; font-weight:700; }
.check-list li::before { content:'✓'; color: var(--navy); background: #DDF8E5; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

.badges { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.badge { background:var(--white); border-radius:30px; padding:7px 16px; font-size:0.82rem; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:5px; box-shadow:0 2px 8px rgba(27,43,94,0.1); }

.section { padding: 64px 24px; }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 38px; }
.section-header h2 { font-family:'Baloo 2',cursive; font-size:clamp(1.55rem,3vw,2.25rem); }
.section-header p { color: var(--muted); max-width: 620px; margin: 8px auto 0; line-height:1.6; }

.books-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.book-card, .free-card, .benefit-card, .faq-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.book-card, .free-card { overflow:hidden; display:flex; flex-direction:column; border:2px solid transparent; transition:transform .25s,box-shadow .25s,border-color .25s; text-decoration:none; }
.book-card:hover, .free-card:hover { transform:translateY(-6px); box-shadow:var(--soft-shadow); border-color:var(--sun); }
.book-card.featured { border-color: var(--sun); position: relative; }
.featured-ribbon { position:absolute; top:12px; left:12px; background:var(--sun); color:var(--navy); border-radius:18px; padding:5px 12px; font-weight:900; font-size:.72rem; z-index:2; }
.book-card img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.free-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.card-info { padding:16px 17px 20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card-info h3 { font-family:'Baloo 2',cursive; font-size:1.05rem; color:var(--navy); line-height:1.25; }
.card-info p { font-size:.86rem; color:var(--muted); line-height:1.45; }
.pill { display:inline-block; margin-top:auto; background:var(--sky); color:var(--white); font-weight:900; font-size:.78rem; padding:6px 13px; border-radius:20px; align-self:flex-start; }
.pill.yellow { background:var(--sun); color:var(--navy); }
.pill.orange { background:var(--orange); color:var(--white); }

.benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.benefit-card { padding:24px 20px; text-align:center; }
.benefit-card .icon { font-size:2rem; margin-bottom:10px; }
.benefit-card h3 { font-family:'Baloo 2',cursive; font-size:1.1rem; margin-bottom:6px; }
.benefit-card p { color:var(--muted); line-height:1.55; font-size:.92rem; }

.cta-band { background:var(--navy); padding:54px 24px; text-align:center; color:var(--white); }
.cta-band h2 { font-family:'Baloo 2',cursive; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:8px; }
.cta-band p { color:#9ab0cc; margin:0 auto 24px; font-size:1rem; max-width:620px; line-height:1.6; }

.free-hero {
  background: var(--navy);
  padding: 66px 24px 74px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.free-hero::before { content:''; position:absolute; top:-90px; left:50%; transform:translateX(-50%); width:390px; height:390px; background:radial-gradient(circle,#FFD43822 0%,transparent 70%); border-radius:50%; }
.free-hero > * { position:relative; z-index:1; }
.free-label { display:inline-block; background:var(--sun); color:var(--navy); font-family:'Baloo 2',cursive; font-size:.9rem; font-weight:900; padding:5px 17px; border-radius:20px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }
.free-hero h1 { font-family:'Baloo 2',cursive; font-size:clamp(1.9rem,4.8vw,3.1rem); max-width:720px; margin:0 auto 10px; line-height:1.12; }
.free-hero .sub { color:#c7d5e8; font-size:1.02rem; max-width:650px; margin:0 auto 34px; line-height:1.6; }
.free-inner { display:grid; grid-template-columns:minmax(260px, 500px) minmax(240px, 330px); align-items:center; justify-content:center; gap:44px; max-width:940px; margin:0 auto 38px; }
.free-mockup { width:100%; border-radius:16px; box-shadow:0 16px 56px rgba(0,0,0,0.42); }
.free-features-list { text-align:left; display:flex; flex-direction:column; gap:12px; }
.free-feature { display:flex; align-items:center; gap:10px; color:var(--white); font-size:1rem; font-weight:800; }
.free-feature .icon { background:var(--orange); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }

.form-shell { max-width: 560px; margin: 0 auto; }
.form-note { color:#7a95b0; font-size:0.78rem; margin-top:8px; }

:where(.sib-form-message-panel) { display: none; }
:where(.sib-form-message-panel .sib-notification__icon) { width: 20px; height: 20px; }
#sib-container input:-ms-input-placeholder { font-family: Helvetica, sans-serif; text-align: left; color: #c0ccda; }
#sib-container input::placeholder { font-family: Helvetica, sans-serif; text-align: left; color: #c0ccda; }
#sib-container textarea::placeholder { font-family: Helvetica, sans-serif; text-align: left; color: #c0ccda; }
#sib-container a { text-decoration: underline; color: #2BB2FC; }
.sib-form { background: transparent !important; padding: 0 !important; }
#sib-container { background: transparent !important; border: none !important; max-width: 520px !important; margin: 0 auto !important; }
#sib-form .sib-form-block p { color: #fff !important; font-family: 'Nunito', sans-serif !important; }
#sib-form .entry__label { color: #9ab0cc !important; font-family: 'Nunito', sans-serif !important; font-size: 0.85rem !important; }
#sib-form .entry__specification { display: none !important; }
#sib-form input.input { border-radius: 50px !important; border: none !important; padding: 14px 22px !important; font-family: 'Nunito', sans-serif !important; font-size: 1rem !important; width: 100% !important; }
#sib-form .sib-form-block__button { background: #FF7A2F !important; border-radius: 50px !important; padding: 14px 32px !important; font-family: 'Baloo 2', cursive !important; font-size: 1rem !important; font-weight: 900 !important; width: 100% !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(255,122,47,0.4) !important; transition: transform .2s !important; }
#sib-form .sib-form-block__button:hover { transform: translateY(-2px) !important; }
#error-message, #success-message { max-width: 520px !important; margin: 0 auto 12px !important; border-radius: 12px !important; }

.thank-hero {
  background: var(--navy);
  color: var(--white);
  text-align:center;
  padding: 36px 24px 72px;
  position:relative;
  overflow:hidden;
}
.confirm-banner { background:var(--green); color:#fff; padding:14px 24px; text-align:center; font-weight:900; }
.thank-icon { font-size:3.2rem; margin:38px auto 16px; }
.thank-hero h1 { font-family:'Baloo 2',cursive; font-size:clamp(2rem,5vw,3.2rem); line-height:1.1; color:var(--sun); max-width:640px; margin:0 auto 14px; }
.thank-hero p { color:#d9e5f4; max-width:640px; margin:0 auto; line-height:1.65; font-size:1.08rem; }
.info-box { margin:28px auto 0; max-width:620px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:20px; text-align:left; display:flex; gap:14px; align-items:flex-start; }
.info-box strong { color:var(--sun); }

.product-spotlight { display:grid; grid-template-columns: minmax(200px, 290px) 1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; background:var(--white); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.product-spotlight .cover-panel { background:var(--navy); padding:28px; height:100%; display:flex; align-items:center; justify-content:center; }
.product-spotlight img { border-radius:16px; box-shadow:0 14px 38px rgba(0,0,0,.28); max-height:360px; }
.product-copy { padding:34px 30px; }
.product-copy h2 { font-family:'Baloo 2',cursive; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:8px; }
.rating { color:#F5A623; font-weight:900; margin:14px 0; }
.product-copy p { color:var(--muted); line-height:1.6; margin-bottom:16px; }

.faq-grid { display:grid; gap:14px; max-width:840px; margin:0 auto; }
.faq-card { padding:20px 22px; }
.faq-card h3 { font-family:'Baloo 2',cursive; font-size:1.08rem; margin-bottom:4px; }
.faq-card p { color:var(--muted); line-height:1.55; }

footer { background:var(--navy); color:#7a95b0; text-align:center; padding:30px 24px; font-size:.85rem; }
footer strong { color:var(--white); }
footer a { color:#9ab0cc; text-decoration:none; }
footer a:hover { color:var(--white); }

@media (max-width: 780px) {
  nav { align-items:flex-start; flex-direction:column; gap:8px; padding:12px 16px; }
  .nav-links { width:100%; justify-content:flex-start; }
  .hero-feature, .free-inner, .product-spotlight { grid-template-columns:1fr; text-align:center; }
  .hero-card { text-align:center; }
  .check-list { text-align:left; }
  .free-features-list { max-width:360px; margin:0 auto; }
  .product-copy { padding:28px 22px; }
  .books-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
}
@media (max-width: 460px) {
  .books-grid { grid-template-columns:1fr; }
  .btn-row { flex-direction:column; }
  .btn-orange, .btn-navy, .btn-light { width:100%; text-align:center; }
  .section { padding:48px 18px; }
  .hero, .free-hero { padding-left:18px; padding-right:18px; }
}
/* ===== Brevo form button fix — added 2026-05-07 =====
   Prevents Brevo's internal loader SVG from stretching into a huge black shape
   and keeps the signup form clean/professional on the free-pack landing page. */
.form-shell {
  max-width: 560px;
  margin: 34px auto 0;
}

.form-shell .sib-form,
.form-shell #sib-form-container,
.form-shell #sib-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

.form-shell #sib-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}

.form-shell #sib-form > div {
  padding: 0 !important;
}

.form-shell .entry__field,
.form-shell .form__entry,
.form-shell .form__label-row {
  width: 100% !important;
}

.form-shell #EMAIL,
.form-shell #sib-form input.input {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--navy) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 58px !important;
  outline: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.16) !important;
}

.form-shell #EMAIL:focus {
  box-shadow: 0 0 0 4px rgba(255,212,56,0.35), 0 10px 26px rgba(0,0,0,0.16) !important;
}

.form-shell .sib-form-block {
  text-align: center !important;
  width: 100% !important;
}

.form-shell #sib-form .sib-form-block__button,
.form-shell #sib-form .sib-form-block__button-with-loader {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 34px !important;
  margin: 8px auto 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
  color: #ffffff !important;
  font-family: 'Baloo 2', cursive !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: 0 10px 24px rgba(255,122,47,0.32) !important;
  cursor: pointer !important;
  transform: none !important;
}

.form-shell #sib-form .sib-form-block__button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(255,122,47,0.42) !important;
}

/* The Brevo loader SVG caused the oversized black arc. Hide it by default. */
.form-shell #sib-form .sib-form-block__button svg,
.form-shell #sib-form .sib-hide-loader-icon,
.form-shell #sib-form .progress-indicator__icon,
.form-shell #sib-form .clickable__icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

.form-shell .entry__label,
.form-shell .entry__specification {
  display: none !important;
}

.form-shell .entry__error {
  margin-top: 8px !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.88rem !important;
}

.form-shell #error-message,
.form-shell #success-message {
  max-width: 560px !important;
  margin: 0 auto 14px !important;
  border-radius: 14px !important;
}

@media (max-width: 640px) {
  .form-shell #sib-form .sib-form-block__button,
  .form-shell #sib-form .sib-form-block__button-with-loader {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}