/* NewsletterPub AI — FE sales page (loads after base.css) */

/* ---------- top bar + hero ---------- */
.fe-top { background: var(--ink); padding: 22px 0 0; text-align: center; }
.fe-top img { height: 40px; width: auto; }
.fe-hero { padding: 34px 0 80px; background-image: linear-gradient(180deg, rgba(5, 11, 31, .5), var(--ink) 90%), url("../images/bg5.webp"); background-size: cover; background-position: center top; }
.fe-hero .pre {
  display: inline-block; border: 1px solid rgba(255, 210, 63, .6); background: rgba(255, 210, 63, .08); color: #ffe48a;
  border-radius: 10px; padding: .55rem 1.3rem; font-weight: 700; font-size: .95rem;
}
.fe-hero .meet { font-family: var(--script); font-weight: 700; font-size: clamp(28px, 3vw, 38px); color: var(--cyan); margin: 1.4rem 0 .4rem; line-height: 1.1; }
.fe-hero h1 { color: #fff; font-size: clamp(30px, 3.9vw, 52px); max-width: 1100px; margin: 0 auto 1.1rem; }
.fe-hero .sub {
  display: inline-block; max-width: 980px; color: #fff; font-weight: 600; font-size: clamp(19px, 1.6vw, 23px);
  background: linear-gradient(90deg, rgba(30, 107, 255, .35), rgba(30, 107, 255, .12)); border: 1px solid rgba(79, 168, 255, .5);
  border-radius: 12px; padding: .8rem 1.4rem;
}
.fe-hero .play-note { color: #c8d4ff; font-weight: 700; margin: 2.2rem 0 0; }
.fe-hero .video-frame { margin-top: 1rem; }

/* ---------- CTA block (repeated) ---------- */
.cta-block { text-align: center; margin-top: 3rem; }
.cta-block .cta-lead { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 1.1rem; color: inherit; }
.band-dark .cta-block .cta-lead, .band-navy .cta-block .cta-lead { color: #fff; }
.btn-buy { font-size: clamp(20px, 1.9vw, 26px); padding: 1.15rem 3rem; text-transform: uppercase; }
.cta-cart { display: block; width: 100%; max-width: 560px; height: auto; margin: 1.1rem auto 0; }
.band-dark .cta-cart, .band-navy .cta-cart { max-width: 584px; background: #fff; border-radius: 10px; padding: 8px 12px; }

/* ---------- shared bits ---------- */
.lead-strong { font-size: 1.12rem; font-weight: 600; }
.prose p { margin-bottom: 1.05rem; }
.prose p:last-child { margin-bottom: 0; }
.band-dark .prose, .band-navy .prose { color: #d3ddfa; }
.band-dark .prose strong, .band-navy .prose strong { color: #fff; }
.shot { display: block; width: 100%; height: auto; border-radius: 18px; }
.shot-shadow { box-shadow: 0 24px 60px rgba(10, 30, 90, .25); }
.big-line { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.feat strong { color: inherit; }
.feat .t { font-weight: 800; }
.light-feat .feat { border-bottom-color: var(--line); }
.light-feat .feat p { color: var(--text); }
.source { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; margin-top: .45rem; }
.source:hover { color: var(--blue); }
.band-dark .source, .band-navy .source { color: #8fa3d8; }
.band-dark .source:hover, .band-navy .source:hover { color: #fff; }
.note { font-size: .85rem; color: var(--muted); font-style: italic; }
.band-dark .note, .band-navy .note { color: #8fa3d8; }

/* ---------- right-for-you ---------- */
.fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fit-list li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px 16px 58px; }
.fit-list li::before {
  content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 18px; top: 17px; width: 1.55rem; height: 1.55rem;
  border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 1rem;
}

/* ---------- paid callout under the steps ---------- */
.paid-box { margin-top: 2.6rem; background: var(--navy-2); color: #e7eeff; border-radius: 18px; padding: 26px 32px; text-align: center; }
.paid-box strong { color: var(--gold); }

/* ---------- sample newsletters ---------- */
.niche { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: var(--navy); }
.niche img { width: 100%; height: 100%; object-fit: cover; }
.niche .cap {
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem;
  background: linear-gradient(180deg, transparent, rgba(5, 11, 31, .9));
}
.niche .cap small { display: block; font-family: var(--body); font-weight: 600; font-size: .72rem; color: #9fd0ff; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- stories + testimonials ---------- */
/* real stories: testimonial cards, stars + headline + quote, photo and name at the foot */
.story { position: relative; height: 100%; margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px 24px; box-shadow: 0 10px 30px rgba(18, 40, 110, .06); }
.story::before { content: "\201C"; position: absolute; top: 14px; right: 26px; font-family: Georgia, serif; font-size: 84px; line-height: 1; color: #dbe5ff; }
.story-stars { color: #f5b301; font-size: .95rem; letter-spacing: 2px; margin-bottom: .7rem; }
.story h3 { position: relative; font-size: 1.2rem; margin-bottom: .6rem; color: var(--navy-2); padding-right: 52px; }
.story blockquote { margin: 0 0 1.4rem; flex: 1; }
.story blockquote p { margin: 0; }
.story figcaption { display: flex; align-items: center; gap: 14px; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.story figcaption img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue); flex: none; }
.story figcaption strong { display: block; color: var(--navy-2); font-family: var(--display); font-size: 1.05rem; }
.story figcaption small { display: block; color: var(--muted); font-size: .85rem; }
.initials {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 900;
  color: #fff; background: var(--blue); font-size: 1rem;
}
.testis { columns: 1; column-gap: 22px; }
@media (min-width: 768px) { .testis { columns: 2; } }
@media (min-width: 1200px) { .testis { columns: 3; } }
.testi { break-inside: avoid; margin-bottom: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 20px; }
.testi .stars { color: #f5b301; letter-spacing: 2px; font-size: .9rem; }
.testi h3 { font-size: 1.1rem; margin: .45rem 0 .55rem; color: var(--navy-2); }
.testi blockquote { margin: 0 0 .9rem; font-style: italic; }
.testi .who { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.testi .who .initials { width: 42px; height: 42px; font-size: .85rem; }

/* ---------- results (stock stand-ins until real screenshots arrive) ---------- */
.result { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(18, 40, 110, .1); }
.result img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.result figcaption { padding: 12px 16px; font-family: var(--display); font-weight: 800; text-align: center; color: var(--navy-2); }

/* ---------- inline buy box with the order bump (reference: dashed box under the price) ---------- */
.buy-box { max-width: 720px; margin: 0 auto; border: 2px dashed #c3c3c3; border-radius: 6px; padding: 14px 14px 18px; background: #fff; text-align: left; }
.buy-box .btn-buy { display: flex; width: 100%; }
.bump-check, .exit-strip {
  display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 14px 0 12px; padding: 16px 14px; cursor: pointer;
  background: #f8f4ad; font-weight: 800; color: #111; font-size: .95rem; text-align: center;
}
.bump-check .bi, .exit-strip .bi { color: #e53b17; font-size: 1.3rem; }
.bump-check input, .exit-strip input { width: 20px; height: 20px; accent-color: #0f9d4a; flex: none; cursor: pointer; }
.bump-copy { margin: 0 4px; font-size: .9rem; line-height: 1.6; color: #222; }
.bump-copy strong { color: #000; }
.bump-price { color: #0f9d4a; font-weight: 800; }

/* ---------- exit-intent popup (colors sampled from the ScribeLabs FE reference) ---------- */
.exit-pop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .72); display: flex; align-items: flex-start; justify-content: center; padding: 30px 14px; overflow-y: auto; }
.exit-pop[hidden] { display: none; }
.exit-card { position: relative; width: 100%; max-width: 760px; background: #fff; border: 2px solid #ff0000; color: #111; animation: exitIn .25s ease-out; }
@keyframes exitIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.exit-close {
  position: absolute; top: -18px; right: -18px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #d60000 65%); color: #fff; font-size: 1.1rem; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.exit-head { background: #ff0000; text-align: center; padding: 22px 16px 26px; }
.exit-title { font-family: var(--display); font-weight: 900; color: #fff; font-size: clamp(40px, 6vw, 64px); line-height: 1; }
.exit-sub { display: inline-block; margin-top: 14px; background: #000; color: #fff; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.4vw, 30px); padding: 10px 40px; }
.exit-body { padding: 24px 22px 26px; }
.exit-coupon { font-family: var(--display); font-weight: 800; text-align: center; font-size: clamp(18px, 2.1vw, 26px); line-height: 1.35; margin: 0 0 20px; }
.exit-box { border: 2px dashed #c3c3c3; padding: 10px 10px 14px; }
.exit-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: #fff; border-radius: 99px;
  padding: 10px 10px 10px 34px; background: linear-gradient(90deg, #fd6e05, #f35e07);
}
.exit-cta:hover { color: #fff; filter: brightness(1.05); }
.exit-cta b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(18px, 2vw, 26px); text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.exit-cta small { display: block; font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; text-align: center; }
.exit-cta .bi { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #ffc405; background: radial-gradient(circle at 30% 30%, #8a3a0a, #2a0d00 70%); border: 2px solid #000; }
.exit-last { margin: 14px 4px 0; background: #ffc405; color: #111; font-weight: 800; text-align: center; padding: 10px 14px; display: inline-block; }

/* ---------- market + stats ---------- */
.mega-stat { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 9vw, 120px); line-height: 1; color: var(--gold); }
.stat-row .stat { text-align: center; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 26px 18px; height: 100%; }
.stat-row .stat .n { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3.4vw, 46px); color: var(--red); line-height: 1; }
.stat-row .stat .l { margin-top: .5rem; font-weight: 600; }
.proof-item { height: 100%; border-radius: 16px; padding: 22px 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(120, 160, 255, .25); }
.proof-item p { margin: 0; color: #d3ddfa; }
.proof-item strong { color: #fff; }
.proof-item .big { font-family: var(--display); font-weight: 900; color: var(--gold); font-size: 1.4rem; display: block; margin-bottom: .3rem; }

/* ---------- comparison / problem cards ---------- */
.door { height: 100%; border-radius: 16px; padding: 22px 24px; background: #fff; border: 1px solid #f3c9c9; }
.door .lbl { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-weight: 900; color: var(--red); text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
.door h3 { font-size: 1.15rem; margin: .4rem 0 .45rem; color: var(--navy-2); }
.door p { margin: 0; }
.opt { height: 100%; border-radius: 16px; padding: 24px 26px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); }
.opt h3 { font-size: 1.15rem; color: var(--navy-2); margin-bottom: .5rem; }
.opt h3 .bi { color: var(--red); }
.opt p { margin: 0; }
.drop-stat { text-align: center; padding: 22px 16px; border-radius: 16px; border: 1px solid rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); height: 100%; }
.drop-stat .n { font-family: var(--display); font-weight: 900; color: #ff8a8a; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.drop-stat .l { color: #d3ddfa; margin-top: .5rem; }

/* ---------- ownership / ways ---------- */
.own { height: 100%; text-align: center; border-radius: 18px; padding: 30px 24px; background: #fff; border: 1px solid var(--line); }
.own .bi { font-size: 2.2rem; color: var(--blue); }
.own h3 { font-size: 1.25rem; margin: .7rem 0 .5rem; color: var(--navy-2); }
.own p { margin: 0; }
.way { height: 100%; border-radius: 18px; padding: 26px 26px; background: #fff; border: 1px solid var(--line); }
.way .num { font-family: var(--display); font-weight: 900; color: var(--blue); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.way h3 { font-size: 1.2rem; margin: .35rem 0 .6rem; color: var(--navy-2); }
.way p { margin: 0; }

/* ---------- introducing ---------- */
.intro-band { background-image: linear-gradient(180deg, rgba(5, 11, 31, .8), rgba(5, 11, 31, .95)), url("../images/bg6.webp"); background-size: cover; background-position: center; }
.intro-band h2 { font-size: clamp(30px, 3.6vw, 48px); }
.intro-band .lede { color: #fff; font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); max-width: 980px; margin: 0 auto; }
.intro-band .lede2 { color: #c8d4ff; font-size: 1.05rem; max-width: 900px; margin: .9rem auto 0; }
.intro-band .box { max-width: 760px; width: 100%; margin: 2.2rem auto 0; display: block; filter: drop-shadow(0 30px 60px rgba(30, 107, 255, .35)); }

/* ---------- value table + price ---------- */
.value-wrap { max-width: 960px; margin: 2.2rem auto 0; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(18, 40, 110, .1); }
.value-table { width: 100%; border-collapse: collapse; }
.value-table th { background: var(--navy-2); color: #fff; padding: 16px 22px; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.value-table th:last-child, .value-table td:last-child { text-align: right; white-space: nowrap; }
.value-table td { padding: 16px 22px; border-bottom: 1px solid #edf2ff; vertical-align: top; }
.value-table td:last-child { font-weight: 800; color: var(--red); text-decoration: line-through; text-decoration-thickness: 2px; }
.value-table td small { display: block; color: var(--muted); }
.value-table tr.total td { background: #fff7d6; font-weight: 900; font-family: var(--display); font-size: 1.1rem; }
.value-table tr.total td:last-child { text-decoration: none; color: var(--text); }
.value-table td.priceless { text-decoration: none; color: #0f9d4a; }
.price-card { max-width: 760px; margin: 2.6rem auto 0; text-align: center; background: var(--navy-2); color: #fff; border-radius: 24px; padding: 34px 28px 30px; }
.price-card .price { font-family: var(--display); font-weight: 900; font-size: clamp(72px, 9vw, 120px); line-height: 1; color: var(--gold); }
.price-card .terms { font-weight: 800; font-size: 1.1rem; margin-top: .6rem; }
.price-card p { color: #c8d4ff; margin: .5rem 0 0; }
/* the whole offer (value stack, price, checkout + bump) sits in one framed card, product shot on top */
.offer-card { max-width: 1000px; margin: 9rem auto 0; background: var(--navy); color: #fff; border-radius: 28px; padding: 0 34px 40px; box-shadow: 0 30px 80px rgba(7, 19, 56, .35); }
.offer-img { display: block; width: min(560px, 100%); height: auto; margin: -110px auto 0; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }
.offer-card .value-wrap { margin-top: 1.4rem; border: 0; color: var(--text); }
.offer-card .price-card { background: none; padding: 0; margin-top: 2.4rem; }
.offer-card .cta-block { margin-top: 2.2rem; }
.offer-card .cta-lead { color: #fff; }
.offer-card .cta-cart { max-width: 584px; background: #fff; border-radius: 10px; padding: 8px 12px; }

/* ---------- guarantee ---------- */
.guarantee-img { width: 100%; max-width: 300px; height: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 920px; margin: 2rem auto 0; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 800; padding: 18px 34px 18px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\F4FE"; font-family: "bootstrap-icons"; position: absolute; right: 0; top: 18px; color: var(--blue); }
.faq details[open] summary::after { content: "\F2EA"; }
.faq details p { margin: 0 0 18px; }

/* ---------- two roads ---------- */
.road { height: 100%; border-radius: 18px; padding: 28px 28px; }
.road h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.road p { margin: 0; }
.road.bad { background: #fff; border: 1px solid #f3c9c9; }
.road.bad h3 { color: var(--red); }
.road.good { background: #ecfdf3; border: 1px solid #9fe3bb; }
.road.good h3 { color: #0f9d4a; }

/* ---------- footer ---------- */
.fe-footer { background: #030716; color: #7d8bb5; font-size: .78rem; padding: 40px 0 30px; text-align: center; }
.fe-footer p { max-width: 980px; margin: 0 auto 1.2rem; }
.fe-footer .links a { color: #a9b7e2; text-decoration: none; margin: 0 .5rem; }
.fe-footer .links a:hover { color: #fff; }

@media (max-width: 767.98px) {
  .fe-hero { padding-bottom: 56px; }
  .exit-pop { padding: 22px 10px; }
  .exit-close { top: -14px; right: -8px; width: 40px; height: 40px; }
  .exit-sub { padding: 8px 16px; }
  .exit-body { padding: 18px 12px 18px; }
  .exit-cta { padding-left: 18px; }
  .exit-cta .bi { width: 54px; height: 54px; font-size: 1.5rem; }
  .btn-buy { padding: 1rem 1.2rem; font-size: 1.05rem; }
  .value-table th, .value-table td { padding: 12px 14px; }
  .value-table { table-layout: fixed; }
  .value-table th:last-child { white-space: normal; width: 6.6em; }
  .value-table th { font-size: .72rem; }
  .offer-card { margin-top: 6rem; padding: 0 12px 28px; border-radius: 20px; }
  .offer-img { margin-top: -70px; }
}

/* every section is at least one screen tall, so short sections get breathing room; content is centred vertically */
main > section { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
main > section > .container { width: 100%; }

/* proof screenshot of a cited source (market report), framed like a browser window */
.report-shot { max-width: 822px; margin: 2.6rem auto 0; transform: rotate(-1deg); }
.report-shot .browser { display: block; text-decoration: none; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); transition: transform .2s; }
.report-shot figcaption { margin-top: 1rem; text-align: center; font-size: .8rem; font-weight: 600; color: #8fa3d8; transform: rotate(1deg); }
@media (max-width: 767.98px) { .report-shot { transform: none; } .report-shot figcaption { transform: none; } }

/* ---------- proof rows: one result per row, source screenshot in a thick gold frame on one side (BookFlipper "Everything You'll Get") ---------- */
.proof-rows { display: grid; gap: 28px; margin-top: 2.6rem; }
.proof-row { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; background: #fff; color: var(--text); border-radius: 28px; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, .35); }
.proof-row.flip { grid-template-columns: 1fr 1.15fr; }
.proof-row.flip .proof-shot { order: 2; border-radius: 28px 0 0 28px; }
.proof-shot { display: block; align-self: stretch; background: var(--gold); padding: 30px 30px 30px 0; border-radius: 0 28px 28px 0; text-decoration: none; }
.proof-row.flip .proof-shot { padding: 30px 0 30px 30px; }
.proof-shot .browser { display: block; height: 100%; border: 3px solid #0b1430; border-left-width: 0; border-radius: 0 16px 16px 0; box-shadow: none; transition: transform .2s; }
.proof-row.flip .proof-shot .browser { border-left-width: 3px; border-right-width: 0; border-radius: 16px 0 0 16px; }
.proof-shot .browser .bar { display: flex; }
.proof-shot .browser img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top center; }
.proof-copy { padding: 40px 48px; }
.proof-copy .big { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; color: var(--navy-2); margin-bottom: .9rem; }
.proof-copy .big::after { content: ""; display: block; width: 64px; height: 6px; border-radius: 6px; background: var(--gold); margin-top: .7rem; }
.proof-copy p { margin: 0; }
.proof-copy p strong { color: var(--navy-2); }
.proof-src { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .8rem; color: var(--muted); }
.proof-src .bi { color: #0f9d4a; }
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 767.98px) { .proof-pair { grid-template-columns: 1fr; } }
.proof-mini { height: 100%; background: #fff; color: var(--text); border-radius: 24px; padding: 32px 34px; border-top: 8px solid var(--gold); box-shadow: 0 26px 60px rgba(0, 0, 0, .35); }
.proof-mini .big { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; color: var(--navy-2); margin-bottom: .7rem; }
.proof-mini p { margin: 0 0 1rem; }
.proof-mini .src { font-size: .8rem; font-weight: 700; color: var(--muted); }
@media (max-width: 991.98px) {
  .proof-row, .proof-row.flip { grid-template-columns: 1fr; }
  .proof-row.flip .proof-shot { order: 0; }
  .proof-shot, .proof-row.flip .proof-shot { padding: 20px 20px 0; border-radius: 0; }
  .proof-shot .browser, .proof-row.flip .proof-shot .browser { border-width: 3px 3px 0; border-radius: 14px 14px 0 0; }
  .proof-copy { padding: 28px 24px 32px; }
}
.report-shot.sm { max-width: 460px; margin: 1.6rem 0 0; transform: rotate(-1.5deg); }
.report-shot.sm figcaption { text-align: left; transform: none; }
.report-shot.on-light { margin: 2rem auto 2.4rem; }
.report-shot.on-light .browser { box-shadow: 0 24px 56px rgba(10, 30, 90, .18); }
.sec-break { margin-top: 5.5rem; }
/* long reading section: fade the illustrated background further, with a whiter band down the text column */
.bgi-8.bgi-faded { background-image: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .93) 22%, rgba(255, 255, 255, .93) 78%, rgba(255, 255, 255, .55)), linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .84)), url("../images/bg8.webp"); }
@media (max-width: 767.98px) { .bgi-8.bgi-faded { background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .93)), url("../images/bg8.webp"); } }
.narrow .report-shot.sm { margin: 2rem auto .4rem; max-width: 620px; }
/* "AI Can't Replace": the bright bg9 faded ~25% further so the copy reads easily */
.bgi-9.bgi-dim { background-image: linear-gradient(180deg, rgba(5, 11, 31, .4), rgba(5, 11, 31, .65)), url("../images/bg9.webp"); }
/* exit-popup coupon: the code sits in a dashed "ticket", selectable so buyers can copy it */
.coupon-code { display: inline-block; color: var(--red); background: #fff6d6; border: 2px dashed var(--red); border-radius: 10px; padding: .05em .45em; margin: 0 .1em; user-select: all; }
.exit-coupon .d-block { font-size: .62em; letter-spacing: .02em; margin-top: .35em; color: var(--muted); }

/* Results: one dashboard screenshot in a gold frame */
.result-shot { margin: 2.2rem auto 0; max-width: 1100px; background: var(--gold); padding: 22px; border-radius: 26px; box-shadow: 0 24px 56px rgba(10, 30, 90, .18); }
.result-shot .browser { display: block; border: 3px solid #0b1430; border-radius: 14px; overflow: hidden; box-shadow: none; }
.result-shot .browser .bar { display: flex; }
.result-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 575.98px) { .result-shot { padding: 10px; border-radius: 16px; } .result-shot .browser { border-radius: 10px; } }

/* Bonuses: one bonus per row, PDF cover on one side, copy on the other (alternating) */
.bonus-list { display: grid; gap: 30px; margin-top: 2.6rem; }
.bonus { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; background: #fff; color: #111; border-radius: 26px; padding: 34px 44px; border: 3px solid var(--gold); box-shadow: 0 24px 56px rgba(0, 0, 0, .3); }
.bonus.flip { grid-template-columns: 1fr 300px; }
.bonus.flip .bonus-cover { order: 2; }
.bonus-cover { position: relative; perspective: 900px; }
.bonus-cover img { display: block; width: 100%; height: auto; border-radius: 4px 10px 10px 4px; transform: rotateY(-12deg); box-shadow: 18px 22px 38px rgba(5, 11, 31, .35), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.bonus.flip .bonus-cover img { transform: rotateY(12deg); box-shadow: -18px 22px 38px rgba(5, 11, 31, .35); }
.bonus-cover.stack img:not(.back) { position: relative; }
.bonus-cover.stack .back { position: absolute; inset: 0; transform: translate(26px, -18px) rotateY(-12deg); opacity: .9; }
.bonus-n { display: inline-block; background: var(--gold); color: #111; font-family: var(--display); font-weight: 900; letter-spacing: .06em; font-size: .85em; padding: .3em .9em; border-radius: 999px; }
.bonus-copy h3 { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; margin: .5rem 0 .8rem; color: var(--navy-2); }
.bonus-copy p { margin: 0 0 .9rem; }
.bonus-copy .bonus-one { font-weight: 800; font-size: 1.1em; color: #111; }
.bonus-val { font-family: var(--display); font-weight: 800; font-size: 1.15em; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bonus-val s { color: #d11; }
.bonus-val .free { background: #12a150; color: #fff; padding: .25em .85em; border-radius: 999px; font-size: .9em; }
.bonus-total { margin: 2.4rem auto 0; max-width: 760px; text-align: center; background: var(--gold); color: #111; font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); padding: 18px 24px; border-radius: 16px; }
.bonus-total span { color: #c00; text-decoration: line-through; }
.bonus-total em { display: block; font-style: normal; font-size: .7em; margin-top: .2em; }
@media (max-width: 991.98px) {
  .bonus, .bonus.flip { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; text-align: center; }
  .bonus.flip .bonus-cover { order: 0; }
  .bonus-cover { max-width: 230px; margin: 0 auto; }
  .bonus-val { justify-content: center; }
}
@media (max-width: 991.98px) { .bonus-copy p:not(.bonus-one) { text-align: left; } }
/* bonus box image (transparent PNG-style box), no book tilt */
.bonus-cover { perspective: none; }
.bonus-cover img, .bonus.flip .bonus-cover img { transform: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 24px rgba(5, 11, 31, .25)); }