/* askclaude.css v4 (2026-10-08)
   The sales page runs on the Blueprint Pass control-room engine (/blueprint-pass/control-room.css +
   blueprint-pass.css + /assets/mockup-fx.css). Everything below is this page's small override set,
   scoped `.control-room.askclaude`. Colors are the engine's own tokens or rgb() values.

   Block 1 keeps the v2 shell for /askclaude/transition (the post-checkout sign-in page still loads
   this file and is not part of the v4 build). Those rules are scoped to body:not(.control-room) so
   nothing leaks into the sales page. */

/* ============ 1. transition page shell (v2, unchanged tokens) ============ */
:root{
  --violet:#5a3fd0;--violet-top:#6a4ee0;--violet-ink:#4b33b6;--violet-bright:#8163ff;
  --violet-soft:#b9a8ff;--violet-tint:#c3b3ff;
  --ink:#14161c;--ink-2:#332f4a;--muted:#5b6270;
  --bg:#ffffff;--paper:#f7f8fb;--paper-2:#faf9fc;--tint:#f6f2ff;--line:#e2e5ec;
  --green:#22c55e;--green-deep:#16a34a;--green-ink:#052e14;
  --shadow-cta:0 4px 10px rgba(5,46,20,.32),0 16px 38px -10px rgba(34,197,94,.62);
  --r-pill:60px;--pad-x:30px;--pad-y:60px;
}
body:not(.control-room){margin:0;background:var(--bg);color:var(--muted);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:not(.control-room) img{max-width:100%;height:auto}
body:not(.control-room) a{color:inherit}
body:not(.control-room) p{margin:0}
body:not(.control-room) button{font:inherit;color:inherit}
body:not(.control-room) h1{color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 16px}
body:not(.control-room) .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-ink);background:var(--tint);border:1px solid color-mix(in srgb,var(--violet-soft) 45%,transparent);border-radius:var(--r-pill);padding:6px 14px}
body:not(.control-room) .section{padding:var(--pad-y) var(--pad-x)}
body:not(.control-room) .center{text-align:center;margin:0 auto}
body:not(.control-room) .lead{font-size:18px;line-height:1.5;margin:12px 0}
body:not(.control-room) .micro{font-size:13px;line-height:1.5}
body:not(.control-room) .btn{display:inline-block;text-align:center;border-radius:var(--r-pill);padding:18px 43px;font-weight:700;font-size:18px;line-height:1.5;text-decoration:none;border:0;cursor:pointer;background:linear-gradient(180deg,var(--green),var(--green-deep));color:#ffffff;box-shadow:var(--shadow-cta)}

/* ============ 2. v4 sales page overrides (engine first, these second) ============ */

/* The ONE checkout pill: the engine's green on the yellow pill shape (owner answer 7) */
.control-room.askclaude .cr-cta.bp-money .cr-cta-pill { background: linear-gradient(180deg, rgb(53, 212, 85) 0, rgb(18, 165, 44) 55%, rgb(0, 140, 18) 100%); color: var(--cr-white); text-shadow: 0 1px 2px rgba(0, 60, 8, 0.5); }
.control-room.askclaude .cr-cta.bp-money .cr-cta-sub { color: rgb(0, 96, 12); }
.control-room.askclaude .cr-cta[aria-disabled="true"] { cursor: wait; }
.control-room.askclaude .cr-cta[aria-disabled="true"] .cr-cta-pill { filter: saturate(0.6); }
.control-room.askclaude .bp-checkout-error { display: none; color: var(--cr-red); font-weight: 600; }
.control-room.askclaude .bp-checkout-error.is-visible { display: block; }

/* "Value: $X FREE" pill when it sits on a white gift row ("Normally $X / Yours free") */
.control-room.askclaude .paint-lightest .bp-value { margin-top: 18px; border-color: rgba(90, 63, 208, 0.35); background: rgba(90, 63, 208, 0.08); color: var(--cr-ink); }
.control-room.askclaude .paint-lightest .bp-value span { color: rgba(35, 31, 53, 0.6); }
.control-room.askclaude .paint-lightest .bp-value s { color: rgba(35, 31, 53, 0.78); }
.control-room.askclaude .paint-lightest .bp-value b { color: rgb(0, 140, 18); }

/* Gift 01 "NEW" ribbon on the dark gift header */
.control-room.askclaude .row-09 { position: relative; }
.control-room.askclaude .bp-ribbon { position: absolute; top: 22px; right: 26px; padding: 7px 16px; border-radius: 999px; background: linear-gradient(180deg, rgb(206, 18, 18), rgb(150, 0, 0)); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7); color: var(--cr-white); font: 800 14px/1 var(--cr-font-head); letter-spacing: 0.16em; }

