/* ============================================================
   BlueSystm — revenue-cta.css
   The two Revenue CTA sections, ported verbatim from Design's
   "Revenue CTA Web.dc.html" (design-handoff/revenue-cta/delivered/).
   .oa = How It Works page ("the number IS the section", live slider)
   .oc = Home page ("today vs the system", delta as the hook)
   Shared by both pages; behaviour in assets/js/revenue-cta.js.
   Only the canvas scaffolding (.turn-row/.opt*) and the page reset
   were dropped. .glow-btn ships here because how-it-works.html has
   no copy of its own; on index.html the identical hero rule already
   exists and this restatement is a no-op.
   ============================================================ */

/* shared site atoms — verbatim from live index.html */
.glow-btn { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--blue); color: #FFFFFF; font-weight: 600; font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: var(--sp-5) var(--sp-7); border-radius: var(--r-pill); border: none; cursor: pointer; text-decoration: none; transition: all var(--dur-base) var(--ease-standard); box-shadow: var(--glow); }
.glow-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--glow); }
.glow-btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,0.15); border-radius: 50%; transition: transform var(--dur-fast) var(--ease-standard); }
.glow-btn:hover .glow-btn-arrow { transform: translateX(3px); }
.micro { font-size: var(--fs-small); color: var(--muted); }

