/* ======================================================================
   Audit page (/solutions/governancestudio/audit): "The assessment" section
   Scoped to #assessment. Bootstrap-clashing class names are prefixed pa-
   (.pa-btn, .pa-btn-primary, .pa-btn-ghost, .pa-badge, .pa-row).
   Markup: tbl_pages_c (audit-page), behaviour: assets/js-new/assessment.js
   ====================================================================== */
#assessment{
  --pa-blue:#2249FF; --pa-blue-dark:#142A99; --pa-blue-400:#6B86FF; --pa-blue-100:#D1DBFF; --pa-blue-50:#E8EDFF;
  --pa-yellow:#FFD822; --pa-yellow-600:#E6C31F; --pa-yellow-50:#FFFAEB;
  --pa-orange:#FF7000;
  --pa-black:#1B1B1C; --pa-gray-700:#6B6B6C; --pa-gray-300:#E0E0E0; --pa-gray-200:#F5F5F5; --pa-gray-100:#FAFAFA;
  --r-md:8px; --r-lg:12px; --r-xl:16px; --r-xxl:24px; --r-pill:9999px;
  --ease:cubic-bezier(0.4,0,0.2,1); --ease-emph:cubic-bezier(0.2,0,0,1);
  --fast:120ms; --base:200ms; --slow:320ms;
  font-family:'Montserrat',sans-serif; color:var(--pa-black); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; background:#fff; padding:96px 0;
}
#assessment *{box-sizing:border-box;margin:0;padding:0}
#assessment :focus-visible{outline:2px solid var(--pa-blue);outline-offset:2px}
/* .wrap lines up with the site's Bootstrap .container (same widths + gutters as the other sections) */
#assessment .wrap{max-width:none;margin:0 auto;padding:0 20px}
@media (min-width:576px){#assessment .wrap{max-width:540px}}
@media (min-width:768px){#assessment .wrap{max-width:720px;padding:0 12px}}
@media (min-width:992px){#assessment .wrap{max-width:960px}}
@media (min-width:1200px){#assessment .wrap{max-width:1140px}}
@media (min-width:1400px){#assessment .wrap{max-width:1320px}}
#assessment .head{text-align:center;margin-bottom:40px}
#assessment .overline{font-size:12px;line-height:1.7;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pa-blue)}
#assessment h2{font-size:36px;line-height:1.2;font-weight:500;letter-spacing:-.01em;margin:8px 0 0}
#assessment h3{font-size:20px;line-height:1.4;font-weight:600}

#assessment .pa-btn{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:600;font-size:15px;border:0;cursor:pointer;border-radius:var(--r-pill);padding:14px 28px;text-decoration:none;transition:background var(--base) var(--ease),transform var(--base) var(--ease),box-shadow var(--base) var(--ease)}
/* hover = site standard (.entbtn a): white slides in from the right, black text + border */
#assessment .pa-btn-primary{background:linear-gradient(to right,#fff 50%,var(--pa-blue) 50%);background-size:201% 100%;background-position:right bottom;color:#fff;box-shadow:inset 0 0 0 2px var(--pa-blue)}
#assessment .pa-btn-primary:hover{background-position:left;color:#000;box-shadow:inset 0 0 0 2px #000}
#assessment .pa-btn-ghost{background:transparent;color:var(--pa-blue);box-shadow:inset 0 0 0 2px var(--pa-blue)}
#assessment .pa-btn-ghost:hover{background:var(--pa-blue-50)}
#assessment .pa-btn[disabled]{background:var(--pa-gray-300);color:var(--pa-gray-700);cursor:not-allowed;transform:none;box-shadow:none}
#assessment .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);background:var(--pa-blue-50);color:var(--pa-blue-dark)}
#assessment .chip.y{background:var(--pa-yellow);color:var(--pa-black)}

/* ---------- layout ---------- */
#assessment .assess{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
#assessment .assess.done{grid-template-columns:1fr}
#assessment .assess.done .rail{display:none}

/* ---------- rail ---------- */
#assessment .rail{position:sticky;top:96px;background:var(--pa-gray-100);border-radius:var(--r-xl);padding:24px;box-shadow:inset 0 0 0 1px var(--pa-gray-300)}
#assessment .rail h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--pa-gray-700);margin-bottom:12px}
#assessment .rail-a{padding:9px 0;border-bottom:1px solid var(--pa-gray-300)}
#assessment .rail-a:last-child{border-bottom:0}
#assessment .rail-a .nm{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--pa-gray-700)}
#assessment .rail-a .nm small{font-size:11px;font-weight:500}
#assessment .rail-a.cur .nm{color:var(--pa-black)}
#assessment .rail-a .cur-d{display:none;font-size:11px;color:var(--pa-blue-dark);margin-top:2px}
#assessment .rail-a.cur .cur-d{display:block}
#assessment .pips{display:flex;gap:3px;margin-top:6px}
#assessment .pips i{flex:1;max-width:22px;height:6px;border-radius:var(--r-pill);background:var(--pa-gray-300);transition:background var(--base) var(--ease)}
#assessment .pips i.on{background:var(--pa-blue)}
#assessment .pips i.now{background:var(--pa-yellow-600)}
#assessment .total{margin-top:14px;padding-top:14px;border-top:1px solid var(--pa-gray-300)}
#assessment .total small{font-size:12px;color:var(--pa-gray-700)}
#assessment .total .bar{height:8px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--pa-gray-300);overflow:hidden;margin-top:8px}
#assessment .total .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pa-blue),var(--pa-yellow));transition:width var(--slow) var(--ease)}
#assessment .legend{font-size:12px;color:var(--pa-gray-700);margin-top:14px;border-top:1px solid var(--pa-gray-300);padding-top:14px}
#assessment .legend div{display:flex;gap:8px;padding:2px 0}
#assessment .legend b{width:16px;color:var(--pa-blue)}

/* ---------- stage ---------- */
#assessment .stage{border-radius:var(--r-xxl);box-shadow:0 0 0 1px var(--pa-gray-300);padding:40px;min-height:460px;position:relative;overflow:hidden;background:#fff}
#assessment .start h3{font-size:24px;line-height:1.3;margin:16px 0 12px;font-weight:600}
#assessment .start p{color:var(--pa-gray-700);max-width:540px;margin-bottom:24px;font-size:15px}
#assessment .start-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 28px;max-width:580px}
#assessment .start-grid div{background:var(--pa-gray-100);border-radius:var(--r-lg);padding:14px 16px;font-size:13px}
#assessment .start-grid b{display:block;font-size:22px;font-weight:500;color:var(--pa-blue)}
#assessment .start .note{font-size:12px;color:var(--pa-gray-700);margin-top:16px}
#assessment .step{animation:pa-in var(--slow) var(--ease-emph)}
@keyframes pa-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
#assessment .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
#assessment .meta .crumbs{display:flex;gap:6px;flex-wrap:wrap}
#assessment .meta small{font-size:12px;color:var(--pa-gray-700);font-weight:600}
#assessment .step h4{font-size:22px;line-height:1.35;font-weight:600;max-width:680px;margin-bottom:28px}
#assessment .opts{display:grid;gap:10px}
#assessment .opt{position:relative;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--pa-gray-300);cursor:pointer;transition:all var(--fast) var(--ease)}
#assessment .opt:hover{box-shadow:inset 0 0 0 2px var(--pa-blue-400);background:var(--pa-blue-50)}
#assessment .opt input{position:absolute;opacity:0}
#assessment .opt .n{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--pa-gray-200)}
#assessment .opt .t b{display:block;font-size:14px}
#assessment .opt .t small{font-size:12px;color:var(--pa-gray-700)}
#assessment .opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--pa-blue);background:var(--pa-blue-50)}
#assessment .opt:has(input:checked) .n{background:var(--pa-blue);color:#fff}
#assessment .opt:has(input:focus-visible){outline:2px solid var(--pa-blue);outline-offset:2px}
#assessment .navrow{display:flex;justify-content:space-between;margin-top:28px;gap:12px}

/* ---------- result ---------- */
#assessment .result-free{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;padding-bottom:32px;border-bottom:1px dashed var(--pa-gray-300)}
#assessment .pa-badge{width:200px;height:200px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--pa-blue) calc(var(--p)*1%), var(--pa-blue-50) 0);position:relative}
#assessment .pa-badge::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff}
#assessment .pa-badge > *{position:relative}
#assessment .pa-badge small{font-size:12px;font-weight:600;color:var(--pa-gray-700);letter-spacing:.1em;text-transform:uppercase}
#assessment .pa-badge b{font-size:64px;line-height:1;color:var(--pa-blue)}
#assessment .pa-badge em{font-style:normal;font-weight:700;background:var(--pa-yellow);padding:2px 10px;border-radius:var(--r-pill);margin-top:6px;font-size:13px}
#assessment .result-free h3{font-size:28px;line-height:1.2;margin:12px 0 10px;font-weight:600}
#assessment .result-free p{font-size:15px;color:var(--pa-gray-700);max-width:540px}

#assessment .gate{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;margin-top:32px;align-items:start}
#assessment .preview{position:relative;border-radius:var(--r-xl);background:var(--pa-gray-100);padding:24px;overflow:hidden;min-height:340px}
#assessment .preview .inner{filter:blur(7px);user-select:none;pointer-events:none;transition:filter 600ms var(--ease)}
#assessment .preview.open .inner{filter:none;user-select:auto;pointer-events:auto}
#assessment .lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:linear-gradient(180deg,rgba(250,250,250,.2),rgba(250,250,250,.75));transition:opacity var(--slow) var(--ease)}
#assessment .preview.open .lock{opacity:0;pointer-events:none}
#assessment .lock .ic{width:52px;height:52px;border-radius:50%;background:var(--pa-yellow);display:flex;align-items:center;justify-content:center}
#assessment .lock b{font-size:15px}
#assessment .lock small{font-size:12px;color:var(--pa-gray-700);max-width:280px}

#assessment .rep-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center}
#assessment .star-svg{width:100%;height:auto;display:block}
#assessment .star-svg .ring{fill:none;stroke:var(--pa-gray-300);stroke-width:1}
#assessment .star-svg .axis{stroke:var(--pa-blue-100);stroke-width:1.5;stroke-dasharray:3 4}
#assessment .star-svg .shape{stroke:var(--pa-blue);stroke-width:2;stroke-linejoin:round}
#assessment .star-svg .lbl{font:600 11px 'Montserrat',sans-serif;fill:var(--pa-black);letter-spacing:.04em}
#assessment .star-svg .core{fill:var(--pa-yellow)}
#assessment .pbar{margin-bottom:12px}
#assessment .pbar .pa-row{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:6px}
#assessment .pbar .pa-row span:last-child{color:var(--pa-blue)}
#assessment .pbar .track{height:10px;background:#fff;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--pa-gray-300);overflow:hidden}
#assessment .pbar .fill{height:100%;background:var(--pa-blue);border-radius:var(--r-pill)}
#assessment .pbar.weak .fill{background:var(--pa-orange)}
#assessment .pbar.weak .pa-row span:last-child{color:#B34F00}
#assessment .doms{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin-top:20px;background:#fff;border-radius:var(--r-lg);padding:14px 16px}
#assessment .doms h5{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pa-gray-700);margin-bottom:4px}
#assessment .doms div{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:3px 0;border-bottom:1px solid var(--pa-gray-200)}
#assessment .doms div b{color:var(--pa-blue)}
#assessment .doms div.lo b{color:#B34F00}
#assessment .sg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
#assessment .sg div{background:#fff;border-radius:var(--r-lg);padding:14px 16px}
#assessment .sg small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#assessment .sg .s small{color:#2E7D32}
#assessment .sg .g small{color:#B34F00}
#assessment .sg p{font-size:13px;margin-top:6px;font-weight:600}
#assessment .sg p span{font-weight:500;color:var(--pa-gray-700)}
#assessment .expo{margin-top:20px;background:#fff;border-radius:var(--r-lg);padding:16px 18px;box-shadow:inset 4px 0 0 var(--pa-orange)}
#assessment .expo small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B34F00}
#assessment .expo p{font-size:14px;margin-top:4px}
#assessment .expo .mod{font-size:12px;color:var(--pa-gray-700);margin-top:6px}
#assessment .road{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
#assessment .road div{background:#fff;border-radius:var(--r-lg);padding:14px}
#assessment .road h5{font-size:12px;font-weight:700;color:var(--pa-blue);letter-spacing:.06em;margin-bottom:8px}
#assessment .road p{font-size:12px}
#assessment .road p span{display:block;font-size:11px;color:var(--pa-gray-700);margin-top:4px}
#assessment .baseline{margin-top:16px;font-size:12px;color:var(--pa-gray-700);background:var(--pa-yellow-50);border-radius:var(--r-md);padding:10px 14px}

#assessment .form{background:var(--pa-blue);color:#fff;border-radius:var(--r-xl);padding:28px}
#assessment .form h3{font-size:20px;line-height:1.3}
#assessment .form p{font-size:13px;color:var(--pa-blue-100);margin:6px 0 18px}
#assessment .field{margin-bottom:12px}
#assessment .field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
#assessment .field input,#assessment .field select{width:100%;font-family:inherit;font-size:14px;padding:12px 14px;border-radius:var(--r-md);border:0;background:#fff;color:var(--pa-black)}
#assessment .field input:focus,#assessment .field select:focus{outline:2px solid var(--pa-yellow);outline-offset:1px}
#assessment .field .err{display:none;font-size:12px;color:var(--pa-yellow);margin-top:4px}
#assessment .field.bad .err{display:block}
#assessment .form .pa-btn{width:100%;justify-content:center;background:linear-gradient(to right,#fff 50%,var(--pa-yellow) 50%);background-size:201% 100%;background-position:right bottom;color:var(--pa-black);margin-top:6px;box-shadow:inset 0 0 0 2px var(--pa-yellow)}
#assessment .form .pa-btn:hover{background-position:left;color:#000;box-shadow:inset 0 0 0 2px #000}
#assessment .form .send-err{font-size:12px;color:var(--pa-yellow);margin:10px 0 0}
#assessment .form .send-err[hidden]{display:none}
#assessment .form .pa-btn[disabled]{background:var(--pa-blue-100);color:var(--pa-blue-dark);cursor:wait}
#assessment .form .fine{font-size:11px;color:var(--pa-blue-100);margin-top:12px}
#assessment .form .fine a{color:#fff}
#assessment .form.sent{background:var(--pa-blue-50);color:var(--pa-black)}
#assessment .form.sent p{color:var(--pa-gray-700)}
#assessment .form .thanks{display:none}
#assessment .form.sent .thanks{display:block}
#assessment .form.sent form{display:none}
#assessment .form .thanks .pa-btn{background:var(--pa-blue);color:#fff}

/* ---------- responsive ---------- */
@media (min-width:1001px) and (max-width:1199.98px){
  #assessment .assess{grid-template-columns:260px 1fr;gap:24px}
  #assessment .stage{padding:32px}
}
@media (max-width:1000px){
  #assessment .assess{grid-template-columns:1fr}
  #assessment .rail{position:static;order:2}   /* questions first, progress under them */
  #assessment .gate{grid-template-columns:1fr}
}
@media (max-width:640px){
  #assessment{padding:64px 0}
  #assessment h2{font-size:28px}
  #assessment .stage{padding:24px 18px}
  #assessment .step h4{font-size:19px}
  #assessment .start-grid,#assessment .sg,#assessment .doms,#assessment .road,#assessment .rep-grid{grid-template-columns:1fr}
  #assessment .result-free{grid-template-columns:1fr;justify-items:center;text-align:center}
  #assessment .rep-grid svg{max-width:240px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  #assessment *{animation:none!important;transition:none!important}
}


/* ======================================================================
   Data Readiness Assessment page (/solutions/data-readiness-assessment)
   Page-only styles, prefix .dra-. Shared look comes from newstyle.css (.gsa-*)
   and assessment.css (#assessment). Markup: tbl_pages_c (data-readiness-assessment-page).
   ====================================================================== */

/* ---- "What it is": 4 question cards, blue on hover ---- */
.dra-what .gsa-head{margin-bottom:60px}
.dra-what .gsa-sub{max-width:830px;font-size:16px;line-height:1.7}
.dra-cards>[class*="col-"]{margin-bottom:24px}
.dra-card{height:100%;border:1px solid #DDD;border-radius:16px;background:#FAFAFA;padding:24px;position:relative;overflow:hidden;isolation:isolate;transition:border-color .45s ease,box-shadow .45s ease}
.dra-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#2F6BFF 0%,#1236D8 100%);opacity:0;transition:opacity .45s ease}
.dra-card .q{font-size:18px;line-height:1.35;font-weight:600;color:#111;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid #BBB;min-height:62px}
.dra-card .k{font-size:14px;font-weight:600;color:#111;margin-bottom:4px}
.dra-card p{font-size:13px;line-height:1.55;color:#5A6880;margin:0}
.dra-card .q,.dra-card .k,.dra-card p{transition:color .45s ease,border-color .45s ease}
.dra-card:hover{border-color:#2249FF;box-shadow:0 16px 32px rgba(34,73,255,.18)}
.dra-card:hover::before{opacity:1}
.dra-card:hover .q,.dra-card:hover .k{color:#fff;border-color:rgba(255,255,255,.45)}
.dra-card:hover p{color:rgba(255,255,255,.75)}

/* ---- "What it covers": radar + 6 numbered domain cards + note ---- */
.dra-covers .gsa-sub{max-width:1100px;font-size:16px;line-height:1.7}
.dra-covers .gsa-radar{min-height:420px}
.dra-dom{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:16px;padding:20px;margin-bottom:16px;height:calc(100% - 16px);border:1px solid transparent;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}
.dra-dom .no{flex:none;width:34px;height:34px;border-radius:50%;background:#E6ECFF;color:#2249FF;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}
.dra-dom .ttl{font-size:16px;font-weight:600;color:#111;margin:5px 0 4px}
.dra-dom p{font-size:13px;line-height:1.5;color:#5A6880;margin:0}
.dra-dom:hover,.dra-dom:focus-visible{box-shadow:inset 0 0 0 2px #2249FF;outline:0}
.dra-dom:hover .no,.dra-dom:focus-visible .no{background:#FFD60A;color:#111}
.dra-note{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:18px 20px;font-size:13px;line-height:1.5;color:#5A6880;margin-bottom:24px}
.dra-note svg{flex:none;margin-top:2px}
.dra-note b{color:#111;font-weight:600}
.dra-covers .gsa-radar .gsa-star-shape{transition:d 900ms cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){.dra-card,.dra-card::before,.dra-dom,.dra-dom .no,.dra-covers .gsa-radar .gsa-star-shape{transition:none}}

/* ---- Assessment: AI-readiness read in the report (blue instead of the orange "gap" bar) ---- */
#assessment:has(.dra-config) .expo.dra-ai{box-shadow:inset 4px 0 0 var(--pa-blue)}
#assessment:has(.dra-config) .expo.dra-ai small{color:var(--pa-blue)}
#assessment:has(.dra-config) .opt .t b{font-weight:600}
#assessment:has(.dra-config) .opt .t small{display:block;margin-top:2px}
#assessment:has(.dra-config) .opt .lv{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pa-blue-dark);margin-bottom:2px}
#assessment:has(.dra-config) .start-grid.three{grid-template-columns:repeat(3,1fr);max-width:720px}
@media (max-width:640px){#assessment:has(.dra-config) .start-grid.three{grid-template-columns:1fr}}

/* ---- "Going deeper": 5 steps (re-uses .gsa-frame / .gsa-frame-grid) ---- */
.dra-steps .gsa-frame-grid .fw{min-height:0}

/* ---- responsive ---- */
@media (max-width:1199px){.dra-card .q{min-height:0}}
@media (max-width:991px){.dra-what .gsa-head{margin-bottom:40px}.dra-covers .gsa-radar{min-height:0;height:auto}}
@media (max-width:575px){.dra-card,.dra-dom{padding:18px}.dra-card .q{font-size:17px}}

/* ---- responsive fixes (1366 / laptop) ---- */
@media (min-width:1200px) and (max-width:1399px){.dra-steps .gsa-frame-head .gsa-h2{font-size:32px}}
@media (min-width:992px) and (max-width:1199px){
  .dra-covers .gsa-cover-grid>.col-lg-4,.dra-covers .gsa-cover-grid>.col-lg-8{flex:0 0 100%;max-width:100%}
  .dra-covers .gsa-radar{min-height:0;height:auto;padding:20px}
}


/* ======================================================================
   AI Readiness Assessment page (/solutions/ai-readiness-assessment)
   Page-only styles, prefix .ara-. Shared look comes from newstyle.css (.gsa-*)
   and assessment.css (#assessment). Markup: tbl_pages_c (ai-readiness-assessment-page).
   ====================================================================== */

/* ---- "What it is": 4 question cards, blue on hover ---- */
.ara-what .gsa-head{margin-bottom:60px}
.ara-what .gsa-sub{max-width:1100px;font-size:16px;line-height:1.7}
.ara-cards>[class*="col-"]{margin-bottom:24px}
.ara-card{height:100%;border:1px solid #DDD;border-radius:16px;background:#FAFAFA;padding:24px;position:relative;overflow:hidden;isolation:isolate;transition:border-color .45s ease,box-shadow .45s ease}
.ara-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#2F6BFF 0%,#1236D8 100%);opacity:0;transition:opacity .45s ease}
.ara-card .q{font-size:18px;line-height:1.35;font-weight:600;color:#111;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid #BBB;min-height:62px}
.ara-card .k{font-size:14px;font-weight:600;color:#111;margin-bottom:4px}
.ara-card p{font-size:13px;line-height:1.55;color:#5A6880;margin:0}
.ara-card .q,.ara-card .k,.ara-card p{transition:color .45s ease,border-color .45s ease}
.ara-card:hover{border-color:#2249FF;box-shadow:0 16px 32px rgba(34,73,255,.18)}
.ara-card:hover::before{opacity:1}
.ara-card:hover .q,.ara-card:hover .k{color:#fff;border-color:rgba(255,255,255,.45)}
.ara-card:hover p{color:rgba(255,255,255,.75)}

/* ---- "What it covers": 11-dimension radar + 4 area cards (chips) + 3 signal cards ---- */
.ara-covers .gsa-sub{max-width:1140px;font-size:18px;line-height:1.55}
.ara-covers .gsa-radar{height:auto;min-height:356px;border-radius:20px;padding:20px;margin-bottom:24px}
.ara-area-grid>[class*="col-"]{margin-bottom:12px}
.ara-area-grid{--bs-gutter-x:20px}
.ara-area{height:100%;background:#fff;border-radius:12px;padding:28px 20px 22px;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}
.ara-area .no{font-size:11px;font-weight:700;letter-spacing:.1em;color:#2249FF;margin-bottom:4px}
.ara-area .ttl{font-size:17px;line-height:1.35;font-weight:600;color:#111;margin-bottom:6px}
.ara-area p{font-size:13px;line-height:1.55;color:#5A6880;margin:0 0 14px;max-width:320px}
.ara-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 8px}
.ara-chips li{background:#F5F6F8;border-radius:20px;padding:5px 10px;font-size:13px;line-height:1.4;color:#111}
.ara-area:hover,.ara-area:focus-visible{box-shadow:inset 0 0 0 2px #2249FF;outline:0}
.ara-signals-note{font-size:13px;line-height:1.55;color:#5A6880;margin:8px 0 16px 2px}
.ara-signals-note b{color:#111;font-weight:600}
.ara-signals{display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:20px}
.ara-sig{background:#fff;border-radius:10px;padding:16px}
.ara-sig .ttl{font-size:14px;font-weight:600;color:#111;margin-bottom:2px}
.ara-sig p{font-size:12px;line-height:1.5;color:#5A6880;margin:0}
.ara-covers .gsa-radar .gsa-star-shape{transition:d 900ms cubic-bezier(.2,0,0,1)}
@media (max-width:767px){.ara-signals{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ara-card,.ara-card::before,.ara-area,.ara-covers .gsa-radar .gsa-star-shape{transition:none}}

/* ---- Assessment: AI-readiness read in the report (blue instead of the orange "gap" bar) ---- */
#assessment:has(.ara-config) .expo.ara-ai{box-shadow:inset 4px 0 0 var(--pa-blue)}
#assessment:has(.ara-config) .expo.ara-ai small{color:var(--pa-blue)}
#assessment:has(.ara-config) .opt .t b{font-weight:600}
#assessment:has(.ara-config) .opt .t small{display:block;margin-top:2px}
#assessment:has(.ara-config) .opt .lv{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pa-blue-dark);margin-bottom:2px}
#assessment:has(.ara-config) .start-grid.three{grid-template-columns:repeat(3,1fr);max-width:720px}
@media (max-width:640px){#assessment:has(.ara-config) .start-grid.three{grid-template-columns:1fr}}


/* ---- responsive ---- */
@media (max-width:1199px){.ara-card .q{min-height:0}}
@media (max-width:991px){.ara-what .gsa-head{margin-bottom:40px}.ara-covers .gsa-radar{min-height:0;height:auto}}
@media (max-width:575px){.ara-card,.ara-dom{padding:18px}.ara-card .q{font-size:17px}}

/* ---- Hero pills: keep all 4 on one line (desktop + tablet) ---- */
@media (min-width:1200px){.ara-pills{flex-wrap:nowrap;gap:8px}.ara-pills li{font-size:12px;padding:6px 10px}}
@media (min-width:768px) and (max-width:991px){.ara-pills{flex-wrap:nowrap;gap:8px}.ara-pills li{font-size:13px;padding:6px 11px}}
@media (min-width:1400px){.ara-pills li{font-size:13px;padding:6px 12px}}

/* ---- "Your results": illustrative report card + list of what you get ---- */
.ara-results{background:#F8F9FA}
.ara-results .gsa-sub{max-width:1200px;font-size:18px;line-height:1.55}
.ara-report{position:relative;background:#fff;border-radius:20px;padding:34px 24px 34px;box-shadow:0 20px 40px rgba(34,73,255,.08);margin:12px 0 24px}
.ara-report-badge{position:absolute;top:-12px;right:32px;background:#FFD822;color:#111;font-size:12px;font-weight:600;border-radius:20px;padding:4px 12px}
.ara-report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ara-report-head .ttl{font-size:14px;font-weight:700;color:#111}
.ara-report-head .sub{font-size:11px;color:#6B7280;margin:4px 0 0}
.ara-report-ready{flex:none;background:#2249FF;color:#fff;font-size:12px;font-weight:600;border-radius:20px;padding:3px 10px}
.ara-report-legend{display:flex;gap:16px;font-size:11px;color:#6B7280;margin:12px 0 14px}
.ara-report-legend span{display:inline-flex;align-items:center;gap:6px}
.ara-report-legend .today::before{content:"";width:12px;height:5px;border-radius:3px;background:#2249FF}
.ara-report-legend .req::before{content:"";width:2px;height:12px;background:#111}
.ara-bars{list-style:none;padding:0;margin:0 0 18px}
.ara-bars li{display:grid;grid-template-columns:160px 1fr 48px;gap:10px;align-items:center;min-height:27px;margin-bottom:0}
.ara-bars .nm{font-size:12px;font-weight:500;line-height:1.35;color:#111}
.ara-bars .trk{position:relative;height:7px;border-radius:4px;background:#F1F2F4;margin-right:60px}
.ara-bars .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#2249FF}
.ara-bars .fill.gap{background:#FF6B00}
.ara-bars .mk{position:absolute;top:-4px;width:2px;height:15px;margin-left:-1px;background:#111;border-radius:1px}
.ara-bars .v{font-size:12px;color:#6B7280;text-align:right;letter-spacing:.05em}
.ara-report-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-right:44px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #E5E7EB}
.ara-report-steps div{background:#E8EDFF;border-radius:6px;padding:10px;font-size:11px;font-weight:600;line-height:1.5;color:#111}
.ara-report-steps span{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;color:#2249FF;margin-bottom:2px}
.ara-report-why b{font-size:11px;color:#111}
.ara-report-why p{font-size:11px;line-height:1.55;color:#6B7280;margin:6px 0 0}
.ara-gets{list-style:none;padding:0;margin:28px 0 0}
.ara-gets li{display:flex;align-items:center;gap:14px;background:#fff;border-radius:10px;padding:13px 40px 13px 16px;margin-bottom:10px;transition:box-shadow .2s}
.ara-gets li:hover{box-shadow:inset 0 0 0 1.5px #2249FF}
.ara-gets .ck{flex:none;width:26px;height:26px;border-radius:50%;background:#EDF1FD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232249FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
.ara-gets .t{flex:1;font-size:14px;font-weight:500;color:#111}
.ara-gets .tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.1em;color:#2249FF;background:#EDF1FD;border-radius:20px;padding:4px 10px}
.ara-gets .tag.y{background:#FFD822;color:#111}
@media (max-width:575px){.ara-bars li{grid-template-columns:110px 1fr 40px}.ara-bars .trk{margin-right:0}.ara-report-steps{grid-template-columns:1fr;padding-right:0}.ara-gets li{padding-right:14px}.ara-gets .t{font-size:13px}}

/* ---- "Your results" blocks: 5-step flow (Define → Adapt) + 4 "not X / but Y" cards ---- */
.ara-blocks .gsa-sub{max-width:1200px;font-size:18px;line-height:1.55}
.ara-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-bottom:50px}
.ara-blk{position:relative;padding-right:24px}
.ara-blk:not(:last-child)::after{content:"";position:absolute;top:8px;right:0;width:9px;height:9px;border-top:2px solid #2249FF;border-right:2px solid #2249FF;transform:rotate(45deg)}
.ara-blk .no,.ara-blk .out{font-size:11px;font-weight:700;letter-spacing:.1em;color:#2249FF}
.ara-blk .ttl{font-size:17px;font-weight:600;color:#111;margin:10px 0 8px}
.ara-blk p{font-size:13px;line-height:1.5;color:#6B7280;margin:0 0 18px;min-height:39px;max-width:190px}
.ara-blk .res{font-size:13px;font-weight:600;color:#111;margin:4px 0 12px}
.ara-blk .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:#111;background:#FFD822;border-radius:20px;padding:3px 8px}
.ara-blk .tag.b{background:#EDF1FD;color:#1A2C8C}
.ara-shifts>[class*="col-"]{margin-bottom:20px}
.ara-shift{height:100%;background:#E8EDFF;border-radius:10px;padding:16px 16px 20px}
.ara-shift s{display:block;font-size:12px;color:#6B7280;margin-bottom:6px}
.ara-shift p{font-size:14px;font-weight:600;line-height:1.5;color:#111;margin:0}
@media (max-width:1199px){.ara-flow{grid-template-columns:repeat(3,1fr);row-gap:36px}.ara-blk:nth-child(3)::after{display:none}}
@media (max-width:767px){.ara-flow{grid-template-columns:1fr 1fr}.ara-blk::after{display:none}.ara-blk p{min-height:0}}

/* ---- responsive fixes (1366 / laptop / tablet / mobile) ---- */
@media (min-width:768px) and (max-width:1399px){.ara-blk p{min-height:58px}}
@media (min-width:992px) and (max-width:1199px){
  .ara-covers .gsa-cover-grid>.col-lg-4,.ara-covers .gsa-cover-grid>.col-lg-8{flex:0 0 100%;max-width:100%}
  .ara-covers .gsa-radar{min-height:0;padding:20px}
  .ara-report-steps{padding-right:0}
}
@media (max-width:575px){
  .ara-bars li{min-height:34px;margin-bottom:4px}
  .ara-bars .nm{font-size:11px}
  .ara-flow{gap:28px 16px}
  .ara-blk{padding-right:0}
}