/* Gift 1 to 10 eyebrow ("Exclusive for Diamond Members"; was the gift 08 to 10 ("Fast-action bonus" / "Annual bonus") under the Free Gift pill */
.control-room.askclaude .bp-eyebrow { margin-top: -6px; padding: 0 0 4px; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }

/* Ask Claude avatar in a round frame (letter rows) */
.control-room.askclaude .cr-pic:has(> .bp-avatar) { max-width: 300px; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 38px -16px rgba(25, 12, 78, 0.55); }
.control-room.askclaude .cr-pic > img.bp-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The gift mockups are dark cards (not white packshots): rounded, no multiply, a soft lift */
.control-room.askclaude .cr-pic[data-img$="-mockup"] > img, .control-room.askclaude .cr-pic[data-img="s05.mockup-hero"] > img, .control-room.askclaude .cr-pic[data-img="s12.gift1-mockup"] > img { border-radius: 14px; }
.control-room.askclaude .cr-pic[data-img$="-mockup"], .control-room.askclaude .cr-pic[data-img="s05.mockup-hero"] { border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(25, 12, 78, 0.5); }
.control-room.askclaude .bp-recap-thumb { mix-blend-mode: normal; border-radius: 6px; }
.control-room.askclaude .cr-pic[data-img="s02.room2-screen"] > .bp-side-art { mix-blend-mode: normal; border-radius: 14px; }

/* Recap: ten rows, the total line, the split line */
.control-room.askclaude .bp-credits { font-size: 18px; padding: 6px 0; }
@media (min-width: 771px) {
  .control-room.askclaude .h-44 { font-size: 78px; }
}