/* slider still — quiz result anatomy */
.trk { position: relative; padding-top: 20px; height: 46px; }
.trk-input { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; margin: 0; opacity: 0; cursor: grab; z-index: 2; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.trk-input:active { cursor: grabbing; }
.trk-rail { position: absolute; left: 0; right: 0; bottom: 10px; height: 5px; border-radius: 999px; background: rgba(11,16,34,.14); }
.trk-fill { position: absolute; left: 0; bottom: 10px; height: 5px; border-radius: 999px; background: var(--blue); }
.trk-thumb { position: absolute; bottom: 12.5px; transform: translate(-50%, 50%); width: 24px; height: 24px; border-radius: 50%; background: var(--blue); border: 3px solid #FFFFFF; box-shadow: var(--e1); z-index: 1; }
.trk-mark { position: absolute; bottom: 17px; height: 13px; width: 3px; border-radius: 2px; transform: translateX(-50%); background: rgba(11,16,34,.30); transition: background-color var(--dur-fast) var(--ease-standard); }
.trk-tag { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 9px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color var(--dur-fast) var(--ease-standard); }
.trk-mark.is-crossed { background: var(--blue); }
.trk-mark.is-crossed .trk-tag { color: var(--blue); animation: markPop var(--dur-base) var(--ease-out); }
@keyframes markPop { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.25); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes deltaPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ── 1a · The Specimen — the number IS the section ── */
.oa { padding: 96px var(--sp-6) 104px; text-align: center; }
.oa-inner { max-width: 960px; margin: 0 auto; }
.oa h2 { margin-left: 0; margin-right: 0; font-weight: 800; font-size: var(--fs-h1); color: var(--dark); letter-spacing: var(--ls-tight); line-height: 1.02; }
.oa h2 .accent { color: var(--blue); }
.oa .lede { margin: var(--sp-4) auto 0; max-width: 560px; font-size: var(--fs-lead); line-height: 1.6; color: var(--body); }
.oa-num { display: flex; align-items: baseline; justify-content: flex-start; position: relative; }
.oa-num .d { position: absolute; right: 100%; margin-right: 10px; bottom: 0; font-size: 52px; font-weight: 700; color: var(--blue); letter-spacing: var(--ls-tight); }
.oa-num .n-wrap { position: relative; }
.oa-num .n { font-size: 128px; line-height: .9; font-weight: 900; letter-spacing: -0.05em; color: var(--dark); font-variant-numeric: tabular-nums; }
.oa-slider { max-width: 760px; margin: var(--sp-7) auto 0; padding: var(--sp-3) var(--sp-5) var(--sp-4); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: var(--panel-inset); text-align: left; }
.oa-slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.oa-slider-label { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.oa-slider-out { font-size: 18px; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--dark); font-variant-numeric: tabular-nums; }
.oa-slider-out .u { font-size: 13px; color: var(--muted); font-weight: 600; }
.oa-note { margin-top: var(--sp-1); font-size: 12px; color: var(--muted); }
.oa-actions { margin-top: var(--sp-7); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.oa-numblock { display: flex; justify-content: center; }
.oa-numinner { display: inline-block; text-align: left; }
.lbl-plain { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.lbl-plain .lbl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.lbl-plain .lbl-right { margin-left: auto; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.lbl-plain .lbl-right svg { color: var(--blue); flex-shrink: 0; }

/* ── 1c · The Contrast — today vs the system, delta as the hook ── */
.oc { padding: 88px var(--sp-6) 96px; }
.oc-head { max-width: 720px; margin: 0 auto; text-align: center; }
.oc h2 { font-weight: 800; font-size: var(--fs-h1); color: var(--dark); letter-spacing: var(--ls-tight); line-height: 1.02; }
.oc h2 .accent { color: var(--blue); }
.oc .lede { margin: var(--sp-4) auto 0; max-width: 520px; font-size: var(--fs-lead); line-height: 1.6; color: var(--body); }
.oc-split { position: relative; max-width: 1020px; margin: var(--sp-8) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 200px; align-items: stretch; }
.oc-split::before { content: ''; position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: var(--border); }
.oc-panel { padding: var(--sp-6) var(--sp-7); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e1); transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.oc-panel:hover { box-shadow: var(--e3); transform: translateY(-4px); }
.oc-panel.hl { background: var(--blue-tint); border-color: rgba(37,99,235,.22); box-shadow: var(--e2); }
.oc-ch { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.oc-panel.hl .oc-ch { color: var(--blue); }
.oc-big { margin-top: var(--sp-4); font-size: 56px; line-height: .95; font-weight: 800; letter-spacing: -0.04em; color: var(--body); font-variant-numeric: tabular-nums; }
.oc-panel.hl .oc-big { color: var(--dark); font-weight: 900; }
.oc-big-k { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; letter-spacing: normal; color: var(--muted); }
.oc-rows { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
.oc-panel.hl .oc-rows { border-top-color: rgba(37,99,235,.18); }
.oc-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.oc-row b { font-size: 17px; font-weight: 800; letter-spacing: var(--ls-snug); color: var(--body); font-variant-numeric: tabular-nums; }
.oc-panel.hl .oc-row b { color: var(--dark); }
.oc-delta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); color: var(--blue); border-radius: var(--r-pill); padding: 10px 18px; font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-snug); box-shadow: var(--e2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-delta .plus { color: var(--blue); margin-right: 2px; }
.oc-delta .k { font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.oc-foot { margin-top: var(--sp-7); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
.oc-basis { margin-top: var(--sp-4); text-align: center; font-size: 12px; color: var(--muted); }

/* ── breakpoint copy swap: each section carries a desktop and a phone lede ── */
.lede-m { display: none; }

/* ── desktop layout glue lifted out of the markup's inline styles ── */
.oa-numblock { margin-top: var(--sp-7); }
.oa-num { margin-top: var(--sp-4); }

/* ── touch: tap lifts a panel one step and holds (card-lift.js applies
      .is-pressed; '.oc-panel' is in its card list). The accidental sticky
      :hover iOS would give the panels is switched off, same as card-lift.css
      does for the other cards. ── */
.oc-panel.is-pressed { box-shadow: var(--e2); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .oc-panel { transition: none; } }
@media (hover: none) {
  .oc-panel:hover { box-shadow: var(--e1); transform: none; }
  .oc-panel.hl:hover { box-shadow: var(--e2); }
}

/* ============================================================
   Phone layouts, ported verbatim from Design's
   "Revenue CTA Mobile.dc.html" (.ma/.mc rules mapped onto the
   live .oa/.oc markup — one DOM, reflowed).
   ============================================================ */
@media (max-width: 900px) {
  /* the phone delta pill is static in the stack, so its pop has no centering translate */
  @keyframes deltaPopM { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }

  .lede-d { display: none; }
  .lede-m { display: block; }
  .oa h2 br, .oc h2 br { display: none; }

  /* shared mobile atoms — m-btn / m-micro. Selectors run one class deeper
     than home-mobile.css's tripled `.glow-btn.glow-btn.glow-btn` convention,
     or the hero's mobile button sizing leaks onto these sections on index. */
  .oa .glow-btn.glow-btn.glow-btn, .oc .glow-btn.glow-btn.glow-btn { display: flex; justify-content: center; width: 100%; min-height: 54px; padding: 16px; gap: 10px; font-size: 15px; }
  .oa .glow-btn.glow-btn.glow-btn:active, .oc .glow-btn.glow-btn.glow-btn:active { background: var(--blue-hover); }
  .oa .glow-btn-arrow.glow-btn-arrow.glow-btn-arrow, .oc .glow-btn-arrow.glow-btn-arrow.glow-btn-arrow { width: 28px; height: 28px; flex-shrink: 0; }
  .oa .micro, .oc .micro { display: block; margin-top: 12px; text-align: center; font-size: 13px; }

  /* slider — phone knob */
  .trk { height: 52px; }
  .trk-rail { bottom: 12px; height: 6px; }
  .trk-fill { bottom: 12px; height: 6px; }
  .trk-thumb { bottom: 15px; width: 28px; height: 28px; }
  .trk-mark { bottom: 21px; }
  .trk-input { height: 48px; }

  /* ── 1a mobile · How It Works ── */
  .oa { padding: 64px 20px 72px; text-align: left; }
  .oa h2 { margin-left: 0; margin-right: 0; font-size: 32px; line-height: 1.06; text-align: center; }
  .oa .lede { margin: 16px 0 0; max-width: none; font-size: 16px; text-align: center; }
  .oa-numblock { margin-top: 36px; display: block; }
  .oa-numinner { display: block; }
  .lbl-plain { font-size: 10px; gap: 8px; }
  .lbl-plain .lbl-right { gap: 5px; text-align: right; }
  .oa-num { margin-top: 14px; }
  .oa-num .n-wrap { display: inline-flex; align-items: baseline; gap: 6px; }
  .oa-num .d { position: static; margin-right: 0; font-size: 26px; }
  .oa-num .n { font-size: 56px; }
  .oa-slider { margin-top: 24px; max-width: none; padding: 12px 16px 14px; }
  .oa-slider-head { gap: 12px; }
  .oa-slider-label { font-size: 10px; }
  .oa-slider-out { font-size: 17px; white-space: nowrap; }
  .oa-slider-out .u { font-size: 12px; }
  .oa-note { margin-top: 6px; font-size: 12px; line-height: 1.5; }
  .oa-actions { margin-top: 28px; display: block; }

  /* ── 1c mobile · Home — the split becomes a stack, the pill sits between ── */
  .oc { padding: 64px 20px 72px; }
  .oc-head { max-width: none; text-align: left; }
  /* Home only: the steps spine's B medallion sits on this title's line at the
     rail (page-x 37, 44px circle) — the title steps aside for it. */
  .oc h2 { font-size: 32px; line-height: 1.06; text-align: left; padding-left: 53px; }
  .oc .lede { margin: 16px 0 0; max-width: none; font-size: 16px; text-align: left; padding-left: 53px; }
  .oc-split { display: flex; flex-direction: column; gap: 0; margin-top: 28px; max-width: none; }
  .oc-split::before { display: none; }
  .oc-panel { order: 1; padding: 20px 18px; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
  .oc-panel:hover { box-shadow: var(--e1); transform: none; }
  .oc-panel.hl { order: 3; }
  .oc-panel.hl:hover { box-shadow: var(--e2); }
  .oc-big { margin-top: 12px; font-size: 40px; }
  .oc-big-k { margin-top: 7px; font-size: 12px; }
  .oc-rows { margin-top: 16px; padding-top: 14px; gap: 10px; }
  .oc-row { gap: 14px; font-size: 13px; }
  .oc-row b { font-size: 16px; }
  .oc-delta { order: 2; position: relative; top: auto; left: auto; transform: none; align-self: center; margin: -14px 0; padding: 9px 16px; gap: 9px; font-size: 13px; }
  .oc-delta .k { font-size: 9px; }
  .oc-basis { margin-top: 20px; font-size: 13px; line-height: 1.5; }
  .oc-foot { margin-top: 24px; display: block; }
}