/* Two independent, unpublished options. Load after styles.css and preview.css.
   Enable with body[data-agent-showcase="cards"] and/or
   body[data-tools-showcase="tiles"]. Asset URLs assume a root-level CSS file. */

/* OPTION A: the existing agent tabs become an illustrated capability strip. */
body[data-agent-showcase="cards"] .agent-workspace{grid-template-columns:minmax(0,1fr);gap:54px;padding-top:0}
body[data-agent-showcase="cards"] .agent-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid #d5c6e4;background:#fbf8fe;isolation:isolate}
body[data-agent-showcase="cards"] .agent-list button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;min-width:0;min-height:330px;padding:24px 25px 28px;border:0;border-right:1px solid #d5c6e4;background:radial-gradient(ellipse at 60% 26%,#fff 0%,#ffffff00 61%),linear-gradient(160deg,#f8f3fc,#eee4f6);color:var(--ink);transition:background-color .2s,box-shadow .2s;overflow:hidden}
body[data-agent-showcase="cards"] .agent-list button:last-child{border-right:0}
body[data-agent-showcase="cards"] .agent-list button:nth-child(2){background-color:#f4eff8}
body[data-agent-showcase="cards"] .agent-list button:nth-child(3){background-image:radial-gradient(ellipse at 50% 20%,#fff 0%,#ffffff00 65%),linear-gradient(160deg,#faf7fd,#e9def2)}
body[data-agent-showcase="cards"] .agent-list button:nth-child(4){background-image:radial-gradient(ellipse at 45% 35%,#fff 0%,#ffffff00 65%),linear-gradient(160deg,#f5eefb,#f0e8f7)}
body[data-agent-showcase="cards"] .agent-list button::after{content:"";position:absolute;width:134px;height:134px;top:75px;left:50%;transform:translateX(-50%);background:var(--capability-art) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 8px 9px #5734770b)}
body[data-agent-showcase="cards"] [data-agent="financial"]{--capability-art:url("assets/table_grid.svg")}
body[data-agent-showcase="cards"] [data-agent="cim"]{--capability-art:url("assets/open_book.svg")}
body[data-agent-showcase="cards"] [data-agent="research"]{--capability-art:url("assets/magnifier.svg")}
body[data-agent-showcase="cards"] [data-agent="strategy"]{--capability-art:url("assets/decision_signpost.svg")}
body[data-agent-showcase="cards"] .agent-list button>span:nth-child(2){position:relative;z-index:1;max-width:100%}
body[data-agent-showcase="cards"] .agent-list strong{font-size:24px;line-height:1.2;letter-spacing:-.65px;color:#2d203c}
body[data-agent-showcase="cards"] .agent-list small{font-size:12px;line-height:1.65;color:#675275;max-width:195px;margin-top:10px;min-height:40px}
body[data-agent-showcase="cards"] .agent-list .tab-no{display:block;position:absolute;right:23px;top:24px;padding:0;font-size:10px;line-height:32px;color:#715a82}
body[data-agent-showcase="cards"] .agent-list .tab-arrow{display:grid;place-items:center;position:absolute;left:24px;top:22px;width:34px;height:34px;border-radius:50%;margin:0;opacity:1;background:#fff;border:1px solid #ded2e9;color:var(--purple);font-size:0}
body[data-agent-showcase="cards"] .agent-list .tab-arrow::before{content:"+";font:400 24px/1 Manrope,sans-serif}
body[data-agent-showcase="cards"] .agent-list button[aria-selected="true"]{background-color:#f2e6fd;box-shadow:inset 0 -4px 0 var(--purple)}
body[data-agent-showcase="cards"] .agent-list button[aria-selected="true"]::before{content:none}
body[data-agent-showcase="cards"] .agent-list button[aria-selected="true"] .tab-arrow{background:var(--purple);border-color:var(--purple);color:#fff}
body[data-agent-showcase="cards"] .agent-list button[aria-selected="true"] .tab-arrow::before{content:"−"}
body[data-agent-showcase="cards"] .agent-list button:hover{box-shadow:inset 0 -4px 0 #ac8acb}
body[data-agent-showcase="cards"] .agent-list button[aria-selected="true"]:hover{box-shadow:inset 0 -4px 0 var(--purple)}
body[data-agent-showcase="cards"] .agent-list button:focus-visible{outline:3px solid var(--purple);outline-offset:-6px;z-index:2}
body[data-agent-showcase="cards"] .agent-card-stack{width:100%;max-width:980px;justify-self:center;margin:0}
body[data-agent-showcase="cards"] .agent-panel{margin-top:0}

/* OPTION B: all actual tool details stay still; only this added field moves. */
body[data-tools-showcase="tiles"] .tools-heading{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"title tiles" "copy tiles";gap:22px 64px;align-items:start}
body[data-tools-showcase="tiles"] .tools-heading>div:first-child{grid-area:title;align-self:end}
body[data-tools-showcase="tiles"] .tools-heading>p{grid-area:copy;margin:0;max-width:480px;font-size:14px;line-height:1.85}
.tool-motion-module{grid-area:tiles;min-width:0;align-self:center;position:relative}
.tool-motion-field{height:295px;overflow:hidden;position:relative;pointer-events:none;user-select:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;background:radial-gradient(ellipse at 50% 50%,#e6d8f26b,transparent 74%);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.tool-motion-lane{min-width:0;height:295px;overflow:visible}
.tool-motion-track{display:flex;flex-direction:column;animation:hula-tool-drift 58s linear infinite;animation-play-state:paused;will-change:auto}
.tool-motion-lane:nth-child(2) .tool-motion-track{animation-direction:reverse;animation-duration:66s;animation-delay:-19s}
.tool-motion-lane:nth-child(3) .tool-motion-track{animation-duration:62s;animation-delay:-28s}
.tool-motion-group{display:flex;flex-direction:column;gap:18px;padding-bottom:18px}
.tool-motion-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:98px;flex:0 0 98px;padding:15px 10px;border:1px solid #e0d4e9;border-top-color:#fff;border-radius:10px;background:linear-gradient(155deg,#fff,#f5effa);box-shadow:0 5px 10px #371b4e05,0 15px 22px #371b4e08;color:#5b3a74;text-align:center;font:500 15px/1.3 Manrope,sans-serif;letter-spacing:-.3px}
.tool-motion-tile small{font:400 9px/1.4 Manrope,sans-serif;letter-spacing:0;color:#776285}
.tool-motion-tile:nth-child(2n){background:linear-gradient(155deg,#f9f4ff,#ebe0f5);border-color:#d9c5e9;border-top-color:#fff}
.tool-motion-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.tool-motion-footer>p{font-size:10px;line-height:1.6;color:#6b547c;margin:0;max-width:230px}
.tool-motion-toggle{display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:40px;padding:8px 12px;border:1px solid #d1bfdc;border-radius:4px;background:#fff;color:#593c70;font:500 11px/1.5 Manrope,sans-serif}
.tool-motion-toggle:hover{background:#f1e9f8;border-color:#aa87c5}
.tool-motion-toggle:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.tool-motion-toggle[aria-disabled="true"]{cursor:default;background:#f5f0f9}
.tool-motion-module[data-motion="playing"] .tool-motion-track{animation-play-state:running}
@keyframes hula-tool-drift{to{transform:translateY(-50%)}}
@media(max-width:1000px){
  body[data-agent-showcase="cards"] .agent-list button{min-height:310px;padding-inline:21px}
  body[data-agent-showcase="cards"] .agent-list strong{font-size:21px}
  body[data-agent-showcase="cards"] .agent-list button::after{width:118px;height:118px}
  body[data-tools-showcase="tiles"] .tools-heading{gap:22px 35px}
  .tool-motion-field{gap:12px}.tool-motion-group{gap:14px;padding-bottom:14px}.tool-motion-tile{font-size:13px;height:90px;flex-basis:90px;padding-inline:6px}
  .tool-motion-footer{gap:10px}.tool-motion-footer>p{font-size:9px}
}
@media(max-width:800px){
  body[data-agent-showcase="cards"] .agent-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-agent-showcase="cards"] .agent-list button{min-height:290px;padding:23px 26px}
  body[data-agent-showcase="cards"] .agent-list button:nth-child(2){border-right:0}
  body[data-agent-showcase="cards"] .agent-list button:nth-child(n+3){border-top:1px solid #d5c6e4}
  body[data-agent-showcase="cards"] .agent-list button::after{top:64px;width:120px;height:120px}
  body[data-agent-showcase="cards"] .agent-list strong{font-size:22px}
  body[data-tools-showcase="tiles"] .tools-heading{grid-template-columns:1fr;grid-template-areas:"title" "copy" "tiles";gap:24px}
  .tool-motion-module{width:100%;max-width:520px;justify-self:center;margin-top:2px}
  .tool-motion-field,.tool-motion-lane{height:230px}.tool-motion-field{gap:18px}
  .tool-motion-tile{font-size:15px;height:94px;flex-basis:94px}
  .tool-motion-footer>p{font-size:10px}
}
@media(max-width:600px){
  body[data-agent-showcase="cards"] .agent-workspace{gap:43px}
  body[data-agent-showcase="cards"] .agent-list button{min-height:259px;padding:19px 17px 22px}
  body[data-agent-showcase="cards"] .agent-list button::after{top:62px;width:100px;height:100px}
  body[data-agent-showcase="cards"] .agent-list strong{font-size:19px;letter-spacing:-.45px}
  body[data-agent-showcase="cards"] .agent-list small{font-size:11px;line-height:1.55;margin-top:8px;min-height:35px}
  body[data-agent-showcase="cards"] .agent-list .tab-arrow{left:17px;top:17px;width:29px;height:29px}
  body[data-agent-showcase="cards"] .agent-list .tab-no{right:17px;top:17px;font-size:9px;line-height:29px}
  body[data-tools-showcase="tiles"] .tools-heading{gap:22px}
  .tool-motion-field,.tool-motion-lane{height:210px}.tool-motion-field{gap:12px}
  .tool-motion-tile{font-size:13px;height:84px;flex-basis:84px;border-radius:8px}
  .tool-motion-tile small{font-size:8px}
  .tool-motion-footer{margin-top:8px;align-items:center}.tool-motion-footer>p{font-size:9px;max-width:180px}
  .tool-motion-toggle{font-size:10px;padding-inline:10px;min-height:40px}
}
@media(max-width:360px){
  body[data-agent-showcase="cards"] .agent-list button{min-height:263px;padding-inline:14px}
  body[data-agent-showcase="cards"] .agent-list strong{font-size:17px}
  body[data-agent-showcase="cards"] .agent-list small{font-size:11px;min-height:51px}
  body[data-agent-showcase="cards"] .agent-list button::after{top:60px;width:91px;height:91px}
  .tool-motion-field{gap:9px}.tool-motion-tile{font-size:12px;padding-inline:3px}
}
@media(prefers-reduced-motion:reduce){
  body[data-agent-showcase="cards"] .agent-list button{transition:none}
  .tool-motion-track{animation:none!important;transform:translateY(-32px)}
  .tool-motion-lane:nth-child(2) .tool-motion-track{transform:translateY(-76px)}
}