/* Proof band (new block): six sanctioned quotes on the engine's white card */
.control-room.askclaude .bp-proof .cr-ci { height: auto; margin-bottom: 20px; }
.control-room.askclaude .bp-quote { position: relative; height: 100%; margin: 0; padding: 26px 26px 22px; border: 1px solid rgba(90, 63, 208, 0.18); border-radius: 18px; background: var(--cr-tint); box-shadow: 0 14px 34px -22px rgba(25, 12, 78, 0.45); text-align: left; }
.control-room.askclaude .bp-quote-top { max-width: 760px; margin: 0 auto; }
.control-room.askclaude .bp-quote blockquote { margin: 0 0 16px; font-family: var(--cr-font-body); font-size: 17px; line-height: 1.5; color: var(--cr-ink); }
.control-room.askclaude .bp-quote figcaption { display: flex; align-items: center; gap: 10px; font-family: var(--cr-font-head); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--cr-blue-deep); }
.control-room.askclaude .bp-avatar-img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.control-room.askclaude .bp-tag-top { display: inline-block; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px; background: var(--cr-blue-deep); color: var(--cr-white); font: 800 12px/1 var(--cr-font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.control-room.askclaude .bp-proof-note { align-self: center; font-size: 15px; opacity: 0.75; text-align: left; }

/* FAQ (new block): plain details/summary in the engine's type */
.control-room.askclaude .bp-faq { border-bottom: 1px dashed rgb(199, 199, 199); }
.control-room.askclaude .bp-faq:first-of-type { border-top: 1px dashed rgb(199, 199, 199); }
.control-room.askclaude .bp-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; list-style: none; cursor: pointer; font-family: var(--cr-font-head); font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; text-align: left; color: var(--cr-ink); }
.control-room.askclaude .bp-faq > summary::-webkit-details-marker { display: none; }
.control-room.askclaude .bp-faq > summary:focus-visible { outline: 3px solid var(--cr-blue-mid); outline-offset: 2px; border-radius: 8px; }
.control-room.askclaude .bp-faq-chev { flex: none; width: 22px; height: 22px; color: var(--cr-blue-deep); transition: transform 0.2s ease; }
.control-room.askclaude .bp-faq[open] > summary > .bp-faq-chev { transform: rotate(180deg); }
.control-room.askclaude .bp-faq > .cr-p { margin: 0; padding: 0 4px 18px; }

/* Signature line under the handwritten name */
.control-room.askclaude .bp-sign-sub { padding-top: 0; margin-top: -6px; font-size: 16px; opacity: 0.75; }

/* Guarantee seals (v4.3): the Blueprint Pass r8 seals, one-change KIE edits with this page's wording, at the engine's own img-16 size */

/* Phones */
@media (max-width: 770px) {
  .control-room.askclaude .bp-ribbon { top: 4px; right: 8px; font-size: 12px; padding: 6px 12px; }
  .control-room.askclaude .cr-pic:has(> .bp-avatar) { max-width: 220px; }
  .control-room.askclaude .bp-quote { padding: 20px 18px 18px; }
  .control-room.askclaude .bp-quote blockquote { font-size: 16px; }
  .control-room.askclaude .bp-faq > summary { font-size: 17px; padding: 14px 2px; }
  .control-room.askclaude .cr-pic[data-img="s08.reason1-devices"] { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .control-room.askclaude .bp-faq-chev { transition: none; }
}

/* Owner 2026-10-08 (v4.2): back to the ORIGINAL dark hero on the Blueprint stage image. No panel, no border,
   no shadow edge: a faint violet radial at the top, and ONE soft continuation gradient at the bottom that
   glows violet and melts into the page color behind the letter card. */
.control-room.askclaude #hero {
  background-image: linear-gradient(180deg, rgba(16, 10, 40, 0) 62%, rgba(90, 63, 208, 0.22) 86%, var(--cr-page) 100%), radial-gradient(ellipse 70% 45% at 50% 0%, rgba(129, 99, 255, 0.22), rgba(129, 99, 255, 0) 70%), url("/blueprint-pass/img/gen-stage.webp");
  background-size: 100% 100%, 100% 100%, cover; background-repeat: no-repeat;
  padding-bottom: 44px;
}
/* Owner 2026-10-08: the three pills a size up (label scales with the pill width) */
.control-room.askclaude .img-01 > .cr-cta { width: 40%; }
.control-room.askclaude .img-10 > .cr-cta { width: 600px; max-width: 100%; }
@media (max-width: 770px) {
  .control-room.askclaude .img-01 > .cr-cta, .control-room.askclaude .img-10 > .cr-cta { width: 96%; }
}
/* Owner 2026-10-08: "And get Ask Claude AI for free" reads clearly under every pill */
.control-room.askclaude .cr-cta-sub { font-size: max(3.3cqw, 13px); font-weight: 700; }
.control-room.askclaude .paint-darkest .cr-cta-sub, .control-room.askclaude #hero .cr-cta-sub { color: rgb(226, 218, 255); }
/* 2026-10-08: the nine Diamond images are the real transparent packshots recovered from the original page, not dark cards */
.control-room.askclaude .cr-pic:has(> img[src*="mock-diamond-"]) { box-shadow: none; border-radius: 0; }
.control-room.askclaude .cr-pic > img[src*="mock-diamond-"] { border-radius: 0; filter: drop-shadow(0 18px 22px rgba(10, 6, 30, 0.35)); }
.control-room.askclaude .bp-recap-thumb[src*="mock-diamond-"] { border-radius: 0; object-fit: contain; }

/* v4.2 (2026-10-08): every gift box carries the full Diamond bonus-card shape
   (eyebrow, title stack, body, "You'll get:" bullets, finale/closer, value pill, images). */
.control-room.askclaude .row-10.bp-more { padding-top: 5px; }
.control-room.askclaude .bp-eyebrow { margin-top: 2px; }
.control-room.askclaude .bp-mid { margin: 6px 0 4px; font: 900 26px/1.15 var(--cr-font-head); letter-spacing: -0.02em; text-transform: uppercase; text-align: left; color: var(--cr-ink); }
.control-room.askclaude .c-12 > .cr-ci > .bp-mid { text-align: center; }
.control-room.askclaude .bp-note { margin: 12px 0; padding: 12px 16px; border-left: 4px solid rgb(206, 18, 18); border-radius: 0 10px 10px 0; background: rgba(206, 18, 18, 0.06); color: var(--cr-ink); font: 600 16px/1.5 var(--cr-font-body); text-align: left; }
.control-room.askclaude .bp-note b { font-weight: 900; }
.control-room.askclaude .bp-finale { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 26px auto 0; font: 900 28px/1.15 var(--cr-font-head); letter-spacing: -0.02em; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--cr-ink); }
.control-room.askclaude .bp-finale b { font-weight: 900; color: rgb(0, 128, 16); }
.control-room.askclaude .bp-finale-note { margin: 10px auto 0; max-width: 640px; font: 800 17px/1.4 var(--cr-font-head); text-align: center; color: var(--cr-ink); }
.control-room.askclaude .bp-closer { max-width: 760px; margin: 22px auto 0; padding-top: 16px; border-top: 1px dashed rgb(199, 199, 199); font: 500 17px/1.55 var(--cr-font-body); text-align: center; color: var(--cr-ink); }
.control-room.askclaude .bp-tall { max-width: 300px; margin-left: auto; margin-right: auto; }
.control-room.askclaude .bp-tall > .cr-pic > img { filter: drop-shadow(0 18px 22px rgba(10, 6, 30, 0.3)); }
/* Info-Riches: the nine course covers (transparent packshots, never cropped) */
.control-room.askclaude .bp-courses { margin: 18px auto 6px; }
.control-room.askclaude .bp-course-cover > .cr-pic > img { filter: drop-shadow(0 10px 14px rgba(10, 6, 30, 0.28)); }
.control-room.askclaude .bp-course-cover > figcaption { font-size: 14px; }
/* Vacation: the owner's own family photos */
.control-room.askclaude .bp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 4px; }
.control-room.askclaude .bp-photo > .cr-pic > img.round { object-position: center 30%; }
/* Recap collage: the full Diamond bundle above the ten rows */
.control-room.askclaude .img-09.bp-bundle { margin-top: 0; margin-bottom: 18px; }
@media (max-width: 770px) {
  .control-room.askclaude .bp-mid { font-size: 21px; text-align: center; }
  .control-room.askclaude .bp-finale { font-size: 21px; }
  .control-room.askclaude .bp-finale-note { font-size: 15px; }
  .control-room.askclaude .bp-closer { font-size: 16px; }
  .control-room.askclaude .bp-note { font-size: 15px; }
  .control-room.askclaude .bp-courses { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .control-room.askclaude .bp-course-cover > figcaption { font-size: 13px; }
  .control-room.askclaude .bp-photos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .control-room.askclaude .bp-photo:first-child { grid-column: 1 / -1; }
}

/* v4.2 owner format rule: every gift title stack 7-10 is TWO lines, never three.
   Line 1 = .bp-t1 (violet, h-33 size), line 2 = .bp-t2 (silver). Both nowrap and sized to fit
   the card; .bp-t2-long shrinks line 2 when it is a long title. Gifts 1-6 keep their own stacks. */
.control-room.askclaude .row-12 { position: relative; }
.control-room.askclaude .bp-t1, .control-room.askclaude .bp-t2 { white-space: nowrap; }
.control-room.askclaude .bp-t2 { font-size: 56px; }
.control-room.askclaude .bp-t2.bp-t2-long { font-size: 48px; }
@media (max-width: 770px) {
  .control-room.askclaude .bp-t1 { font-size: min(28px, 6.2vw); }
  .control-room.askclaude .bp-t2 { font-size: min(40px, 6.2vw); }
  .control-room.askclaude .bp-t2.bp-t2-long { font-size: min(40px, 4.6vw); }
  /* ANNUAL BONUS badge: smaller on phones so it clears the Free Gift pill and the title */
  /* phones: the badge leaves the corner and sits in flow, right-aligned, between the pill and the eyebrow */
  .control-room.askclaude .bp-ribbon-annual { position: static; display: block; width: fit-content; margin: 8px 4px 4px auto; padding: 5px 10px; font-size: 11px; letter-spacing: 0.12em; }
}

/* v4.2 owner copy (2026-10-08): "Yes! Give Me Diamond + Ask Claude AI" is half again as long as the old
   label, so the hero + recap pills step the label down to stay on one line inside the pill, and the
   subtitle ("Full year, 2 months free. 30-day money-back guarantee.") ends before the cursor art (wraps to 2 balanced lines when narrow). */
.control-room.askclaude .cr-cta[data-cta="hero"] .cr-cta-pill, .control-room.askclaude .cr-cta[data-cta="recap"] .cr-cta-pill { font-size: 4.3cqw; }
.control-room.askclaude .cr-cta[data-cta="hero"] .cr-cta-sub, .control-room.askclaude .cr-cta[data-cta="recap"] .cr-cta-sub { right: 17%; font-size: max(2.7cqw, 11.5px); white-space: normal; text-wrap: balance; }
@media (max-width: 770px) {
  /* phones: the subtitle drops just under the pill art, full width, so the cursor and swoosh never cover it */
  .control-room.askclaude .cr-cta[data-cta="hero"], .control-room.askclaude .cr-cta[data-cta="recap"] { margin-bottom: 24px; }
  .control-room.askclaude .cr-cta[data-cta="hero"] .cr-cta-sub, .control-room.askclaude .cr-cta[data-cta="recap"] .cr-cta-sub { top: 99%; left: 0; right: 0; font-size: 11.5px; white-space: nowrap; }
}

/* ============ v4.3 owner feedback (2026-10-08) ============ */

/* Proof reads as the tail of the Reason #3 card: one white band, no corner break, only its headline between */
.control-room.askclaude #catch-reasons { z-index: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, calc(100% + 80px) calc(100% + 80px), 100% calc(100% + 80px), 100% 100%, 0 100%, 0 calc(100% + 80px), -80px calc(100% + 80px)); }
.control-room.askclaude #proof { margin-top: -4px; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 10px; background-image: none; background-color: var(--cr-white); box-shadow: 0 0 56px 0 var(--cr-blue-glow); clip-path: polygon(-80px -80px, 0 -80px, 0 2px, 100% 2px, 100% -80px, calc(100% + 80px) -80px, calc(100% + 80px) calc(100% + 80px), -80px calc(100% + 80px)); }
.control-room.askclaude #proof > .cr-inner > .row-02 { margin-top: 30px; }

/* FAQ reads as the tail of the guarantee card: same band, no corner break, no top gap */
.control-room.askclaude #guarantee-detail { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.control-room.askclaude #faq { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; background: var(--cr-white); }
.control-room.askclaude #faq > .cr-inner > .row-02 { margin-top: 30px; }

/* Student marquee, ported from the earningblueprints.com testimonial scroller: two rows, row 1 right-to-left,
   row 2 left-to-right, a duplicated set per track for a seamless -50% loop, pause on hover/focus.
   Row 2 and every duplicate set are aria-hidden, so each quote is read once. */
.control-room.askclaude .bp-mq { display: block; width: 100%; padding: 10px 0 20px; }
.control-room.askclaude .bp-mq-row { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.control-room.askclaude .bp-mq-row + .bp-mq-row { margin-top: 8px; }
.control-room.askclaude .bp-mq-track { display: flex; width: max-content; }
.control-room.askclaude .bp-mq-set { display: flex; align-items: flex-start; gap: 16px; padding-right: 16px; }
.control-room.askclaude .bp-mq-rtl { animation: bp-mq-rtl 34s linear infinite; }
.control-room.askclaude .bp-mq-ltr { animation: bp-mq-ltr 38s linear infinite; }
.control-room.askclaude .bp-mq-row:hover .bp-mq-track, .control-room.askclaude .bp-mq-row:focus-within .bp-mq-track { animation-play-state: paused; }
@keyframes bp-mq-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bp-mq-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.control-room.askclaude .bp-mq-card { position: relative; display: flex; flex-direction: column; flex: none; width: 300px; height: auto; margin: 0; padding: 20px; border: 1px solid rgba(90, 63, 208, 0.18); border-radius: 10px; background: var(--cr-tint); box-shadow: 0 8px 18px -10px rgba(25, 12, 78, 0.35); text-align: left; }
.control-room.askclaude .bp-mq-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(35, 31, 53, 0.15); }
.control-room.askclaude .bp-mq-avatar { flex: none; width: 56px; height: 56px; border: 2px solid var(--cr-white); border-radius: 50%; object-fit: cover; box-shadow: 0 6px 12px -6px rgba(25, 12, 78, 0.5); }
.control-room.askclaude .bp-mq-head figcaption { font: 600 16px/1.2 var(--cr-font-head); letter-spacing: -0.01em; color: var(--cr-ink); }
.control-room.askclaude .bp-mq-role { margin: 4px 0 0; font: 800 11px/1 var(--cr-font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cr-blue-deep); }
.control-room.askclaude .bp-mq-icon { flex: none; width: 28px; height: 28px; margin-left: auto; color: var(--cr-blue-deep); opacity: 0.55; }
.control-room.askclaude .bp-mq-card blockquote { margin: 14px 0 0; font: 400 15px/1.6 var(--cr-font-body); color: var(--cr-ink); }
@media (max-width: 770px) {
  .control-room.askclaude .bp-mq-card { width: 272px; }
}
@media (prefers-reduced-motion: reduce) {
  .control-room.askclaude .bp-mq-track { animation: none; width: auto; }
  .control-room.askclaude .bp-mq-row { -webkit-mask-image: none; mask-image: none; }
  .control-room.askclaude .bp-mq-row[aria-hidden="true"], .control-room.askclaude .bp-mq-set[aria-hidden="true"] { display: none; }
  .control-room.askclaude .bp-mq-set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
}

/* Wait reason #3: the brain art as the base, the Ask Claude avatar as a round badge (pure CSS layering) */
.control-room.askclaude .bp-layered > .bp-layer-avatar { position: absolute; right: 2%; bottom: 3%; width: 30%; height: auto; aspect-ratio: 1 / 1; border: 4px solid var(--cr-white); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cr-blue-deep), 0 16px 30px -10px rgba(25, 12, 78, 0.6); }

