/* ============================================================
   AI SCHOOL ERP PAGE
   ============================================================ */
:root{ --nv:#022b63; --cream:#efede7; --amber:#f9a825; --ink:#111827; --muted:#5b6472; --line:#e7e4dc; --soft:#f7f6f2; }

.ai-feat{ display:flex; align-items:flex-start; gap:12px; font-family:'DMSans-Medium'; font-size:15.5px; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--line); }
.ai-feat i{ color:var(--amber); font-size:22px; flex:0 0 auto; }

.ai-needcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; font-family:'DMSans-Medium'; font-size:15.5px; color:var(--ink); display:flex; align-items:flex-start; gap:14px; transition:.3s; }
.ai-needcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,43,99,.08); border-color:#cfd6e2; }
.ai-needcard i{ color:var(--nv); font-size:26px; flex:0 0 auto; }

.ai-keycard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; transition:.3s; }
.ai-keycard:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(2,43,99,.08); border-color:#cfd6e2; }
.ai-keycard h4{ font-family:'DMSans-SemiBold'; font-size:18px; color:var(--ink); margin:0 0 10px; }
.ai-keycard p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; }

.ai-bencard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 28px; transition:.35s; }
.ai-bencard:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(2,43,99,.08); border-color:#cfd6e2; }
.ai-bencard .ic{ width:56px; height:56px; border-radius:14px; background:var(--cream); color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px; transition:.35s; }
.ai-bencard:hover .ic{ background:var(--nv); color:#fff; }
.ai-bencard h4{ font-family:'DMSans-SemiBold'; font-size:17px; color:var(--ink); margin:0 0 10px; }
.ai-bencard p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0; }

.ai-instcard{ background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:34px 30px; }
.ai-instcard h4{ font-family:'DMSans-SemiBold'; font-size:20px; color:var(--nv); margin:0 0 12px; }
.ai-instcard p{ color:var(--muted); font-size:15px; line-height:1.75; margin:0; }

.ai-seclist li{ display:flex; align-items:center; gap:12px; color:var(--ink); font-family:'DMSans-Medium'; font-size:15px; }
.ai-seclist i{ color:var(--amber); font-size:20px; flex:0 0 auto; }

.ai-faqitem{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 26px; margin-bottom:16px; }
.ai-faqitem h4{ font-family:'DMSans-SemiBold'; font-size:17px; color:var(--ink); margin:0 0 8px; }
.ai-faqitem p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; }

@media(max-width:991px){
  .ai-two{ grid-template-columns:1fr !important; gap:26px !important; }
  .ai-bengrid, .ai-need{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:767px){
  .ai-two, .ai-feats, .ai-need, .ai-keygrid, .ai-bengrid, .ai-inst{ grid-template-columns:1fr !important; }
  .ai-cta{ padding:36px 24px !important; }
}

/* ============================================================
   AI PAGE — layout classes (moved from inline styles)
   ============================================================ */
.ai-lead{ max-width:900px; color:var(--muted); }

.ai-two{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.ai-two .mainsectionheading{ text-align:left; }
.ai-twinhead{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.ai-twinhead .mainsectionheading{ text-align:left; }

.ai-media{ border-radius:20px; overflow:hidden; border:1px solid var(--line); }
.ai-media img{ width:100%; display:block; }

.ai-feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 40px; max-width:960px; margin:0 auto; }
.ai-need{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:0 auto; }
.ai-keygrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.ai-bengrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ai-inst{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

.ai-para{ color:var(--muted); line-height:1.85; }
.ai-para.tight{ line-height:1.7; }

.ai-faq{ max-width:860px; margin:0 auto; }

.ai-cta{ background:var(--nv); border-radius:24px; padding:56px; text-align:center; }
.ai-cta h2{ font-family:'PlusJakartaSans-Medium'; font-size:30px; color:#fff; margin-bottom:14px; }
.ai-cta p{ color:#ffffffd0; font-size:16px; max-width:620px; margin:0 auto 26px; line-height:1.7; }
.ai-cta .primarybtn{ background:#fff; color:var(--nv); border-color:#fff; }
.ai-cta .primarybtn:hover{ background:var(--amber); color:var(--nv); border-color:var(--amber); }

@media(max-width:991px){
  .ai-twinhead{ grid-template-columns:1fr; gap:40px; }
  .ai-bengrid, .ai-need{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:767px){
  .ai-two, .ai-twinhead, .ai-feats, .ai-need, .ai-keygrid, .ai-bengrid, .ai-inst{ grid-template-columns:1fr; }
  .ai-cta{ padding:36px 24px; }
  .ai-cta h2{ font-size:24px; }
}

.ai-center{ text-align:center; }
/* twin headings: allow the long heading to wrap, never clip */
.ai-twinhead .mainsectionheading h2{ word-break:break-word; overflow-wrap:anywhere; }

/* twin/left headings inside AI page must not inherit the global 850px width */
.ai-twinhead .mainsectionheading,
.ai-two .mainsectionheading,
.ai-lefthead{ width:100% !important; max-width:100% !important; }
.ai-twinhead .mainsectionheading h2,
.ai-two .mainsectionheading h2{ font-size:28px; }