/* kc-v4.css: V4 ONLY, loaded after ac-framework/ac-v4.css (V2/V3 never link it).
   1. AI product art (visuals/art/web/*.webp, served at /art/): real images replace
      the inline-SVG mockups, so the template's fixed-height art boxes go auto.
   2. C6 (open-items): the reader is 66 on a phone. The template ships 8-15px body
      text and headings at line-height 1.2 with -0.04em tracking ("lines roll on top
      of each other"). Body copy goes to 18px/1.6, headings get air, nothing under 12px.
   3. design sweep (browse audit 2026-09-23): button gaps, price block, guarantee card +
      seal, acts chips, AI letter scenes, the how-it-works flow (the template's .flow-comparison).
   4. designer brief pass (2026-09-23, D5-D12): split-headline H3, text still under 14px,
      bigger gift covers on phone, and the upsell pages (body[data-page]
      > main.wrap, ac-framework.css) in the same type + art as /slo.
   5. AC page-design components restored (2026-09-24, C32): the sticky bundle card, the fan +
      stats, and the height rules that keep sticky cards on screen.
   6. C45 phone buy bar (2026-09-24, "like third eye"): fixed to the bottom under 900px wide,
      one compact row, shown only after the inline bundle card's button has scrolled off (the story),
      hidden while another buy button is on screen (the script sits under the bar in the page).
   7. client videos (2026-09-24): testimonial slots #1-#3 on /slo play the real client clips
      (AI-avatar read, captioned as such); the "others say" slots show a second verbatim line.
   "body .ghl-ac-page" = one step more specific than the template, so these win
   inside the template's own media queries too. */

/* 1. art */
body .ghl-ac-page .product-stack,
body .ghl-ac-page .product-stack-small { height: auto; width: min(560px, 100%); margin-left: auto; margin-right: auto; }
body .ghl-ac-page .kc-art { display: block; width: 100%; height: auto; }
body .ghl-ac-page .bonus-card .kc-art { width: auto; max-width: 100%; height: 180px; object-fit: contain; margin: 0 auto; }

/* 2. C6: headings */
body .ghl-ac-page .hero-shell > h1 { line-height: 1.24; letter-spacing: -0.012em; }
body .ghl-ac-page .hero-copy h2, body .ghl-ac-page .story-copy h2,
body .ghl-ac-page .section-shell > h2, body .ghl-ac-page .reviews-section h2,
body .ghl-ac-page .included-section h2, body .ghl-ac-page .faq-section h2,
body .ghl-ac-page .stack-section h2 { line-height: 1.3; letter-spacing: -0.01em; }

/* 2. C6: reading text */
body .ghl-ac-page .hero-subtitle { font-size: 17px; line-height: 1.5; }
body .ghl-ac-page .eyebrow { font-size: 15px; }
body .ghl-ac-page .hero-copy p,
body .ghl-ac-page .story-copy > p,
body .ghl-ac-page .section-grid.solo .story-copy > p,
body .ghl-ac-page .included-section .story-copy > p,
body .ghl-ac-page .letter-bullets li,
body .ghl-ac-page .doom-list p,
body .ghl-ac-page .letter-steps p { font-size: 18px; line-height: 1.6; }
body .ghl-ac-page .section-intro { font-size: 16px; }
body .ghl-ac-page .section-eyebrow { font-size: 12px; }
body .ghl-ac-page .faq-grid summary { font-size: 17px; line-height: 1.4; }
body .ghl-ac-page .faq-grid details p { font-size: 16px; }
body .ghl-ac-page .bonus-card h3 { font-size: 17px; line-height: 1.35; }
body .ghl-ac-page .bonus-card > p { font-size: 15px; }

/* 2. C6: the order box */
body .ghl-ac-page .offer-kicker { font-size: 14px; }
body .ghl-ac-page .price-line { font-size: 18px; }
body .ghl-ac-page .price-line strong { font-size: 30px; }
body .ghl-ac-page .offer-copy, body .ghl-ac-page .inline-offer .offer-copy { max-width: 340px; font-size: 15px; line-height: 1.5; }
body .ghl-ac-page .available { font-size: 13px; }
body .ghl-ac-page .primary-cta strong { font-size: 18px; }
body .ghl-ac-page .primary-cta small { font-size: 12px; }
body .ghl-ac-page .secure-line { font-size: 14px; }
body .ghl-ac-page .guarantee-mini p { font-size: 15px; line-height: 1.4; }
body .ghl-ac-page .guarantee-line { font-size: 15px; }