/* Footer: the AI Skills Marketing Challenge front-page footer logo (max 120px wide, 60% opacity, 24px above the copyright line) */
.control-room.askclaude footer.sec-13 { padding-top: 48px; }
.control-room.askclaude .img-20 > .bp-foot-logo { width: 120px; opacity: 0.6; margin-bottom: 9px; }
@media (min-width: 640px) {
  .control-room.askclaude footer.sec-13 { padding-top: 64px; }
}

/* v4.3 spacing: the v4.2 extra rows (book + one-pager, course grid, portrait, family photos) breathe like the
   engine's row-10/row-11 pair instead of butting into the row above and the "You'll get:" row below */
.control-room.askclaude .row-10.bp-more { padding-top: 20px; padding-bottom: 20px; }
.control-room.askclaude .bp-courses { margin-bottom: 0; }
.control-room.askclaude [data-slot="s06.gift3.courses-note"] { margin-top: 16px; }
.control-room.askclaude .bp-photos { margin-bottom: 12px; }
.control-room.askclaude .img-09.bp-bundle { margin-top: 12px; margin-bottom: 22px; }
/* 2026-10-08: Diamond Income Streams is software; its packshot has a pure white background, so it multiplies into the light rows (no drop-shadow, which would outline the white box) */
.control-room.askclaude .cr-pic > img[src*="income-streams-software"], .control-room.askclaude .bp-recap-thumb[src*="income-streams-software"] { mix-blend-mode: multiply; filter: none; }
.control-room.askclaude .cr-pic.fx-sweep:has(> img[src*="income-streams-software"]) { isolation: auto; }
/* Owner 2026-10-08: the 16:9 Brain Transfer hero fills the text column (was sized for the old square card) */
.control-room.askclaude .img-05:has(> [data-img="s05.mockup-hero"]) > * { width: 100%; max-width: 900px; }

