/* ---------- The Lazy Marketer look (fonts + colours from thelazymarketerph.com, 4 Nov 2026) ----------
   Alec's layout stays; only the palette and type are swapped here.
   Navy #21387F · cream #FFFCF8 · light blue #DBE9FC · butter #FFF6CE · pink #FFE8FD */
/* The Seasons is a Fontspring DEMO file: it stamps "DEMO" on every symbol and on the digit 4.
   unicode-range keeps it to the clean characters only (space, letters, 0-3, 5-9, , . : ; ?);
   everything else falls through to Playfair Display, which their own site also loads. */
@font-face { font-family: "The Seasons"; src: url("fonts/the-seasons-bold.otf") format("opentype"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0033, U+0035-0039, U+003A-003B, U+003F, U+0041-005A, U+0061-007A; }
@font-face { font-family: "Solway"; src: url("fonts/solway-bold.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/open-sauce-sans-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/open-sauce-sans-bold.ttf") format("truetype"); font-weight: 500 900; font-display: swap; }

:root {
  --ink: #21387F;
  --muted: #4E5F94;
  --panel: #DBE9FC;
  --line: #C3D5F2;
  --stone: #8FA2CF;
  --control: #6D7FB3;
  --bg: #FFFCF8;
  --on-ink: #FFFCF8;
  --on-ink-muted: #C9D6F3;
  --ink-line: rgba(255, 252, 248, 0.2);
  --ink-card: #2B4590;
  --display: "The Seasons", "Playfair Display", Georgia, serif;
  --slab: "Solway", Georgia, serif;
}
body { font-family: "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
.btn:hover { background: #182A62; }
.btn--cream:hover { background: #FFFFFF; }
.topbar { background: rgba(33, 56, 127, 0.94); }
.urgency, .urgency[data-stage="first"] { background: #FFF6CE; color: var(--ink); }

/* Big headings: The Seasons. The file has one weight, so no faux bold and no tight tracking. */
h1, h2, .h2, .fhero__title, .pain__title, .shift__quote, .final-ink__title, .offer__name, .bonus-title,
.lockup__name, .brand__name, .stat__num, .float-chip strong, .feature__num, .mod__node, .expect__num {
  font-family: var(--display); font-weight: 400; letter-spacing: 0;
}
/* Sub-headings and labels: Solway, as on their "01 No Affiliate Sales" list. */
h3, .feature__title, .mod__title, .format__title, .fit__title, .expect__title, .expect__boxtitle,
.kicker, .mod__label, .note__meta, .bundle__legend b, .player__bar {
  font-family: var(--slab); letter-spacing: 0.01em;
}
.btn { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; }
.pain__muted { color: var(--stone); }
.bundle__sticker { background: #FFE8FD; color: var(--ink); }
.note__said { background: #182A62; }
.note__rule .icon { color: #FFF6CE; }

/* Lazy Affiliate additions on top of the copied design (styles.css + course.css).
   .todo / .todo-visual / .todo-art mark text and pictures the Google Doc has not supplied yet.
   Delete a .todo span once its real text is in. */
.todo { display: inline-block; padding: 2px 8px; border: 1.5px dashed #9A968F; border-radius: 6px; background: rgba(154, 150, 143, 0.14); color: #6B675F; font-weight: 600; }
.ink .todo { border-color: #8A867E; background: rgba(243, 241, 238, 0.08); color: #C9C5BD; }
.ink .offer .todo { border-color: #9A968F; background: rgba(154, 150, 143, 0.14); color: #6B675F; }
.todo-visual, .todo-art { display: grid; place-items: center; min-height: 260px; padding: 24px; border: 2px dashed #9A968F; border-radius: 20px; background: rgba(154, 150, 143, 0.12); color: #6B675F; font-weight: 700; text-align: center; }
.todo-art { min-height: 0; border-radius: 16px; }
.sample.todo-visual { aspect-ratio: 9 / 16; min-height: 0; }
.about__photo.todo-visual { aspect-ratio: 4 / 5; min-height: 0; }

.feature .feature__text + .feature__text { margin-top: 12px; }
.shift__lede, .mid__lede, .inside__lede { margin-inline: auto; text-align: center; }
.ink .mid__lede { color: var(--on-ink-muted); }
.final-ink .kicker { margin-bottom: 16px; }
.final-ink__tag { margin-top: 20px; font-weight: 800; color: #FFFFFF; }
.final-ink__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.final-ink__buttons .btn { margin-top: 24px; }
.bonus-text { margin: 12px auto 0; max-width: 60ch; color: var(--muted); }
.bonus-text strong { color: var(--ink); }
.buybar__price { font-weight: 800; font-size: 0.875rem; }

/* Seven modules instead of four: two rows on desktop, so the single connecting line is dropped there. */
@media (min-width: 1000px) {
  .mods--seven { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
  .mods--seven::before { display: none; }
}

/* Longer button labels than the original: let them wrap on phones instead of widening the hero. */
.fhero__grid > div { min-width: 0; }
.btn { white-space: normal; text-align: center; }
.btn--sm { white-space: nowrap; }

/* (7 Nov) Juliana's feedback round. */
/* Feature 02 lost its picture, so its text takes the full width. */
.feature--solo { grid-template-columns: 1fr !important; max-width: 760px; }
/* Buttons added under the formats and the About story. */
.formats__btn { display: flex; width: fit-content; margin: 32px auto 0; }
.about__btn { margin-top: 24px; }
.fit__list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Proof section: Juliana's 12 feedback pages (1080x1350, exported from Canva on 7 Nov). */
.feedback { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; padding: 0; list-style: none; }
.feedback img { display: block; width: 100%; height: auto; border-radius: 16px; background: #FFFFFF; }
@media (max-width: 859px) {
  .feedback { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 20px; scroll-padding-inline: var(--gutter); }
  .feedback li { scroll-snap-align: start; }
}
/* Feature 01: Juliana's course-portal mockup (from juliana.thelazymarketerph.com). */
.feature__img { display: block; width: 100%; height: auto; }