/* ======================================================================
   Agentic AI for Super Agents page (pages/agentic-ai-super-agents.html).
   Loaded after style.css and only on this page. Reuses the ChipStack (cs-*) and Design for AI (dfa-*) parts;
   sizes and spacing measured from the Agentic AI Super Agents page on cadence.com at 1920px.
   Colours follow the PulseWave theme.
   ====================================================================== */
[data-page="agentic"] { --font-head: var(--font-nav); --font-body: var(--font-nav); }
[data-page="agentic"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; }

.aa-hero .cs-hero__art { background-image: url("../img/photos/soc.jpg"); }

/* ---------- overview: 28.8px sub-heading + AI stack diagram (1070 wide) ---------- */
.aa-h3 { margin: 45px 0 24px; font: 400 28.8px/40.32px var(--font-nav); letter-spacing: -0.576px; color: var(--nav-ink); }

.aa-stack { margin: 0; padding: 0 0 12px; background: #06080d; color: #fff; font-family: var(--font-nav); }
.aa-stack__title { padding: 20px 16px 18px; text-align: center; font: 300 36px/48px var(--font-nav); letter-spacing: -0.36px; }
.aa-stack__frame { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 0 11px; padding: 12px 14px 14px 0;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%); }
.aa-stack__side { display: grid; place-items: center; font: 400 17px/22px var(--font-nav); }
.aa-stack__main { display: grid; gap: 12px; }
.aa-stack__agents { padding: 11px 11px 22px; background: rgba(6, 8, 13, 0.28); box-shadow: inset 0 0 0 2px rgba(6, 8, 13, 0.35); }
.aa-stack__bar { height: 34px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 6px; background: #0c111d; font: 400 15px/20px var(--font-nav); }
.aa-stack__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.aa-tile { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 150px; padding: 14px 8px 12px; border-radius: 4px;
  text-align: center; box-shadow: 0 4px 10px rgba(6, 8, 13, 0.35); }
.aa-tile .icon { width: 46px; height: 52px; padding: 13px 11px; margin-bottom: 10px; background: #fff; color: var(--tile);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); stroke-width: 2; }
.aa-tile b { font: 400 15.5px/19px var(--font-nav); }
.aa-tile span { margin-top: 12px; font: 300 13px/17px var(--font-nav); }
.aa-tile em { position: absolute; top: -1px; right: -1px; padding: 1px 7px; font: 500 10px/15px var(--font-nav); font-style: normal; letter-spacing: 1.5px;
  text-transform: uppercase; background: #fff; color: var(--accent-2); }
/* five tiles stepping from the PulseWave blue to the PulseWave purple */
.aa-tile--1 { --tile: #1f63c4; background: linear-gradient(160deg, #3d8ef3, #1f63c4); }
.aa-tile--2 { --tile: #3a5fd6; background: linear-gradient(160deg, #5a7cf0, #3a5fd6); }
.aa-tile--3 { --tile: #5a4ee0; background: linear-gradient(160deg, #7866f2, #5a4ee0); }
.aa-tile--4 { --tile: #7a3ce6; background: linear-gradient(160deg, #955af6, #7a3ce6); }
.aa-tile--5 { --tile: #8e22d8; background: linear-gradient(160deg, #b04af9, #8e22d8); }
.aa-stack__tools { padding: 8px 11px 11px; background: rgba(6, 8, 13, 0.22); box-shadow: inset 0 0 0 2px rgba(6, 8, 13, 0.3); }
.aa-stack__label { margin-bottom: 7px; text-align: center; font: 400 15.5px/20px var(--font-nav); }
.aa-stack__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.aa-stack__chips span { padding: 6px 4px; text-align: center; font: 400 13.5px/18px var(--font-nav); background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.aa-stack__base { margin: 10px 11px 0; padding: 8px 30px; font: 400 15.5px/20px var(--font-nav); background: linear-gradient(90deg, #5d6670, #9aa2aa); }
.aa-stack__base--sim { margin-top: 12px; background: linear-gradient(90deg, #14306a, var(--accent)); }

/* ---------- key benefits: five items, 23.4px headings ---------- */
.aa-benefits { row-gap: 27px; }
.cs-benefit h4 { margin: 40px 0 16px; font: 400 23.4px/32.76px var(--font-nav); color: var(--nav-ink); }

/* ---------- super agents: vertical tabs with a text panel ---------- */
.aa-sec--agents { padding: 32px 0 78px; }
.aa-agents .dfa-panel h3 { padding-top: 0; }
.aa-agents .dfa-more { margin-top: 42px; }

/* ---------- demos: centred label, three grey cards with a 242px image ---------- */
.aa-sec--demos { padding-bottom: 126px; }
.aa-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 337px)); gap: 30px; margin-top: 1px; }
.aa-demo { display: flex; flex-direction: column; min-height: 426px; background: #f5f5f5; }
.aa-demo__media { position: relative; display: block; height: 242px; background-size: cover; background-position: center; }
.aa-demo__media::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background .25s; }
.aa-demo__body { display: flex; flex: 1; flex-direction: column; padding: 32px; }
.aa-demo h5 { margin: 0 0 16px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); transition: color .25s; }
.aa-demo__cta { display: inline-flex; align-items: center; margin-top: auto; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px;
  text-transform: uppercase; color: var(--nav-ink); transition: color .25s; }
.aa-demo__cta svg { width: 20px; height: 20px; margin-left: 12px; fill: currentColor; transition: transform .25s; }
.aa-demo:hover .aa-demo__media::before { background: rgba(0, 0, 0, 0.15); }
.aa-demo:hover h5, .aa-demo:hover .aa-demo__cta { color: var(--accent); }
.aa-demo:hover .aa-demo__cta svg { transform: translateX(5px); }
.aa-demo:focus-visible { outline: 4px solid var(--accent); outline-offset: 1px; }

/* ---------- news and blogs, related products ---------- */
.aa-sec--related { padding-top: 94px; }
.aa-cards { margin-top: 49px; }

@media (max-width: 1180px) {
  .aa-demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .aa-stack__frame { grid-template-columns: 1fr; padding: 0 12px 12px; }
  .aa-stack__side { padding: 10px 0; }
  .aa-stack__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aa-stack__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .aa-stack__title { font-size: 26px; line-height: 34px; }
  .aa-stack__tiles, .aa-stack__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-stack__base { padding: 8px 14px; }
  .aa-sec--agents { padding-bottom: 48px; }
  .aa-agents .dfa-more { margin-top: 16px; }
  .aa-demos { grid-template-columns: 1fr; }
  .aa-demo { min-height: 0; }
  .aa-sec--demos { padding-bottom: 64px; }
  .aa-sec--related { padding-top: 48px; }
}

/* hero buttons, as on cadence.com: at least 220px wide, 12/30/10 padding, 0.8px border, 35px apart */
.aa-hero .cs-hero__btns { column-gap: 35px; }
.aa-hero .cs-hero__btns .btn { min-width: 220px; height: 46.64px; padding: 12px 30px 10px; border: 0.8px solid transparent; justify-content: center; }
.aa-hero .cs-hero__btns .cs-btn--white:hover { border-color: #fff; }