/* Owner 2026-10-08 (gift boxes): text breathes at line-height 2 with clear space between paragraphs, the
   text + image columns center against each other, and the Income Streams + Vacation Voucher images get
   the wider share of their row so the product reads at 1440 and 390. */
.control-room.askclaude #gifts .cr-p.p-03, .control-room.askclaude #gifts .cr-ul > li, .control-room.askclaude #gifts .bp-closer { line-height: 2; }
.control-room.askclaude #gifts .cr-ul > li + li { margin-top: 6px; }
.control-room.askclaude #gifts .cr-p.p-03 + .cr-p.p-03 { margin-top: 14px; }
.control-room.askclaude #gifts .row-10:not(.bp-more) { align-items: center; }
@media (min-width: 771px) {
  .control-room.askclaude #gifts .row-10:has([data-img="s06.gift2-mockup"]) > .cr-col:first-child { width: 44%; }
  .control-room.askclaude #gifts .row-10:has([data-img="s06.gift2-mockup"]) > .cr-col:last-child { width: 56%; }
  .control-room.askclaude #gifts .row-10:has([data-img="s06.gift10-mockup"]) > .cr-col:first-child { width: 46%; }
  .control-room.askclaude #gifts .row-10:has([data-img="s06.gift10-mockup"]) > .cr-col:last-child { width: 54%; }
}

