/*
 * Guide components (client, 20 Oct 2026: the new guides looked bland —
 * "please make it good looking with formatting, sections, boxes").
 * Used by the guides written from docs/seo/plans/probity-guide-plan-*.csv.
 * Everything is scoped to .pe-g (the wrapper the guide's HTML starts with),
 * so older posts are untouched. Loaded on single posts only.
 */
.pe-g{--g-ink:#0F1B33;--g-ink2:#3A4A66;--g-navy:#071A44;--g-blue:#1E5FD0;--g-blue2:#164AA8;--g-gold:#E1A928;--g-gold2:#F2B530;--g-sky:#F5F8FC;--g-line:#DDE5F1;--g-line2:#C7D8F2;font-size:17px;line-height:1.7;color:var(--g-ink);counter-reset:pe-g-sec}
.pe-g > * + *{margin-top:1.1em}
.pe-g p{margin:0}
.pe-g p + p{margin-top:.9em}
.pe-g a{color:var(--g-blue);text-decoration:underline;text-underline-offset:3px}
.pe-g a:hover{color:var(--g-blue2)}

/* Lead paragraph */
.pe-g .pe-g-lead{font-size:1.18rem;line-height:1.6;color:var(--g-ink)}

/* "In short" answer box */
.pe-g .pe-g-answer{position:relative;margin:28px 0;padding:22px 24px 20px;background:linear-gradient(135deg,#F5F8FC,#EAF1FC);border:1px solid var(--g-line2);border-left:6px solid var(--g-gold);border-radius:12px}
.pe-g .pe-g-label{display:inline-block;margin:0 0 10px;padding:4px 12px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--g-navy);border-radius:999px}
.pe-g .pe-g-answer ul{margin:6px 0 0;padding:0;list-style:none}
.pe-g .pe-g-answer li{position:relative;padding-left:28px;margin:8px 0}
.pe-g .pe-g-answer li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--g-gold2)}

