/* ==========================================================================
   Product pages — the outcome-led block that sits below each hero.
   Ported from _incoming/instly-product-pages-handoff.

   Everything is scoped under .iq-prod. That is not tidiness, it is required:
   the supplied sheet defines .step, .stage, .content, .button and .circuit,
   and .step already means the timeline row on this site. Unscoped, the
   concept's 20px-padded .step would rewrite every timeline we have.

   Per the handoff's own integration note, the site's typeface and tokens are
   kept — only the prototype's layout, colour accents and motion are ported.
   Per-product accent arrives as --accent / --rgb on the .iq-prod element.
   ========================================================================== */

.iq-prod {
  --line:  rgba(255,255,255,0.09);
  --line2: rgba(255,255,255,0.14);
  --ease:  cubic-bezier(.2,.8,.2,1);
  --accent: #8071ff;
  --rgb: 128,113,255;

  /* The concept's .page-shell. Without it the block runs edge to edge while
     the hero above sits in a 1316px wrap, and the two stop lining up. */
  width: min(1220px, calc(100% - 36px));
  margin: 0 auto 100px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #080b1d;
  box-shadow: 0 45px 120px rgba(0,0,0,0.42);
}

/* ── The hero owns the first screen ──────────────────────────────────────
   Section two was peeking above the fold on all six tabs. product.css only
   loads on the product pages, so this reaches those heroes and nothing else
   - no markup change, the hero mark-up stays byte-for-byte as it was.
   Hero content is top-aligned, so this only adds room underneath it;
   nothing inside the hero moves. 5rem is the nav band above it. */
.hero--page { min-height: calc(100svh - 5rem); }

/* ── Promise ─────────────────────────────────────────────────────────── */
.iq-prod .promise {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1.2fr .7fr; gap: 60px;
  align-items: end; overflow: hidden; padding: 76px 64px 52px;
  background: radial-gradient(circle at 18% 40%, rgba(var(--rgb),.12), transparent 36%);
}
.iq-prod .promise > div:not(.circuit) { position: relative; z-index: 2; }
.iq-prod .kicker {
  display: flex; align-items: center; gap: 9px;
  color: #a6abc3; font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.iq-prod .kicker i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px rgba(var(--rgb),.75);
}
.iq-prod .promise h2 {
  max-width: 850px; margin: 20px 0 0;
  font-size: clamp(43px, 5.3vw, 72px); line-height: .96; letter-spacing: -.058em;
}
.iq-prod .promise-copy { padding-bottom: 5px; }
.iq-prod .promise-copy p { margin: 0; color: #a9aec5; font-size: 17px; line-height: 1.67; }
.iq-prod .promise-copy a {
  display: inline-flex; margin-top: 24px;
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 700;
}
.iq-prod .promise-copy a span { margin-left: 8px; color: var(--accent); }

/* Circuit motif — restrained, per the handoff note. */
.iq-prod .circuit {
  position: absolute; z-index: 0; inset: 0;
  overflow: hidden; pointer-events: none; opacity: .72;
}
.iq-prod .c-trace {
  position: absolute; width: 185px; height: 78px;
  border-color: rgba(var(--rgb),.27);
  filter: drop-shadow(0 0 7px rgba(var(--rgb),.12));
}
.iq-prod .c-trace::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #f7f7ff; box-shadow: 0 0 5px #fff, 0 0 15px rgba(var(--rgb),.9);
}
.iq-prod .c-tl { top: 39px; left: -58px; border-top: 1px solid; border-right: 1px solid; border-radius: 0 13px 0 0; }
.iq-prod .c-tl::after { right: -3px; bottom: -3px; }
.iq-prod .c-bl { bottom: 30px; left: -36px; width: 145px; border-bottom: 1px solid; border-right: 1px solid; border-radius: 0 0 13px 0; }
.iq-prod .c-bl::after { right: -3px; top: -3px; }
.iq-prod .c-tr { top: 31px; right: -45px; width: 205px; border-top: 1px solid; border-left: 1px solid; border-radius: 13px 0 0 0; }
.iq-prod .c-tr::after { left: -3px; bottom: -3px; }
.iq-prod .c-br { right: -22px; bottom: 27px; width: 155px; border-bottom: 1px solid; border-left: 1px solid; border-radius: 0 0 0 13px; }
.iq-prod .c-br::after { left: -3px; top: -3px; }
.iq-prod .c-terminal {
  position: absolute; width: 9px; height: 9px;
  border: 1px solid rgba(var(--rgb),.48);
  background: linear-gradient(135deg, rgba(var(--rgb),.16), transparent);
}
.iq-prod .c-terminal::before,
.iq-prod .c-terminal::after { content: ""; position: absolute; background: rgba(var(--rgb),.28); }
.iq-prod .c-terminal::before { left: 3px; top: -1px; width: 1px; height: 9px; }
.iq-prod .c-terminal::after  { left: -1px; top: 3px; width: 9px; height: 1px; }
.iq-prod .c-terminal.tl { left: 20px; top: 52px; }
.iq-prod .c-terminal.bl { left: 42px; bottom: 43px; }
.iq-prod .c-terminal.tr { right: 30px; top: 44px; }
.iq-prod .c-terminal.br { right: 18px; bottom: 40px; }