/* Owner 2026-10-08 (proof): John Thornhill's card sits darker than the student cards, with his award photo
   large enough to read and a slow violet-gold border glow. Static under reduced motion. */
.control-room.askclaude .bp-thornhill { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 30px; align-items: center; max-width: 900px; padding: 26px; border: 0; background: linear-gradient(160deg, rgb(38, 24, 92) 0%, rgb(20, 12, 52) 100%); box-shadow: 0 22px 48px -22px rgba(25, 12, 78, 0.75); isolation: isolate; }
.control-room.askclaude .bp-thornhill::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 20px; background: linear-gradient(135deg, rgb(129, 99, 255), rgb(232, 190, 92), rgb(129, 99, 255)); opacity: 0.85; animation: bp-th-glow 4.5s ease-in-out infinite; }
.control-room.askclaude .bp-thornhill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px; background: linear-gradient(160deg, rgb(38, 24, 92) 0%, rgb(20, 12, 52) 100%); }
@keyframes bp-th-glow { 0%, 100% { box-shadow: 0 0 14px 1px rgba(129, 99, 255, 0.45), 0 0 34px 4px rgba(232, 190, 92, 0.18); } 50% { box-shadow: 0 0 22px 4px rgba(129, 99, 255, 0.7), 0 0 52px 10px rgba(232, 190, 92, 0.32); } }
.control-room.askclaude .bp-th-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
.control-room.askclaude .bp-thornhill .bp-tag-top { background: linear-gradient(180deg, rgb(240, 204, 112), rgb(212, 164, 60)); color: rgb(36, 22, 6); }
.control-room.askclaude .bp-th-headline { margin: 0 0 14px; font: 700 19px/1.35 var(--cr-font-head); letter-spacing: -0.01em; color: rgb(240, 204, 112); }
.control-room.askclaude .bp-thornhill blockquote { color: rgba(255, 255, 255, 0.92); }
.control-room.askclaude .bp-thornhill figcaption { color: rgb(196, 182, 255); }
@media (max-width: 770px) {
  .control-room.askclaude .bp-thornhill { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .control-room.askclaude .bp-th-photo { max-width: 360px; width: 100%; margin: 0 auto; }
  .control-room.askclaude .bp-th-headline { font-size: 17px; }
}

/* Owner 2026-10-08: the Ask Claude avatar as a round badge on gift 1, the s05 hero mockup and the recap row
   (pure CSS layering on the existing renders; bottom-right corner, clear of the product text) */
.control-room.askclaude .cr-pic > img.bp-ac-badge { position: absolute; right: 1.2%; bottom: 2.5%; z-index: 2; width: 10%; min-width: 40px; height: auto; aspect-ratio: 1 / 1; border: 3px solid var(--cr-white); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(129, 99, 255), 0 0 22px 4px rgba(129, 99, 255, 0.55); animation: bp-ac-bob 3.2s ease-in-out infinite; }
.control-room.askclaude .bp-recap-badge { flex: none; width: 30px; height: 30px; margin: 34px 10px 0 -38px; border: 2px solid var(--cr-white); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(129, 99, 255), 0 0 12px 2px rgba(129, 99, 255, 0.5); position: relative; z-index: 1; animation: bp-ac-bob 3.2s ease-in-out infinite; }
@keyframes bp-ac-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 770px) {
  .control-room.askclaude .bp-recap-badge { width: 26px; height: 26px; margin: 0 8px 0 0; }
}

