/* FAQs: scoped to avoid affecting the existing page. */
#AI-Laptop #faqs { background: #000; color: #fff; padding: 64px 24px 80px; }
#AI-Laptop #faqs .ai-faq__container { max-width: 1280px; margin: 0 auto; }
#AI-Laptop #faqs h2 { margin: 0 0 24px; text-align: center; font-size: 36px; line-height: 1.25; }
#AI-Laptop #faqs .ai-faq__item { border-bottom: 1px solid #aaa; }
#AI-Laptop #faqs .ai-faq__item[open] { background: #333; }
#AI-Laptop #faqs summary { display: flex; align-items: baseline; gap: 16px; padding: 26px 16px; cursor: pointer; list-style: none; font-size: 20px; font-weight: 700; line-height: 1.3; text-align: left; }
#AI-Laptop #faqs summary::-webkit-details-marker { display: none; }
#AI-Laptop #faqs summary::before { content: "+"; flex: 0 0 12px; color: #999; font-weight: 400; }
#AI-Laptop #faqs details[open] > summary::before { content: "−"; }
#AI-Laptop #faqs details[open] > summary { border-bottom: 1px dashed #aaa; }
#AI-Laptop #faqs summary:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
#AI-Laptop #faqs .ai-faq__answer { padding: 24px 44px 40px; font-size: 18px; line-height: 1.5; }
#AI-Laptop #faqs .ai-faq__answer p { margin: 0; font-size: inherit; line-height: inherit; text-align: left; }
@media (max-width: 600px) {
  #AI-Laptop #faqs { padding: 40px 16px 56px; }
  #AI-Laptop #faqs h2 { font-size: 30px; }
  #AI-Laptop #faqs summary { padding: 22px 12px; font-size: 18px; gap: 12px; }
  #AI-Laptop #faqs .ai-faq__answer { padding: 20px 36px 28px; font-size: 16px; }
}

/* Static LLM / SLM cards; existing slick-ai.js handles carousel interaction. */
#SLM-AI-Solutions_info .ai-application { box-sizing: border-box; background: #000; color: #fff; height: auto; }
#SLM-AI-Solutions_info .ai-application__image { display: block; width: 100%; aspect-ratio: 510 / 345; object-fit: cover; }
#SLM-AI-Solutions_info .ai-application .txtbox { padding: 28px 24px 32px; flex: 1; text-align: center; }
#SLM-AI-Solutions_info .ai-application__title { margin: 0 0 16px; font-size: 24px; line-height: 1.3; color: #fff; }
#SLM-AI-Solutions_info .ai-application__description { margin: 0; font-size: 16px; line-height: 1.6; color: #ccc; }
#SLM-AI-Solutions_info .slick-track { align-items: stretch; }
#SLM-AI-Solutions_info .slick-initialized .ai-application { display: flex; flex-direction: column; height: auto; }
/* Content remains readable if carousel JavaScript is unavailable. */
#SLM-AI-Solutions_info .speedcenterMode:not(.slick-initialized) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
#SLM-AI-Solutions_info .speedcenterMode:not(.slick-initialized) .ai-application { flex: 0 0 33.333%; min-width: 280px; margin: 0; scroll-snap-align: center; }
@media (max-width: 1023px) {
  #SLM-AI-Solutions_info .speedcenterMode:not(.slick-initialized) .ai-application { flex-basis: 85%; }
  #SLM-AI-Solutions_info .ai-application .txtbox { padding: 24px 20px; }
  #SLM-AI-Solutions_info .ai-application__title { font-size: 21px; }
}

/* Local AI benefits — all text remains editable in HTML. */
#Local-AI { padding: 56px 24px 100px; background: #010b20 url("https://storage-asset.msi.com/event/2026/nb/msi-AI-laptop-nb/images/local-ai/local-ai-bg.jpg") center center / cover no-repeat; color: #fff; }
#Local-AI * { box-sizing: border-box; }
#Local-AI .local-ai__container { max-width: 940px; margin: 0 auto; }
#Local-AI h3 { margin: 0 0 64px; text-align: center; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.25; color: #fff; }
#Local-AI .local-ai__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
#Local-AI .local-ai__card { position: relative; isolation: isolate; overflow: hidden; min-height: 246px; padding: 18px 30px 24px; border: 1px solid #5ccfff; border-radius: 19px; background: linear-gradient(115deg, rgba(0,23,65,.95), rgba(0,34,94,.88)); box-shadow: inset 0 0 16px #007aff, inset 0 -3px 5px #00baff, 0 0 10px #0067e0; }
#Local-AI .local-ai__icon { display: block; width: 90px; height: 90px; margin: 0 0 8px; }
#Local-AI .local-ai__art { position: absolute; top: 12px; right: 12px; width: 46%; height: 150px; object-fit: contain; opacity: .65; z-index: -1; pointer-events: none; }
#Local-AI h4 { position: relative; margin: 0 0 4px; color: #fff; font-size: clamp(23px, 2.2vw, 30px); font-weight: 700; line-height: 1.2; text-align: left; }
#Local-AI p { position: relative; margin: 0; color: #fff; font-size: 17px; line-height: 1.5; text-align: left; }
@media (max-width: 767px) {
  #Local-AI { padding: 40px 20px 64px; background-position: center bottom; }
  #Local-AI h3 { margin-bottom: 32px; }
  #Local-AI .local-ai__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #Local-AI .local-ai__card { min-height: 238px; padding: 18px 22px 24px; }
  #Local-AI .local-ai__art { width: 44%; opacity: .45; }
  #Local-AI h4 { font-size: 25px; }
  #Local-AI p { font-size: 16px; }
}

/* Scoped after main-2026.css: keep responsive layout and fix only the title color. */
#AI-Laptop #opening-animation .item__01 h2.rainbow-text {
    color: #0066ff;
    background-image: linear-gradient(90deg,
        #0066ff 0%, #0066ff 25%, #6438e7 45%,
        #ff00b3 60%, #dc2dff 75%, #0066ff 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: msi-hero-color-flow 5s linear infinite;
}
@keyframes msi-hero-color-flow {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    #AI-Laptop #opening-animation .item__01 h2.rainbow-text {
        animation: none;
        background-position: 0% 50%;
    }
}
@media (forced-colors: active) {
    #AI-Laptop #opening-animation .item__01 h2.rainbow-text {
        background: none; animation: none; color: CanvasText;
        -webkit-text-fill-color: CanvasText;
    }
}