/* ── Proof strip ─────────────────────────────────────────────────────── */
.iq-prod .proofs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line); background: #0b0e22;
}
.iq-prod .proof { padding: 26px 20px; text-align: center; }
.iq-prod .proof:not(:last-child) { border-right: 1px solid var(--line); }
.iq-prod .proof strong { display: block; font-size: 26px; letter-spacing: -.03em; }
.iq-prod .proof span { display: block; margin-top: 5px; color: #727995; font-size: 10px; }

/* ── Cinema — the product canvas ─────────────────────────────────────── */
.iq-prod .cinema { padding: 74px 54px 56px; }
.iq-prod .cinema-head { text-align: center; }
.iq-prod .cinema-head h3 {
  margin: 0; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.05em;
}
.iq-prod .cinema-head p {
  max-width: 680px; margin: 16px auto 0; color: #9298b2; font-size: 16px; line-height: 1.65;
}
.iq-prod .stage {
  position: relative; max-width: 900px; margin: 38px auto 0; padding: 16px;
  border: 1px solid var(--line2); border-radius: 22px;
  background: linear-gradient(145deg, #171b3a, #090d20);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 70px rgba(var(--rgb),.08);
}
.iq-prod .stage::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.05), transparent 65%);
  background-size: 230% 100%; animation: iq-sheen 8s linear infinite;
}
.iq-prod .stage img { position: relative; display: block; width: 100%; border-radius: 13px; }
.iq-prod .stage-label {
  position: absolute; z-index: 2; left: 30px; bottom: 30px; padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  color: #e8eafd; background: rgba(6,8,20,.78);
  font-size: 10px; font-weight: 700; backdrop-filter: blur(12px);
}
.iq-prod .stage-label i {
  display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(var(--rgb),.8);
}
@keyframes iq-sheen { from { background-position: 160% 0; } to { background-position: -80% 0; } }

