/* ============================================================
   Cloudeli — CSA Cyber Essentials self-assessment
   Used on /cyber-essentials/self-assessment
   Builds on the shared palette in modern.css and the Cyber
   Essentials layer in cyber.css.
   ============================================================ */

/* ---------- Hero ------------------------------------------- */
.ceq-hero{
	position:relative;overflow:hidden;
	padding:70px 0 60px;
	background:linear-gradient(160deg,#0d1b34 0%,#123059 55%,#155fa8 100%);
	color:#fff;
}
.ceq-hero .breadcrumb-mini{color:rgba(255,255,255,.62);font-size:13px;margin-bottom:18px;}
.ceq-hero .breadcrumb-mini a{color:rgba(255,255,255,.85);}
.ceq-hero .breadcrumb-mini a:hover{color:#fff;}
.ceq-hero h1{
	color:#fff;font-size:44px;line-height:1.16;font-weight:800;
	letter-spacing:-.02em;margin:0 0 18px;
}
.ceq-hero h1 .grad{
	background:linear-gradient(135deg,#7fc4ff 0%,#cfe6ff 100%);
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ceq-hero p.lede{color:rgba(255,255,255,.86);font-size:17px;line-height:1.72;max-width:660px;margin:0 0 26px;}
.ceq-hero .hero-eyebrow{
	display:inline-flex;align-items:center;gap:9px;
	background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
	color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	padding:8px 15px;border-radius:99px;margin-bottom:20px;
}
.ceq-hero .hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#7fdc9a;flex:0 0 auto;}
.ceq-facts{display:flex;flex-wrap:wrap;gap:12px 26px;}
.ceq-facts span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:14.5px;font-weight:500;}
.ceq-facts i{color:#7fdc9a;font-size:16px;}
@media (max-width:767px){ .ceq-hero{padding:48px 0 44px;} .ceq-hero h1{font-size:31px;} }

/* ---------- Assessment shell ------------------------------- */
.ceq-sec{padding:76px 0 90px;background:#f7fafd;}
.ce-assess{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	box-shadow:var(--shadow);padding:34px 34px 26px;max-width:880px;margin:0 auto;
	scroll-margin-top:24px;
}
@media (max-width:767px){ .ceq-sec{padding:48px 0 60px;} .ce-assess{padding:24px 18px 20px;border-radius:16px;} }

/* Progress */
.ce-progress{margin-bottom:30px;}
.ce-progress-top{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	margin-bottom:12px;
}
.ce-progress-top .ce-count{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.04em;}
.ce-dots{display:flex;gap:7px;}
.ce-dot{
	width:26px;height:5px;border-radius:99px;background:var(--line);
	transition:background .25s ease;
}
.ce-dot.is-on{background:var(--brand);}
.ce-track{height:6px;border-radius:99px;background:var(--soft);overflow:hidden;}
.ce-track span{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .35s ease;}

/* Step */
.ce-step{border:0;padding:0;margin:0;min-width:0;}
.ce-step-title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 0 6px;outline:none;}
.ce-step-sub{color:var(--body);font-size:15px;line-height:1.7;margin:0 0 28px;}

/* Question */
.ce-q{padding:22px 0;border-top:1px solid var(--line);}
.ce-q:first-of-type{border-top:0;padding-top:0;}
.ce-q > legend,
.ce-q > .ce-q-label{
	font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;
	margin:0 0 4px;padding:0;
	float:left;width:100%;
}
.ce-q .ce-hint,
.ce-q .ce-opts{clear:both;}
.ce-q .ce-hint{display:block;color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 14px;}
.ce-q.is-missing > legend,
.ce-q.is-missing > .ce-q-label{color:#c0392b;}
.ce-q.is-missing::after{
	content:"Please choose an option to continue.";
	display:block;margin-top:10px;color:#c0392b;font-size:13px;font-weight:600;
}

/* Option grids */
.ce-opts{display:grid;gap:10px;}
.ce-opts.cols-2{grid-template-columns:repeat(2,1fr);}
.ce-opts.cols-3{grid-template-columns:repeat(3,1fr);}
.ce-opts.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:767px){
	.ce-opts.cols-3,.ce-opts.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
	.ce-opts.cols-2,.ce-opts.cols-3,.ce-opts.cols-4{grid-template-columns:1fr;}
}

.ce-opt{position:relative;display:block;margin:0;cursor:pointer;}
.ce-opt input{position:absolute;opacity:0;width:1px;height:1px;}
.ce-opt > span{
	display:flex;align-items:flex-start;gap:11px;
	border:1.5px solid var(--line);border-radius:12px;background:#fff;
	padding:14px 15px;height:100%;
	font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:500;
	transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ce-opt > span::before{
	content:"";flex:0 0 auto;width:18px;height:18px;margin-top:1px;
	border:2px solid #c9d6e8;border-radius:50%;background:#fff;
	transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ce-opt input[type="checkbox"] + span::before{border-radius:5px;}
.ce-opt > span small{display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:3px;}
.ce-opt:hover > span{border-color:#b9d3f0;background:#fbfdff;}
.ce-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px;}
.ce-opt input:checked + span{
	border-color:var(--brand);background:var(--soft);
	box-shadow:0 4px 14px rgba(26,118,209,.13);
}
.ce-opt input:checked + span::before{
	border-color:var(--brand);background:var(--brand);
	box-shadow:inset 0 0 0 3px #fff;
}

/* Yes / partly / no / not sure row */
.ce-opts.scale{grid-template-columns:repeat(4,1fr);}
.ce-opts.scale .ce-opt > span{justify-content:flex-start;padding:12px 13px;font-size:14px;}
@media (max-width:575px){ .ce-opts.scale{grid-template-columns:repeat(2,1fr);} }

/* Domain question — carries the CSA reference */
.ce-q.domain > legend{display:block;}
.ce-q .ce-ref{
	display:inline-block;background:var(--soft);color:var(--brand-dark);
	font-size:11.5px;font-weight:800;letter-spacing:.06em;
	padding:3px 8px;border-radius:6px;
	margin-right:9px;vertical-align:2px;
}

/* Nav */
.ce-nav{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
}
.ce-nav .btn{margin:0;}
.ce-btn-back{
	background:none;border:1.5px solid var(--line);color:var(--body);
	font-weight:600;font-size:14.5px;padding:13px 22px;border-radius:99px;cursor:pointer;
	transition:border-color .18s ease,color .18s ease;
}
.ce-btn-back:hover{border-color:#b9d3f0;color:var(--brand);}
.ce-nav .ce-privacy{
	margin:0 0 0 auto;color:var(--muted);font-size:12.5px;line-height:1.5;max-width:300px;
}
.ce-nav .ce-privacy i{color:#41a55f;margin-right:5px;}
@media (max-width:767px){
	.ce-nav .btn,.ce-btn-back{width:100%;text-align:center;}
	.ce-nav .ce-privacy{margin:6px 0 0;max-width:none;}
}

/* ---------- Result ---------------------------------------- */
.ce-result{max-width:880px;margin:44px auto 0;scroll-margin-top:24px;}
.ce-result-hd{text-align:center;margin-bottom:26px;}
.ce-result-hd .eyebrow{margin-bottom:10px;}
.ce-result-hd h2{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0;}

.ce-card{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	box-shadow:var(--shadow-sm);padding:28px 30px;margin-bottom:18px;
}
.ce-card > h3{
	font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
	color:var(--muted);margin:0 0 16px;
}
@media (max-width:767px){ .ce-card{padding:22px 18px;border-radius:16px;} }

/* Verdict */
.ce-verdict{
	border-radius:var(--radius);padding:30px;margin-bottom:18px;color:#fff;
	background:linear-gradient(135deg,#155fa8,#1a76d1);
}
.ce-verdict.is-must{background:linear-gradient(135deg,#0d1b34,#155fa8);}
.ce-verdict.is-should{background:linear-gradient(135deg,#155fa8,#2889e4);}
.ce-verdict.is-good{background:linear-gradient(135deg,#1a76d1,#4aa3ef);}
.ce-verdict .ce-v-lbl{
	display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
	color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
	padding:6px 13px;border-radius:99px;margin-bottom:16px;
}
.ce-verdict h3{color:#fff;font-size:26px;font-weight:800;line-height:1.28;letter-spacing:-.015em;margin:0 0 12px;text-transform:none;}
.ce-verdict p{color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.7;margin:0;}
@media (max-width:767px){ .ce-verdict{padding:24px 18px;} .ce-verdict h3{font-size:21px;} }

/* Why list */
.ce-why{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.ce-why li{display:flex;align-items:flex-start;gap:11px;color:var(--body);font-size:14.5px;line-height:1.65;}
.ce-why li i{color:var(--brand);font-size:17px;flex:0 0 auto;margin-top:1px;}

/* Readiness score */
.ce-score{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.ce-ring{
	--pct:0;
	flex:0 0 auto;width:132px;height:132px;border-radius:50%;
	display:grid;place-items:center;position:relative;
	background:conic-gradient(var(--ring,#1a76d1) calc(var(--pct) * 1%), #e8eef7 0);
}
.ce-ring.is-ready{--ring:#2e9e5b;}
.ce-ring.is-solid{--ring:#1a76d1;}
.ce-ring.is-work{--ring:#e08a1e;}
.ce-ring.is-start{--ring:#c0392b;}
.ce-ring::after{
	content:"";position:absolute;inset:11px;border-radius:50%;background:#fff;
}
.ce-ring b{position:relative;z-index:1;font-size:29px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.ce-score-copy{flex:1 1 300px;min-width:0;}
.ce-score-copy h4{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 0 9px;}
.ce-score-copy p{color:var(--body);font-size:14.5px;line-height:1.7;margin:0 0 10px;}
.ce-score-copy .ce-raw{color:var(--muted);font-size:13px;margin:0;}
.ce-time{
	display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px;
	border-top:1px solid var(--line);color:var(--body);font-size:14.5px;
}
.ce-time i{color:var(--brand);font-size:18px;}
.ce-time b{color:var(--ink);}
.ce-unsure{
	display:flex;align-items:flex-start;gap:11px;margin-top:18px;
	background:#fff8ec;border:1px solid #f4e0bd;border-radius:12px;padding:14px 16px;
	color:#7a5713;font-size:14px;line-height:1.65;
}
.ce-unsure i{color:#e08a1e;font-size:17px;flex:0 0 auto;margin-top:1px;}
@media (max-width:575px){ .ce-score{gap:20px;} .ce-ring{width:104px;height:104px;} .ce-ring b{font-size:24px;} }

/* Gaps */
.ce-gaps{display:grid;gap:14px;}
.ce-gap{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;padding:18px 20px;background:#fcfdff;}
.ce-gap.is-open{border-left-color:#c0392b;}
.ce-gap.is-part{border-left-color:#e08a1e;}
.ce-gap-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.ce-gap-ref{
	background:var(--soft);color:var(--brand-dark);font-size:11.5px;font-weight:800;
	letter-spacing:.06em;padding:3px 8px;border-radius:6px;
}
.ce-gap-h h4{font-size:16px;font-weight:700;color:var(--ink);margin:0;flex:1 1 auto;}
.ce-gap-tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;}
.ce-gap.is-open .ce-gap-tag{background:#fdecea;color:#c0392b;}
.ce-gap.is-part .ce-gap-tag{background:#fff4e2;color:#a9690f;}
.ce-gap-why{color:var(--body);font-size:14.5px;line-height:1.7;margin:0 0 10px;}
.ce-gap-fix{
	display:flex;align-items:flex-start;gap:9px;margin:0;
	color:var(--brand-dark);font-size:14px;line-height:1.65;font-weight:500;
}
.ce-gap-fix i{font-size:16px;flex:0 0 auto;margin-top:1px;}
.ce-nogap{
	display:flex;align-items:flex-start;gap:12px;
	background:#f0faf3;border:1px solid #cceada;border-radius:12px;padding:18px 20px;
	color:#1f6b3d;font-size:14.5px;line-height:1.7;
}
.ce-nogap i{color:#2e9e5b;font-size:20px;flex:0 0 auto;margin-top:1px;}

/* Funding */
.ce-fund-amt{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
	padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.ce-fund-amt span{color:var(--body);font-size:14.5px;font-weight:600;}
.ce-fund-amt b{font-size:30px;font-weight:800;color:var(--brand);letter-spacing:-.02em;}
.ce-fund-lines{list-style:none;margin:0;padding:0;}
.ce-fund-lines li{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:11px 0;border-bottom:1px dashed var(--line);
	color:var(--body);font-size:14px;
}
.ce-fund-lines li:last-child{border-bottom:0;}
.ce-fund-lines li b{color:var(--ink);font-weight:700;flex:0 0 auto;}
.ce-fund-note{color:var(--muted);font-size:12.5px;line-height:1.65;margin:14px 0 0;}
.ce-fund-none{
	display:flex;align-items:flex-start;gap:11px;
	color:var(--body);font-size:14.5px;line-height:1.7;
}
.ce-fund-none i{color:var(--brand);font-size:18px;flex:0 0 auto;margin-top:1px;}

/* Scope recap */
.ce-scope{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;}
.ce-scope li{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ce-scope li span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ce-scope li b{color:var(--ink);font-size:14.5px;font-weight:600;word-wrap:break-word;}
@media (max-width:575px){ .ce-scope{grid-template-columns:1fr;} }

/* Cyber Trust note */
.ce-trust{
	display:flex;align-items:flex-start;gap:12px;
	background:var(--soft);border:1px solid #d3e4f8;border-radius:var(--radius);
	padding:20px 22px;margin-bottom:18px;
	color:var(--body);font-size:14.5px;line-height:1.7;
}
.ce-trust i{color:var(--brand);font-size:20px;flex:0 0 auto;margin-top:1px;}
.ce-trust b{color:var(--ink);}

/* Result CTA */
.ce-next{
	background:linear-gradient(135deg,#0d1b34,#155fa8);border-radius:var(--radius);
	padding:36px 34px;text-align:center;color:#fff;
}
.ce-next h3{color:#fff;font-size:25px;font-weight:800;letter-spacing:-.015em;margin:0 0 12px;text-transform:none;}
.ce-next p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;max-width:560px;margin:0 auto 24px;}
.ce-next-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.ce-next .btn{margin:0;}
.ce-next .btn-ghost{
	display:inline-flex;align-items:center;gap:8px;
	border:1.5px solid rgba(255,255,255,.4);color:#fff;
	font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:99px;
	transition:background .18s ease,border-color .18s ease;
}
.ce-next .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;}
.ce-next-mini{
	display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;
	margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
}
.ce-next-mini button,.ce-next-mini a{
	background:none;border:0;padding:0;cursor:pointer;
	color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600;
	display:inline-flex;align-items:center;gap:7px;
}
.ce-next-mini button:hover,.ce-next-mini a:hover{color:#fff;text-decoration:underline;}
@media (max-width:767px){
	.ce-next{padding:26px 18px;}
	.ce-next h3{font-size:20px;}
	.ce-next .btn,.ce-next .btn-ghost{width:100%;justify-content:center;}
}

/* ---------- Print ------------------------------------------ */
@media print{
	.header,.footer,.ceq-hero,.ce-assess,.ce-next-mini,.scroll-up,.ceq-more{display:none !important;}
	.ceq-sec{padding:0;background:#fff;}
	.ce-result{margin:0;max-width:none;}
	.ce-card,.ce-verdict,.ce-next{box-shadow:none;break-inside:avoid;}
	.ce-verdict,.ce-next{background:#155fa8 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
	.ce-ring{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion:reduce){
	.ce-track span,.ce-dot,.ce-opt > span{transition:none;}
}

/* Timeline reality check — how their target compares to their state */
.ce-time-note{
	margin:12px 0 0;padding:13px 16px;border-radius:12px;
	font-size:14px;line-height:1.65;
}
.ce-time-note.is-ok{background:#f0faf3;border:1px solid #cceada;color:#1f6b3d;}
.ce-time-note.is-tight{background:#fdecea;border:1px solid #f5cdc7;color:#96301f;}
.ce-time-note.is-open{background:var(--soft);border:1px solid #d3e4f8;color:var(--body);}

/* ============================================================
   FAQ — native <details>, styled to match the site accordion.
   Deliberately not class "accordion": this needs no JavaScript,
   so it cannot be left dead if main.js fails to initialise.
   ============================================================ */
.ceq-faq{max-width:880px;margin:0 auto;}
.ceq-faq-item{
	background:#fff;border:1px solid var(--line);border-radius:14px;
	margin-bottom:14px;box-shadow:var(--shadow-sm);
	transition:box-shadow .3s ease;
}
.ceq-faq-item:hover{box-shadow:var(--shadow);}

.ceq-faq-item > summary{
	display:block;position:relative;cursor:pointer;
	padding:20px 58px 20px 24px;
	font-weight:600;font-size:16px;line-height:1.5;color:var(--ink);
	list-style:none;
	transition:color .2s ease;
}
/* Hide the native disclosure triangle in every engine. */
.ceq-faq-item > summary::-webkit-details-marker{display:none;}
.ceq-faq-item > summary::marker{content:"";}

.ceq-faq-item > summary::after{
	content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
	width:30px;height:30px;border-radius:50%;
	background:rgba(26,118,209,.10);color:var(--brand);
	display:flex;align-items:center;justify-content:center;
	font-size:20px;font-weight:600;line-height:1;
	transition:background .3s ease,color .3s ease;
}
.ceq-faq-item > summary:hover{color:var(--brand);}
.ceq-faq-item > summary:hover::after{background:rgba(26,118,209,.16);}
.ceq-faq-item > summary:focus-visible{
	outline:2px solid var(--brand);outline-offset:-2px;border-radius:14px;
}
.ceq-faq-item[open] > summary{color:var(--brand);}
.ceq-faq-item[open] > summary::after{content:"\2212";background:var(--grad);color:#fff;}

.ceq-faq-a{padding:0 24px 22px;}
.ceq-faq-a p{margin:0;color:var(--body);line-height:1.85;}

/* Open/close animation where the browser supports it; a no-op elsewhere. */
@media (prefers-reduced-motion:no-preference){
	.ceq-faq-a{animation:ceqFaqOpen .28s ease;}
	@keyframes ceqFaqOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
}

@media (max-width:575px){
	.ceq-faq-item > summary{padding:17px 52px 17px 18px;font-size:15px;}
	.ceq-faq-item > summary::after{right:14px;width:27px;height:27px;font-size:18px;}
	.ceq-faq-a{padding:0 18px 18px;}
}

/* ============================================================
   Pillar add-on questions — revealed only for the pillars the
   visitor put in scope in step 1.
   ============================================================ */
.ce-pillar-block{
	margin-top:26px;padding:22px 22px 4px;
	background:#f7fafd;border:1px solid var(--line);border-radius:var(--radius-sm);
}
.ce-pillar-block[hidden]{display:none;}
.ce-pillar-h{
	display:flex;align-items:center;gap:10px;margin:0 0 4px;
	font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
}
.ce-pillar-h i{
	width:30px;height:30px;border-radius:8px;flex:0 0 auto;
	background:var(--grad);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:15px;
}
.ce-pillar-sub{margin:0 0 6px;color:var(--muted);font-size:13.5px;line-height:1.6;}
/* Questions sit directly on the tinted panel, so drop the card divider. */
.ce-pillar-block .ce-q:first-of-type{border-top:0;}
.ce-pillar-block .ce-q{border-top-color:#e3ecf7;}

@media (max-width:575px){
	.ce-pillar-block{padding:18px 14px 2px;margin-top:20px;}
}

/* Pillar label on a gap card */
.ce-gap-pillar{
	font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	padding:4px 9px;border-radius:99px;
	background:var(--soft);color:var(--brand-dark);flex:0 0 auto;
}

/* ============================================================
   Readiness by pillar — one ring per pillar in scope, shown
   under the overall score when more than one pillar applies.
   ============================================================ */
.ce-bypillar{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.ce-bypillar[hidden]{display:none;}
.ce-bypillar-h{
	font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
	color:var(--muted);margin:0 0 16px;
}
.ce-prings{
	display:grid;gap:14px;
	grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.ce-pring-card{
	background:#fcfdff;border:1px solid var(--line);border-radius:14px;
	padding:18px 14px 16px;text-align:center;
}
.ce-pring-top{
	display:flex;align-items:center;justify-content:center;gap:8px;
	margin-bottom:14px;min-height:42px;
}
.ce-pring-top i{
	width:26px;height:26px;border-radius:7px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	font-size:13px;color:#fff;background:var(--pcol,#1a76d1);
}
.ce-pring-top span{
	font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;text-align:left;
}
.ce-pring{
	--pct:0;
	width:96px;height:96px;margin:0 auto 12px;border-radius:50%;
	display:grid;place-items:center;position:relative;
	background:conic-gradient(var(--pcol,#1a76d1) calc(var(--pct) * 1%), #e8eef7 0);
}
.ce-pring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fcfdff;}
.ce-pring b{
	position:relative;z-index:1;font-size:21px;font-weight:800;
	color:var(--ink);letter-spacing:-.02em;
}
.ce-pring-pts{color:var(--muted);font-size:12.5px;font-weight:600;}

/* One colour per pillar so the four rings are told apart at a glance. */
.ce-pring-card.is-classical{--pcol:#1a76d1;}
.ce-pring-card.is-cloud    {--pcol:#2bb0e8;}
.ce-pring-card.is-ai       {--pcol:#7c4ddb;}
.ce-pring-card.is-ot       {--pcol:#ef8b1f;}

.ce-bypillar-note{color:var(--muted);font-size:12.5px;line-height:1.65;margin:14px 0 0;}

@media (max-width:575px){
	.ce-prings{grid-template-columns:repeat(2,1fr);gap:10px;}
	.ce-pring-card{padding:14px 8px 12px;}
	.ce-pring{width:78px;height:78px;}
	.ce-pring::after{inset:8px;}
	.ce-pring b{font-size:17px;}
	.ce-pring-top span{font-size:12.5px;}
	.ce-pring-top{min-height:36px;gap:6px;}
	.ce-pring-top i{width:22px;height:22px;font-size:11px;}
}

/* ============================================================
   "What do these mean?" explainer under the pillar question.
   Native <details>, so it works with no JavaScript.
   ============================================================ */
.ce-help{
	clear:both;margin-top:14px;
	background:var(--soft);border:1px solid #d3e4f8;border-radius:12px;
}
.ce-help > summary{
	display:block;position:relative;cursor:pointer;list-style:none;
	padding:13px 42px 13px 16px;
	font-size:13.5px;font-weight:700;color:var(--brand-dark);line-height:1.5;
}
.ce-help > summary::-webkit-details-marker{display:none;}
.ce-help > summary::marker{content:"";}
.ce-help > summary::after{
	content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
	width:22px;height:22px;border-radius:50%;
	background:rgba(26,118,209,.14);color:var(--brand);
	display:flex;align-items:center;justify-content:center;
	font-size:16px;font-weight:700;line-height:1;
}
.ce-help[open] > summary::after{content:"\2212";background:var(--brand);color:#fff;}
.ce-help > summary:hover{color:var(--brand);}
.ce-help > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:12px;}
.ce-help-body{padding:0 16px 16px;}
.ce-help-body p{
	margin:0 0 11px;color:var(--body);font-size:13.5px;line-height:1.75;
}
.ce-help-body p:last-child{margin-bottom:0;}
.ce-help-body b{color:var(--ink);}