/* Conversational AI Agent for ERP — page-specific delta.
   Base: intelligent-support.css (loaded via STYLE_BASE). */

/* ── Sol hero screen variant — responsive grid + mobile fix ──────── */
.sol-hero-screen { min-height: 540px; }
.sol-hero-screen .isa-hero-grid { grid-template-columns: minmax(360px, 720px) 1fr; }
@media (max-width: 1100px) {
  .sol-hero-screen .isa-hero-mockup { min-height: auto; }
}
@media (max-width: 767px) {
  .sol-hero-screen { min-height: auto; }
  .sol-hero-screen .isa-hero-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  .isa-hero-mockup .ps-bleed > img,
  #what-delivers .imgcol .ps-bleed > img {
    width: max(1400px, 150%);
    max-width: none;
    height: auto;
  }
  #what-delivers .imgcol .ps-bleed { height: clamp(360px, 40vw, 480px); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  #what-delivers .imgcol .ps-bleed { margin-inline: calc(-1 * (var(--pad-x) - 16px)); }
}
@media (min-width: 700px) and (max-width: 1144px) {
  .sol-hero-screen .isa-hero-grid { grid-template-columns: 1fr; row-gap: var(--space-5); }
  .isa-hero-mockup .ps-bleed { height: clamp(360px, 40vw, 480px); }
}
@media (min-width: 1145px) {
  .sol-hero-screen .isa-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: clamp(32px, 4vw, 64px);
  }
  .isa-hero-mockup .ps-bleed { height: clamp(380px, 28vw, 480px); }
}
@media (min-width: 1280px) {
  #what-delivers .isa-deliver-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ── Hero product screenshot (ps-bleed) ──────────────────────────── */
.ps-bleed {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
}
.ps-bleed > img {
  flex: none;
  align-self: flex-start;
  display: block;
  width: 100%;
  height: auto;
}
.ps-bleed::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 1280px) {
  .isa-hero-mockup .ps-bleed > img,
  #what-delivers .imgcol .ps-bleed > img {
    width: max(1400px, 150%);
    max-width: none;
    height: auto;
  }
  .ps-bleed::after { opacity: 1; }

  .isa-hero-mockup {
    position: relative;
    align-self: stretch;
    min-height: clamp(380px, 28vw, 480px);
    display: block;
    min-width: 0;
  }
  #what-delivers .imgcol { min-width: 0; }

  .isa-hero-mockup .ps-bleed {
    position: absolute;
    inset: 0;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .isa-hero-mockup .ps-bleed::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), var(--bg-white));
  }

  #what-delivers { overflow: hidden; }
  #what-delivers .imgcol .ps-bleed {
    justify-content: flex-start;
    height: clamp(420px, 30vw, 540px);
    border: 1px solid var(--ink-200);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }
  #what-delivers .imgcol .ps-bleed::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), var(--bg-white));
  }
  #what-delivers .isa-deliver-split { column-gap: clamp(64px, 6vw, 96px); }

  .isa-hero-mockup,
  #what-delivers .imgcol { position: relative; }
  .isa-hero-mockup::before,
  #what-delivers .imgcol::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to left,
      rgba(16,24,40,.22), rgba(16,24,40,.06) 45%, rgba(16,24,40,0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0),
      #000 32px, #000 calc(100% - 32px), rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0),
      #000 32px, #000 calc(100% - 32px), rgba(0,0,0,0));
  }
}
@media (max-width: 1279px) {
  .ps-bleed {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
  }
}
.isa-hero-mockup .ps-bleed {
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--radius) 0 0 0;
}
@media (min-width: 768px) and (max-width: 1440px) {
  .sol-hero-screen .isa-hero-grid {
    row-gap: var(--space-2);
    padding-bottom: 0;
  }
}

/* ── Why figure (image + principle list) ─────────────────────────── */
.why-figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.why-figure-visual img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.why-figure-list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
.why-principle h4 {
  font-family: var(--font-sans);
  font-size: var(--ps-text-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 var(--space-0-5);
  line-height: var(--lh-heading);
}
.why-principle p {
  font-family: var(--font-sans);
  font-size: var(--ps-text-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--ink-600);
  margin: 0;
}
.why-three-tag {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 860px) {
  .why-figure { grid-template-columns: 1fr; gap: var(--space-3); }
  .why-figure-visual img { max-width: 420px; }
}

/* ── PV Grid — mosaic bento cards ──────────────────────────────── */
.pv-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-2);
  max-width: 1000px;
  margin: 0 auto;
}
.pv-card {
  background: var(--bg-white);
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pv-icon { margin-bottom: var(--space-2); }
.pv-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}
.pv-value { display: none; }
.pv-title {
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 var(--space-1);
}
.pv-title span { font-size: calc(var(--ps-text-body) + 2px); }
.pv-card p.pv-desc {
  font-size: var(--ps-text-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}

/* 5-card mosaic: 2 top + 3 bottom */
.pv-grid--5 { grid-auto-rows: auto; }
.pv-grid--5 > .pv-card:nth-child(1) { grid-column: 1 / 7;  grid-row: 1; }
.pv-grid--5 > .pv-card:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
.pv-grid--5 > .pv-card:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
.pv-grid--5 > .pv-card:nth-child(4) { grid-column: 5 / 9;  grid-row: 2; }
.pv-grid--5 > .pv-card:nth-child(5) { grid-column: 9 / 13; grid-row: 2; }

@media (min-width: 768px) {
  .pv-grid { max-width: 1200px; grid-auto-rows: minmax(120px, auto); }
  .pv-grid > .pv-card:nth-child(1) { padding: var(--space-3); }
  .pv-grid > .pv-card:nth-child(1) .pv-icon { padding-bottom: var(--space-2); }
  .pv-grid--5 { max-width: 1320px; }
}

@media (max-width: 767px) {
  .pv-grid,
  .pv-grid--5 {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .pv-grid > .pv-card,
  .pv-grid--5 > .pv-card {
    padding: var(--space-3);
  }
}

/* ── Channels — 4-col centered, wider items, reduced height ─────── */
@media (min-width: 768px) {
  .isa-channels {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1100px;
    margin: 0 auto;
    justify-content: center;
  }
  .isa-channel-cell {
    padding: 28px 20px;
  }
}

/* ── Core Capabilities — show first line by default, expand on toggle ── */
.cc-card-collapsible {
  grid-template-rows: 1fr !important;
}
.cc-card-collapsible-inner {
  overflow: hidden !important;
}
.cc-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-card:not(.cc-expanded) .cvo-outcome {
  display: none;
}
.cc-card.cc-expanded .cc-card-desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.cc-card.cc-expanded .cvo-outcome {
  display: flex;
}

/* ── Section header + CC heading — force center on mid screens ──── */
@media (min-width: 768px) and (max-width: 1440px) {
  .section-header {
    max-width: clamp(760px, 66vw, 1000px) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .section-header h2,
  .section-header p,
  .section-header span {
    text-align: center !important;
  }
  .cc-left {
    text-align: center !important;
  }
  .cc-left-eyebrow,
  .cc-left-headline,
  .cc-left-sub {
    text-align: center !important;
  }
  .cc-left-cta {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Disable mobile zoom button (CaseZoomController) on this page ── */
.dash-zoom-btn { display: none !important; }

/* ── Why figure — tag inside principle list ──────────────────────── */
.why-figure-list > .why-three-tag {
  text-align: left;
  margin-bottom: var(--space-1);
}