/* ------------------------------------------------------------------
   Money‑green colour scheme and gold accents
   These rules override the default palette and introduce new elements
   for the redesigned layout: two‑column page grid, sidebar with
   opt‑in form, advertisement slots, payment button placeholders and
   leaderboard ad. They are added at the end to ensure they take
   precedence over earlier declarations.
------------------------------------------------------------------ */

/* Override theme colours */
:root {
  --bg: #eaf6e8;
  --bg2: #dfeede;
  --accent: #006d3c;
  --accent2: #004a28;
  --gold: #d4af37;
}

/* Gold header and footer */
header .topbar,
.footer {
  background: var(--gold);
  color: var(--text);
}
header .topbar {
  border-bottom: 3px solid var(--gold);
  backdrop-filter: none;
}
.footer {
  border-top: 3px solid var(--gold);
}

/* Containers outlined in gold */
.container {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--card);
  padding: 20px;
  overflow: hidden; /* prevents green bleed past rounded corners */
  box-sizing: border-box;
}



/* Two‑column layout for page body */
.page-grid {
  /* Expand grid to available width; individual containers will size themselves */
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
  padding-top: 24px;
}
@media (max-width: 900px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar styles */
.sidebar {
  position: sticky;
  top: 20px;
}

/* Report image card in sidebar */
.report-card {
  background: var(--card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 16px;
  /* Limit the width so the report image doesn’t dominate the sidebar */
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.report-card img {
  width: 100%;
  display: block;
}

/* Opt‑in form */
.optin-form {
  background: var(--card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.optin-form h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 22px;
}
.optin-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.optin-form input[type="text"],
.optin-form input[type="email"] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
}
.optin-form button {
  width: 100%;
}
.optin-form .hidden-field {
  display: none;
}

/* Advertisement slots (hidden by default) */
.ad-slot {
  width: 100%;
  height: 200px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  margin-bottom: 16px;
  display: none;
  overflow: hidden;
  box-sizing: border-box;
}


/* Leaderboard advertisement at top of page (hidden by default) */
.leaderboard-ad {
  width: 100%;
  height: 90px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  margin-bottom: 8px;
  display: none;
}

/* Payment button placeholders for PayPal or other providers */
.payment-buttons {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-buttons .paypal-button {
  width: 100%;
  min-height: 60px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.6);
  color: var(--text);
  font-weight: 600;
}

/* Ensure containers inside the page grid don’t exceed the column width */
.page-grid main .container,
.page-grid footer .container {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Swap hero columns so the guide image appears on the left side */
.hero__grid {
  grid-template-columns: 0.8fr 1.2fr;
}
.hero__copy {
  grid-column: 2;
}
.hero__visual {
  grid-column: 1;
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__copy, .hero__visual {
    grid-column: auto;
  }
}
:root{--bg:#f3fbf6;--bg2:#e6f7ec;--card:#fff;--text:#12301e;--muted:#3d5a47;--line:rgba(18,48,30,.12);--accent:#2f9e55;--accent2:#1f7a40;--shadow:0 20px 50px rgba(0,0,0,.08);--radius:18px}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}body{background:var(--bg);color:var(--text);line-height:1.55}.container{width:min(1120px,92vw);margin:0 auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(243,251,246,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand__dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px rgba(47,158,85,.15)}.hero{position:relative;padding:64px 0 42px;background:radial-gradient(1200px 600px at 20% 10%, rgba(47,158,85,.18), transparent 55%),radial-gradient(900px 500px at 80% 10%, rgba(31,122,64,.16), transparent 55%);border-bottom:1px solid var(--line)}.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:42px;align-items:center}.hero h1{font-size:clamp(34px,3.6vw,54px);line-height:1.05;margin:0 0 14px}.lead{font-size:18px;color:var(--muted);margin:0 0 18px}.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 16px}.hero__bullets{margin:0;padding-left:18px;color:var(--muted)}.hero__fade{position:absolute;left:0;right:0;bottom:-1px;height:34px;background:linear-gradient(to bottom, rgba(243,251,246,0), var(--bg))}.bookcard{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.bookcard img{width:100%;display:block}.bookcard__meta{padding:14px 16px 16px}.bookcard__title{font-weight:900;font-size:18px}.bookcard__author{color:var(--muted);font-size:14px}.section{padding:56px 0}.section--tint{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section--cta{background:linear-gradient(135deg, rgba(47,158,85,.18), rgba(31,122,64,.12));border-top:1px solid var(--line)}h2{font-size:clamp(26px,2.2vw,36px);margin:0 0 14px}h3{margin:0 0 8px;font-size:18px}p{margin:0 0 14px}.muted{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.05)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}.check,.xlist{padding-left:18px;margin:8px 0 0}.check li,.xlist li{margin:8px 0}.grid25{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}.slot{background:var(--card);border:1px dashed rgba(18,48,30,.25);border-radius:14px;padding:12px;font-weight:700}.slot__note{font-weight:600;color:var(--muted);font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:800;border:1px solid transparent;transition:transform .08s ease, box-shadow .08s ease, background .08s ease}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#fff;box-shadow:0 12px 25px rgba(47,158,85,.25)}.btn--primary:hover{background:var(--accent2)}.btn--ghost{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--text)}.btn--ghost:hover{background:#fff}.btn--lg{padding:12px 18px;font-size:16px}.cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.cta__actions{display:flex;gap:12px;flex-wrap:wrap}.footer{padding:28px 0;border-top:1px solid var(--line);background:rgba(255,255,255,.35)}.footer__grid{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}.footer__links{display:flex;gap:14px;flex-wrap:wrap}.footer__links a{color:var(--muted);text-decoration:none}.footer__links a:hover{text-decoration:underline}@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:18px}.cards{grid-template-columns:1fr 1fr}.grid25{grid-template-columns:1fr 1fr}}@media (max-width:520px){.cards{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
   Reapply money‑green scheme and gold styling at the end of the file
   to ensure these values override the default template definitions
   that follow above. These settings adjust colours, layout and
   element sizing to meet design requirements.
------------------------------------------------------------------ */

/* Override colour palette to our money green and gold scheme */
:root {
  --bg: #eaf6e8;
  --bg2: #dfeede;
  --accent: #006d3c;
  --accent2: #004a28;
  --gold: #d4af37;
}

/* Topbar and footer with rich gold backgrounds */
header .topbar,
.footer {
  background: var(--gold);
  color: var(--text);
}
header .topbar {
  border-bottom: 3px solid var(--gold);
  backdrop-filter: none;
}
.footer {
  border-top: 3px solid var(--gold);
}

/* Outline containers with gold borders */
.container {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding-left: 20px;
  padding-right: 20px;
}

/* Two‑column grid for main content and sidebar */
.page-grid {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
  padding-top: 24px;
}
@media (max-width: 900px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep sidebar sticky within viewport */
.sidebar {
  position: sticky;
  top: 20px;
}

/* Adjust sizing for the report image and hero guide image */
.report-card img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
.bookcard img {
  max-width: 300px;
  height: auto;
}

/* Hidden ad slots with gold dashed borders */
.ad-slot {
  width: 100%;
  height: 200px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  margin-bottom: 16px;
  display: none;
}

/* Hidden leaderboard ad at page top */
.leaderboard-ad {
  width: 100%;
  height: 90px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  margin-bottom: 8px;
  display: none;
}

/* Payment button placeholders styling */
.payment-buttons {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-buttons .paypal-button {
  width: 100%;
  min-height: 60px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  font-weight: 600;
}

/* Ensure the hero grid displays the guide on the left and copy on the right */
.hero__grid {
  grid-template-columns: 0.8fr 1.2fr;
}
.hero__copy {
  grid-column: 2;
}
.hero__visual {
  grid-column: 1;
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__copy,
  .hero__visual {
    grid-column: auto;
  }
}

/* Prevent nested containers from exceeding column widths */
.page-grid main .container,
.page-grid footer .container {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Limit hero bookcard width and center it within its column */
.bookcard {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.hero__visual{overflow:hidden;border-radius:var(--radius);}


/* === HARD BLEED FIXES (guide-side) === */
.container,
.bookcard,
.report-card,
.leaderboard-ad,
.sidebar-ad,
.ad-slot {
  background: var(--card);
  overflow: hidden;
  box-sizing: border-box;
}

.bookcard,
.report-card {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}

.bookcard::before,
.report-card::before {
  border-radius: inherit;
}

/* Ensure pseudo layers never overflow rounded corners */
.bookcard *,
.report-card *,
.container * {
  box-sizing: border-box;
}