:root {
  --asset-cyan: #47c4dc;
  --asset-green: #63cfa0;
  --asset-amber: #e9b45b;
  --asset-ink: #102c36;
  --asset-muted: #5d747d;
  --asset-line: #cad9de;
}

.asset-visuals-page .product-hero-copy { max-width: 690px; }
.asset-visuals-page .product-hero-lead { max-width: 720px; }

.ai-band {
  position: relative;
  padding: 112px clamp(26px, 6vw, 96px);
  color: var(--asset-ink);
  background: #f3f7f7;
}

.ai-band-white { background: #ffffff; }
.ai-band-soft { background: #eef4f4; }
.ai-stage { width: min(1340px, 100%); margin: 0 auto; }

.ai-overview { padding-bottom: 88px; }
.ai-overview-grid {
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(460px, 1.18fr);
  gap: clamp(54px, 8vw, 118px);
  align-items: end;
}

.ai-section-heading h2 {
  max-width: 690px;
  margin: 14px 0 0;
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1.04;
  letter-spacing: 0;
}

.ai-overview-copy p {
  max-width: 720px;
  margin: 0;
  color: #536b74;
  font-size: 17px;
  line-height: 1.76;
}

.ai-overview-copy p + p { margin-top: 18px; }

.ai-chapter-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 68px;
  border-top: 1px solid var(--asset-line);
  border-left: 1px solid var(--asset-line);
}

.ai-chapter-index a {
  min-height: 148px;
  padding: 24px 26px;
  border-right: 1px solid var(--asset-line);
  border-bottom: 1px solid var(--asset-line);
  background: rgba(255, 255, 255, .4);
  transition: color .2s, background .2s;
}

.ai-chapter-index a:hover,
.ai-chapter-index a:focus-visible { color: #0c6f8b; background: #ffffff; }
.ai-chapter-index span,
.ai-chapter-index strong,
.ai-chapter-index small { display: block; }
.ai-chapter-index span { color: #39849a; font-size: 11px; font-weight: 820; }
.ai-chapter-index strong { margin-top: 24px; font-size: 17px; }
.ai-chapter-index small { margin-top: 7px; color: #6a8088; font-size: 12px; line-height: 1.45; }

.ai-proof-row {
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(52px, 7vw, 104px);
  align-items: center;
}

.ai-proof-row-reverse { grid-template-columns: minmax(560px, 1.28fr) minmax(330px, .72fr); }
.ai-proof-copy { max-width: 520px; }
.ai-number { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #86bdca; border-radius: 50%; color: #267f98; font-size: 12px; font-weight: 850; }
.ai-kicker { margin: 26px 0 0; color: #2f8399; font-size: 11px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }

.ai-proof-copy h2 {
  margin: 13px 0 22px;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.05;
  letter-spacing: 0;
}

.ai-proof-copy > p:not(.ai-kicker):not(.ai-closing-note) { margin: 0; color: var(--asset-muted); font-size: 16px; line-height: 1.74; }
.ai-fact-list { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid #cfdbdf; }
.ai-fact-list li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid #d7e1e4; color: #49636d; font-size: 14px; line-height: 1.5; }
.ai-fact-list li::before { position: absolute; top: 20px; left: 2px; width: 8px; height: 8px; content: ""; border: 2px solid var(--asset-green); transform: rotate(45deg); }

.ai-note { margin-top: 27px; padding: 22px 0 22px 24px; border-left: 3px solid var(--asset-cyan); }
.ai-note strong { color: #183944; font-size: 15px; }
.ai-note p { margin: 8px 0 0; color: #60767f; font-size: 13px; line-height: 1.65; }

.ai-product-shot {
  width: min(780px, 100%);
  margin: 0;
  overflow: hidden;
  border: 1px solid #c8d8dd;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 24px 62px rgba(16, 48, 60, .12);
}

.ai-proof-row > .ai-product-shot:last-child { justify-self: end; }
.ai-shot-bar { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 16px; border-bottom: 1px solid #d4e0e4; color: #738992; font-size: 10px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.ai-shot-bar strong { color: #267f98; }
.ai-product-shot img { display: block; width: 100%; height: auto; background: #f4f7f8; }
.ai-product-shot figcaption { padding: 18px 20px 20px; border-top: 1px solid #d4e0e4; color: #5d737c; font-size: 13px; line-height: 1.55; }
.ai-hardware-shot { width: min(790px, 100%); }
.ai-software-shot { width: min(760px, 100%); }

.ai-company-band { padding-top: 98px; padding-bottom: 98px; }
.ai-company-row {
  display: grid;
  grid-template-columns: minmax(330px, .68fr) minmax(600px, 1.32fr);
  gap: clamp(54px, 7vw, 108px);
  align-items: center;
}
.ai-company-copy { max-width: 500px; }
.ai-company-shot { width: min(820px, 100%); justify-self: end; }
.ai-company-points { margin-top: 30px; border-top: 1px solid #cfdbdf; }
.ai-company-points > div { padding: 16px 0; border-bottom: 1px solid #d7e1e4; }
.ai-company-points strong,
.ai-company-points span { display: block; }
.ai-company-points strong { color: #183944; font-size: 14px; }
.ai-company-points span { margin-top: 5px; color: #637982; font-size: 12px; line-height: 1.55; }

.ai-risk-band { color: #eef8fa; background: #081d27; }
.ai-risk-band::before { position: absolute; inset: 0; pointer-events: none; content: ""; background-image: linear-gradient(rgba(92, 173, 196, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 173, 196, .05) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to right, #000, transparent 78%); }
.ai-risk-layout { position: relative; display: grid; grid-template-columns: minmax(330px, .72fr) minmax(600px, 1.28fr); gap: clamp(54px, 7vw, 108px); align-items: center; }
.ai-risk-copy { max-width: 540px; }
.ai-risk-copy .ai-number { border-color: rgba(99, 207, 160, .6); color: var(--asset-green); }
.ai-risk-copy .ai-kicker { color: var(--asset-green); }
.ai-risk-copy h2 { color: #ffffff; }
.ai-risk-copy > p:not(.ai-kicker) { color: #a9bdc4; }

.ai-aie-callout { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; margin-top: 30px; padding: 24px 0; border-top: 1px solid rgba(145, 198, 214, .22); border-bottom: 1px solid rgba(145, 198, 214, .22); }
.ai-aie-callout > span { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid var(--asset-cyan); color: var(--asset-cyan); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.ai-aie-callout strong { color: #f1fafb; font-size: 16px; }
.ai-aie-callout p { margin: 7px 0 0; color: #94abb4; font-size: 13px; line-height: 1.64; }
.ai-fact-list-dark { border-color: rgba(145, 198, 214, .2); }
.ai-fact-list-dark li { border-color: rgba(145, 198, 214, .16); color: #bed0d6; }

.ai-shot-stack { display: grid; gap: 24px; align-items: start; }
.ai-shot-stack .ai-product-shot { width: min(790px, 100%); }
.ai-shot-stack .ai-recognition-shot { width: min(660px, 88%); justify-self: end; margin-top: -4px; }
.ai-product-shot-dark { border-color: rgba(142, 199, 214, .3); background: #0c2733; box-shadow: 0 28px 72px rgba(0, 0, 0, .32); }
.ai-product-shot-dark .ai-shot-bar,
.ai-product-shot-dark figcaption { border-color: rgba(145, 198, 214, .2); background: #0c2733; color: #91aab4; }
.ai-product-shot-dark .ai-shot-bar strong { color: #70d4ed; }

.ai-comparison-row { grid-template-columns: minmax(590px, 1.35fr) minmax(330px, .65fr); }
.ai-comparison-shot { width: min(800px, 100%); }
.ai-closing-note { margin: 26px 0 0; padding-left: 20px; border-left: 3px solid var(--asset-amber); color: #526a73; font-size: 14px; line-height: 1.65; }

@media (max-width: 1120px) {
  .ai-overview-grid,
  .ai-proof-row,
  .ai-proof-row-reverse,
  .ai-company-row,
  .ai-risk-layout,
  .ai-comparison-row { grid-template-columns: 1fr; }
  .ai-proof-copy,
  .ai-risk-copy { max-width: 780px; }
  .ai-company-shot { width: min(900px, 100%); justify-self: auto; }
  .ai-proof-row > .ai-product-shot,
  .ai-proof-row > .ai-product-shot:last-child,
  .ai-shot-stack { justify-self: auto; }
  .ai-chapter-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-product-shot { width: min(900px, 100%); }
  .ai-proof-row-reverse .ai-product-shot { order: 2; }
  .ai-proof-row-reverse .ai-proof-copy { order: 1; }
  .ai-comparison-row .ai-product-shot { order: 2; }
  .ai-comparison-row .ai-proof-copy { order: 1; }
}

@media (max-width: 720px) {
  .ai-band { padding: 78px 20px; }
  .ai-overview { padding-bottom: 66px; }
  .ai-chapter-index { grid-template-columns: 1fr; margin-top: 48px; }
  .ai-chapter-index a { min-height: 116px; }
  .ai-product-shot { overflow-x: auto; }
  .ai-product-shot img { width: auto; max-width: none; }
  .ai-hardware-shot img,
  .ai-software-shot img,
  .ai-vulnerability-shot img,
  .ai-company-shot img,
  .ai-comparison-shot img { min-width: 820px; }
  .ai-recognition-shot img { min-width: 720px; }
  .ai-product-shot figcaption,
  .ai-shot-bar { position: sticky; left: 0; width: calc(100vw - 42px); min-width: calc(100vw - 42px); }
  .ai-shot-stack .ai-recognition-shot { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chapter-index a { transition: none; }
}
