/* Lead magnet pages, Release 1 (Kristian, 6 Nov 2026: "approved all 7").
   Loaded last on /are-we-ready-for-ai, /free-ai-check and /ai-self-assessment. Shorter pages, a start button
   mid-page and at the end, and the blocks that replace the paid-build cards and the two-tools box.
   Colours and type are design.md tokens only. */

/* The hint under a start button: what happens, and that no email is needed to see the result. */
.lm-hint { margin: 10px 0 0; font: 400 15px/1.45 'Source Sans 3', system-ui, sans-serif; color: #586069; max-width: 32em; }
.bl-ba-sec .lm-hint { color: rgba(250, 250, 248, 0.72); }

/* What you get back: three numbered outcomes in the dark box, with the mid-page start button. */
.lm-get { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lm-get li { background: rgba(250, 250, 248, 0.06); border-radius: 20px; padding: 24px 24px 26px; color: #FAFAF8; }
.lm-get h3 { margin: 0 0 8px; font: 500 22px/1.2 'Fraunces', Georgia, serif; color: #FAFAF8; }
.lm-get p { margin: 0; font: 400 17px/1.5 'Source Sans 3', system-ui, sans-serif; color: rgba(250, 250, 248, 0.8); }
.lm-get-cta { margin: 32px 0 0; }
.lm-get-cta .om-cta { background: #6193D1; color: #232A31; }
@media (max-width: 860px) { .lm-get { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Right for you / Not for you sits under the questions with the same 20px gap as the cards. */
html body main .lm-page .om-ans .om-fit, html body.lm-page main .om-ans .om-fit { margin-top: 20px; }

/* The close: one start button, and one text link to the other free tool. */
.lm-final { padding: 72px 0 96px; text-align: center; }
.lm-final__wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.lm-final h2 { margin: 0 0 24px; font: 500 clamp(28px, 3.4vw, 40px)/1.12 'Fraunces', Georgia, serif; color: #232A31; }
.lm-final .lm-hint { margin: 12px auto 0; }
.lm-final__alt { margin: 28px 0 0; font: 400 17px/1.5 'Source Sans 3', system-ui, sans-serif; color: #586069; }
.lm-final__alt a { color: #1B3A5B; }
@media (max-width: 760px) { .lm-final { padding: 56px 0 72px; } }

/* The Self-Assessment's timeline: the rule under the heading ran through the button beside it. */
.st-tl__intro .om-steps-cta { margin-top: 28px; }

/* The ads page: question 1 higher on a phone, and a slimmer cookie bar so the answers stay in view. */
@media (max-width: 760px) {
  html[data-cookie-bar] .om-hero { padding-top: 76px; }
  html[data-cookie-bar] .om-hero h1 { margin-top: 0; margin-bottom: 10px; }
  html[data-cookie-bar] .sc-adq { margin-top: 16px; }
  html[data-cookie-bar] .cookie-notice--bar { gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  html[data-cookie-bar] .cookie-notice--bar .cookie-notice__text { font-size: 14px; line-height: 1.4; }
  html[data-cookie-bar] .cookie-notice--bar .cookie-notice__btn { min-height: 44px; padding: 8px 16px; }
}

/* Three questions in one row on a wide screen. */
@media (min-width: 961px) { .lm-page .om-objs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lm-page .om-ans .om-objs { margin-bottom: 0; }

/* The close's button sits a little further from its heading than the site's 16px heading-to-line gap. */
html body main section.lm-final h2 + p.om-buyrow:not(#st) { margin-top: 28px !important; }

/* What you can count on: the same Soft Stone cards as the questions above, not Off-White on Off-White (6 Nov 2026). */
html body main .lm-page .hp-promise__card, html body.lm-page main .hp-promise__card { background: #E5E5E2 !important; border-color: transparent !important; }

/* Question 1 as the thing to tap (Kristian, 6 Nov 2026: "make sure this stands out so it looks like something that can
   be clicked"): a Charcoal card, Off-White question, a thin 1-of-13 bar, and Signal Blue answer buttons with an arrow.
   Same card on the ads' page and the readiness page. */
html body.lm-page .sc-adq { background: #232A31; color: #FAFAF8; padding: clamp(22px, 3vw, 32px); gap: 16px; box-shadow: 0 18px 40px -22px rgba(35, 42, 49, 0.55); }
html body.lm-page .sc-adq .sc-adq-n { color: #AFC4DD; display: grid; gap: 10px; }
html body.lm-page .sc-adq .sc-adq-n::after { content: ""; display: block; height: 4px; border-radius: 2px; background: linear-gradient(to right, #AFC4DD 0 calc(100% / 13), rgba(250, 250, 248, 0.14) calc(100% / 13) 100%); }
html body.lm-page .sc-adq .sc-adq-h { color: #FAFAF8; font-size: clamp(21px, 2vw, 24px); }
html body.lm-page .sc-adq .sc-adq-s { color: rgba(250, 250, 248, 0.72); margin: -6px 0 2px; }
html body.lm-page .sc-adq .fd-tile { background: #FAFAF8; color: #232A31; border: 2px solid transparent; box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 16px 20px; min-height: 56px; }
html body.lm-page .sc-adq .fd-tile::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html body.lm-page .sc-adq .fd-tile-l { font-size: 17px; }
html body.lm-page .sc-adq .fd-tile:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 3px; }
html body.lm-page .sc-adq .fd-tile:active { transform: scale(0.98); background: #AFC4DD; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  html body.lm-page .sc-adq .fd-tile:hover { background: #AFC4DD; border-color: transparent; transform: translateY(-1px); box-shadow: none; }
}
@media (max-width: 820px) { html body.lm-page .sc-adq .fd-tile { padding: 14px 18px; } }
@media (prefers-reduced-motion: reduce) {  html body.lm-page .sc-adq .fd-tile:active { transform: none; }@media (hover: hover) and (pointer: fine){html body.lm-page .sc-adq .fd-tile:hover{ transform: none; }} }

/* Readiness hero (Kristian, 6 Nov 2026): headline on the left, question 1 on the right, both above the fold. */
html body.lm-page .om-hero.lm-hero { align-items: center; }
@media (min-width: 1100px) { html body.lm-page .om-hero.lm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); justify-content: center; gap: clamp(48px, 5vw, 96px); } }
@media (min-width: 761px) and (max-width: 1099px) { html body.lm-page .om-hero.lm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
html body.lm-page .lm-hero .sc-adq { margin: 0; }
html body.lm-page .lm-hero .lm-hint { margin-top: 16px; }

/* What you'll know: the three outcomes on the left, the example report on the right. */
.lm-know { padding: 96px 0; }
.lm-know__wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.lm-know h2 { margin: 0; font: 500 clamp(28px, 3.4vw, 40px)/1.12 'Fraunces', Georgia, serif; color: #232A31; max-width: 20ch; }
html body main section.lm-know h2 + p:not(#st) { margin-top: 16px !important; }
.lm-know__lead { margin: 16px 0 0; color: #586069; max-width: 40em; }
.lm-get.lm-get--stack { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
.lm-get--stack li { background: #E5E5E2; color: #232A31; padding: 20px 24px; }
.lm-get--stack h3 { color: #232A31; font-size: 21px; }
.lm-get--stack p { color: #232A31; }
.lm-know .lm-get-cta { margin-top: 28px; }
.lm-know .lm-hint { color: #586069; }
.lm-know__doc .omv-doc { margin: 0; }
@media (max-width: 860px) { .lm-know { padding: 64px 0; } .lm-know__wrap { grid-template-columns: minmax(0, 1fr); padding: 0 20px; } }

/* The close as a dark panel with question 1 again (Kristian, 6 Nov 2026: "a bit underwhelming"). The question card
   sits inside on a slightly lighter Charcoal so it still reads as its own card. */
html body main section.lm-final--dark { text-align: left; padding-left: clamp(8px, 1.4vw, 20px); padding-right: clamp(8px, 1.4vw, 20px); }
.lm-final__panel { max-width: 1240px; margin: 0 auto; background: #232A31; color: #FAFAF8; border-radius: clamp(20px, 3vw, 36px); padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 80px); align-items: center; }
html body main .lm-final--dark h2:not(#st) { color: #FAFAF8; margin: 0; }
html body main .lm-final--dark h2 + p:not(#st) { margin-top: 16px !important; }
.lm-final__lead { margin: 16px 0 0; color: rgba(250, 250, 248, 0.78); font-size: 19px; line-height: 1.5; max-width: 30em; }
html body main .lm-final--dark .lm-final__alt { color: rgba(250, 250, 248, 0.72); margin-top: 24px; }
html body main .lm-final--dark .lm-final__alt a { color: #AFC4DD; }
html body.lm-page .lm-final__q.sc-adq { margin: 0; background: rgba(250, 250, 248, 0.06); box-shadow: none; }
@media (max-width: 860px) { .lm-final__panel { grid-template-columns: minmax(0, 1fr); } }

/* Question 1 as the first card in a deck (Kristian, 6 Nov 2026, option 1): two cards behind it, "Question 1 of 13"
   with 13 dots (the first lit), and what comes next under the answers. The deck is two offset shadows, so it needs
   no extra markup; the card keeps room for them. */
html body.lm-page .sc-adq { box-shadow: 12px 12px 0 0 rgba(88, 96, 105, 0.6), 24px 24px 0 0 rgba(88, 96, 105, 0.3); margin-right: 24px; margin-bottom: 24px; }
html body.lm-page .lm-hero .sc-adq { margin: 0 24px 24px 0; }
html body.lm-page .lm-final__q.sc-adq { box-shadow: 12px 12px 0 0 rgba(250, 250, 248, 0.08), 24px 24px 0 0 rgba(250, 250, 248, 0.04); margin: 0 24px 24px 0; }
html body.lm-page .sc-adq .sc-adq-n { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 700; color: #FAFAF8; }
html body.lm-page .sc-adq .sc-adq-n::after { flex: none; width: 208px; height: 10px; border-radius: 0;
  background: radial-gradient(circle, #AFC4DD 4.5px, transparent 5px) 0 50% / 16px 10px no-repeat, radial-gradient(circle, rgba(250, 250, 248, 0.22) 4.5px, transparent 5px) 0 50% / 16px 10px repeat-x; }
html body.lm-page .sc-adq .sc-adq-next { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: rgba(250, 250, 248, 0.6); }
@media (max-width: 760px) {
  html body.lm-page .sc-adq, html body.lm-page .lm-hero .sc-adq, html body.lm-page .lm-final__q.sc-adq { box-shadow: 8px 8px 0 0 rgba(88, 96, 105, 0.6), 16px 16px 0 0 rgba(88, 96, 105, 0.3); margin-right: 16px; margin-bottom: 16px; }
  html body.lm-page .sc-adq .sc-adq-n { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; }
  html body.lm-page .sc-adq .sc-adq-n::after { width: 169px; height: 8px; background-size: 13px 8px, 13px 8px; }
}

/* Answers in Off-White, Light Blue on hover and press; Signal Blue stays for actions only (Kristian, 6 Nov 2026: the blue was too harsh with this many answers). */

/* AI Self-Assessment page (Kristian, 6 Nov 2026: the readiness layout here too). Its card counts the questionnaire's
   six steps, so six dots. */
html body.lm-page .sc-adq--six .sc-adq-n::after { width: 96px; }
@media (max-width: 760px) { html body.lm-page .sc-adq--six .sc-adq-n::after { width: 78px; } }
html body.lm-sa .sc-adq .fd-tile { min-height: 50px; padding-top: 12px; padding-bottom: 12px; }
/* The sample report beside "What you'll know" shrinks with its column, so 1024-wide screens never scroll sideways. */
html body main .lm-know__fig.omv-hero__doc .omv-doc__frame { width: 100% !important; max-width: 440px; height: auto !important; aspect-ratio: 4 / 5; }