/* ── Outcomes ────────────────────────────────────────────────────────── */
.iq-prod .outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 42px; }
.iq-prod .outcome {
  position: relative; min-height: 180px; padding: 25px;
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,.022); transition: .3s var(--ease);
}
.iq-prod .outcome:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--rgb),.28); background: rgba(var(--rgb),.045);
}
.iq-prod .outcome .num {
  display: block; margin-bottom: 27px; color: var(--accent);
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
}
.iq-prod .outcome b { display: block; font-size: 19px; }
.iq-prod .outcome p { margin: 10px 0 0; color: #858ca7; font-size: 13px; line-height: 1.58; }

/* ── Mechanism ───────────────────────────────────────────────────────── */
.iq-prod .mechanism {
  padding: 28px 54px 64px;
  border-top: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.012);
}
.iq-prod .signal-divider {
  display: grid; grid-template-columns: 1fr 7px 46px 7px 1fr; align-items: center; gap: 10px;
  width: min(720px, 78%); height: 38px; margin: 0 auto 30px; opacity: .72;
}
.iq-prod .signal-divider span { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rgb),.38)); }
.iq-prod .signal-divider span:last-child { background: linear-gradient(90deg, rgba(var(--rgb),.38), transparent); }
.iq-prod .signal-divider i {
  width: 7px; height: 7px; transform: rotate(45deg);
  border: 1px solid rgba(var(--rgb),.72); background: #f6f7ff;
  box-shadow: 0 0 8px #fff, 0 0 16px rgba(var(--rgb),.76);
}
.iq-prod .signal-divider b { position: relative; height: 1px; background: rgba(var(--rgb),.4); }
.iq-prod .signal-divider b::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 13px rgba(var(--rgb),.85);
}
.iq-prod .mechanism-top { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.iq-prod .mechanism-top h3 {
  max-width: 600px; margin: 0; font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.07; letter-spacing: -.045em;
}
.iq-prod .mechanism-top p { max-width: 410px; margin: 0; color: #858ca7; font-size: 14px; line-height: 1.6; }
.iq-prod .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 40px; }
.iq-prod .flow .step { position: relative; padding: 20px 0 0; border-top: 1px solid #303650; }
.iq-prod .flow .step::before {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--rgb),.75);
}
.iq-prod .flow .step small { color: #69708d; font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.iq-prod .flow .step b { display: block; margin-top: 9px; font-size: 14px; }
.iq-prod .flow .step p { margin: 8px 0 0; color: #7e85a1; font-size: 12px; line-height: 1.55; max-width: none; }

/* ── Closing call to action ──────────────────────────────────────────── */
.iq-prod .final {
  padding: 78px 30px; text-align: center;
  background: radial-gradient(circle at 50% 100%, rgba(var(--rgb),.24), transparent 58%);
}
.iq-prod .final h3 { margin: 0; font-size: clamp(36px, 4.5vw, 58px); letter-spacing: -.05em; }
.iq-prod .final p { margin: 13px 0 0; color: #9298b3; }
.iq-prod .final .button {
  display: inline-flex; margin-top: 25px; padding: 14px 22px; border-radius: 999px;
  color: #fff; text-decoration: none;
  background: linear-gradient(90deg, rgba(var(--rgb),.92), rgba(var(--rgb),.58));
  box-shadow: 0 12px 35px rgba(var(--rgb),.18);
  font-size: 14px; font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 850px) {
  .iq-prod .promise { grid-template-columns: 1fr; gap: 28px; padding: 54px 28px 40px; }
  .iq-prod .c-tl, .iq-prod .c-tr { width: 110px; opacity: .55; }
  .iq-prod .c-bl, .iq-prod .c-br { display: none; }
  .iq-prod .c-terminal.bl, .iq-prod .c-terminal.br { display: none; }
  .iq-prod .cinema, .iq-prod .mechanism { padding: 54px 24px; }
  .iq-prod .mechanism { padding-top: 22px; }
  .iq-prod .signal-divider { width: 92%; margin-bottom: 24px; }
  .iq-prod .outcomes, .iq-prod .flow { grid-template-columns: 1fr; }
  .iq-prod .mechanism-top { display: block; }
  .iq-prod .mechanism-top p { margin-top: 15px; }
}
@media (max-width: 540px) {
  .iq-prod .proofs { grid-template-columns: 1fr; }
  .iq-prod .proof:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }
  .iq-prod .promise h2 { font-size: 42px; }
  .iq-prod .circuit { opacity: .45; }
  .iq-prod .c-trace { height: 48px; }
  .iq-prod .c-terminal { display: none; }
  .iq-prod .stage { padding: 8px; }
  .iq-prod .stage-label { left: 18px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .iq-prod *, .iq-prod *::before, .iq-prod *::after {
    animation: none !important; transition: none !important;
  }
}

/* The closing CTA was the emptiest space on these pages. It reuses the same
   corner-trace motif as the promise block above it rather than introducing a
   second decorative language inside the same card. */
.iq-prod .final { position: relative; isolation: isolate; overflow: hidden; }
.iq-prod .final > *:not(.circuit) { position: relative; z-index: 2; }