/* Owner 2026-10-08 (gaps): image + text rows center against each other, and the s05 screenshot row keeps only
   the first two paragraphs beside the image (the rest reads full width below), so no empty band sits under a photo */
@media (min-width: 771px) {
  .control-room.askclaude .cr-row:has(> .cr-col .cr-pic):has(> .cr-col + .cr-col) { align-items: center; }
}
.control-room.askclaude .bp-s05-more { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .control-room.askclaude .bp-thornhill::before, .control-room.askclaude .cr-pic > img.bp-ac-badge, .control-room.askclaude .bp-recap-badge { animation: none; }
  .control-room.askclaude .bp-thornhill::before { box-shadow: 0 0 18px 3px rgba(129, 99, 255, 0.55), 0 0 40px 6px rgba(232, 190, 92, 0.22); }
}
/* Owner 2026-10-08: every testimonial card in the marquee is the same height; long quotes end in an ellipsis */
.control-room.askclaude .bp-mq-card { height: 250px; }
.control-room.askclaude .bp-mq-card blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; text-overflow: ellipsis; }

/* ============ v4.4 owner-approved (2026-10-08): "vintage treasury vault" gift headers ============
   The dark header band of each of the 10 gift boxes (row-09 = gift 1, row-12 = gifts 2-10):
   ink-to-deep-violet gradient + engraved guilloche line-work + a dark scrim behind the centered title
   + a gold double certificate rule (row background layers); ::before = the gift's line-art watermark
   on the RIGHT (clear of the title and the badge); ::after = film grain + soft vignette + the hover sweep.
   Everything is CSS + hand-written SVG in /askclaude/img/vault-*.svg. */
.control-room.askclaude #gifts .row-09, .control-room.askclaude #gifts .row-12 {
  /* owner 2026-10-08: no gold rectangle lines on the gift headers; the rule layers stay but paint nothing */
  --vault-gold: transparent;
  --vault-gold-faint: transparent;
  isolation: isolate;
  background-color: rgb(16, 13, 30);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 11px), rgba(255, 255, 255, 0.06) calc(100% - 11px), rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    radial-gradient(52% 78% at 50% 48%, rgba(10, 8, 22, 0.82) 0, rgba(10, 8, 22, 0.55) 55%, rgba(10, 8, 22, 0) 100%),
    url("/askclaude/img/vault-guilloche.svg"),
    linear-gradient(90deg, rgb(20, 22, 28) 0%, rgb(26, 19, 52) 48%, rgb(52, 26, 118) 100%);
  /* outer rule inset 14px, inner hairline inset 18px (top, bottom, left, right) */
  background-size:
    100% 100%,
    calc(100% - 28px) 1px, calc(100% - 28px) 1px, 1px calc(100% - 40px), 1px calc(100% - 40px),
    calc(100% - 36px) 1px, calc(100% - 36px) 1px, 1px calc(100% - 48px), 1px calc(100% - 48px),
    100% 100%, 180px 90px, 100% 100%;
  background-position:
    center bottom,
    14px 14px, 14px calc(100% - 26px), 14px 14px, calc(100% - 14px) 14px,
    18px 18px, 18px calc(100% - 30px), 18px 18px, calc(100% - 18px) 18px,
    center, 0 0, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
