/* =========================================================================
   Lead-magnet family (prefix ld-): starter kit, checklists, newsletter, thank-you (+ free-resources sidebar kit)
   Builds on site.css (.hero-lead, .ebook, .checklist, .boxlist, .accordion, .cta-panel, forms).
   1 hero · 2 cover + sheet mockups · 3 envelope mockup · 4 stat strip · 5 section heads & panels
   6 cards (inside / steps / why / quotes) · 7 checklist cards · 8 bonus + form box · 9 FAQ · 10 final CTA
   11 newsletter · 12 thank-you · 13 responsive
   ========================================================================= */

/* ---------- 1. Hero ---------- */
.ld-hero { background: linear-gradient(180deg, #f2f7fd 0%, #f6f9fd 100%); }
.ld-hero::before { width: 38rem; height: 38rem; right: 4%; top: -4.5rem; background: #e3edfa; }
.ld-hero__inner { grid-template-columns: minmax(0, 37rem) minmax(0, 1fr); gap: 1.25rem; align-items: center; padding-block: 1.25rem 1.15rem; }
.ld-hero__copy { padding-inline-start: .9rem; }
.ld-crumb { font-size: .78rem; margin-bottom: .4rem; }
.ld-crumb a { color: var(--green-700); }
.ld-pill { font-size: .8rem; padding: .3rem .75rem; border-radius: 6px; letter-spacing: .03em; }
.ld-hero__title { font-size: clamp(2.3rem, 1rem + 3.8vw, 4.08rem); line-height: .92; letter-spacing: -.035em; margin: .6rem 0 .45rem; }
.ld-hero__lead { font-size: max(clamp(1rem, .95rem + .3vw, 1.19rem), 16px) /* rt-1019 */; line-height: 1.38; color: #24324b; margin: 0 0 .9rem; max-width: 36rem; }
.ld-hero__list { gap: .6rem; margin-bottom: 1.25rem; }
.ld-hero__list li { font-size: max(clamp(.98rem, .94rem + .2vw, 1.12rem), 16px) /* rt-1019 */; padding-left: 2.15rem; color: #24324b; line-height: 1.35; }
.ld-hero__list li::before { width: 1.45rem; height: 1.45rem; top: -.03em; }
.ld-cta { min-height: 3.45rem; width: min(100%, 33.5rem); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 600; border-radius: 7px; }
.ld-cta .icon { width: 1.15em; height: 1.15em; }
.ld-fine { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: max(.82rem, 14px) /* rt-1019 */; color: #4a566c; }
.ld-fine .icon { width: 1.1em; height: 1.1em; color: var(--gold); }
.ld-fine a, .ld-legal a { color: inherit; } .ld-hero .ld-legal a { color: #b9d3ff; }
.ld-legal { margin: .2rem 0 0; font-size: max(.74rem, 14px) /* rt-1019 */; line-height: 1.4; color: #5b6880; max-width: 33.5rem; }
/* Hero email form: email field stacked over the big button */
.ld-hero__form { display: grid; gap: .55rem; width: min(100%, 33.5rem); }
.ld-hero__form .field { margin: 0; }
.ld-hero__form .input { min-height: 3rem; font-size: 1rem; }
.ld-hero__form .form-status { margin: 0; }
/* Handwritten note with a curved arrow (top right of the hero) */
.ld-note { position: absolute; right: 2rem; top: .7rem; z-index: 3; max-width: 11.2rem; margin: 0; font-family: var(--font-script); font-weight: 600; font-size: 1.42rem; line-height: 1.12; color: var(--ink); text-align: center; transform: rotate(-2deg); }
.ld-note svg { display: block; width: 3.2rem; height: 3.2rem; margin: .25rem 0 0 auto; color: var(--ink); }
.ld-note--left svg { margin: .25rem auto 0 0; transform: scaleX(-1); }

/* ---------- 2. Cover + sheet mockups (all titles are HTML; artwork is a generated image) ---------- */
.ld-mock { position: relative; width: calc(100% + 1.5rem); margin-right: -1.5rem; aspect-ratio: 676 / 410; container-type: inline-size; }
.ld-mock > * { position: absolute; }
.ld-mock .ld-mock__book { left: 19%; top: -1%; width: 38.5%; z-index: 4; }
.ld-mock__s1 { left: 0; top: 22%; width: 26%; height: 74%; z-index: 2; transform: rotate(-8deg); }
.ld-mock__s2 { left: 56.5%; top: 14%; width: 25%; height: 80%; z-index: 3; transform: rotate(5deg); }
.ld-mock__s3 { left: 76%; top: 23%; width: 23.5%; height: 73%; z-index: 2; transform: rotate(8deg); }
.ld-mock.ld-mock--two .ld-mock__book { left: 24%; }
.ld-mock--two .ld-mock__s1 { left: 3%; }
.ld-mock--two .ld-mock__s2 { left: 61%; width: 29%; top: 17%; height: 78%; transform: rotate(6deg); }

.ld-book { --w: 100%; position: relative; width: 100%; aspect-ratio: 5 / 8; filter: drop-shadow(14px 18px 22px rgba(13, 31, 60, .28)); }
.ld-mock > .ld-book { position: absolute; }
.ld-book::after { content: ""; position: absolute; top: 1.2%; bottom: .6%; right: -5.5%; width: 6%; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #0a1c38 0%, #1c3561 40%, #0c2040 100%); transform: skewY(-3deg); transform-origin: left; z-index: -1; }
.ld-book__cover { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; border-radius: 3px 6px 6px 3px; background: var(--cover, #0b2f4c); color: #fff; text-align: center; container-type: inline-size; }
.ld-book__cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4%; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.07)); z-index: 2; }
.ld-book__art { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
.ld-book__art img { width: 100%; height: auto; }
/* cover colour = the navy sampled from each page's generated artwork, so the art blends in */
.ld-book--sk { --cover: #0b2f4c; }
.ld-book--ck .ld-book__art { left: 13%; right: 13%; bottom: -5%; }
.ld-book--ck .ld-book__band, .ld-book--tck .ld-book__band { font-size: 6.2cqi; } .ld-book--ck { --cover: #1e3a55; } .ld-book--tck { --cover: #093055; } .ld-book--ty { --cover: #093753; }
.ld-book__brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 3cqi; margin: 9% auto 0; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; text-align: left; line-height: 1; }
.ld-book__brand img { width: 11cqi; height: 11cqi; object-fit: cover; object-position: left center; }
.ld-book__brand > span { display: flex; flex-direction: column; font-size: 3.9cqi; letter-spacing: .02em; }
.ld-book__brand b { font-size: 6.6cqi; font-weight: 800; letter-spacing: .03em; }
.ld-book__title { position: relative; z-index: 1; margin: 7% 6% 0; font-family: "Oswald", "Arial Narrow", var(--font-head); font-weight: 600; font-size: 15.5cqi; line-height: 1.04; text-transform: uppercase; letter-spacing: .005em; }
.ld-book__band { position: relative; z-index: 1; margin: 5% 6% 0; padding: 3.5% 4%; border-radius: 3px; background: var(--green-600); font-family: "Oswald", "Arial Narrow", var(--font-head); font-weight: 600; font-size: 7cqi; line-height: 1.2; text-transform: uppercase; }
.ld-book--sm .ld-book__title { font-size: 16cqi; }

.ld-sheet { display: flex; flex-direction: column; gap: 6%; padding: 3cqi 2.2cqi 2.4cqi; border-radius: 4px; background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%); box-shadow: 6px 10px 22px rgba(13, 31, 60, .16), 0 0 0 1px rgba(13, 31, 60, .05); color: var(--ink); overflow: hidden; container-type: inline-size; }
.ld-sheet__title { margin: 0 0 2%; font-family: "Oswald", "Arial Narrow", var(--font-head); font-weight: 600; font-size: 13.5cqi; line-height: 1.05; text-transform: uppercase; color: #13213a; }
.ld-sheet__row { display: flex; align-items: center; gap: 8%; }
.ld-sheet__row::after { content: ""; flex: 1; height: 5cqi; max-height: 7px; border-radius: 3px; background: #dbe2ec; }
.ld-sheet__row--short::after { margin-right: 25%; }
.ld-sheet__tick { display: grid; place-items: center; flex: none; width: 13cqi; height: 13cqi; border-radius: 3px; background: var(--green-500); color: #fff; }
.ld-sheet__tick .icon { width: 80%; height: 80%; }
.ld-sheet__tick--blue { background: var(--blue-500); }
.ld-sheet__ico { display: grid; place-items: center; flex: none; width: 21cqi; height: 21cqi; border-radius: 3cqi; background: var(--c, var(--blue-500)); color: #fff; }
.ld-sheet__ico .icon { width: 68%; height: 68%; }
.ld-sheet__line { height: 5cqi; max-height: 7px; border-radius: 3px; background: #dbe2ec; }
.ld-sheet__line--s { width: 70%; }
.ld-sheet__bulb { display: grid; place-items: center; width: 50cqi; height: 50cqi; margin: 2% auto 4%; border-radius: 50%; background: #fff3cf; color: #f2a516; }
.ld-sheet__bulb .icon { width: 62%; height: 62%; }
.ld-sheet__chart { align-self: flex-end; width: 30cqi; height: 30cqi; margin-top: auto; color: var(--blue-500); }
.ld-sheet__chart .icon { width: 100%; height: 100%; }
.ld-sheet__chart--gray { align-self: flex-start; width: 22cqi; height: 22cqi; color: #7b8799; }
.ld-sheet--dense { gap: 4%; }
.ld-sheet--dense .ld-sheet__ico { width: 17cqi; height: 17cqi; }
.ld-book__title--4 { font-size: 13.2cqi; margin-top: 6%; }

/* ---------- 3. Envelope mockup (newsletter, thank-you): back panel, HTML letter, V-shaped front pocket ---------- */
.ld-env { position: absolute; }
.ld-env__back { position: absolute; left: 0; right: 0; bottom: 0; height: var(--back-h, 56%); border-radius: 12px 12px 10px 10px; background: linear-gradient(180deg, #2a6ce2 0%, #1c56c9 100%); box-shadow: 0 16px 30px rgba(13, 31, 60, .22); }
.ld-env__letter { position: absolute; left: var(--letter-x, 8%); right: var(--letter-x, 8%); top: 0; bottom: var(--letter-b, 20%); z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 7% 7% 0; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(13, 31, 60, .16); text-align: center; container-type: inline-size; }
.ld-env__front { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--front-h, 51%); border-radius: 0 0 12px 12px; background: linear-gradient(165deg, #3479ec 0%, #1f60d8 60%, #1a54c4 100%); clip-path: polygon(0 0, 50% var(--v, 56%), 100% 0, 100% 100%, 0 100%); }
.ld-env__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #3b80f0 0%, #2766dc 100%); clip-path: polygon(0 100%, 50% var(--v2, 50%), 100% 100%); }
.ld-env__logo { display: flex; align-items: center; gap: 4cqi; margin: 0 auto; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; color: var(--ink); text-align: left; line-height: 1; }
.ld-env__logo img { width: 13cqi; height: auto; }
.ld-env__logo > span { display: flex; flex-direction: column; font-size: 3.9cqi; letter-spacing: .02em; }
.ld-env__logo b { font-size: 6.6cqi; font-weight: 800; letter-spacing: .03em; }
.ld-env__check { display: grid; place-items: center; width: 17cqi; height: 17cqi; margin: 6% 0 4.5%; border-radius: 50%; background: var(--green-500); color: #fff; }
.ld-env__check .icon { width: 58%; height: 58%; }
.ld-env__heading { margin: 0 0 7%; font-family: var(--font-head); font-weight: 800; font-size: 10.4cqi; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.ld-env__line { flex: none; width: 74%; height: 2.4cqi; margin-bottom: 4%; border-radius: 3px; background: #dfe5ee; }
.ld-env__line--s { width: 56%; }
.ld-deco { position: absolute; z-index: 3; display: block; color: var(--c, var(--blue-500)); }
.ld-deco .icon, .ld-deco.icon { width: 100%; height: 100%; }
.ld-trail { position: absolute; z-index: 1; color: #2b7de9; }
.ld-confetti { position: absolute; z-index: 0; width: 1.6%; height: 4.2%; border-radius: 2px; background: var(--c, var(--green-500)); transform: rotate(var(--r, 30deg)); }
.ld-plant { position: absolute; z-index: 3; mix-blend-mode: multiply; }
.ld-plant img { width: 100%; height: auto; }

/* ---------- 4. Stat strip under the hero (values are placeholders until verified) ---------- */
.ld-stats { background: #eaf2fb; border-top: 1px solid #dfe9f6; }
.ld-stats ul { list-style: none; margin: 0; padding: .75rem 0; display: flex; flex-wrap: wrap; justify-content: space-around; gap: .75rem 1.5rem; }
.ld-stats li { display: flex; align-items: center; gap: .85rem; font-size: max(.95rem, 16px) /* rt-1019 */; color: #4a566c; line-height: 1.25; }
.ld-stats strong { display: block; font-family: var(--font-head); font-size: 1.22rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ld-stats li > .icon { width: 2.9rem; height: 2.9rem; color: var(--green-600); }
.ld-stats--4 ul { justify-content: space-between; padding-inline: 4%; }

/* ---------- 5. Section heads & panels ---------- */
.ld-sec { padding-block: 1.05rem .25rem; }
.ld-head { text-align: center; margin-bottom: .95rem; }
.ld-head h2 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.8rem); letter-spacing: -.03em; }
.ld-head p { margin: 0 auto; max-width: 62rem; font-size: max(1.04rem, 16px) /* rt-1019 */; color: #3f4b61; }
.ld-panel { border-radius: 10px; padding: 1rem 1.5rem 1.15rem; }
.ld-panel--green { background: #edf7ef; border: 1px solid #e0f0e3; }
.ld-panel--tint { background: #eef4fc; }
.ld-panel--wide { width: min(100% - 2 * var(--gutter), 1250px); margin-inline: auto; }

/* ---------- 6. Cards ---------- */
/* "What's inside" / "What you'll get" cards: centred icon, title, text */
.ld-cards { list-style: none; margin: 0; padding: 0; }
.ld-card { padding: 1.25rem 1.35rem 1.35rem; text-align: center; border-color: #e3e9f1; border-radius: 8px; }
.ld-card > .icon, .ld-card > .ld-glyph { display: block; width: 3.6rem; height: 3.6rem; margin: 0 auto .85rem; color: var(--c, var(--blue-500)); }
.ld-card > .icon { fill: color-mix(in srgb, currentColor 20%, transparent); }
.ld-card > .icon.ld-fill { fill: currentColor; }
.ld-card > .ld-glyph { display: grid; width: 3.1rem; height: 3.3rem; color: #fff; margin-top: .2rem; }
.ld-glyph { display: grid; place-items: center; border-radius: 8px; background: var(--c); color: #fff; }
.ld-glyph .icon { width: 64%; height: 64%; }
.ld-card h3 { font-size: 1.22rem; margin-bottom: .45rem; letter-spacing: -.015em; }
.ld-card p { font-size: 1.1rem; line-height: 1.4; color: #2c3a52; margin: 0; }

/* Numbered 3-step process with chevrons between steps */
.ld-steps { list-style: none; margin: 0; padding: 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ld-step { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.ld-step .num { --s: 2.75rem; font-size: 1.25rem; margin-top: .35rem; }
.ld-step > .icon { width: 3.9rem; height: 3.9rem; color: var(--blue-500); }
.ld-step > .ld-fill { fill: currentColor; }
.ld-step h3 { font-size: 1.18rem; margin: .1rem 0 .3rem; }
.ld-step p { margin: 0; font-size: max(.96rem, 16px) /* rt-1019 */; line-height: 1.45; color: #4a566c; }
.ld-step:not(:last-child)::after { content: ""; position: absolute; right: -.5rem; top: .65rem; width: .5rem; height: .5rem; border-right: 1.6px solid #5b6880; border-top: 1.6px solid #5b6880; transform: rotate(45deg); }

/* "Why" rows: coloured icon circle + title + text */
.ld-why { list-style: none; margin: 0; padding: 0 .5rem; }
.ld-why .info { gap: 1rem; }
.ld-why .ib { --s: 3.6rem; }
.ld-why .ib--plain .icon { width: 82%; height: 82%; }
.ld-fill .icon, .icon.ld-fill { fill: currentColor; }
.ld-why h3 { font-size: 1.1rem; margin: .1rem 0 .25rem; }
.ld-why p { font-size: max(.96rem, 16px) /* rt-1019 */; line-height: 1.4; color: #4a566c; }

/* Testimonial cards: placeholders until real, permissioned feedback exists */
.ld-quotes { list-style: none; margin: 0; padding: 0; }
.ld-quote { margin: 0; display: flex; gap: 1.15rem; align-items: flex-start; padding: 1.05rem 1.2rem; border-color: #e3e9f1; border-radius: 8px; min-height: 9.5rem; }
.ld-quote .avatar { --s: 5.6rem; background: #e7eef8; color: #8da2bf; }
.ld-quote .stars { margin-bottom: .45rem; color: var(--gold); }
.ld-quote .stars .icon { width: 1.12rem; height: 1.12rem; }
.ld-quote blockquote { margin: 0; font-size: max(1.04rem, 16px) /* rt-1019 */; line-height: 1.42; color: #2c3a52; }
.ld-quote figcaption { margin-top: .55rem; font-size: 1rem; color: #4a566c; }

/* ---------- 7. Checklist cards (numbered stage, icon right, coloured empty checkboxes) ---------- */
.ld-cl { list-style: none; margin: 0; padding: 0; }
.ld-cl__card { position: relative; padding: 1.05rem 1.15rem 1.15rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff) 0%, color-mix(in srgb, var(--c) 3%, #fff) 100%); }
.ld-cl__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; padding-right: 3rem; }
.ld-cl__head .num { --s: 2.2rem; background: var(--c); font-size: 1.12rem; }
.ld-cl__head h3 { margin: 0; font-size: 1.12rem; letter-spacing: -.015em; }
.ld-cl__icon { position: absolute; right: 1rem; top: .85rem; width: 2.75rem; height: 2.75rem; color: var(--c); }
.ld-cl .boxlist { gap: .32rem; }
.ld-cl .boxlist li { font-size: max(.98rem, 16px) /* rt-1019 */; line-height: 1.35; color: #33415a; padding-left: 1.75rem; }
.ld-cl .boxlist li::before { width: 1rem; height: 1rem; top: .14em; border-width: 1.6px; }
.ld-cl--icons .ld-cl__head { padding-right: 0; gap: 1rem; }
.ld-cl--icons .ld-cl__icon { position: static; flex: none; width: 3.1rem; height: 3.1rem; }
.ld-cl__card--plain { background: #fff; border-color: #e3e9f1; box-shadow: var(--shadow-xs); }
.ld-cl__icon--bold { stroke-width: 3; }
.ld-cl--icons .ld-cl__head h3 { font-size: 1.15rem; }
.ld-cl--icons .boxlist li { font-size: max(1rem, 16px) /* rt-1019 */; }

/* ---------- 8. Bonus resources + email box ---------- */
.ld-bonus { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 21.5rem; gap: 1.5rem; align-items: center; padding: .95rem 1.3rem; border-radius: 10px; background: #edf7ef; border: 1px solid #ddefe0; }
.ld-bonus__art { align-self: center; }
.ld-bonus__art img { width: 100%; height: auto; mix-blend-mode: multiply; }
.ld-bonus__art { align-self: center; padding: 0 .25rem; }
.ld-bonus h2 { font-size: clamp(1.35rem, 1.1rem + .6vw, 1.58rem); margin: 0 0 .3rem; letter-spacing: -.025em; }
.ld-bonus__intro { margin: 0 0 1.1rem; font-size: max(1rem, 16px) /* rt-1019 */; line-height: 1.4; color: #4a566c; max-width: 30rem; }
.ld-bonus .checklist--2col { gap: .6rem 1.5rem; }
.ld-bonus .checklist li { font-size: max(.98rem, 16px) /* rt-1019 */; padding-left: 1.75rem; color: #33415a; }
.ld-bonus .checklist li::before { width: 1.15rem; height: 1.15rem; }
.ld-formbox { align-self: stretch; padding: .3rem 0 .2rem 1.4rem; border-left: 1px solid #d3e8d7; }
.ld-formbox__head { display: flex; gap: .7rem; align-items: center; margin-bottom: .45rem; }
.ld-formbox__head .icon { flex: none; width: 2.7rem; height: 2.7rem; color: var(--green-600); }
.ld-formbox h3 { margin: 0; font-size: 1.08rem; line-height: 1.2; color: #0e2a1a; }
.ld-formbox p { margin: 0 0 .6rem; font-size: max(.92rem, 16px) /* rt-1019 */; line-height: 1.38; color: #4a566c; }
.ld-formbox form { display: grid; gap: .5rem; }
.ld-formbox .field { margin: 0; }
.ld-formbox .input { min-height: 2.5rem; padding-block: .45rem; font-size: .92rem; }
.ld-formbox .btn { min-height: 2.6rem; padding-block: .45rem; font-size: .98rem; }
.ld-formbox .form-fine, .ld-formbox .form-status { margin: 0; }
.ld-formbox .form-fine { font-size: max(.76rem, 14px) /* rt-1019 */; line-height: 1.35; }
.ld-formbox .form-fine .icon { color: var(--gold); }

/* ---------- 9. FAQ ---------- */
.ld-faq { max-width: none; }
.ld-faq.accordion--cols { gap: .45rem 1.25rem; }
.ld-faq details { border-color: #dfe6ef; border-radius: 6px; }
.ld-faq summary { padding: .42rem 1.25rem; font-size: .96rem; font-weight: 600; }
.ld-faq summary::after { width: 7px; height: 7px; border-width: 1.8px; }
.ld-faq .accordion__body { padding: 0 1.25rem .85rem; font-size: max(.96rem, 16px) /* rt-1019 */; line-height: 1.5; }

/* ---------- 10. Final navy CTA panel ---------- */
.ld-final { padding: 1.2rem 1.5rem 1rem; border-radius: 10px; background: #0c2244; }
.ld-final h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); margin: 0 0 .25rem; letter-spacing: -.02em; }
.ld-final > p { margin: 0 auto .85rem; font-size: max(1.05rem, 16px) /* rt-1019 */; color: #e1e8f3; max-width: none; }
.ld-final .btn { min-height: 2.95rem; padding-inline: 2rem; font-size: 1.05rem; }
.ld-final .form-fine { justify-content: center; margin: .7rem auto 0; color: #c9d4e4; font-size: max(.82rem, 14px) /* rt-1019 */; }
.ld-final .form-fine .icon { color: var(--gold); }
.ld-final__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: min(100%, 36rem); margin: 0 auto; }
.ld-final__form .field { margin: 0; }
.ld-final__form .input { border: 0; border-radius: 6px 0 0 6px; min-height: 3.1rem; }
.ld-final__form .btn { border-radius: 0 6px 6px 0; }
.ld-final__form .form-status, .ld-final__form .form-fine { grid-column: 1 / -1; }
.ld-final__form .form-status.is-success { color: #8fe0a4; }
.ld-final__form .form-status.is-error, .ld-final .field__error { color: #ffb3b3; }
.ld-final .ld-legal { margin: .35rem auto 0; font-size: max(.76rem, 14px) /* rt-1019 */; color: #aebbd0; text-align: center; max-width: 44rem; }
.ld-wrap { padding-block: 1rem 1.6rem; }

/* ---------- 11. Newsletter ---------- */
.nl-hero { background: #f4f8fc; }
.nl-hero::before { display: none; }
.nl-hero__bg { position: absolute; inset: 0; z-index: 0; }
.nl-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.nl-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(246,249,253,.97) 0%, rgba(246,249,253,.93) 38%, rgba(246,249,253,.35) 55%, rgba(246,249,253,0) 70%); }
.nl-hero .ld-hero__inner { position: relative; z-index: 1; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); padding-block: 1.3rem 1.2rem; }
.nl-hero .ld-hero__title { font-size: clamp(2.2rem, 1rem + 3.3vw, 3.45rem); line-height: 1.02; margin-top: .55rem; }
.nl-hero .ld-hero__lead { font-size: 1.08rem; max-width: 37rem; }
.nl-hero .ld-hero__list { margin-bottom: 0; gap: .62rem; }
.nl-hero .ld-hero__list li { font-size: 1.08rem; }
.nl-letter__title { margin: 0; font-family: "Oswald", "Arial Narrow", var(--font-head); font-weight: 600; font-size: 10.2cqi; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.nl-letter__tag { margin: 1% 0 6%; font-family: "Oswald", "Arial Narrow", var(--font-head); font-weight: 500; font-size: 5.6cqi; color: #22324d; }
.nl-letter__row { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 6%; width: 100%; text-align: left; }
.nl-letter__row img { width: 100%; height: auto; aspect-ratio: 32 / 22; object-fit: cover; border-radius: 3px; }
.nl-letter__lines { display: grid; gap: 14%; align-content: start; padding-top: 2%; }
.nl-letter__lines span { height: 2.6cqi; border-radius: 2px; background: #d9e0ea; }
.nl-letter__lines span:nth-child(even) { width: 80%; }
.nl-mock { position: relative; width: calc(100% + 1rem); margin-right: -1rem; aspect-ratio: 610 / 460; }
.nl-mock .ld-env { left: 22%; top: 11.5%; width: 58%; height: 85%; --back-h: 84%; --front-h: 51%; --letter-b: 23%; --v: 57%; --v2: 42%; }
.nl-mock .ld-env__letter { padding-top: 6%; }
.nl-mock .ld-note { top: 1%; right: auto; font-size: 1.32rem; max-width: 8.6rem; }
.nl-note-l { left: 2%; transform: rotate(-5deg); }
.nl-note-r { left: 82%; transform: rotate(-3deg); }
.nl-note-l svg { margin: .1rem auto 0 3.5rem; transform: rotate(10deg); }
.nl-note-r svg { margin: .1rem auto 0 0; transform: scaleX(-1); }
.ld-deco { aspect-ratio: 1; }
.nl-d1 { left: 9%; top: 31%; width: 9.8%; }
.nl-d2 { left: 9.6%; top: 52%; width: 9%; }
.nl-d3 { left: 9%; top: 74%; width: 9.8%; }
.nl-d4 { left: 81.5%; top: 29%; width: 8.4%; }
.nl-d5 { left: 86.5%; top: 47%; width: 9.5%; }
.nl-trail { left: 79.6%; top: 55.5%; width: 8.5%; }
.nl-hero .ld-legal { margin-top: .8rem; }
/* Signup band under the hero */
.nl-join { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 29rem); gap: 1rem 1.75rem; align-items: center; padding: 1.15rem 1.9rem 1.15rem 1.6rem; border-radius: 10px; background: #edf7ef; border: 1px solid #e0f0e3; }
.nl-join > .icon { width: 4.6rem; height: 4.6rem; color: var(--blue-500); }
.nl-join h2 { margin: 0 0 .55rem; font-size: clamp(1.45rem, 1.15rem + .8vw, 1.85rem); line-height: 1.12; letter-spacing: -.03em; }
.nl-join p { margin: 0; font-size: 1.08rem; line-height: 1.45; color: #33415a; max-width: 27rem; }
.nl-join form { display: grid; gap: .7rem; }
.nl-join .field { margin: 0; }
.nl-join .input { min-height: 3.2rem; font-size: 1.02rem; padding-inline: 1.1rem; }
.nl-join .btn { min-height: 3.25rem; font-size: 1.06rem; }
.nl-join .form-fine { justify-content: center; margin: 0; font-size: max(.86rem, 14px) /* rt-1019 */; }
.nl-join .form-fine .icon { color: var(--gold); }
.nl-join .form-status { margin: 0; }
/* Topics row: five centred columns */
.nl-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.nl-topics li { max-width: 12rem; margin-inline: auto; }
.nl-topics .icon { display: block; width: 3.4rem; height: 3.4rem; margin: 0 auto .55rem; color: var(--c); fill: color-mix(in srgb, currentColor 18%, transparent); }
.nl-topics .icon.ld-fill { fill: currentColor; }
.nl-topics h3 { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.18; }
.nl-topics p { margin: 0; font-size: max(.95rem, 16px) /* rt-1019 */; line-height: 1.4; color: #4a566c; }
.nl-topics h3 a { color: var(--ink); text-decoration: none; }
.nl-topics h3 a:hover { color: var(--green-700); text-decoration: underline; }
.nl-topics__note { margin: 1rem auto 0; text-align: center; max-width: none; }
.nl-join-wrap { padding-top: .9rem; }
/* Final panel: icon + copy left, form right */
.nl-final { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 27rem); gap: 1rem 1.75rem; align-items: center; text-align: left; padding: 1.5rem 1.75rem; }
.nl-final > .icon { width: 4.8rem; height: 4.8rem; color: #fff; stroke-width: 1.6; transform: rotate(-8deg); }
.nl-final h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); margin-bottom: .45rem; }
.nl-final > div > p { margin: 0; font-size: max(1.04rem, 16px) /* rt-1019 */; line-height: 1.5; color: #e1e8f3; }
.nl-final .ld-final__form { width: 100%; margin: 0; }
.nl-final .form-fine { justify-content: flex-start; }

/* ---------- 12. Thank-you ---------- */
.ty-hero .ld-hero__inner { grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); padding-block: 1.4rem 1.3rem; }
.ty-hero::before { width: 40rem; height: 40rem; right: 2%; top: -6rem; }
.ty-hero__title { font-size: clamp(3rem, 1.4rem + 6.5vw, 7rem); line-height: .92; letter-spacing: -.05em; margin: .45rem 0 .35rem; }
.ty-hero .hero-lead__inner { z-index: auto; }
.ty-hero__sub { margin: 0 0 .9rem; font-size: max(clamp(1.08rem, 1rem + .3vw, 1.22rem), 16px) /* rt-1019 */; line-height: 1.3; letter-spacing: -.01em; }
.ty-confirm { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 8px; background: #e9f5eb; }
.ty-confirm > .icon { flex: none; width: 3.1rem; height: 3.1rem; color: var(--green-600); }
.ty-confirm h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.ty-confirm p { margin: 0; font-size: max(.98rem, 16px) /* rt-1019 */; line-height: 1.45; color: #33415a; }
.ty-mock { position: relative; width: 100%; aspect-ratio: 660 / 475; }
.ty-mock .ld-env { left: 20.5%; top: 14.5%; width: 58.8%; height: 85.3%; --back-h: 56%; --front-h: 51%; --letter-b: 20%; --v: 54%; --v2: 46%; --letter-x: 8.5%; }
.ty-mock .ld-env__letter { padding-top: 8%; }
.ty-mock .ld-plant { left: 1%; bottom: 0; width: 21%; }
.ty-mock .ld-note { top: 0; right: -.5rem; max-width: 8.2rem; font-size: 1.62rem; transform: rotate(-6deg); }
.cf1 { left: 17.4%; top: 10.5%; --c: var(--green-500); --r: 40deg; }
.cf2 { left: 28.8%; top: 6.7%; --c: #f5b51f; --r: -30deg; }
.cf3 { left: 40.6%; top: 8.8%; --c: var(--blue-500); --r: 15deg; }
.cf4 { left: 48.2%; top: 4.6%; --c: var(--blue-500); --r: 0deg; }
.cf5 { left: 59%; top: 5.7%; --c: var(--green-500); --r: 35deg; }
.cf6 { left: 70.5%; top: 8%; --c: var(--blue-500); --r: 40deg; }
.cf7 { left: 9%; top: 25%; --c: var(--green-500); --r: 30deg; }
.cf8 { left: 17.5%; top: 30%; --c: var(--blue-500); --r: 40deg; }
.cf9 { left: 16%; top: 43%; --c: var(--green-500); --r: -10deg; }
.cf10 { left: 9.5%; top: 46%; --c: #f5b51f; --r: 55deg; }
.cf11 { left: 79.5%; top: 30%; --c: #f5b51f; --r: -20deg; }
.cf12 { left: 89%; top: 79%; --c: #f5b51f; --r: -35deg; }
.ty-plane { left: 84.5%; top: 44%; width: 12%; }
.ty-trail { left: 78.6%; top: 57%; width: 8%; }
.ty-hero__sub { font-family: var(--font-head); font-weight: 800; color: var(--ink); }
/* Starter kit download band */
.ty-kit { position: relative; display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.25rem 2rem; align-items: center; padding: .55rem 9rem .55rem 1.5rem; overflow: hidden; border-radius: 6px; background: #eff5fc; }
.ty-kit::before { content: ""; position: absolute; left: 2.6%; bottom: -30%; width: 31%; aspect-ratio: 1; border-radius: 50%; background: #dff0e3; }
.ty-kit__book { position: relative; width: 15.6rem; margin: 0 auto; }
.ty-kit h2 { margin: .55rem 0 .5rem; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; }
.ty-kit p { margin: 0 0 1.1rem; font-size: 1.08rem; line-height: 1.45; color: #33415a; max-width: 36rem; }
.ty-kit .ld-cta { width: min(100%, 36rem); }
.ty-kit .ld-fine { justify-content: center; width: min(100%, 36rem); }
.ty-kit .ld-note { top: 1.6rem; right: 1.6rem; max-width: 7.6rem; font-size: 1.6rem; line-height: 1.1; transform: rotate(-6deg); }
.ty-kit__copy { position: relative; z-index: 1; }
.ty-kit .ld-fine { color: #4a566c; }
.ty-band a:not(.btn) { color: #fff; }
.ty-res-wrap { padding-top: 1.4rem; }
/* What happens next: four steps on a line */
.ty-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; text-align: center; }
.ty-next li { position: relative; }
.ty-next .ib { --s: 5.9rem; display: grid; margin: 0 auto; }
.ty-next .ib .icon { width: 46%; height: 46%; }
.ty-next .num { --s: 1.85rem; display: grid; margin: .65rem auto .7rem; font-size: .85rem; position: relative; z-index: 1; box-shadow: 0 0 0 5px #fff; }
.ty-next h3 { margin: 0 0 .4rem; font-size: 1.17rem; line-height: 1.2; }
.ty-next p { margin: 0 auto; max-width: 15rem; font-size: max(1rem, 16px) /* rt-1019 */; line-height: 1.45; color: #4a566c; }
.ty-next li:not(:last-child)::before { content: ""; position: absolute; left: calc(50% + 4rem); right: calc(-50% + 4rem - 1.25rem); top: 2.95rem; height: 2px; background: #cfd8e3; }
.ty-next li:not(:last-child)::after { content: ""; position: absolute; right: calc(-50% + 4rem - 1.25rem); top: calc(2.95rem - 5px); width: 10px; height: 10px; border-right: 2px solid #b8c3d1; border-top: 2px solid #b8c3d1; transform: rotate(45deg); }
.ty-next__rail { position: relative; }
.ty-next__rail::before { content: ""; position: absolute; left: 12%; right: 12%; top: 7.5rem; height: 1px; background: #dde4ee; }
/* Popular resources: horizontal cards */
.ty-res { list-style: none; margin: 0; padding: 0; }
.ty-res .card { display: grid; grid-template-columns: 8.9rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: .75rem; border: 0; border-radius: 6px; }
.ty-res img { width: 100%; height: auto; aspect-ratio: 13 / 16; object-fit: cover; border-radius: 4px; }
.ty-res h3 { margin: .3rem 0 .45rem; font-size: 1.12rem; line-height: 1.18; }
.ty-res p { margin: 0 0 .7rem; font-size: max(.96rem, 16px) /* rt-1019 */; line-height: 1.42; color: #4a566c; }
.ty-res .link-arrow { font-size: 1rem; }
/* Sunrise band at the end */
.ty-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #13213a; }
.ty-band__bg { position: absolute; top: 0; bottom: 0; right: 0; z-index: -2; }
/* the whole photo is shown at band height on the right and fades into the navy on the left */
.ty-band__bg img { width: auto; max-width: none; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.ty-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 32, 66, .92) 0%, rgba(12, 32, 66, .6) 38%, rgba(12, 32, 66, 0) 60%); }
.ty-band__inner { position: relative; min-height: 16.5rem; padding-block: 1.6rem 1.9rem; }
.ty-band h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.08; color: #fff; letter-spacing: -.03em; max-width: 31rem; text-wrap: wrap; }
.ty-band p { margin: 0 0 1.2rem; font-size: 1.08rem; line-height: 1.5; color: #eef3fa; max-width: 39rem; }
.ty-band .btn { min-height: 3.1rem; padding-inline: 2.6rem; font-size: 1.12rem; }
.ty-band .ty-band__note { position: absolute; left: 58%; top: 2.4rem; margin: 0; max-width: none; font-family: var(--font-script); font-weight: 600; font-size: 1.75rem; line-height: 1.12; color: #fff; text-align: center; transform: rotate(-9deg); }
.ty-band__note::after { content: ""; display: block; width: 45%; height: 3px; margin: .3rem auto 0; border-radius: 3px; background: var(--green-500); }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1100px) {
  .ld-mock { width: 100%; margin-right: 0; }
  .ld-mock__s3 { width: 22%; }
  .ld-bonus { grid-template-columns: 12rem minmax(0, 1fr); }
  .ld-formbox { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #d3e8d7; padding: 1rem 0 0; }
  .ld-steps { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 1rem; }
  .ld-step:not(:last-child)::after { display: none; }
  .nl-join { grid-template-columns: auto minmax(0, 1fr); }
  .nl-join form { grid-column: 1 / -1; }
  .nl-final { grid-template-columns: auto minmax(0, 1fr); }
  .nl-final .ld-final__form { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .ty-next { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .ty-next li::before, .ty-next li::after, .ty-next__rail::before { display: none; }
  .nl-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
}
@media (max-width: 960px) {
  .ld-hero__inner, .nl-hero .ld-hero__inner, .ty-hero .ld-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .ld-hero__copy { padding-inline-start: 0; }
  .ld-mock { width: 100%; max-width: 40rem; margin: 0 auto; }
  .nl-mock, .ty-mock { margin: 0 auto; max-width: 30rem; }
  .ld-note, .ty-band__note { display: none; }
  .nl-hero::after { background: linear-gradient(180deg, rgba(246,249,253,.95) 0%, rgba(246,249,253,.88) 60%, rgba(246,249,253,.6) 100%); }
  .ty-kit { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem; text-align: center; }
  .ty-kit::before { display: none; }
  .ty-kit__book { margin: 0 auto; width: 12rem; }
  .ty-kit p, .ty-kit .ld-cta, .ty-kit .ld-fine { margin-inline: auto; }
  .ty-res .card { grid-template-columns: 8rem minmax(0, 1fr); }
  .ty-band::before { background: linear-gradient(180deg, rgba(10, 28, 58, .85) 0%, rgba(10, 28, 58, .6) 100%); }
}
@media (max-width: 760px) {
  .ld-bonus { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
  .ld-bonus__art { max-width: 13rem; margin: 0 auto; }
  .ld-stats ul { justify-content: flex-start; padding-inline: 0; }
  .ld-stats li { width: calc(50% - .75rem); }
  .ld-panel { padding: 1.1rem 1rem; }
  .ld-quote { min-height: 0; }
  .nl-join { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 1.2rem 1rem; }
  .nl-join > .icon { margin: 0 auto; width: 3.4rem; height: 3.4rem; }
  .nl-join p { margin-inline: auto; }
  .nl-final { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 1.3rem 1rem; }
  .nl-final > .icon { margin: 0 auto; width: 3.4rem; height: 3.4rem; }
  .nl-final .form-fine { justify-content: center; }
  .nl-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ld-stats li { width: 100%; }
  .ld-cta { min-height: 3.1rem; font-size: 1rem; }
  .ld-final__form { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .ld-final__form .input, .ld-final__form .btn { border-radius: 6px; width: 100%; }
  .ld-final .btn { padding-inline: 1rem; }
  .ld-bonus .checklist--2col { grid-template-columns: minmax(0, 1fr); }
  .ty-next .ib { --s: 4.6rem; }
  .ty-next h3 { font-size: 1.02rem; }
  .ty-next p { font-size: max(.9rem, 16px) /* rt-1019 */; }
  .ty-res .card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; }
}