/* =====================================================================
   FunnelX — Industry hero: live AI overlay on the photo
   The hero shots are portrait, with the person centre-right and the
   background on the left, so every card is anchored to the LEFT edge or
   the BOTTOM band and allowed to hang slightly outside the frame.
   Nothing sits over the top-centre or top-right, where the face is.
   ===================================================================== */
.ind-hero .visual { position: relative; }
.ind-hero .ind-shot { position: relative; z-index: 1; }

.ih-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ih-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-radius: var(--radius-lg); background: rgba(252,252,252,0.95); backdrop-filter: blur(10px); box-shadow: 0 14px 32px rgba(7,20,55,0.20); opacity: 0; transform: translateY(12px); animation: ih-in 720ms var(--ease-out) forwards; }
@keyframes ih-in { to { opacity: 1; transform: none } }

/* ---------- anchors (all face-safe) ---------- */
.ih-card.at-tl { left: -26px; top: 7%; }
.ih-card.at-ml { left: -30px; top: 44%; }
.ih-card.at-bl { left: -22px; bottom: 16%; }
.ih-card.at-bb { left: 8%; bottom: 5%; }
.ih-card.at-br { right: -24px; bottom: 11%; }
.ih-card.at-mr { right: -26px; bottom: 34%; }

/* ---------- 1 · listening chip with a moving audio meter ---------- */
.ih-listen .ih-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--fx-green); flex: none; animation: ih-pulse 1.5s var(--ease-in-out) infinite; }
@keyframes ih-pulse { 0%,100%{ opacity: 1; transform: scale(1) } 50%{ opacity: 0.35; transform: scale(0.8) } }
.ih-listen b { font-size: 13px; font-weight: var(--fw-semibold); color: var(--fx-navy); white-space: nowrap; }
.ih-meter { display: flex; align-items: center; gap: 3px; height: 22px; }
.ih-meter i { width: 3.5px; border-radius: 2px; background: var(--fx-light-blue); animation: ih-bar 1.1s ease-in-out infinite; }
@keyframes ih-bar { 0%,100%{ height: 20% } 50%{ height: 100% } }

/* ---------- 2 · coaching cue (full sentence, wraps, never clipped) ---------- */
.ih-cue { max-width: 300px; align-items: flex-start; }
.ih-cue .ih-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--accent-soft); }
.ih-cue .ih-ic span { width: 16px; height: 16px; background-color: var(--fx-light-blue); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.ih-cue .ih-t { min-width: 0; }
.ih-cue small { display: block; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-light-blue); margin-bottom: 4px; }
.ih-cue p { margin: 0; font-size: 13px; line-height: 1.42; color: var(--fx-navy); text-wrap: pretty; }
.ih-cue.warm small { color: var(--fx-orange); }
.ih-cue.warm .ih-ic { background: rgba(246,128,15,0.14); }
.ih-cue.warm .ih-ic span { background-color: var(--fx-orange); }

/* ---------- 3 · score ring ---------- */
.ih-score .ih-ring { width: 42px; height: 42px; border-radius: 999px; flex: none; display: grid; place-items: center; position: relative; background: conic-gradient(var(--fx-green) 0turn 0.86turn, var(--bg-muted) 0.86turn 1turn); animation: ih-ring 5s var(--ease-in-out) infinite alternate; }
@keyframes ih-ring { from { background: conic-gradient(var(--fx-green) 0turn 0.54turn, var(--bg-muted) 0.54turn 1turn) } to { background: conic-gradient(var(--fx-green) 0turn 0.86turn, var(--bg-muted) 0.86turn 1turn) } }
.ih-score .ih-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 999px; background: #fff; }
.ih-score .ih-ring b { position: relative; z-index: 1; font-size: 14px; font-weight: var(--fw-bold); color: var(--fx-navy); }
.ih-score .ih-t b { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--fx-navy); white-space: nowrap; }
.ih-score .ih-t small { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }

/* ---------- 4 · talk ratio ---------- */
.ih-talk { flex-direction: column; align-items: stretch; gap: 8px; min-width: 178px; }
.ih-talk .ih-top { display: flex; align-items: baseline; gap: 8px; }
.ih-talk .ih-top b { font-size: 13px; font-weight: var(--fw-semibold); color: var(--fx-navy); white-space: nowrap; }
.ih-talk .ih-top em { font-style: normal; margin-left: auto; font-size: 13px; font-weight: var(--fw-bold); color: var(--fx-light-blue); font-variant-numeric: tabular-nums; }
.ih-talk .ih-bar { height: 8px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.ih-talk .ih-bar i { display: block; height: 100%; border-radius: 999px; background: var(--fx-light-blue); width: 46%; animation: ih-fill 4.6s var(--ease-in-out) infinite alternate; }
@keyframes ih-fill { from { width: 32% } to { width: 52% } }
.ih-talk small { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }

/* ---------- 5 · checklist that ticks itself ---------- */
.ih-check { flex-direction: column; align-items: stretch; gap: 9px; min-width: 214px; }
.ih-check .ih-h { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-light-blue); }
.ih-check span.row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fx-navy); line-height: 1.35; }
.ih-check span.row i { width: 18px; height: 18px; border-radius: 999px; flex: none; position: relative; background: var(--bg-muted); }
.ih-check span.row.on i { background: rgba(3,197,147,0.2); }
.ih-check span.row.on i::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--fx-green); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.ih-check span.row:nth-of-type(2) { animation: ih-tick 6s var(--ease-in-out) infinite; }
@keyframes ih-tick { 0%,40%{ opacity: 0.45 } 55%,100%{ opacity: 1 } }

/* ---------- 6 · buyer persona chip ---------- */
.ih-persona .ih-av { width: 40px; height: 40px; border-radius: 999px; flex: none; overflow: hidden; background: var(--bg-muted); }
.ih-persona .ih-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ih-persona .ih-t b { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--fx-navy); white-space: nowrap; }
.ih-persona .ih-t small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.ih-persona .ih-t small::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--fx-orange); }

/* ---------- 7 · objection detected ---------- */
.ih-obj { flex-direction: column; align-items: stretch; gap: 7px; max-width: 268px; }
.ih-obj .ih-h { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-orange); }
.ih-obj .ih-h::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--fx-orange); animation: ih-pulse 1.6s var(--ease-in-out) infinite; }
.ih-obj q { font-size: 12.5px; font-style: italic; color: var(--fg-2); line-height: 1.4; }
.ih-obj p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fx-navy); font-weight: var(--fw-medium); text-wrap: pretty; }

@media (max-width: 1100px){
  .ih-card { padding: 11px 14px; gap: 10px; }
  .ih-card.at-tl, .ih-card.at-ml, .ih-card.at-bl { left: -10px; }
  .ih-card.at-br, .ih-card.at-mr { right: -10px; }
  .ih-cue { max-width: 250px; }
  .ih-obj { max-width: 230px; }
}
@media (max-width: 980px){
  .ih-card.at-tl, .ih-card.at-ml, .ih-card.at-bl { left: 6px; }
  .ih-card.at-br, .ih-card.at-mr { right: 6px; }
  .ih-card.at-bb { left: 6px; }
}
@media (max-width: 760px){ .ih-ov { display: none; } }
@media (prefers-reduced-motion: reduce){
  .ih-card { opacity: 1; transform: none; animation: none; }
  .ih-meter i, .ih-listen .ih-dot, .ih-score .ih-ring, .ih-talk .ih-bar i, .ih-check span.row:nth-of-type(2), .ih-obj .ih-h::before { animation: none; }
}

/* ---------------- Industry hero: shot 15% smaller ---------------- */
.ind-hero .visual { max-width: 85%; margin-left: auto; margin-right: auto; }
@media (max-width: 980px){ .ind-hero .visual { max-width: 100%; } }

/* .challenge-grid::after sits 8% of the grid's width past its right edge — wider than
   the page gutter, so it scrolls the page sideways at any viewport under roughly
   1300px. Below 760px the page CSS drops both glows outright; this covers every width
   above that. Clip horizontally at the section for the same reason as the feature rows:
   the bleed stays visible, it just stops short of moving the page. */
.section:has(.challenge-grid) { overflow-x: clip; }