/* ===== Tokens ===== */
:root {
  --brand: #00295F;
  --brand-deep: #001A42;
  --brand-soft: #DDE5F1;
  --gold: #F0B429;
  --gold-hover: #FFC94A;
  --bg: #F3F5F9;
  --card: #FFFFFF;
  --ink: #0F1B33;
  --muted: #4B5770;
  --line: #D6DCE6;
  --focus: #00295F;          /* navy ring on light backgrounds */
  --focus-dark: #F0B429;     /* gold ring on navy backgrounds */
  --radius: 10px;
  --sans: "Noto Sans Ethiopic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Noto Serif Ethiopic", Georgia, "Times New Roman", serif;
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h2 { font-size: clamp(1.45rem, 4.5vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible, .top :focus-visible, .foot :focus-visible, .buybar :focus-visible { outline-color: var(--focus-dark); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.prose { max-width: 38rem; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--gold); color: var(--ink); padding: 10px 14px; border-radius: 6px; z-index: 50; font-weight: 600; }
.skip:focus { top: 8px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .6em 1.25em;
  border: 2px solid transparent; border-radius: 999px;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-buy { background: var(--gold); color: var(--ink); }
.btn-buy:hover { background: var(--gold-hover); color: var(--ink); }
.btn-line { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-line:hover { background: var(--brand); color: #fff; }
.btn-light { background: #fff; color: var(--brand-deep); }
.btn-light:hover { background: var(--brand-soft); color: var(--brand-deep); }
.btn-block { width: 100%; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

/* ===== Header / footer ===== */
.top { background: var(--brand-deep); color: #fff; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.logo { color: #fff; text-decoration: none; font: 700 1.1rem/1.2 var(--serif); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.logo:hover { color: #fff; }
.logo-mark { width: 26px; height: 26px; flex: none; }
.top-link { color: #fff; font-size: .95rem; padding: 10px 4px; }
.top-link:hover { color: var(--gold); }

.foot { background: var(--brand-deep); color: #D3DCEC; padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); margin-top: 56px; font-size: .95rem; }
.foot a { color: #fff; }
.foot-grid { display: grid; gap: 20px; }
.foot-brand { font: 700 1.15rem/1.3 var(--serif); color: #fff; margin-bottom: 4px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 6px; }
.foot li a { display: inline-block; padding: 6px 0; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ===== Hero with fanned stack ===== */
.hero { background: radial-gradient(120% 90% at 75% 20%, #0A3C85 0%, var(--brand) 55%, #001F4A 100%); color: #fff; overflow: hidden; position: relative; }
.hero::after { /* thin gold rule under the hero */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold) 0 30%, transparent 30%);
}
.hero .wrap { display: grid; gap: 8px; padding-top: 36px; padding-bottom: 28px; }
.hero-kicker { font-size: .95rem; letter-spacing: .02em; color: var(--gold); margin: 0 0 6px; }
.hero h1 { font-size: clamp(2.1rem, 9vw, 3.6rem); margin: 0 0 .3em; letter-spacing: -.01em; }
.hero-tag { font-size: 1.1rem; color: #D5DFF0; max-width: 30rem; margin-bottom: 1.4em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.fan {
  position: relative; height: 240px; margin: 18px auto 0; width: 100%; max-width: 360px;
}
.fan-item {
  position: absolute; left: 50%; bottom: 10px; width: 120px;
  margin-left: -60px; transform-origin: 50% 115%;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  border-radius: 4px 7px 7px 4px;
}
.fan-item .cover { box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); }
.fan-item:nth-child(1) { transform: translateX(-54px) rotate(-12deg); z-index: 1; }
.fan-item:nth-child(2) { transform: translateY(-14px); z-index: 3; }
.fan-item:nth-child(3) { transform: translateX(54px) rotate(12deg); z-index: 2; }
.fan-item:only-child { transform: none; }
.fan-item:hover, .fan-item:focus-visible { z-index: 4; }
.fan-item:nth-child(1):hover, .fan-item:nth-child(1):focus-visible { transform: translateX(-60px) translateY(-14px) rotate(-14deg); }
.fan-item:nth-child(2):hover, .fan-item:nth-child(2):focus-visible { transform: translateY(-28px); }
.fan-item:nth-child(3):hover, .fan-item:nth-child(3):focus-visible { transform: translateX(60px) translateY(-14px) rotate(14deg); }

@media (prefers-reduced-motion: no-preference) {
  .fan.is-ready .fan-item { animation: fan-in .8s cubic-bezier(.2,.7,.2,1) both; }
  .fan.is-ready .fan-item:nth-child(2) { animation-name: fan-in-mid; }
  @keyframes fan-in { from { transform: translateY(-14px) rotate(0); } }
  @keyframes fan-in-mid { from { transform: translateY(0); } }
}

@media (min-width: 820px) {
  .hero .wrap { grid-template-columns: 1.1fr 1fr; align-items: center; padding-top: 64px; padding-bottom: 64px; }
  .fan { height: 360px; max-width: 440px; margin-top: 0; }
  .fan-item { width: 180px; margin-left: -90px; }
  .fan-item:nth-child(1) { transform: translateX(-88px) rotate(-14deg); }
  .fan-item:nth-child(3) { transform: translateX(88px) rotate(14deg); }
  .fan-item:nth-child(1):hover, .fan-item:nth-child(1):focus-visible { transform: translateX(-98px) translateY(-16px) rotate(-16deg); }
  .fan-item:nth-child(3):hover, .fan-item:nth-child(3):focus-visible { transform: translateX(98px) translateY(-16px) rotate(16deg); }
}

/* ===== Covers ===== */
.cover { aspect-ratio: 2 / 3; width: 100%; border-radius: 3px 6px 6px 3px; overflow: hidden; background: var(--brand-soft); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.ccover {
  --c: #00295F;
  position: relative; container-type: inline-size;
  background: var(--c);
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  padding: 14% 11% 10% 17%;
}
.ccover::before { /* spine */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7%;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.08) 70%, rgba(255,255,255,.12));
}
.ccover::after { /* gold rule */
  content: ""; position: absolute; left: 17%; top: 9%; width: 28%; height: 2px; background: var(--gold);
}
.ccover-title { font: 700 1rem/1.2 var(--serif); font-size: clamp(.7rem, 12cqw, 2.4rem); overflow-wrap: anywhere; margin-top: 6%; }
.ccover-type { font-size: .6rem; font-size: clamp(.5rem, 6.5cqw, 1rem); opacity: .82; margin-top: 6%; }
.ccover-brand { font-size: .55rem; font-size: clamp(.45rem, 6cqw, .9rem); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

/* ===== Sections ===== */
.section { padding: 48px 0 8px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head h2 { margin: 0; }

.books { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.book-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px;
}
.book-card .cover { box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.book-card h3 { margin: 0 0 2px; font-size: 1.2rem; }
.book-card h3 a { color: var(--ink); text-decoration: none; }
.book-card h3 a:hover { text-decoration: underline; }
.book-type { font-size: .9rem; color: var(--muted); margin: 0 0 6px; }
.book-pitch { font-size: .98rem; margin: 0 0 10px; }
.book-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.price { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.book-card .btn { min-height: 44px; padding: .45em 1em; font-size: .95rem; }
@media (min-width: 720px) {
  .books { grid-template-columns: 1fr 1fr; }
  .book-card { grid-template-columns: 120px 1fr; }
}
@media (min-width: 1040px) { .books { grid-template-columns: 1fr 1fr 1fr; } }

.loading { color: var(--muted); padding: 20px 0; }

.soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.soon li { border-left: 4px solid var(--gold); background: var(--card); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; }
.soon strong { font-family: var(--serif); display: block; }
.soon span { color: var(--muted); font-size: .95rem; }
@media (min-width: 720px) { .soon { grid-template-columns: 1fr 1fr; } }

.tg {
  background: var(--brand); color: #fff; border-radius: 14px; padding: 28px 22px;
  display: grid; gap: 14px; align-items: center;
}
.tg h2 { margin: 0; }
.tg p { margin: 0; color: #D5DFF0; }
@media (min-width: 720px) { .tg { grid-template-columns: 1fr auto; padding: 32px; } }

/* ===== Book page ===== */
.crumbs { font-size: .95rem; padding: 14px 0 0; }
.crumbs a { display: inline-block; padding: 8px 0; }
.book-top { display: grid; gap: 22px; padding: 10px 0 8px; }
.book-top .cover { max-width: 170px; box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.book-top h1 { font-size: clamp(1.9rem, 7vw, 2.7rem); margin-bottom: .15em; }
.meta { color: var(--muted); margin-bottom: 14px; }
.meta span + span::before { content: "·"; margin: 0 .5em; }
.big-price { font: 700 1.6rem/1.2 var(--sans); margin-bottom: 14px; }
.pay-note { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--muted); margin-top: 14px; max-width: 30rem; }
.pay-note svg { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 2px; }
@media (min-width: 720px) {
  .book-top { grid-template-columns: 240px 1fr; gap: 40px; padding-top: 24px; align-items: start; }
  .book-top .cover { max-width: none; }
}

.sample { margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.sample > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; min-height: 56px; font: 700 1.15rem/1.3 var(--serif);
}
.sample > summary::-webkit-details-marker { display: none; }
.sample > summary::after { content: "+"; font: 400 1.6rem/1 var(--sans); color: var(--brand); }
.sample[open] > summary::after { content: "−"; }
.sample-body { padding: 4px 18px 22px; border-top: 1px solid var(--line); }
.sample-body p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.8; }
.sample-end { border-top: 1px dashed var(--line); padding-top: 18px; margin-top: 8px; }

.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--brand-deep); color: #fff;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 -6px 18px rgba(0,0,0,.2);
}
.buybar-info { min-width: 0; }
.buybar-title { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #D5DFF0; }
.buybar-price { font-weight: 700; }
.buybar .btn { flex: none; }
.has-buybar { padding-bottom: 80px; }
@media (min-width: 900px) { .buybar { display: none; } .has-buybar { padding-bottom: 0; } }

/* ===== Thank-you ===== */
.thanks { padding-top: 32px; }
.tick { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--gold); display: grid; place-items: center; margin-bottom: 14px; }
.tick svg { width: 30px; height: 30px; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 20px; }
.steps li { counter-increment: s; position: relative; padding: 2px 0 14px 46px; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-deep); display: grid; place-items: center; font-weight: 700;
}
.help { background: #FFF7DD; border: 1px solid #EBCB6B; border-radius: var(--radius); padding: 18px; margin: 8px 0 0; }
.help h2 { font-size: 1.2rem; margin-bottom: .4em; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.notfound { padding-top: 56px; }
.notfound .big { font: 700 4rem/1 var(--serif); color: var(--brand); margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Rating and copies sold */
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; margin: 0 0 10px; color: var(--ink); }
.stars > span[aria-hidden] { color: #876106; }
.book-top .stats { font-size: 1rem; margin-bottom: 12px; }

/* Logo */
.logo-img { width: 40px; height: auto; flex: none; }
.hero-emblem { width: 112px; height: auto; margin: 0 0 14px; }
.foot-logo { display: flex; align-items: center; gap: 10px; }
.foot-logo img { width: 44px; height: auto; }
@media (min-width: 820px) { .hero-emblem { width: 140px; } }

/* Covers are links: no underline on cover text */
a .cover, a .cover * { text-decoration: none; }

/* Image covers (flat or 3D mockups with a transparent background) */
.cover.has-img { background: none; overflow: visible; border-radius: 0; box-shadow: none !important; }
.cover.has-img img { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.hero .cover.has-img img { filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }

.desc-head { font-family: var(--serif); font-size: 1.05rem; color: var(--brand); }

/* Header: language switch */
.top-actions { display: flex; align-items: center; gap: 10px; }
.lang-btn {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  font: 600 .9rem/1 var(--sans);
}
.lang-btn:hover { background: rgba(255,255,255,.12); }
@media (max-width: 400px) { .top .top-link { display: none; } }

/* How buying works */
.how { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.how-title { font-size: 1.25rem; margin-bottom: 14px; }
.how-steps { counter-reset: h; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.how-steps li { counter-increment: h; position: relative; padding-left: 44px; min-height: 32px; }
.how-steps li::before {
  content: counter(h); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: var(--gold); display: grid; place-items: center; font-weight: 700;
}
.how-note { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }
.how-book { margin-top: 32px; max-width: 38rem; }
@media (min-width: 820px) { .how-steps { grid-template-columns: repeat(3, 1fr); } }
.how-book .how-steps { grid-template-columns: 1fr; }

/* Payment methods under the Buy button */
.pay-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: .92rem; color: var(--muted); }
.pay-chip { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: .85rem; }

/* Reader reviews */
.quotes { margin-top: 32px; max-width: 38rem; }
.quotes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.quotes li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.quotes blockquote { margin: 6px 0 8px; font-size: 1rem; }
.q-stars { color: #876106; letter-spacing: 2px; }
.q-stars-off { color: #CBD2DD; }
.q-who { margin: 0; font-size: .9rem; color: var(--muted); }
.q-verified { color: #1D7A46; font-weight: 600; }

/* Inside Facebook's / TikTok's browser */
.iab-note { margin: 12px 0 0; font-size: .92rem; max-width: 30rem; background: #FFF7DD; border: 1px solid #EBCB6B; border-radius: 8px; padding: 10px 12px; }
.iab-link { font-weight: 600; color: var(--brand-deep); }

/* ===== Ad landing page (/offer) ===== */
.offer-hero {
  background: radial-gradient(120% 90% at 80% 10%, #0A3C85 0%, var(--brand) 55%, #001F4A 100%);
  color: #fff; padding: 22px 0 28px; position: relative;
}
.offer-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--gold) 0 30%, transparent 30%); }
.offer-hero-grid { display: grid; gap: 16px; }
.offer-kicker { color: var(--gold); font-size: .95rem; font-weight: 600; margin: 0 0 6px; }
.offer-hero h1 { font-size: clamp(1.55rem, 6.4vw, 2.6rem); line-height: 1.3; margin: 0 0 12px; }
.offer-proof { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0; color: #E3EAF6; font-size: .95rem; }
.offer-proof .muted { color: #C2CEE3; }
.offer-stars .q-stars { color: var(--gold); }
.offer-stars .q-stars-off { color: rgba(255,255,255,.3); }
.offer-cover { justify-self: center; width: 190px; }
.offer-cover .cover.has-img img { filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); }
.offer-price { font: 700 1.9rem/1.1 var(--sans); margin: 0 0 10px; }
.offer-format { font-size: 1rem; font-weight: 400; color: #C2CEE3; }
.btn-xl { width: 100%; min-height: 58px; font-size: 1.15rem; box-shadow: 0 8px 20px rgba(240,180,41,.25); }
.offer-hero .pay-methods { color: #C2CEE3; }
.offer-hero .pay-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.offer-trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; color: #E3EAF6; }
.offer-trust li { display: flex; gap: 8px; align-items: center; }
.offer-trust svg, .offer-list svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.offer-hero .iab-note { color: var(--ink); }

.offer-sec { padding-top: 36px; }
.offer-sec h2 { margin-bottom: 14px; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 40rem; }
.offer-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.offer-list li svg { margin-top: 3px; color: var(--brand); background: #FFF1CC; border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
.offer-who li { background: transparent; border-style: dashed; }
.offer .quotes { margin-top: 36px; }
.offer .sample { margin-top: 28px; }

.faq { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; max-width: 40rem; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 16px; min-height: 52px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brand); }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0; padding: 0 16px 16px; color: var(--muted); }

.offer-final { background: var(--brand); color: #fff; margin-top: 40px; padding: 32px 0; text-align: center; }
.offer-final h2 { margin-bottom: 4px; }
.offer-final-title { color: #C2CEE3; margin-bottom: 16px; }
.offer-final .btn-xl { max-width: 26rem; }
.offer-final .offer-trust { justify-content: center; max-width: 26rem; margin-left: auto; margin-right: auto; text-align: left; }
.offer-others { text-align: center; padding: 18px 16px 0; }
.foot-slim { margin-top: 24px; }

@media (min-width: 820px) {
  .offer-hero { padding: 48px 0 52px; }
  .offer-hero-grid { grid-template-columns: 1.2fr 1fr; grid-template-areas: "copy cover" "cta cover"; column-gap: 48px; align-items: start; }
  .offer-copy { grid-area: copy; }
  .offer-cta { grid-area: cta; max-width: 28rem; }
  .offer-cover { grid-area: cover; width: 300px; align-self: center; }
  .offer-trust { grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; }
}
.offer-others a { display: inline-block; padding: 12px 8px; }
.faq p a { display: inline-block; padding: 10px 0; font-weight: 600; }

/* Discounts */
.was { color: var(--muted); font-weight: 400; font-size: .85em; margin-right: 2px; }
.on-dark .was, .offer-hero .was, .buybar .was { color: #C2CEE3; }
.sale-badge { display: inline-block; vertical-align: middle; background: #B42318; color: #fff; font: 700 .75rem/1 var(--sans); padding: 4px 8px; border-radius: 999px; letter-spacing: .02em; }
.sale-note { display: block; font: 600 .95rem/1.4 var(--sans); color: #B42318; margin-top: 6px; }
.offer-hero .sale-note { color: #FFD27A; }
.buybar-price .sale-badge { display: none; }

/* Landing page: editable parts */
.offer-badge { display: inline-block; background: var(--gold); color: var(--ink); font: 700 .8rem/1 var(--sans); padding: 6px 12px; border-radius: 999px; margin: 0 0 10px; }
.offer-sub { color: #D5DFF0; font-size: 1.05rem; margin: -4px 0 12px; max-width: 34rem; }
.btn-cta { background: var(--cta, var(--gold)); color: var(--cta-ink, var(--ink)); }
.btn-cta:hover { background: var(--cta, var(--gold-hover)); color: var(--cta-ink, var(--ink)); filter: brightness(1.06); }
.offer-bar .btn-buy { background: var(--cta, var(--gold)); color: var(--cta-ink, var(--ink)); }
.countdown { margin: 0 0 10px; font-weight: 600; color: #FFD27A; }
.countdown .cd { font-variant-numeric: tabular-nums; background: rgba(255,255,255,.1); border-radius: 6px; padding: 2px 8px; margin-left: 4px; }
.video { position: relative; display: block; width: 100%; max-width: 40rem; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video .play svg { width: 68px; height: 48px; }
.video-frame { width: 100%; max-width: 40rem; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.guarantee { display: flex; gap: 14px; align-items: flex-start; background: #EEF6F0; border: 1px solid #BFDCC9; border-radius: var(--radius); padding: 16px; max-width: 40rem; }
.guarantee h2 { font-size: 1.15rem; margin: 0 0 4px; }
.guarantee p { margin: 0; color: var(--muted); }
.shield { font-size: 1.6rem; line-height: 1; }
@media (max-width: 480px) {
  .offer-cover { width: 150px; }
  .offer-hero { padding-top: 16px; }
  .offer-hero h1 { margin-bottom: 8px; }
}
@media (max-width: 400px) and (max-height: 820px) { .offer-cover { width: 124px; } }

/* ===== Landing page v2 (light, Bright-Ideas style, navy + gold) ===== */
.page-offer { --sky: #EAF2FF; --bright: #0B5ED7; background: #F7FAFF; }
.page-offer header.top { position: sticky; top: 0; z-index: 25; }
.page-offer .top-link { display: none; }
.lp-head-buy { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none;
  background: linear-gradient(180deg, #FFD15C, #F5A524); color: var(--ink); box-shadow: 0 4px 14px rgba(245,165,36,.35); }
.lp-head-buy:hover { color: var(--ink); filter: brightness(1.05); }
.lp-topbar { background: var(--gold); color: var(--ink); }
.lp-topbar-in { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; text-align: center; font-weight: 700; font-size: .92rem; }
.lp-topbar-cd { font-variant-numeric: tabular-nums; }
.lp-topbar-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; background: var(--brand-deep); color: #fff; text-decoration: none; font-size: .85rem; }
.lp-topbar-btn:hover { color: var(--gold); }

.lp-hero { background: radial-gradient(90% 60% at 85% 0%, #D6E6FF 0%, transparent 60%), linear-gradient(180deg, var(--sky), #F7FAFF 85%); padding: 26px 0 30px; }
.lp-hero-grid { display: grid; gap: 18px; }
.lp-pill { display: inline-block; background: var(--bright); color: #fff; font: 700 .85rem/1 var(--sans); padding: 8px 14px; border-radius: 999px; margin: 0 0 12px; box-shadow: 0 6px 16px rgba(11,94,215,.25); }
.lp-kicker { color: var(--bright); font: 700 .8rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.lp-hero h1 { color: var(--brand); font-size: clamp(1.9rem, 8vw, 3.1rem); line-height: 1.2; margin: 0 0 12px; font-weight: 700; }
.lp-accent { display: block; color: var(--bright); }
.lp-sub { color: #33425E; font-size: 1.08rem; max-width: 36rem; margin: 0 0 14px; }
.lp-hero .offer-proof { color: #8A5A00; font-weight: 600; margin-bottom: 14px; }
.lp-hero .offer-proof .muted { color: #8A5A00; }
.lp-hero .offer-stars .q-stars { color: #E39A00; }
.lp-hero .offer-stars .q-stars-off { color: #E7D4A6; }
.lp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chips li { border: 1.5px solid #9DBAF0; color: var(--brand); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .9rem; }
.lp-price { font: 800 3rem/1 var(--sans); color: var(--brand); margin: 6px 0 14px; letter-spacing: -.01em; }
.lp-price .was { font-size: .45em; }
.lp-price .now { color: var(--brand); }
.lp-price .sale-note { font-size: .32em; }
.page-offer .btn-cta { background: var(--cta, linear-gradient(180deg, #FFD15C, #F5A524)); color: var(--cta-ink, var(--ink)); box-shadow: 0 10px 26px rgba(245,165,36,.4); gap: 10px; }
.page-offer .btn-cta .arr { width: 22px; height: 22px; transition: transform .2s; }
.page-offer .btn-cta:hover .arr { transform: translateX(3px); }
.lp-cta .pay-methods { color: var(--muted); }
.lp-cta .offer-trust { color: #33425E; }
.lp-cta .offer-trust svg { color: var(--bright); }
.lp-cta .iab-note { color: var(--ink); }
.lp-cover { justify-self: center; width: 240px; }
.lp-cover .cover.has-img img { filter: drop-shadow(0 24px 30px rgba(0,41,95,.35)); }

.cd-wrap { margin: 0 0 14px; }
.cd-label { margin: 0 0 6px; font-weight: 700; color: #B42318; font-size: .9rem; }
.cd-boxes { display: inline-flex; gap: 8px; }
.cd-box { display: grid; place-items: center; min-width: 58px; padding: 8px 6px; border-radius: 12px; background: var(--brand-deep); color: #fff; }
.cd-box b { font: 800 1.45rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.cd-box small { font-size: .7rem; color: #C2CEE3; margin-top: 3px; }

.lp-marquee { background: var(--brand); color: #fff; overflow: hidden; white-space: nowrap; border-top: 3px solid var(--gold); }
.lp-marquee-track { display: inline-flex; align-items: center; gap: 18px; padding: 12px 0; animation: lp-scroll 40s linear infinite; font-weight: 600; }
.lp-marquee i { color: var(--gold); font-style: normal; font-size: .7rem; }
@keyframes lp-scroll { to { transform: translateX(-50%); } }

.lp-stats { padding: 22px 0 0; }
.lp-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .lp-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.lp-stat { background: #fff; border: 1px solid #DCE6F5; border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 4px 14px rgba(0,41,95,.06); }
.lp-stat b { display: block; font: 800 2rem/1.1 var(--sans); color: var(--bright); }
.lp-stat span { font-size: .9rem; color: #33425E; font-weight: 600; }

.lp-center { text-align: center; }
.page-offer .offer-sec h2 { color: var(--brand); font-size: clamp(1.45rem, 5.6vw, 2rem); }
.lp-lead { color: #33425E; max-width: 38rem; margin: 0 auto 18px; }
.lp-qgrid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 46rem; text-align: center; }
.lp-qgrid li { background: #fff; border: 1px solid #DCE6F5; border-radius: 16px; padding: 18px 12px; font-weight: 700; color: var(--brand); display: grid; gap: 8px; place-items: center; box-shadow: 0 4px 14px rgba(0,41,95,.05); }
.lp-qgrid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-ico { font-size: 1.7rem; line-height: 1; }
.lp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .lp-cards { grid-template-columns: 1fr 1fr; } }
.lp-card { position: relative; background: #fff; border: 1px solid #DCE6F5; border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 4px 14px rgba(0,41,95,.05); overflow: hidden; }
.lp-card h3 { color: var(--brand); font-size: 1.1rem; margin: 0 0 6px; padding-right: 48px; }
.lp-card p { margin: 0; color: #33425E; }
.lp-n { position: absolute; top: 8px; right: 12px; font: 800 2.4rem/1 var(--sans); color: #E3ECFA; }
.lp-card-solo { display: flex; gap: 10px; align-items: flex-start; padding-right: 40px; }
.lp-card-solo svg { width: 22px; height: 22px; flex: none; color: var(--bright); margin-top: 2px; }
.lp-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .lp-who { grid-template-columns: repeat(3, 1fr); } }
.lp-who li { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #DCE6F5; border-radius: 14px; padding: 14px 16px; font-weight: 600; color: var(--brand); }
.page-offer .how { border-color: #DCE6F5; border-radius: 16px; }
.page-offer .faq { border-color: #DCE6F5; border-radius: 14px; }
.lp-final { background: radial-gradient(80% 80% at 50% 0%, #0A3C85, var(--brand-deep)); color: #fff; border-radius: 22px; padding: 30px 20px; text-align: center; }
.lp-final h2 { color: #fff !important; margin-bottom: 4px; }
.lp-final-title { color: #C2CEE3; margin-bottom: 8px; }
.lp-price-final { color: #fff; font-size: 2.4rem; }
.lp-price-final .now { color: #fff; }
.lp-final .cd-label { color: #FFD27A; }
.lp-final .cd-box { background: rgba(255,255,255,.1); }
.lp-final .btn-xl { max-width: 26rem; }
.lp-final .offer-trust { justify-content: center; max-width: 26rem; margin: 14px auto 0; text-align: left; color: #E3EAF6; }
.lp-final .offer-trust svg { color: var(--gold); }
.lp-note { font-size: .85rem; color: var(--muted); margin-top: 18px; }

/* reveal on scroll (only with JS + no "reduce motion") */
.js-reveal .rv { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .rv.rv-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-marquee-track { animation: none; } }

@media (min-width: 860px) {
  .lp-hero { padding: 54px 0 60px; }
  .lp-hero-grid { grid-template-columns: 1.25fr .9fr; grid-template-areas: "copy cover" "cta cover"; column-gap: 56px; align-items: start; }
  .lp-copy { grid-area: copy; } .lp-cta { grid-area: cta; max-width: 30rem; } .lp-cover { grid-area: cover; width: 330px; align-self: center; }
  .lp-cta .offer-trust { grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; }
}
@media (max-width: 400px) { .lp-price { font-size: 2.6rem; } .cd-box { min-width: 52px; } }
/* landing v2: phone fit */
.lp-head-buy { white-space: nowrap; }
.lp-cta .cd-wrap { margin: 14px 0 4px; }
@media (max-width: 520px) {
  .page-offer .logo span { display: none; }
  .lp-topbar-btn { display: none; }
  .lp-topbar-in { font-size: .85rem; padding-top: 7px; padding-bottom: 7px; }
  .lp-chips li { font-size: .82rem; padding: 5px 11px; }
  .lp-hero { padding-top: 18px; }
  .lp-pill { margin-bottom: 10px; }
  .lp-hero .offer-proof { margin-bottom: 10px; }
}
.lp-n::before { content: attr(data-n); }