/* 3. design sweep (2026-09-23, /browse audit of the live /slo/) */
/* headings: no orphan last word, and air before the text they introduce */
body .ghl-ac-page h1, body .ghl-ac-page h2, body .ghl-ac-page h3 { text-wrap: balance; }
body .ghl-ac-page .story-copy > h2, body .ghl-ac-page .section-shell > h2,
body .ghl-ac-page .guarantee-block > h2 { margin-bottom: 14px; }
/* reading text the C6 pass missed */
body .ghl-ac-page .section-shell > p, body .ghl-ac-page .section-shell.narrow-shell > p { font-size: 18px; line-height: 1.6; }
body .ghl-ac-page .letter-disclaimer p { font-size: 14px; line-height: 1.55; }
body .ghl-ac-page .review-note p { font-size: 14px; }
body .ghl-ac-page .download-link { font-size: 12px; }
body .ghl-ac-page .site-footer p { font-size: 12px; line-height: 1.5; }
body .ghl-ac-page .media-box p { font-size: 14px; }

/* "Write it. Burn it. Rinse it." = the method, shown as 3 steps, not a stray bold line */
body .ghl-ac-page .letter-h3.kc-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0; text-align: center; }
body .ghl-ac-page .letter-h3.kc-acts span { padding: 10px 18px; border-radius: 999px; background: #17132f; color: #fff2c7; font-size: 18px; font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(242,181,30,.45); }
/* a kicker line right above a centred H2 is centred with it (not the second half of a split H2: 4. below) */
body .ghl-ac-page .letter-h3:not(.kc-acts):not(h2 + .letter-h3):not(h2 + .letter-h3 + .letter-h3):has(+ h2) { text-align: center; color: #5f478b; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }

/* order boxes: buttons never touch, the price reads as the price */
body .ghl-ac-page .primary-cta + .primary-cta { margin-top: 14px; }
body .ghl-ac-page .inline-offer .primary-cta + p { margin: 12px 0; }
body .ghl-ac-page .inline-offer { display: flex; flex-direction: column; align-items: center; gap: 0; }
body .ghl-ac-page .inline-offer > .primary-cta { width: 100%; }
body .ghl-ac-page .kc-offer-art { width: min(380px, 100%); margin: 0 auto 6px; }
body .ghl-ac-page .inline-offer .price-line { margin: 4px 0 8px; font-size: 18px; }
body .ghl-ac-page .inline-offer .price-line strong { font-size: 44px; line-height: 1; letter-spacing: -.01em; }
body .ghl-ac-page .available,
body .ghl-ac-page .inline-offer .available { display: inline-flex; align-items: center; gap: 8px; margin: 10px auto; padding: 6px 14px; border-radius: 999px; background: #eefbf1; color: #17663a; font-size: 14px; font-weight: 600; }
body .ghl-ac-page .available::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22a55a; flex: none; }

/* guarantee: a real seal, a readable letter, centred as one block */
body .ghl-ac-page .guarantee-block { max-width: 680px; margin: 40px auto; padding: 32px 28px; border-radius: 18px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(242,181,30,.55); text-align: left; }
body .ghl-ac-page .guarantee-block > h2 { text-align: center; }
body .ghl-ac-page .guarantee-block p { font-size: 18px; line-height: 1.6; max-width: none; }
body .ghl-ac-page .kc-art.kc-seal { width: 150px; height: auto; margin: -8px auto 8px; filter: drop-shadow(0 8px 18px rgba(95,71,139,.28)); }
body .ghl-ac-page .guarantee-mini { align-items: center; }
body .ghl-ac-page .kc-art.kc-seal-mini { width: 52px; height: auto; flex: none; }

/* AI scenes in the letter + the how-it-works panel */
body .ghl-ac-page .kc-scene { margin: 26px 0; }
body .ghl-ac-page .kc-scene .kc-art { border-radius: 16px; box-shadow: 0 14px 34px rgba(23,19,47,.22); }
/* how-it-works = the AC template's own .flow-comparison (red old flow, green new flow), at C6 sizes:
   the template ships it at 8-11px */
body .ghl-ac-page .kc-flow { margin: 26px 0 34px; gap: 14px; align-items: stretch; }
/* the new flow's outcome sits level with the old flow's "Start over." (Yolan 2026-09-23) */
body .ghl-ac-page .kc-flow .new-flow .flow-arrow { margin-top: auto; }
body .ghl-ac-page .kc-flow .flow-column { gap: 14px; }
body .ghl-ac-page .kc-flow .flow-label { font-size: 14px; text-transform: uppercase; margin-bottom: -4px; color: inherit; }
body .ghl-ac-page .kc-flow .flow-head { font-size: 17px; line-height: 1.3; padding: 12px 10px; }
body .ghl-ac-page .kc-flow .flow-step { font-size: 15px; line-height: 1.35; font-weight: 600; padding: 10px 8px; }
body .ghl-ac-page .kc-flow .flow-step strong { color: inherit; }
body .ghl-ac-page .kc-flow .flow-step:last-child::after,
body .ghl-ac-page .kc-flow .flow-step:has(+ .flow-arrow)::after { display: none; }
body .ghl-ac-page .kc-flow .flow-arrow { margin: -8px 0; line-height: 1; }
/* the connectors: the template draws them in currentColor = the step's white text, invisible on the page */
body .ghl-ac-page .kc-flow .old-flow .flow-step::after { background: #b81230; }
body .ghl-ac-page .kc-flow .new-flow .flow-step::after { background: #13a140; }
@media (min-width: 900px) {
  body .ghl-ac-page .kc-flow { gap: 27px; }
  body .ghl-ac-page .kc-flow .flow-step { font-size: 17px; padding: 12px 14px; }
  body .ghl-ac-page .kc-flow .flow-head { font-size: 19px; }
}
@media (max-width: 640px) {
  body .ghl-ac-page .guarantee-block { padding: 26px 18px; margin: 28px auto; }
  body .ghl-ac-page .inline-offer .price-line strong { font-size: 40px; }
}

/* 4. designer brief pass (2026-09-23) */
/* D5: the second half of a split headline (C21) reads as its continuation: same centring, one
   size down, violet, tight to the H2 above. Sentence case is the copy's. */
body .ghl-ac-page h2:has(+ .letter-h3:not(.kc-acts)) { margin-bottom: 6px; }
/* pass 6 chains two sentence-case H3s under one H2: both are the continuation, stacked tight */
body .ghl-ac-page h2 + .letter-h3:not(.kc-acts):has(+ .letter-h3) { margin-bottom: 6px; }
body .ghl-ac-page h2 + .letter-h3:not(.kc-acts), body .ghl-ac-page h2 + .letter-h3 + .letter-h3:not(.kc-acts) { margin: 0 auto 18px; text-align: center; color: #5f478b; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; max-width: 34em; }
body .ghl-ac-page .hero-copy h2 + .letter-h3:not(.kc-acts), body .ghl-ac-page .hero-copy h2 + .letter-h3 + .letter-h3:not(.kc-acts) { color: #cbb8f5; }
/* D7: a 20+ word H2 is a lead line, not a headline (same tag, same words) */
body .ghl-ac-page h2.kc-long { font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
/* D8: reader-facing text still under 14px */
body .ghl-ac-page .order-form .field { font-size: 16px; }
body .ghl-ac-page .sound-pill { font-size: 14px; }
@media (min-width: 900px) {
  body .ghl-ac-page h2 + .letter-h3:not(.kc-acts), body .ghl-ac-page h2 + .letter-h3 + .letter-h3:not(.kc-acts) { font-size: 23px; }
}
@media (max-width: 640px) {
  /* D12: gift covers were held to 180px (ebook 114px wide) */
  body .ghl-ac-page .bonus-card .kc-art { height: 240px; }
}

/* the upsell pages (/oto1, /oto2-a, /oto2-b, /codex: ac-framework.css) wear the /slo type */
body > main.wrap, body > .site-footer, body > .preview-bar,
body > main.wrap .primary-cta { font-family: Poppins, "Avenir Next", "Segoe UI", Arial, sans-serif; }
body > main.wrap p, body > main.wrap ul.bullets li, body > main.wrap ol.steps li,
body > main.wrap ul.fascinations li { font-size: 18px; line-height: 1.6; }
body > main.wrap .dark-hero h1 { font-weight: 800; line-height: 1.24; letter-spacing: -0.012em; }
body > main.wrap .headline { font-weight: 700; font-size: clamp(23px, 4vw, 29px); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
body > main.wrap .subhead { font-weight: 700; font-size: 20px; line-height: 1.35; text-wrap: balance; }
/* D5 on the upsells: the split H3 (v4_subhead) = one size down, 600, violet, tight to its H2 */
body > main.wrap .headline:has(+ .subhead) { margin-bottom: 6px; }
body > main.wrap .headline + .subhead:has(+ .subhead) { margin-bottom: 6px; }
body > main.wrap .headline + .subhead + .subhead,
body > main.wrap .headline + .subhead { margin-top: 0; margin-bottom: 18px; color: #5f478b; font-size: 20px; font-weight: 600; line-height: 1.3; }
body > main.wrap .dark-hero .headline + .subhead, body > main.wrap .dark-hero .headline + .subhead + .subhead { color: #cbb8f5; }
body > main.wrap .headline.kc-long { font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
body > main.wrap .primary-cta { font-weight: 700; font-size: 19px; line-height: 1.3; }
body > main.wrap .decline-link { font-size: 16px; margin-top: 4px; }
/* C23: product art at the image slot and above the buy buttons */
body > main.wrap .kc-buy-art { margin: 26px auto 6px; padding: 0 20px; max-width: 440px; }
body > main.wrap .kc-buy-art .kc-art { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; margin: 0 auto; }
body > main.wrap .kc-buy-art + .cta-wrap { margin-top: 10px; }
/* C29: the buy box under the OTO video (AC video page); the script under it is the supplement */
body > main.wrap .dark-hero .kc-topbox { margin: 22px auto 0; max-width: 560px; text-align: center; }
body > main.wrap .dark-hero .kc-topbox .kc-buy-art { margin-top: 8px; }
body > main.wrap .dark-hero .kc-topbox .decline-link { display: inline-block; margin: 14px auto 0; color: #ddd3f5; text-decoration: underline; text-underline-offset: 3px; }
body > main.wrap .dark-hero .kc-transcript-label { margin: 34px auto 0; padding-top: 18px; max-width: 560px; border-top: 1px solid rgba(255,255,255,.18); text-align: center; color: #cbb8f5; font-size: 16px; font-weight: 600; }
@media (min-width: 900px) {
  body > main.wrap .headline + .subhead, body > main.wrap .headline + .subhead + .subhead { font-size: 22px; }
}
/* one button per buy box (Yolan 2026-09-23): the box's second button line reads as a text link */
body .ghl-ac-page .kc-cta-link { display: block; margin: 12px auto 4px; text-align: center; color: #5f478b; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body .ghl-ac-page .kc-cta-link:hover { color: #7c32f5; }

/* C4 (D13): "What you have after one evening" = the only list in the hero copy, right above the
   first buy box: a gold-ticked checklist on the dark hero, one line each */
body .ghl-ac-page .hero-copy > p:has(+ ul.letter-bullets) { margin: 18px 0 8px; color: #f2b51e; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body .ghl-ac-page .hero-copy > ul.letter-bullets { list-style: none; margin: 0 0 8px; padding: 16px 18px; display: grid; gap: 12px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(242,181,30,.35); }
body .ghl-ac-page .hero-copy > ul.letter-bullets li { position: relative; margin: 0; padding: 0 0 0 32px; color: #fff2c7; font-size: 17px; line-height: 1.45; font-weight: 500; }
body .ghl-ac-page .hero-copy > ul.letter-bullets li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #f2b51e; box-shadow: none; }
body .ghl-ac-page .hero-copy > ul.letter-bullets li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 5px; height: 9px; border: solid #17132f; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* 5. AC page-design components restored (Yolan 2026-09-24): the "HERE'S EVERYTHING INCLUDED"
   bundle card (sticky beside the letter on desktop, inline after the how-it-works panel on
   phone), repeat buy boxes in the letter, the system section's fan + stats row. C6 sizes. */
@media (min-width: 901px) {
  body .ghl-ac-page .section-grid.kc-with-bundle { max-width: 1180px; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.95fr); }
}
body .ghl-ac-page .bundle-card { padding: 18px 18px 20px; }
body .ghl-ac-page .bundle-card h3 { font-size: 15px; font-weight: 800; letter-spacing: .05em; }
body .ghl-ac-page .bundle-card .product-stack-small { margin: 8px auto 4px; }
body .ghl-ac-page .bundle-count { margin: 4px 0 10px; font-size: 13px; letter-spacing: .06em; color: #5f478b; }
body .ghl-ac-page .bundle-row { grid-template-columns: 48px 1fr auto; gap: 10px; }
body .ghl-ac-page .bundle-row strong { font-size: 15px; line-height: 1.3; }
body .ghl-ac-page .bundle-row small { font-size: 13px; }
body .ghl-ac-page .bundle-row p { font-size: 13px; line-height: 1.4; color: #5c5868; }
body .ghl-ac-page .bundle-row > b { font-size: 12px; padding: 4px 7px; }
body .ghl-ac-page .bundle-total { margin: 14px 0 12px; font-size: 14px; font-weight: 600; }
body .ghl-ac-page .bundle-total strong { font-size: 24px; }
body .ghl-ac-page .bundle-guarantee { font-size: 13px; }
/* desktop aside: name + value only, so the whole card (button included) fits one screen */
body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row p { display: none; }
body .ghl-ac-page .kc-with-bundle > .bundle-card .product-stack-small { width: 210px; }
body .ghl-ac-page .bundle-row .kc-cover { max-height: 58px; object-fit: contain; }
body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row { padding: 7px 0; }
body .ghl-ac-page .kc-bundle-inline { display: none; margin: 30px auto 34px; }
@media (max-width: 900px) {
  body .ghl-ac-page .kc-with-bundle > .bundle-card { display: none; }
  body .ghl-ac-page .kc-bundle-inline { display: block; }
}
body .ghl-ac-page .feature-fan p { font-size: 16px; line-height: 1.35; }
body .ghl-ac-page .stats-row strong { font-size: 22px; }
body .ghl-ac-page .stats-row span { font-size: 14px; }
/* shorter laptop screens: drop the aside's art + count so its button stays on screen */
@media (min-width: 901px) and (max-height: 899px) {
  body .ghl-ac-page .kc-with-bundle > .bundle-card .product-stack-small,
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-count { display: none; }
}
/* laptops at 125-150% zoom (Yolan's: 1280x665) and any window under ~900px high (the full card is ~850px +
   18px top; a 1440x900 screen shows ~790px): tighter rows, then list only as names */
@media (min-width: 901px) and (max-height: 900px) {
  body .ghl-ac-page .kc-with-bundle > .bundle-card { padding: 14px 16px 14px; }
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row { padding: 4px 0; grid-template-columns: 38px 1fr auto; }
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row .kc-cover { max-height: 40px; width: 38px; }
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-total { margin: 8px 0 8px; }
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-total strong { font-size: 21px; }
}
@media (min-width: 901px) and (max-height: 640px) {
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row .kc-cover,
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row small { display: none; }
  body .ghl-ac-page .kc-with-bundle > .bundle-card .bundle-row { grid-template-columns: 1fr auto; padding: 3px 0; }
}
/* last resort (very short windows): the card scrolls inside itself, never past the screen */
@media (min-width: 901px) {
  body .ghl-ac-page .kc-with-bundle > .bundle-card { max-height: calc(100vh - 36px); overflow-y: auto; }
}

/* the hero order card is sticky in the template, but with the art + fields it is ~900px tall: on a
   laptop screen its bottom (the guarantee) never came into view (Yolan 2026-09-24). It sticks only
   where the whole card fits; everywhere else it scrolls with the page. */
@media (max-height: 999px) {
  body .ghl-ac-page .offer-card { position: static; }
}

/* the footer disclosure (copy pass 8, V4_DISCLOSURE) is reader-facing, not preview chrome: C6 floor */
body .ghl-ac-page .site-footer p.kc-disclosure { max-width: 680px; margin: 0 auto 12px; font-size: 14px; line-height: 1.55; }

/* 6. C45: the phone buy bar (thirdeyecode.com/book idea, one compact row: price left, button
   right, ~64px + the phone's safe area). Phone only: desktop keeps the sticky bundle card. */
body .kc-sticky { display: none; }
@media (max-width: 900px) {
  body .kc-sticky {
    display: flex; align-items: center; gap: 12px; box-sizing: border-box;
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #17132f; border-top: 1px solid #9b68ff;
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 -6px 18px rgba(11, 9, 32, 0.3); transition: transform 0.25s ease;
  }
  body .kc-sticky.is-hidden { transform: translateY(calc(100% + 12px)); }
  body .kc-sticky .kc-sticky-price { flex: 0 0 auto; margin: 0; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: left; }
  body .kc-sticky .kc-sticky-price strong { display: block; color: #f2b51e; font-size: 20px; font-weight: 800; }
  body .kc-sticky .primary-cta {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; margin: 0; padding: 6px 10px; box-sizing: border-box;
    color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center;
    border-radius: 6px; background: linear-gradient(180deg, #8237ff, #6821dc);
    box-shadow: 0 5px 14px rgba(109, 40, 217, 0.3);
  }
  body .kc-sticky .primary-cta span, body .kc-sticky .primary-cta strong { min-width: 0; font-size: inherit; }
  body .site-footer { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { body .kc-sticky { transition: none; } }

/* 7. client videos (2026-09-24): numbered testimonial slots #1-#3 on /slo (V4_TESTI in
   build_v2.py). Portrait 9:16 clips, cover image, nothing loads before the tap. The caption
   (real message, read by an AI avatar, results not typical) is copy, so it keeps the 14px floor. */
body .ghl-ac-page .kc-testi { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: center; margin: 4px 0 26px; }
body .ghl-ac-page .kc-testi video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; background: #17132f; box-shadow: 0 8px 22px rgba(26, 19, 46, 0.18); }
body .ghl-ac-page .kc-testi figcaption, body .ghl-ac-page .kc-testi-quote { font-family: Poppins, "Segoe UI", Arial, sans-serif; }
body .ghl-ac-page .kc-testi blockquote, body .ghl-ac-page .kc-testi-quote blockquote { margin: 0 0 10px; font-size: 19px; font-style: italic; line-height: 1.5; color: #2a1f4a; }
body .ghl-ac-page .kc-testi-name { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #6821dc; }
body .ghl-ac-page .kc-testi-note { margin: 0; font-size: 14px; line-height: 1.45; color: #5d5670; }
body .ghl-ac-page .kc-testi-quote { padding: 18px 18px 16px; }
@media (max-width: 700px) {
  body .ghl-ac-page .kc-testi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body .ghl-ac-page .kc-testi video { width: min(320px, 100%); margin: 0 auto; }
  body .ghl-ac-page .kc-testi figcaption { text-align: center; }
}

/* 8. hero VSL (Yolan 2026-09-25): portrait 9:16 video in the hero frame (V4_VSL_HTML in build_v2.py).
   Height-capped so the order box stays near the fold: desktop ≤ 640px tall, phone ≤ 70% of the screen.
   Poster only until the tap; the tap starts it with sound (adaptive HLS from R2). */
body .ghl-ac-page .video-frame[data-kc-vsl] { aspect-ratio: auto; display: flex; justify-content: center; align-items: center; padding: 14px 0; background: #120e26; }
body .ghl-ac-page .video-frame[data-kc-vsl]::after { display: none; }
body .ghl-ac-page [data-kc-vsl] video { display: block; height: min(640px, 78vh); width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 8px; background: #000; }
body .ghl-ac-page .kc-vsl-play { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 0 min(30%, 200px); gap: 12px; border: 0; background: rgba(10, 6, 30, 0.12); color: #fff; cursor: pointer; font-family: Poppins, "Segoe UI", Arial, sans-serif; }
body .ghl-ac-page .kc-vsl-play span { width: 84px; height: 84px; display: grid; place-items: center; border: 6px solid #fff; border-radius: 50%; background: rgba(104, 33, 220, 0.72); font-size: 32px; padding-left: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; }
body .ghl-ac-page .kc-vsl-play:hover span { transform: scale(1.06); }
body .ghl-ac-page .kc-vsl-play b { padding: 6px 14px; border-radius: 999px; background: #ef493e; font-size: 16px; font-weight: 700; }
body .ghl-ac-page .kc-vsl-play[hidden] { display: none; }
@media (max-width: 620px) {
  body .ghl-ac-page .video-frame[data-kc-vsl] { padding: 0; background: transparent; border: 0; box-shadow: none; }
  body .ghl-ac-page [data-kc-vsl] video { height: min(70vh, 620px); }
  body .ghl-ac-page .kc-vsl-play span { width: 70px; height: 70px; font-size: 26px; }
}