.control-room.askclaude #gifts .row-09::before, .control-room.askclaude #gifts .row-12::before,
.control-room.askclaude #gifts .row-09::after, .control-room.askclaude #gifts .row-12::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
}
/* the per-gift watermark: right side, below the corner badge, ~8% */
.control-room.askclaude #gifts .row-09::before, .control-room.askclaude #gifts .row-12::before {
  inset: auto 46px 34px auto; width: 120px; height: 120px; border-radius: 0;
  background: var(--vault-obj) center / contain no-repeat; opacity: 0.09;
}
.control-room.askclaude #gifts .row-09::after, .control-room.askclaude #gifts .row-12::after {
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 236, 190, 0.09) 50%, rgba(255, 255, 255, 0) 60%),
    url("/askclaude/img/vault-grain.svg"),
    radial-gradient(120% 110% at 50% 40%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%);
  background-size: 260% 100%, 160px 160px, 100% 100%;
  background-position: 160% 0, 0 0, center;
  background-repeat: no-repeat, repeat, no-repeat;
}
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift1.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-brain.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift2.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-vault.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift3.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-books.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift4.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-mic.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift5.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-reel.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift6.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-table.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift7.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-hand.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift8.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-pen.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift9.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-stamp.svg"); }
.control-room.askclaude #gifts .cr-row:has([data-slot="s06.gift10.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-plane.svg"); }
/* gold-foil hairline around the "Free Gift #N" pill (masked ring, the pill's own violet shine untouched) */
.control-room.askclaude #gifts .cr-flex.fx-bluebg { position: relative; }
.control-room.askclaude #gifts .cr-flex.fx-bluebg::after {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgb(150, 112, 40), rgb(246, 222, 150) 30%, rgb(190, 146, 60) 55%, rgb(255, 236, 178) 78%, rgb(150, 112, 40));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}
/* one slow light sweep across the header on hover: desktop pointers only, never under reduced motion */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .control-room.askclaude #gifts .row-09:hover::after, .control-room.askclaude #gifts .row-12:hover::after { animation: vault-sweep 1.8s ease-out 1; }
}
@keyframes vault-sweep { from { background-position: 160% 0, 0 0, center; } to { background-position: -60% 0, 0 0, center; } }
@media (max-width: 770px) {
  /* phones: the title spans the full width, so the watermark shrinks into the bottom-right corner beside the value pill */
  .control-room.askclaude #gifts .row-09::before, .control-room.askclaude #gifts .row-12::before { inset: auto 16px 30px auto; width: 58px; height: 58px; opacity: 0.07; }
  .control-room.askclaude #gifts .row-09, .control-room.askclaude #gifts .row-12 { background-size:
    100% 100%,
    calc(100% - 16px) 1px, calc(100% - 16px) 1px, 1px calc(100% - 28px), 1px calc(100% - 28px),
    calc(100% - 24px) 1px, calc(100% - 24px) 1px, 1px calc(100% - 36px), 1px calc(100% - 36px),
    100% 100%, 180px 90px, 100% 100%;
    /* phones: the title fills the width, so the scrim widens to cover all of it */
    background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 11px), rgba(255, 255, 255, 0.06) calc(100% - 11px), rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    radial-gradient(85% 70% at 50% 50%, rgba(10, 8, 22, 0.8) 0, rgba(10, 8, 22, 0.6) 60%, rgba(10, 8, 22, 0.2) 100%),
    url("/askclaude/img/vault-guilloche.svg"),
    linear-gradient(90deg, rgb(20, 22, 28) 0%, rgb(26, 19, 52) 48%, rgb(52, 26, 118) 100%);
    background-position:
    center bottom,
    8px 8px, 8px calc(100% - 20px), 8px 8px, calc(100% - 8px) 8px,
    12px 12px, 12px calc(100% - 24px), 12px 12px, calc(100% - 12px) 12px,
    center, 0 0, center; }
}

/* Owner 2026-10-08: one key phrase per verbatim quote, the get.monetizemarketing.com home highlighter (colors as rgb) */
.control-room.askclaude #proof blockquote mark { background: linear-gradient(180deg, transparent 14%, rgb(255, 224, 113) 14%, rgb(255, 216, 77) 86%, transparent 86%); color: rgb(22, 20, 42); font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 1px; }