/* Scoped to the AI section: desktop scroll showcase, mobile reading sequence. */
#ai .ai-showcase { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 32px; align-items: start; }
#ai .ai-showcase-menu { display: flex; flex-direction: column; gap: 8px; }
#ai .ai-showcase-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 88px; padding: 16px 20px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #60645b; text-align: left; font: 500 18px/26px var(--font-sans); cursor: pointer; }
#ai .ai-showcase-menu-item::after { content: '→'; font-size: 20px; opacity: 0; }
#ai .ai-showcase-menu-item:hover { background: #f5f5f1; color: #252724; }
#ai .ai-showcase-menu-item[aria-selected="true"] { background: var(--lime); color: #252724; border-color: #252724; box-shadow: 2px 3px 0 #171817; }
#ai .ai-showcase-menu-item:focus-visible { outline: 3px solid #7760c2; outline-offset: 4px; }
#ai .ai-showcase-panels { display: grid; min-width: 0; border-radius: 20px; background: #f8f5ec; box-shadow: 4px 5px 0 #171817; }
#ai .ai-showcase-panel { display: grid; grid-template-rows: auto auto; gap: 16px; min-width: 0; padding: 24px; }
#ai .ai-showcase-panel + .ai-showcase-panel { border-top: 1px solid #dedfd7; }
body.landing-composition #top #ai .ai-showcase-copy h3 { margin: 0; font-size: 24px; line-height: 32px; }
body.landing-composition #top #ai .ai-showcase-copy p { margin-top: 8px; max-width: none; font-size: 16px; line-height: 24px; }
#ai .ai-showcase-mobile-title { display: none; }
#ai .ai-showcase-media { width: 100%; height: clamp(240px,23vw,280px); min-width: 0; overflow: hidden; border-radius: 12px; background: #fff; }
#ai .ai-showcase-shell { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 12px; background: #fff; box-shadow: none; transform: none; overflow: hidden; }
#ai .ai-showcase-shell .screen-topbar { flex: none; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--ink-10); }
#ai .ai-showcase-shell .screen-topbar::after { display: none; }
#ai .ai-showcase-shell .ai-showcase-media { border-radius: 0; }
#ai .ai-showcase-media :is(picture,img) { display: block; width: 100%; height: 100%; object-fit: contain; }
#ai .ai-showcase-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; text-align: center; }
#ai .ai-showcase-cta p { margin: 0; color: #50534d; font: 400 18px/28px var(--font-sans); }
/* All panels contribute to the same grid track: text changes cannot move the CTA. */
@media(min-width:801px) {
 #ai .ai-showcase-track[data-scroll-enabled]::after { content: ""; display: block; height: var(--ai-scroll-distance,240px); }
 #ai .ai-showcase-track[data-scroll-enabled] .ai-showcase-stage { position: sticky; top: var(--ai-sticky-top,88px); }
 #ai .ai-showcase-panel { grid-template-rows: auto minmax(0,1fr); }
 #ai .ai-showcase-panel > .ai-showcase-shell { height: 100%; }
 #ai .ai-showcase-shell .ai-showcase-media { flex: 1 1 auto; height: auto; min-height: 240px; }
 #ai .ai-showcase[data-enhanced] .ai-showcase-panel { grid-area: 1 / 1; grid-template-rows: subgrid; grid-row: 1 / 3; }
 #ai .ai-showcase[data-enhanced] .ai-showcase-panels { grid-template-rows: auto minmax(0,1fr); }
 #ai .ai-showcase[data-enhanced] .ai-showcase-panel + .ai-showcase-panel { border-top: 0; }
 #ai .ai-showcase[data-enhanced] .ai-showcase-panel[hidden] { display: grid; visibility: hidden; pointer-events: none; }
}
@media(max-width:1100px) and (min-width:801px) {
 #ai .ai-showcase { grid-template-columns: 280px minmax(0,1fr); gap: 24px; }
 #ai .ai-showcase-menu-item { padding: 16px; font-size: 16px; }
 #ai .ai-showcase-panel { padding: 24px; }
 }
@media(max-width:800px) {
 #ai .ai-showcase { display: block; }
 #ai .ai-showcase-menu { display: none; }
 #ai .ai-showcase-sidebar { display: none; }
 #ai .ai-showcase-panels { display: grid; gap: 24px; background: transparent; box-shadow: none; border-radius: 0; }
 #ai .ai-showcase-panel { padding: 24px; gap: 18px; border-radius: 20px; background: #fff; box-shadow: 3px 4px 0 #171817; }
 #ai .ai-showcase-shell { background: #f8f5ec; }
 #ai .ai-showcase-panel + .ai-showcase-panel { border-top: 0; }
 #ai .ai-showcase-desktop-title { display: none; }
 #ai .ai-showcase-mobile-title { display: inline; }
 #ai .ai-showcase-media { height: clamp(240px,55vw,300px); }
 }
