/* project: AI-assisted course design (white with a violet accent) */
#cs6{--v:#5B45E0; --v2:#8B7BF0; --vs:#EFECFD; --bg:#FBFAFF; --bg2:#F3F1FC; --tx:#17152B; --mu:#5A5872; --ln:#E2DFF3; background:var(--bg); color:var(--tx)}

/* hero: text, facts, then a tilted strip of real screens */
.ai-hero{padding:64px 0 0; overflow:hidden; background:radial-gradient(ellipse 55% 60% at 88% 0%, rgba(139,123,240,.22), transparent 65%), var(--bg)}
.ai-kick{margin:36px 0 10px; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--v)}
.ai-hero h1{font-size:clamp(34px,4.8vw,62px); margin:0 0 18px; max-width:16ch; text-wrap:balance}
.ai-lead{font-size:clamp(16px,1.5vw,18px); color:var(--mu); max-width:60ch; margin:0}
.ai-meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:40px 0 0; padding:22px 0 0; border-top:1px solid var(--ln)}
.ai-meta dt{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mu)}
.ai-meta dd{margin:4px 0 0; font-family:var(--display); font-size:17px; font-weight:600; line-height:1.35}
.ai-banner{position:relative; height:clamp(220px,30vw,380px); margin-top:56px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent)}
.ai-banner-in{position:absolute; left:50%; top:0; width:max(1400px,120%); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; transform:translate(-50%,-6%) rotate(-6deg)}
.ai-banner span{display:block; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 16px 32px -18px rgba(23,21,43,.4), 0 0 0 1px var(--ln)}
.ai-banner span:nth-child(even){transform:translateY(22%)}
.ai-banner img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top}

/* bands */
.ai-band{padding:96px 0; background:var(--bg)}
.ai-band.alt{background:var(--bg2)}
.ai-band.dark{background:#17152B; color:#fff}
.ai-cap{max-width:62ch; margin-bottom:48px}
.ai-cap h2{font-size:clamp(26px,2.8vw,36px); margin:0 0 12px}
.ai-cap p{font-size:16px; color:var(--mu); margin:0}
.ai-band.dark .ai-cap p{color:#C9C6E4}
.ai-lab{margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--v)}

/* challenge + approach */
.ai-cs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px}
.ai-cs h2{font-size:clamp(22px,2.2vw,28px); margin:0 0 12px}
.ai-cs p:last-child{font-size:16px; color:var(--mu); margin:0}

/* workflow: five stages with a rule above each, like chapter titles */
.ai-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px}
.ai-flow li{display:flex; flex-direction:column; gap:8px; padding-top:18px; border-top:2px solid var(--tx)}
.ai-flow b{font-family:var(--display); font-size:20px; font-weight:700}
.ai-flow p{margin:0; font-size:15px; color:var(--mu); line-height:1.55}
.who{align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 10px; border-radius:999px}
.who.me{color:var(--tx); background:#fff; box-shadow:inset 0 0 0 1px var(--ln)}
.who.ai{color:#fff; background:var(--v)}
.ai-flow li:has(.who.ai){border-top-color:var(--v)}
.ai-rule{margin:48px 0 0; padding:20px 24px; border-left:3px solid var(--v); background:#fff; border-radius:0 12px 12px 0; font-size:17px; color:var(--mu)}
.ai-rule b{color:var(--tx)}

/* the nine events: text on the left, real screens on the right */
.ai-events{list-style:none; margin:0; padding:0}
.ai-ev{display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); gap:48px; align-items:start; padding:56px 0; border-top:1px solid var(--ln)}
.ai-ev:first-child{border-top:none; padding-top:8px}
.ai-ev-t{position:sticky; top:96px}
.ai-ev-n{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--v)}
.ai-ev-t h3{font-size:clamp(22px,2.2vw,28px); margin:0 0 12px}
.ai-ev-what{font-family:var(--display); font-weight:600; color:var(--tx)!important}
.ai-ev-t p{margin:0 0 10px; font-size:16px; color:var(--mu)}
/* every screen is 1200 x 750 at true size, shown one at a time in the same frame */
.ai-gal{position:relative}
.ai-gal .sm-track{background:none}
.ai-gal .sm-slide img{max-height:none; aspect-ratio:1200/750; height:auto; object-fit:contain; background:#fff; border-radius:12px; outline:1px solid var(--ln); outline-offset:-1px}
.ai-gal .sm-slide figcaption{padding:12px 120px 0 2px; color:var(--mu)}
.ai-gal .sm-controls{right:0}
.ai-gal .sm-dots i.on{background:var(--v)}

/* result */
.ai-res{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.ai-res div{padding-top:20px; border-top:1px solid rgba(255,255,255,.2)}
.ai-res strong{display:block; font-family:var(--display); font-size:clamp(32px,3.6vw,48px); line-height:1.1; color:#fff}
.ai-res div:first-child strong{color:var(--v2)}
.ai-res div > span{display:block; margin-top:6px; font-size:15px; color:#C9C6E4}

#cs6 .next{border-top-color:var(--ln)}

@media (max-width:900px){
  .ai-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-band{padding:64px 0}
  .ai-cs{grid-template-columns:minmax(0,1fr); gap:40px}
  .ai-flow{grid-template-columns:minmax(0,1fr); gap:20px}
  .ai-ev{grid-template-columns:minmax(0,1fr); gap:24px; padding:40px 0}
  .ai-ev-t{position:static}
  .ai-res{grid-template-columns:minmax(0,1fr)}
}