/* AI Suite pages (/ai/<slug>/): the case-study layout (cs.css + page-m.css) with a drawn product mock-up in place
   of the hero photo. The mock-up scales with its box: everything inside is sized in em off a cqw font size. */
.ai-vis{container-type:inline-size;display:grid;place-items:center;background:radial-gradient(120% 90% at 85% 0%,var(--cs-tile),var(--cs-bg) 60%)}
.ai-win{width:84%;font-size:clamp(8.5px,2.75cqw,14px);background:#fff;border-radius:1.15em;box-shadow:0 1.6em 3.2em -1.2em rgba(20,21,26,.28),0 0 0 1px rgba(20,21,26,.05);overflow:hidden;font-family:'Hanken Grotesk',sans-serif;color:#14151a;text-align:left}
.ai-bar{display:flex;align-items:center;gap:.8em;padding:.75em 1em;border-bottom:1px solid #f0efea;background:#fbfaf7}
.ai-bar>span{display:flex;gap:.32em}.ai-bar>span i{width:.55em;height:.55em;border-radius:50%;background:#e2e0d9}
.ai-bar small{font-size:.86em;font-weight:600;color:#5e6270}
.ai-bar em{margin-left:auto;display:inline-flex;align-items:center;gap:.35em;font-style:normal;font-size:.78em;font-weight:700;color:var(--cs-ac);background:var(--cs-bg);padding:.3em .7em;border-radius:99em}
.ai-ui{padding:1em 1.1em 1.1em;display:flex;flex-direction:column;gap:.8em}
.ai-ui button{font:inherit;font-size:.86em;font-weight:700;color:#fff;background:#14151a;border:0;border-radius:.6em;padding:.55em .95em;cursor:default}
.ai-foot{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.ai-foot>span{font-size:.8em;color:#8a8f9c}

/* 01 course structure */
.ai-src{display:flex;gap:.45em;flex-wrap:wrap}
.ai-src span{font-size:.8em;font-weight:600;color:#4b4f5c;background:#f4f3ef;border-radius:.5em;padding:.3em .65em}
.ai-tree{display:flex;flex-direction:column;gap:.45em}
.ai-mod{display:flex;flex-direction:column;gap:.3em;padding:.6em .7em;border:1px solid #eceae4;border-radius:.7em}
.ai-mod b,.ai-mod span{display:flex;align-items:center;gap:.5em}
.ai-mod b{font-size:.92em}
.ai-mod span{font-size:.84em;color:#4b4f5c;padding-left:1.5em}
.ai-mod span.off{color:#a9aebb;text-decoration:line-through}
.ai-cb{flex:none;width:.95em;height:.95em;border-radius:.25em;border:1.5px solid #c9c7c0}
.ai-cb.on{border-color:var(--cs-ac);background:var(--cs-ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat}

/* 02 content creation */
.ai-doc{display:flex;flex-direction:column;gap:.45em}
.ai-doc b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.08em;line-height:1.2;margin-bottom:.15em}
.ai-doc i{display:block;height:.5em;border-radius:99em;background:#eeede8}
.ai-chips,.ai-tags{display:flex;flex-wrap:wrap;gap:.4em}
.ai-chips span{font-size:.78em;font-weight:600;color:#4b4f5c;border:1px solid #e4e2dc;border-radius:99em;padding:.28em .7em}
.ai-chips span.on{color:#fff;background:var(--cs-ac);border-color:var(--cs-ac)}
.ai-imgs{display:flex;gap:.7em;align-items:stretch}
.ai-img{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:4.6em;border-radius:.7em;padding:.5em .6em;background:linear-gradient(135deg,#d9f2c7,#8fd18a 55%,#3f9d5a)}
.ai-img small{font-size:.72em;font-weight:700;color:#fff}
.ai-acc{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.45em;padding:.6em;border:1px dashed #d9d7d0;border-radius:.7em}
.ai-acc span{font-size:.82em;font-weight:600}
.ai-acc button{align-self:flex-start;background:var(--cs-ac)}
.ai-tags span{font-size:.76em;font-weight:600;color:var(--cs-ac)}

/* 03 personal teacher */
.ai-chat{display:flex;flex-direction:column;gap:.55em}
.ai-chat p{margin:0;max-width:86%;font-size:.88em;line-height:1.45;padding:.6em .8em;border-radius:.9em}
.ai-chat .me{align-self:flex-end;background:#14151a;color:#fff;border-bottom-right-radius:.25em}
.ai-chat .bot{background:#f4f3ef;color:#14151a;border-bottom-left-radius:.25em}
.ai-chat .bot small{display:block;margin-top:.45em;font-size:.86em;font-weight:700;color:var(--cs-ac)}
.ai-ask{display:flex;align-items:center;justify-content:space-between;padding:.45em .5em .45em .9em;border:1px solid #e4e2dc;border-radius:99em}
.ai-ask span{font-size:.84em;color:#a9aebb}
.ai-mic{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--cs-ac);color:#fff;font-size:1em}

/* 04 quiz creation */
.ai-row{display:flex;align-items:center;flex-wrap:wrap;gap:.4em}
.ai-k{width:5.6em;font-size:.78em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a8f9c}
.ai-pill{font-size:.8em;font-weight:600;color:#14151a;background:#f4f3ef;border-radius:.5em;padding:.3em .6em}
.ai-seg{display:inline-flex;gap:.2em;padding:.2em;border-radius:.6em;background:#f4f3ef}
.ai-seg span{font-size:.78em;font-weight:600;color:#5e6270;padding:.25em .6em;border-radius:.45em}
.ai-seg span.on{background:#fff;color:#14151a;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ai-score{display:flex;align-items:center;gap:1em;padding:.75em .85em;border-radius:.8em;background:var(--cs-bg)}
.ai-score strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.7em;line-height:1;color:var(--cs-ac)}
.ai-score small{font-size:.74em;color:#5e6270}
.ai-bars,.ai-skills{flex:1;display:flex;flex-direction:column;gap:.45em}
.ai-bars span,.ai-skills span{display:grid;grid-template-columns:7.2em 1fr auto;align-items:center;gap:.6em}
.ai-bars em,.ai-skills em{font-style:normal;font-size:.78em;font-weight:600;color:#4b4f5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-bars i,.ai-skills i{height:.5em;border-radius:99em;background:linear-gradient(90deg,var(--cs-ac) var(--w),#e8e6e0 var(--w))}

/* 05 career counselling */
.ai-role b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.15em}
.ai-role small{font-size:.8em;color:#8a8f9c}
.ai-skills span b{font-size:.7em;font-weight:700;color:#e5537a;background:#fff1f5;border-radius:99em;padding:.15em .55em}
.ai-skills span.gap i{background:linear-gradient(90deg,#e5537a var(--w),#e8e6e0 var(--w))}
.ai-skills span:not(.gap){grid-template-columns:7.2em 1fr}

/* 06 attendance: classroom photo with detected faces, then the matched list */
.ai-class{position:relative;height:7.4em;border-radius:.8em;overflow:hidden;background:linear-gradient(180deg,#e9e2d6 0%,#d8cdbb 58%,#b99a77 58%,#a9865f 100%)}
.ai-class::before{content:"";position:absolute;left:6%;right:6%;top:12%;height:30%;border-radius:.3em;background:#3e5f55;opacity:.85}
.ai-face{position:absolute;left:var(--x);top:var(--y);width:2.9em;height:3.3em;border:2px solid #22c55e;border-radius:.45em;background:radial-gradient(circle at 50% 38%,#c99a76 0 32%,transparent 33%),radial-gradient(ellipse at 50% 108%,#6b7fa6 0 46%,transparent 47%)}
.ai-face b{position:absolute;left:50%;bottom:-1.55em;transform:translateX(-50%);white-space:nowrap;font-size:.66em;font-weight:700;color:#fff;background:#16a34a;border-radius:.4em;padding:.15em .45em}
.ai-face.q{border-color:#f59e0b;border-style:dashed}.ai-face.q b{background:#d97706}
.ai-list{display:flex;flex-direction:column;gap:.35em}
.ai-list span{display:flex;align-items:center;gap:.55em;font-size:.84em;font-weight:600}
.ai-list em{margin-left:auto;font-style:normal;font-size:.9em;font-weight:600;color:#8a8f9c}
.ai-list span.q{color:#b45309}.ai-list span.q em{color:#d97706}

/* hero "Part of" line: the Placement Module label next to the LMS logo */
.ai-sub{font-size:13px;font-weight:600;color:#5e6270;background:#fff;border:1px solid #eceae4;border-radius:99px;padding:5px 12px}
/* "Why Arivoo" card: the closing paragraph from the brief under the quote */
.ai-why-p{margin-top:14px;font-size:16px;line-height:1.6;color:inherit;opacity:.82;max-width:640px;text-wrap:pretty}
@media (max-width:760px){
  .pm-ai .ai-why-p{font-size:15px;line-height:1.55;color:#4b4f5c;opacity:1;margin-top:10px}
  .pm-ai .cs-built .ai-sub{font-size:12px;padding:3px 10px}
  .pm-ai .cs-photo.ai-vis{aspect-ratio:350/300!important}
  .pm-ai .ai-win{width:90%;font-size:clamp(9px,3.1cqw,14px)}
}