@media(max-width:480px) {
 #ai .ai-showcase-panel { padding: 20px 16px; }
 #ai .ai-showcase-cta .button { width: 100%; white-space: normal; }
}

/* Assistant copy and supporting plan information stay close to the menu. */
body.landing-composition #top #ai .rebuild-heading { max-width: none; }
body.landing-composition #top #ai .rebuild-heading > p { max-width: none; }
#ai .ai-showcase-stage > .rebuild-heading { margin-bottom: 32px; }
body.landing-composition #top #ai .rebuild-heading > p { text-wrap: balance; }
#ai .ai-showcase-menu-copy { display: grid; gap: 5px; }
#ai .ai-showcase-menu-label { text-wrap: balance; }
#ai .ai-showcase-menu-label { font-weight: 600; }
#ai .ai-showcase-menu-description { font: 400 14px/20px var(--font-sans); }
#ai .ai-showcase-menu-item[aria-selected="true"]::after { opacity: 1; }
@media(max-width:800px) {
}

/* Reference composition: one bordered cream card holds the menu column and a white content panel. */
@media(min-width:801px) {
 #ai .ai-showcase { grid-template-columns: 424px minmax(0,1fr); gap: 32px; align-items: stretch; padding: 32px 32px 32px 34px; border: 1px solid #252724; border-radius: 36px; background: #faf7ee; box-shadow: 8px 10px 0 #171817; }
 #ai .ai-showcase-sidebar { display: flex; flex-direction: column; min-width: 0; }
 #ai .ai-showcase-menu { gap: 12px; }
 #ai .ai-showcase-menu-item { justify-content: flex-start; gap: 16px; min-height: 0; padding: 20px 24px 20px 4px; border-radius: 14px; color: #60645b; }
 #ai .ai-showcase-menu-item::before { content: ""; flex: 0 0 60px; width: 60px; height: 60px; margin-left: 0; border-radius: 16px; background: #ecebe6; -webkit-mask: none; }
 #ai .ai-showcase-menu-item::before { background: #ecebe6 center/26px no-repeat; }
 #ai .ai-showcase-menu-item::after { margin-left: auto; }
 #ai .ai-showcase-menu-item:hover { background: transparent; color: #252724; }
 #ai .ai-showcase-menu-item[aria-selected="true"] { min-height: 120px; padding: 24px 28px; border-radius: 14px; background: #cdf27a; box-shadow: none; }
 #ai .ai-showcase-menu-item[aria-selected="true"]::before { display: none; }
 #ai .ai-showcase-menu-item[aria-selected="true"] .ai-showcase-menu-label { font-size: 24px; line-height: 32px; font-weight: 700; }
 #ai .ai-showcase-menu-item[aria-selected="true"] .ai-showcase-menu-description { font-size: 18px; line-height: 26px; color: #252724; }
 #ai .ai-showcase-menu-label { font-size: 22px; line-height: 30px; font-weight: 700; }
 #ai .ai-showcase-menu-description { font-size: 18px; line-height: 26px; }
 #ai .ai-showcase-menu-item::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none' stroke='%2360645b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 7h11M9 13h11M9 19h11M5 7h.01M5 13h.01M5 19h.01'/%3E%3C/svg%3E"); }
 #ai #ai-menu-retro::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='%2360645b'%3E%3Crect x='4' y='13' width='4' height='9' rx='1'/%3E%3Crect x='11' y='6' width='4' height='16' rx='1'/%3E%3Crect x='18' y='10' width='4' height='12' rx='1'/%3E%3C/svg%3E"); }
 #ai .ai-showcase-menu { margin-bottom: 28px; }
 #ai .ai-showcase-panels { border-radius: 24px; background: #fff; box-shadow: none; }
 #ai .ai-showcase-panel { padding: 32px; gap: 18px; }
 body.landing-composition #top #ai .ai-showcase-copy h3 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.025em; }
 body.landing-composition #top #ai .ai-showcase-copy p { font-size: 20px; line-height: 28px; color: #60645b; }
 #ai .ai-showcase-media { height: clamp(280px,25vw,360px); border-radius: 16px; background: transparent; }
}
@media(max-width:1100px) and (min-width:801px) {
 #ai .ai-showcase { grid-template-columns: 300px minmax(0,1fr); padding: 24px; }
 body.landing-composition #top #ai .ai-showcase-copy h3 { font-size: 30px; line-height: 38px; }
 #ai .ai-showcase-menu-item::before { flex-basis: 48px; width: 48px; height: 48px; }
 #ai .ai-showcase-menu-label { font-size: 18px; }
 #ai .ai-showcase-menu-description { font-size: 15px; line-height: 22px; }
}