/* Contents */
.pe-g .pe-g-toc{margin:28px 0;padding:18px 22px;border:1px solid var(--g-line);border-radius:12px;background:#fff}
.pe-g .pe-g-toc p{margin:0 0 8px;font-weight:700;font-size:.95rem;color:var(--g-ink2);text-transform:uppercase;letter-spacing:.06em}
.pe-g .pe-g-toc ol{margin:0;padding:0;list-style:none;counter-reset:pe-g-toc;columns:2;column-gap:28px}
.pe-g .pe-g-toc li{counter-increment:pe-g-toc;break-inside:avoid;margin:6px 0;padding-left:34px;position:relative;font-size:.98rem;line-height:1.45}
.pe-g .pe-g-toc li::before{content:counter(pe-g-toc);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--g-sky);border:1px solid var(--g-line2);color:var(--g-blue2);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.pe-g .pe-g-toc a{text-decoration:none;color:var(--g-ink)}
.pe-g .pe-g-toc a:hover{color:var(--g-blue)}

/* Numbered section headings */
.pe-g h2{margin:48px 0 16px;font-size:clamp(24px,3vw,30px);line-height:1.25;color:var(--g-ink);scroll-margin-top:90px}
.pe-g h2.pe-g-n{counter-increment:pe-g-sec;display:flex;gap:14px;align-items:flex-start;padding-top:22px;border-top:1px solid var(--g-line)}
.pe-g h2.pe-g-n::before{content:counter(pe-g-sec);font-family:Mulish,system-ui,sans-serif;font-size:1.15rem!important;flex:0 0 40px;height:40px;border-radius:10px;background:var(--g-navy);color:var(--g-gold2);font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:-2px}
.pe-g h3{margin:28px 0 10px;font-size:1.2rem;line-height:1.35;color:var(--g-navy)}

/* Two situations */
.pe-g .pe-g-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.pe-g .pe-g-card{padding:20px 20px 18px;border:1px solid var(--g-line);border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(15,27,51,.06)}
.pe-g .pe-g-card h3,.pe-g .pe-g-card .pe-g-card-h{margin:0 0 8px;font-size:1.08rem;font-weight:700;color:var(--g-ink)}
.pe-g .pe-g-card p{font-size:.98rem;line-height:1.6;color:var(--g-ink2)}
.pe-g .pe-g-card--gold{border-top:4px solid var(--g-gold)}
.pe-g .pe-g-card--blue{border-top:4px solid var(--g-blue)}

/* Lists */
.pe-g ul,.pe-g ol{padding-left:1.3em}
.pe-g li + li{margin-top:.4em}
.pe-g ul.pe-g-ticks{list-style:none;padding:0}
.pe-g ul.pe-g-ticks li{position:relative;padding-left:32px}
.pe-g ul.pe-g-ticks li::before{content:"";position:absolute;left:2px;top:.35em;width:20px;height:20px;border-radius:50%;background:var(--g-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.pe-g .pe-g-who{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-g .pe-g-who li{margin:0;padding:16px 18px;border-radius:10px;background:var(--g-sky);border:1px solid var(--g-line);font-size:.98rem;line-height:1.55}
.pe-g .pe-g-who li strong{display:block;margin-bottom:4px;color:var(--g-navy)}

/* Callouts */
.pe-g .pe-g-note,.pe-g .pe-g-warn,.pe-g .pe-g-quote{margin:24px 0;padding:18px 22px;border-radius:12px}
.pe-g .pe-g-note{background:#EEF4FF;border:1px solid #CFE0FB}
.pe-g .pe-g-warn{background:#FFF8E8;border:1px solid #F3DFA8}
.pe-g .pe-g-note .pe-g-label{background:var(--g-blue)}
.pe-g .pe-g-warn .pe-g-label{background:#9A6A00}
.pe-g .pe-g-quote{background:#fff;border:1px solid var(--g-line);border-left:5px solid var(--g-navy)}
.pe-g .pe-g-quote blockquote{margin:0;font-size:1.08rem;line-height:1.6;font-style:italic;color:var(--g-ink)}
.pe-g .pe-g-quote .pe-g-cite{margin-top:8px;font-size:.88rem;color:var(--g-ink2);font-style:normal}

/* Tables */
.pe-g .pe-g-table{margin:22px 0;overflow-x:auto;border:1px solid var(--g-line);border-radius:12px;-webkit-overflow-scrolling:touch}
.pe-g table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5;min-width:560px}
.pe-g th{background:var(--g-navy);color:#fff;text-align:left;font-weight:600;padding:12px 14px}
.pe-g td{padding:12px 14px;border-top:1px solid var(--g-line);vertical-align:top}
.pe-g tbody tr:nth-child(even) td{background:#F8FAFD}
.pe-g td:first-child{font-weight:600;color:var(--g-navy);white-space:nowrap}

/* Course card */
.pe-g .pe-g-course{margin:30px 0;padding:28px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#071A44 0%,#0B2D78 70%,#1E5FD0 140%);box-shadow:0 14px 34px rgba(7,26,68,.25)}
.pe-g .pe-g-course .pe-g-label{background:var(--g-gold2);color:var(--g-navy)}
.pe-g .pe-g-course h3,.pe-g .pe-g-course .pe-g-course-h{margin:4px 0 10px;font-size:1.45rem;line-height:1.3;color:#fff;font-weight:700}
.pe-g .pe-g-course p{color:#DCE6FF;font-size:1rem}
.pe-g .pe-g-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:0;list-style:none}
.pe-g .pe-g-chips li{margin:0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:.88rem;font-weight:600;color:#fff}
.pe-g .pe-g-course ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:pe-g-mod;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.pe-g .pe-g-course ol li{counter-increment:pe-g-mod;margin:0;padding-left:34px;position:relative;color:#fff;font-size:.95rem;line-height:1.45}
.pe-g .pe-g-course ol li::before{content:counter(pe-g-mod,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--g-gold2);font-weight:700}
.pe-g .pe-g-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pe-g a.pe-g-btn{display:inline-block;padding:12px 20px;border-radius:9px;font-weight:700;text-decoration:none;background:var(--g-gold2);color:var(--g-navy)}
.pe-g a.pe-g-btn:hover{background:#FFD064;color:var(--g-navy)}
.pe-g a.pe-g-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.pe-g a.pe-g-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* Regulator chips */
.pe-g .pe-g-regs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pe-g .pe-g-regs li{margin:0}
.pe-g .pe-g-regs a{display:block;height:100%;padding:12px 14px;border:1px solid var(--g-line);border-radius:10px;background:#fff;text-decoration:none;color:var(--g-ink);font-size:.93rem;line-height:1.35;font-weight:600}
.pe-g .pe-g-regs a span{display:block;font-weight:400;font-size:.82rem;color:var(--g-ink2)}
.pe-g .pe-g-regs a:hover{border-color:var(--g-blue);box-shadow:0 6px 16px rgba(30,95,208,.12)}

/* Related courses strip */
.pe-g .pe-g-related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.pe-g .pe-g-related a{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--g-line);border-radius:12px;background:#fff;text-decoration:none;color:var(--g-ink)}
.pe-g .pe-g-related a strong{font-size:1rem;line-height:1.3}
.pe-g .pe-g-related a span{font-size:.85rem;color:var(--g-blue2);font-weight:600}
.pe-g .pe-g-related a:hover{border-color:var(--g-blue)}

/* FAQ */
.pe-g .pe-g-faq{margin:18px 0 0}
.pe-g .pe-g-faq details{border:1px solid var(--g-line);border-radius:12px;background:#fff;margin:0 0 10px;overflow:hidden}
.pe-g .pe-g-faq summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;position:relative;font-weight:700;font-size:1.02rem;line-height:1.4;color:var(--g-ink)}
.pe-g .pe-g-faq summary::-webkit-details-marker{display:none}
.pe-g .pe-g-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--g-sky);color:var(--g-blue);font-weight:700;display:flex;align-items:center;justify-content:center}
.pe-g .pe-g-faq details[open] summary::after{content:"\2212"}
.pe-g .pe-g-faq details[open] summary{border-bottom:1px solid var(--g-line);background:var(--g-sky)}
.pe-g .pe-g-faq details > p{padding:14px 20px 18px;margin:0;font-size:.98rem;color:var(--g-ink2)}

/* Sources */
.pe-g .pe-g-sources{margin-top:40px;padding:20px 22px;border-radius:12px;background:#F7F9FC;border:1px solid var(--g-line);font-size:.9rem;line-height:1.55;color:var(--g-ink2)}
.pe-g .pe-g-sources h2{margin:0 0 8px;padding:0;border:0;font-size:1.05rem}
.pe-g .pe-g-sources ul{margin:10px 0 0;padding-left:1.1em;columns:2;column-gap:28px}
.pe-g .pe-g-sources li{break-inside:avoid;margin:0 0 6px}
.pe-g .pe-g-small{font-size:.88rem;color:var(--g-ink2)}

@media (max-width:760px){
  .pe-g{font-size:16.5px}
  .pe-g .pe-g-two,.pe-g .pe-g-who,.pe-g .pe-g-related{grid-template-columns:1fr}
  .pe-g .pe-g-regs{grid-template-columns:1fr 1fr}
  .pe-g .pe-g-toc ol,.pe-g .pe-g-sources ul{columns:1}
  .pe-g .pe-g-course{padding:22px 18px}
  .pe-g .pe-g-course ol{grid-template-columns:1fr}
  .pe-g h2.pe-g-n::before{flex-basis:34px;height:34px}
}