/*
 * BEU sales page v2 (scoped). Loaded ONLY on pages with post meta _beu_sales_v = 2.
 * EVERY selector begins with body.beu-sp-v2 (checked by tools/verify-scope.php).
 * Values come from claude/reports/2026-10-28-sales-spec-v1.md (measured baseline).
 * Palette (Direction C): ink #161616, neutrals #F1F0EE / #fff, tint #FCEFF2, accent #E23255 (icons, labels, borders only),
 * plum #8E2788, blue #094F96, warm #F9B70E / #EC860E. Button fill #C42347 + white text (5.71:1).
 * Class names (beu-sp-main/-hero/-hero-grid/-hero-copy/-wrap/-band/-sec/-bg-w/-bg-n/-bg-t/-alt/-sticky/-buy/-foot) were read
 * from the Stage 0 baseline JSON, not from the template source: Stage 2 must confirm them on the real markup.
 * The theme header, footer (.beu-sp-foot), nav and theme-wide CSS are not touched.
 */

/* ---- tokens + base (content region only: header/nav/footer keep the theme font) ---- */
body.beu-sp-v2 {
  --beu-ink: #161616; --beu-accent: #E23255; --beu-btn: #C42347; --beu-plum: #8E2788; --beu-blue: #094F96;
  --beu-soft: #F1F0EE; --beu-tint: #FCEFF2; --beu-warm: #F9B70E; --beu-muted: #595959;
}
body.beu-sp-v2 .beu-sp-main,
body.beu-sp-v2 .beu-sp-sticky,
body.beu-sp-v2 #beu-sp-sticky {
  font-family: Roboto, Arial, sans-serif;
  color: #161616;
}
body.beu-sp-v2 .beu-sp-main { font-size: 18px; line-height: 1.5; }
body.beu-sp-v2 .beu-sp-main p,
body.beu-sp-v2 .beu-sp-main li { font-size: 18px; line-height: 1.5; }
body.beu-sp-v2 .beu-sp-main a { color: #094F96; }
/* Stage 4b S4: the footer sits inside main on a dark band; keep its links light (the generic link blue above made them low contrast) */
body.beu-sp-v2 .beu-sp-main .beu-sp-foot a { color: #fff; text-decoration: underline; }
body.beu-sp-v2 .beu-sp-main img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- container ---- */
body.beu-sp-v2 .beu-sp-wrap { max-width: 1200px; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }

/* ---- section backgrounds: never the same colour twice in a row (hero n, band t, then w / n / t) ---- */
body.beu-sp-v2 .beu-sp-hero { background: #F1F0EE; padding: 48px 0 64px; }
body.beu-sp-v2 .beu-sp-band { background: #FCEFF2; padding-top: 24px; padding-bottom: 24px; }
body.beu-sp-v2 .beu-sp-sec { padding-top: 64px; padding-bottom: 64px; }
body.beu-sp-v2 .beu-sp-sec.beu-sp-bg-w { background: #fff; }
body.beu-sp-v2 .beu-sp-sec.beu-sp-bg-n { background: #F1F0EE; }
body.beu-sp-v2 .beu-sp-sec.beu-sp-bg-t { background: #FCEFF2; }

/* ---- hero: label above H1 (text from the --beu-v2-label property set by the mu-plugin), H1, split ---- */
body.beu-sp-v2 .beu-sp-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
body.beu-sp-v2 .beu-sp-hero-grid > * { min-width: 0; }
body.beu-sp-v2 .beu-sp-hero-copy::before {
  content: var(--beu-v2-label);
  display: block; margin: 0 0 12px;
  color: #8E2788; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
}
body.beu-sp-v2 .beu-sp-hero h1 { font-size: 48px; line-height: 1.15; font-weight: 700; margin: 0 0 16px; color: #161616; }

/* ---- type scale ---- */
body.beu-sp-v2 .beu-sp-sec h2 { font-size: 38px; line-height: 1.2; font-weight: 700; margin: 0 0 24px; color: #161616; }
body.beu-sp-v2 .beu-sp-sec h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: #E23255; margin-top: 16px; }
body.beu-sp-v2 .beu-sp-sec h3 { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 0 0 8px; }
/* reading column (Stage 2b, changed in 5d): running text is capped at 720px only BELOW 900px; from 900px up text sections fill the
   1200px container (minus its padding) and cards, grids and quotes use the full container as before.
   The theme's narrow sections (curriculum, buy) keep their 800px container. */
body.beu-sp-v2 .beu-sp-wrap.beu-sp-narrow { max-width: 800px; }
@media (max-width: 899px) {
  body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > p,
  body.beu-sp-v2 .beu-sp-sec .beu-sp-prose > p,
  body.beu-sp-v2 .beu-sp-sec .beu-sp-prose > ul,
  body.beu-sp-v2 .beu-sp-sec .beu-sp-prose > h3 { max-width: 720px; }
}
body.beu-sp-v2 .beu-sp-sec .beu-sp-narrow > p,
body.beu-sp-v2 .beu-sp-sec .beu-sp-buy > p { margin-left: auto; margin-right: auto; }
/* CTA buttons: centred to the container, same on every repeat (hero CTA stays left, it is not in a .beu-sp-sec) */
body.beu-sp-v2 .beu-sp-sec p.beu-sp-cta { max-width: none; margin: 40px 0 0; text-align: center; }

/* ---- buttons: #C42347 + white text; accent #E23255 is never a white-text fill ---- */
body.beu-sp-v2 .beu-sp-btn,
body.beu-sp-v2 .beu-sp-main a[class*="btn"],
body.beu-sp-v2 .beu-sp-main a[class*="button"],
body.beu-sp-v2 .beu-sp-main .wp-block-button__link,
body.beu-sp-v2 .beu-sp-sticky a,
body.beu-sp-v2 #beu-sp-sticky a {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 56px; padding: 0 32px; border-radius: 6px; border: 0;
  background: #C42347; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
}
body.beu-sp-v2 .beu-sp-btn:hover,
body.beu-sp-v2 .beu-sp-main a[class*="btn"]:hover,
body.beu-sp-v2 .beu-sp-main a[class*="button"]:hover,
body.beu-sp-v2 .beu-sp-sticky a:hover,
body.beu-sp-v2 #beu-sp-sticky a:hover { background: #A81D3C; color: #fff; }
body.beu-sp-v2 .beu-sp-btn:focus-visible,
body.beu-sp-v2 .beu-sp-main a[class*="btn"]:focus-visible,
body.beu-sp-v2 .beu-sp-sticky a:focus-visible,
body.beu-sp-v2 #beu-sp-sticky a:focus-visible { outline: 3px solid #094F96; outline-offset: 2px; }

/* ---- list icons: inline SVG (data URI mask) in the accent colour ---- */
/* Stage 4b S3: the v2 tick draws only on plain lists. Lists whose items already carry their own check badge, number,
   icon or photo (checks, grid/offer cards, speakers, bonus cards, highlights) are left to the theme. */
body.beu-sp-v2 .beu-sp-sec ul:where(:not(.beu-sp-checks):not(.beu-sp-grid):not(.beu-sp-speakers):not(.beu-sp-bonus):not(.beu-sp-hl)) { list-style: none; padding-left: 0; }
body.beu-sp-v2 .beu-sp-sec ul:where(:not(.beu-sp-checks):not(.beu-sp-grid):not(.beu-sp-speakers):not(.beu-sp-bonus):not(.beu-sp-hl)) > li { position: relative; padding-left: 32px; margin-bottom: 10px; }
body.beu-sp-v2 .beu-sp-sec ul:where(:not(.beu-sp-checks):not(.beu-sp-grid):not(.beu-sp-speakers):not(.beu-sp-bonus):not(.beu-sp-hl)) > li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; background: #E23255;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* symptom pills (ul.beu-sp-chips): centre the check icon vertically in the pill (Stage 4) */
body.beu-sp-v2 .beu-sp-sec ul.beu-sp-chips > li { display: flex; align-items: center; margin-bottom: 0; padding: 10px 16px 10px 44px; }
body.beu-sp-v2 .beu-sp-sec ul.beu-sp-chips > li::before { left: 14px; top: 50%; transform: translateY(-50%); }
/* in-markup icons from the footer sprite: <svg class="beu-sp-ico"><use href="#beu-i-check"/></svg> */
body.beu-sp-v2 .beu-sp-ico { width: 24px; height: 24px; color: #E23255; flex: none; }

/* ---- image alternation (desktop): odd blocks image left, even blocks image right ---- */
body.beu-sp-v2 .beu-sp-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
body.beu-sp-v2 .beu-sp-alt > * { min-width: 0; }
body.beu-sp-v2 .beu-sp-alt:nth-of-type(even) > :first-child { order: 2; }

/* image + text sections (Stage 5d). The theme floats the photo at 42% from 860px, which squeezed the first paragraph into a sliver.
   v2 never floats the photo: below 900px (and in any browser without :has()) it is a full-width block above the text;
   from 900px up a flow that contains a photo is a two-column grid, photo 40% and text the rest, 40px gap, top aligned.
   .beu-sp-fig-r puts the photo on the right. Text-only flows stay normal full-width blocks. */
body.beu-sp-v2 .beu-sp-story .beu-sp-flow > .beu-sp-fig { float: none; display: block; width: 100%; max-width: 520px; margin: 0 0 24px; }
@media (min-width: 900px) {
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow:has(> .beu-sp-fig) { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 40px; row-gap: 0; align-items: start; }
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow:has(> .beu-sp-fig-r) { grid-template-columns: minmax(0, 1fr) 40%; }
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow:has(> .beu-sp-fig) > * { grid-column: 2; min-width: 0; }
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow:has(> .beu-sp-fig-r) > * { grid-column: 1; }
  /* Stage 5i L1: the photo stays beside the text while you scroll through the section (it can only move inside its own grid area, so it never reaches the next section or the footer; the site header is not sticky, so top: 96px clears nothing) */
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow > .beu-sp-fig { max-width: none; margin: 6px 0 0; grid-row: 1 / span 40; align-self: start; position: sticky; top: 96px; }
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow > .beu-sp-fig-l { grid-column: 1; }
  body.beu-sp-v2 .beu-sp-story .beu-sp-flow > .beu-sp-fig-r { grid-column: 2; }
  body.beu-sp-v2 .beu-sp-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
}

/* Stage 4b H1: a hero with no image (the template adds .beu-sp-hero-solo) lets the text use the container, left aligned */
body.beu-sp-v2 .beu-sp-hero-solo .beu-sp-hero-grid { grid-template-columns: minmax(0, 1fr); }
body.beu-sp-v2 .beu-sp-hero-solo .beu-sp-hero-copy { max-width: none; text-align: left; }
body.beu-sp-v2 .beu-sp-hero-solo .beu-sp-lead { max-width: 720px; }

/* Stage 5f (Ryan, 10/29): curriculum / modules / lessons are centred like every other card section (this replaces the Stage 4b "left edge" rule):
   the section container is the 1200px container, the accordion / lesson list fills it, and heading, underline and lead line are centred (see the alignment rule below). */
body.beu-sp-v2 #curriculum > .beu-sp-wrap.beu-sp-narrow { max-width: 1200px; }
body.beu-sp-v2 #curriculum > .beu-sp-wrap.beu-sp-narrow > :not(h2):not(.beu-sp-cta) { max-width: none; }
body.beu-sp-v2 #curriculum > .beu-sp-wrap.beu-sp-narrow > p.beu-sp-cta { max-width: none; }

/* Stage 4b S1: the sticky-bar price was white on the white bar (theme colour); make it ink */
body.beu-sp-v2 .beu-sp-sticky .beu-sp-stxt,
body.beu-sp-v2 .beu-sp-sticky .beu-sp-stxt strong,
body.beu-sp-v2 #beu-sp-sticky .beu-sp-stxt,
body.beu-sp-v2 #beu-sp-sticky .beu-sp-stxt strong { color: #161616; }
body.beu-sp-v2 .beu-sp-sticky .beu-sp-stxt,
body.beu-sp-v2 #beu-sp-sticky .beu-sp-stxt { line-height: 1.25; min-width: 0; }

/* Stage 5f whole-page alignment rule. A section whose content is cards, an accordion, a grid, a price box or a button row has its h2, red
   underline and lead line CENTRED (default for every .beu-sp-sec). Running-text story sections and the instructor block keep h2 and text LEFT.
   (Selectors are written out one by one: no commas inside :is()/:not(), the scope check splits on commas.) */
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > h2 { text-align: center; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > h2::after { margin-left: auto; margin-right: auto; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-story > h2 { text-align: left; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-story > h2::after { margin-left: 0; margin-right: auto; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap:has(> .beu-sp-person) > h2 { text-align: left; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap:has(> .beu-sp-person) > h2::after { margin-left: 0; margin-right: auto; }
/* Stage 5i L2: a sub-heading (h3.beu-sp-h3) directly in a section wrapper sits above a card grid or accordion, so it is centred like the h2; the instructor block keeps its left alignment */
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > h3.beu-sp-h3 { text-align: center; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap:has(> .beu-sp-person) > h3.beu-sp-h3 { text-align: left; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > p.beu-sp-lead2 { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > .beu-sp-prose.beu-sp-lead2 { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap:has(> .beu-sp-person) > p.beu-sp-lead2 { text-align: left; margin-left: 0; margin-right: auto; max-width: none; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-wrap > p.beu-sp-closing { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
body.beu-sp-v2 .beu-sp-sec .beu-sp-story > p.beu-sp-closing { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
body.beu-sp-v2 .beu-sp-sec ul.beu-sp-chips { justify-content: center; }
body.beu-sp-v2 .beu-sp-foot .beu-sp-disc { text-align: center; }

/* A partly filled last row of a card grid is centred, not left: each item spans 2 tracks of a doubled grid, the odd last item(s) move to the middle.
   Same breakpoint as the theme's own column counts (860px). */
@media (min-width: 860px) {
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-checks:not(.beu-sp-checks-sm) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-checks:not(.beu-sp-checks-sm) > li { grid-column: span 2; }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-checks:not(.beu-sp-checks-sm) > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
  body.beu-sp-v2 .beu-sp-sec ol.beu-sp-lessons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.beu-sp-v2 .beu-sp-sec ol.beu-sp-lessons > li { grid-column: span 2; }
  body.beu-sp-v2 .beu-sp-sec ol.beu-sp-lessons > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
  body.beu-sp-v2 .beu-sp-sec div.beu-sp-quotes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.beu-sp-v2 .beu-sp-sec div.beu-sp-quotes > figure { grid-column: span 2; }
  body.beu-sp-v2 .beu-sp-sec div.beu-sp-quotes > figure:last-child:nth-child(odd) { grid-column: 2 / span 2; }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-grid > li { grid-column: span 2; }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-grid > li:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-grid > li:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  body.beu-sp-v2 .beu-sp-sec ul.beu-sp-grid > li:last-child:nth-child(3n+2) { grid-column: 4 / span 2; }
}

/* Stage 5k: a section with ONE video shows it centred at a normal width (not full-bleed); the optional second group (.beu-sp-vrow) is 3 across from 860px, stacked below.
   These classes exist only where a page uses them (video with a single item, video2), so no other page is affected. */
body.beu-sp-v2 .beu-sp-videos.beu-sp-n1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
body.beu-sp-v2 .beu-sp-videos.beu-sp-vrow { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  body.beu-sp-v2 .beu-sp-videos.beu-sp-vrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Stage 5k: hand-written lesson list (curriculum.items): title with a short line under it */
body.beu-sp-v2 .beu-sp-lessons.beu-sp-custom > li > div { display: flex; flex-direction: column; gap: 2px; text-align: left; }
body.beu-sp-v2 .beu-sp-lessons.beu-sp-custom .beu-sp-lsub { font-weight: 400; font-size: 15px; line-height: 1.4; color: #595959; }

/* ---- sticky buy bar: mobile only, solid white; hidden on desktop ---- */
body.beu-sp-v2 .beu-sp-sticky,
body.beu-sp-v2 #beu-sp-sticky { display: none !important; }

@media (max-width: 768px) {
  body.beu-sp-v2 .beu-sp-main { font-size: 18px; }
  body.beu-sp-v2 .beu-sp-wrap { padding-left: 20px; padding-right: 20px; }
  body.beu-sp-v2 .beu-sp-hero { padding: 32px 0 40px; }
  body.beu-sp-v2 .beu-sp-sec { padding-top: 48px; padding-bottom: 48px; }
  body.beu-sp-v2 .beu-sp-hero-grid,
  body.beu-sp-v2 .beu-sp-alt { grid-template-columns: 1fr; gap: 24px; }
  body.beu-sp-v2 .beu-sp-alt:nth-of-type(even) > :first-child { order: 0; }
  body.beu-sp-v2 .beu-sp-hero h1 { font-size: 32px; }
  body.beu-sp-v2 .beu-sp-sec h2 { font-size: 28px; }
  body.beu-sp-v2 .beu-sp-sec h3 { font-size: 22px; }
  /* Stage 5f: no extra padding under main; it showed as a white band between the dark page footer and the theme footer, and the theme already pads its own footer for the sticky bar (72px) */
  body.beu-sp-v2 .beu-sp-main { padding-bottom: 0; }
  body.beu-sp-v2 .beu-sp-btn,
  body.beu-sp-v2 .beu-sp-main a[class*="btn"],
  body.beu-sp-v2 .beu-sp-main a[class*="button"],
  body.beu-sp-v2 .beu-sp-main .wp-block-button__link { width: 100%; }
  body.beu-sp-v2 .beu-sp-sticky,
  body.beu-sp-v2 #beu-sp-sticky {
    display: flex !important; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #fff; border-top: 1px solid #D8D8D8; box-shadow: 0 -2px 8px rgba(22, 22, 22, .08);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-sizing: border-box;
  }
  body.beu-sp-v2 .beu-sp-sticky a,
  body.beu-sp-v2 #beu-sp-sticky a { width: auto; min-height: 48px; padding: 0 20px; }
  /* Stage 4b S1: with the price now visible, a long label such as BE101's "$197 · 30-day guarantee" wrapped to 3 lines in the
     ~100px left of the button and made the bar 89px; smaller text keeps every page's bar at the same ~73px */
  body.beu-sp-v2 .beu-sp-sticky .beu-sp-stxt,
  body.beu-sp-v2 #beu-sp-sticky .beu-sp-stxt { font-size: 14px; }
  body.beu-sp-v2 .beu-sp-sticky .beu-sp-stxt strong,
  body.beu-sp-v2 #beu-sp-sticky .beu-sp-stxt strong { font-size: 18px; }
  /* Stage 4b M1: guarantee card stacks (badge above text) at narrow widths */
  body.beu-sp-v2 .beu-sp-guar { flex-direction: column; align-items: flex-start; }
}