:root{
  /* One place to change the CM Academy block palette. If the theme is a block theme,
     point these at its presets, e.g.
     --cmac-accent: var(--wp--preset--color--cm-blue, #185abc); */
  --cmac-accent: #185abc;
  --cmac-accent-soft: #eef4ff;
  --cmac-ink: #1f354d;
  --cmac-brand: #9ccc3d;
  --cmac-brand-soft: #f5faea;
  --cmac-warning: #d89a18;
  --cmac-warning-soft: #fff8e5;
  --cmac-alert: #b84040;
  --cmac-alert-soft: #fff0f0;
  --cmac-border: #dfe5ec;
  --cmac-border-strong: #b8c2cf;
  --cmac-surface: #f3f5f7;
  --cmac-muted: #677482;
}
.cmac-button-wrap{margin:18px 0}.cmac-button{display:inline-block;text-decoration:none!important;font-weight:700;padding:11px 18px;border-radius:7px;transition:.18s}.cmac-button-primary{background:var(--cmac-brand);color:var(--cmac-ink)!important}.cmac-button-secondary{background:var(--cmac-accent);color:#fff!important}.cmac-button-outline{background:transparent;color:var(--cmac-accent)!important;border:2px solid var(--cmac-accent)}.cmac-button:hover{background:var(--cmac-accent);color:#fff!important}.cmac-columns>.wp-block-columns{gap:24px}.cmac-step{margin:28px 0}.cmac-step-copy{display:flex;gap:16px;align-items:flex-start}.cmac-step-number{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:50%;background:var(--cmac-brand);color:var(--cmac-ink);font-weight:800}.cmac-step-copy .cmac-step-title{margin:3px 0 8px}.cmac-step-content p:first-child{margin-top:0}.cmac-step-image{display:block;max-width:100%;height:auto;border-radius:10px;margin-top:16px}.cmac-step-right,.cmac-step-left{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,44%);gap:28px;align-items:center}.cmac-step-left .cmac-step-image{grid-column:1;grid-row:1;margin:0}.cmac-step-left .cmac-step-copy{grid-column:2;grid-row:1}.cmac-step-right .cmac-step-image{margin:0}.cmac-shot-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,48%);gap:28px;align-items:center;margin:28px 0}.cmac-shot-text.cmac-image-left .cmac-shot-image{grid-column:1;grid-row:1}.cmac-shot-text.cmac-image-left .cmac-shot-copy{grid-column:2;grid-row:1}.cmac-shot-image{max-width:100%;height:auto;border-radius:10px}.cmac-download strong,.cmac-download small{display:block}.cmac-download small{margin-top:4px;color:#657181}.cmac-download{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 18px;background:#f5f7fa;border-radius:10px;margin:16px 0}.cmac-download a{font-weight:700}.cmac-accordion{border:1px solid var(--cmac-border);border-radius:10px;margin:12px 0;background:#fff}.cmac-accordion summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--cmac-ink)}.cmac-accordion-content{padding:0 18px 16px}.cmac-video{margin:26px 0}.cmac-video iframe{max-width:100%}@media(max-width:700px){.cmac-step-right,.cmac-step-left,.cmac-shot-text{display:block}.cmac-step-left .cmac-step-image,.cmac-step-left .cmac-step-copy,.cmac-shot-text.cmac-image-left .cmac-shot-image,.cmac-shot-text.cmac-image-left .cmac-shot-copy{display:block}.cmac-step-image,.cmac-shot-image{margin-top:16px}.cmac-download{align-items:flex-start;flex-direction:column}}

/* The theme puts a large margin-top on headings inside entry-content, which pushes
   the step title below the number. These three rules line them up again; !important
   is deliberate — we are competing with a theme rule of higher specificity. */
.cmac-step .cmac-step-copy > div{min-width:0}
.cmac-step .cmac-step-copy .cmac-step-title{margin-top:0 !important;margin-bottom:6px !important;line-height:1.15;font-size:29px}
.cmac-step .cmac-step-number{margin-top:0;flex:0 0 auto}
.cmac-step .cmac-step-content > *:first-child{margin-top:0}
.cmac-shot-text .cmac-shot-copy .cmac-shot-title{margin-top:0 !important;margin-bottom:6px !important;line-height:1.25;font-size:22px}
.cmac-shot-text .cmac-shot-content > *:first-child{margin-top:0}
.cmac-info .cmac-info-content > *:first-child{margin-top:0}
.cmac-info .cmac-info-content > *:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------- route */
.cmac-route{margin:18px 0}
.cmac-route-path{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.cmac-route-step{display:inline-flex;align-items:center;min-height:31px;padding:6px 10px;border:1px solid #CFD8E1;border-radius:8px;background:#fff;color:#31465A;font-size:13px;font-weight:700;line-height:1.2}
.cmac-route-sep{color:#9AA6B2;font-size:16px;font-style:normal;line-height:1}
.cmac-route-box{position:relative;overflow:hidden;padding:22px 24px 23px 26px;border:1px solid rgba(97,170,242,.34);border-left:6px solid #61aaf2;border-radius:18px;background:radial-gradient(110% 130% at 92% 4%, rgba(97,170,242,.32) 0%, rgba(97,170,242,.12) 34%, rgba(97,170,242,0) 66%), radial-gradient(90% 120% at 4% 96%, rgba(97,170,242,.16) 0%, rgba(97,170,242,0) 60%), linear-gradient(135deg, rgba(97,170,242,.20) 0%, rgba(255,255,255,.97) 52%, rgba(222,238,253,.95) 100%);box-shadow:0 14px 32px rgba(31,53,77,.08),0 3px 9px rgba(31,53,77,.04)}
.cmac-route-box .cmac-route-label{position:relative;z-index:1;display:inline-flex;align-items:center;margin-bottom:11px;padding:5px 12px;border-radius:999px;background:#61aaf2;color:#fff;font-size:12px;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.cmac-route-box .cmac-route-path{position:relative;z-index:1}

/* ------------------------------------------------------------ guide reference */
.cmac-guide{position:relative;display:block;overflow:hidden;margin:20px 0;padding:22px 24px 22px 28px;border:1px solid rgba(156,204,61,.32);border-radius:14px;background:linear-gradient(135deg,rgba(156,204,61,.14) 0%,rgba(255,255,255,.98) 58%,rgba(240,247,224,.8) 100%);box-shadow:0 8px 20px rgba(18,32,46,.06);text-decoration:none!important;color:var(--cmac-ink)}
.cmac-guide::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--cmac-brand)}
.cmac-guide{transition:border-color .15s ease,box-shadow .15s ease}
.cmac-guide:hover{border-color:#9CCC3D;box-shadow:0 14px 30px rgba(18,32,46,.13)}
.cmac-guide-badge{display:inline-flex;margin-bottom:11px;padding:4px 10px;border-radius:999px;background:var(--cmac-brand);color:#fff;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.cmac-guide-title{display:block;margin-bottom:5px;font-size:20px;font-weight:700;line-height:1.3}
.cmac-guide-desc{display:block;margin-bottom:13px;color:var(--cmac-muted);font-size:16px;line-height:1.5}
.cmac-guide-note{display:block;margin:2px 0 14px;padding-top:13px;border-top:1px solid rgba(18,32,46,.1);color:var(--cmac-muted);font-size:15px;line-height:1.5}
.cmac-guide-cta{display:block;color:var(--cmac-accent);font-size:15px;font-weight:700;transition:color .15s ease}
.cmac-guide:hover .cmac-guide-cta{color:#9CCC3D}

/* --------------------------------------------------------------------- author */
.cmac-author{display:flex;align-items:center;gap:20px;margin:36px 0 0;padding:30px 0 0;border-top:1px solid rgba(18,32,46,.1)}
.cmac-author-photo{flex:0 0 80px;width:80px;height:80px;border-radius:50%;object-fit:cover}
.cmac-author-text{display:flex;flex-direction:column;justify-content:center}
.cmac-author-name{font-size:20px;font-weight:700;color:var(--cmac-accent)}
.cmac-author-role{font-size:15px;color:var(--cmac-muted)}
.cmac-author-date,.cmac-author-updated{font-size:14px;color:var(--cmac-muted)}

@media (max-width:640px){
  .cmac-route-box{padding:18px 18px 19px 20px;border-radius:16px}
  .cmac-guide{padding:18px 18px 18px 22px}
  .cmac-author{gap:14px}
}

/* ----------------------------------------------------------------- action list */
.cmac-actions{margin:20px 0}
.cmac-actions-list{margin:0;padding-left:22px}
.cmac-actions-list li{margin:6px 0;line-height:1.55}

/* ------------------------------------------------------------- comparison pair */
.cmac-pair{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:15px;align-items:center;margin:24px 0}
.cmac-pair-card{padding:18px 20px;border:1px solid #D7E0E6;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(18,32,46,.05)}
.cmac-pair-label{display:block;margin-bottom:4px;color:var(--cmac-muted);font-size:13px}
.cmac-pair-title{display:block;font-size:17px;color:var(--cmac-ink)}
.cmac-pair-text{display:block;margin-top:3px;color:var(--cmac-muted);font-size:14px}
.cmac-pair-symbol{display:grid;place-items:center;width:42px;height:42px;margin:auto;border-radius:50%;background:#EEF3F8;color:var(--cmac-accent)}
@media (max-width:640px){
  .cmac-pair{grid-template-columns:minmax(0,1fr);gap:10px}
  .cmac-pair-symbol{margin:2px auto}
}

/* ------------------------------------------------------------------ screenshot */
.cmac-shot{margin:26px 0}
.cmac-shot .cmac-shot-frame{display:block}
.cmac-shot .cmac-shot-frame img{display:block;width:100%;height:auto}
/* Framed: the rounding and the shadow stand in for the edge of the application
   window, which only makes sense when the image ends where the screen ends. */
.cmac-shot-framed .cmac-shot-frame{border-radius:13px;overflow:hidden;box-shadow:0 16px 36px rgba(18,32,46,.16),0 2px 8px rgba(18,32,46,.08)}
/* Plain: no rounding, no shadow, no clipping. The composite already has its own
   padding, and its callouts are meant to sit outside the screen's edge. */
.cmac-shot-plain .cmac-shot-frame{border-radius:0;overflow:visible;box-shadow:none}
.cmac-shot-caption{margin:10px 0 0;color:var(--cmac-muted);font-size:14px}

/* -------------------------------------------------------------------- callouts
   One shape for all four roles, so the reader only has to read the colour: a
   filled circle with a white masked icon. The icon is one asset per role, tinted
   from CSS, and each icon has its own size because the glyphs differ in mass —
   the exclamation is tall and thin, the check is nearly square. */
.cmac-info{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;margin:20px 0;border:1px solid rgba(18,32,46,.12);border-left:1px solid rgba(18,32,46,.12);border-radius:12px;background:#fff}
.cmac-info>strong{display:block;margin-bottom:2px}
.cmac-info-body>strong{display:block;margin-bottom:2px;color:var(--cmac-ink);font-size:15px}
.cmac-info-content>*:first-child{margin-top:0}
.cmac-info-content>*:last-child{margin-bottom:0}
.cmac-info-icon{flex:0 0 30px;display:block;width:30px;height:30px;border-radius:50%;position:relative}
.cmac-info-icon::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

.cmac-info-good-to-know{border-color:rgba(24,90,188,.18);background:#F6FAFF}
.cmac-info-good-to-know .cmac-info-icon{background:#185ABC}
.cmac-info-good-to-know .cmac-info-icon::before{width:16px;height:16px;-webkit-mask-image:url(icon-good-to-know.svg);mask-image:url(icon-good-to-know.svg)}

.cmac-info-cm-recommends{border-color:rgba(97,170,242,.34);background:#F3F9FE}
.cmac-info-cm-recommends .cmac-info-icon{background:#61aaf2}
.cmac-info-cm-recommends .cmac-info-icon::before{width:20px;height:20px;-webkit-mask-image:url(icon-cm-recommends.svg);mask-image:url(icon-cm-recommends.svg)}

.cmac-info-tip{border-color:rgba(156,204,61,.42);background:#F8FBEF}
.cmac-info-tip .cmac-info-icon{background:#9CCC3D}
.cmac-info-tip .cmac-info-icon::before{width:16px;height:16px;-webkit-mask-image:url(icon-tip.svg);mask-image:url(icon-tip.svg)}

.cmac-info-cannot-be-undone{border-color:rgba(230,214,60,.6);background:#FCFCE8}
.cmac-info-cannot-be-undone .cmac-info-icon{background:#EBDC3C}
.cmac-info-cannot-be-undone .cmac-info-icon::before{width:18px;height:18px;-webkit-mask-image:url(icon-cannot-be-undone.svg);mask-image:url(icon-cannot-be-undone.svg)}

/* --------------------------------------------------------------------------- flow
   Equal-width, ordered steps. auto-fit with a 210px floor so three steps become one
   column on a phone rather than three unreadable slivers. */
.cmac-flow{margin:30px 0}
.cmac-flow-title{margin:0 0 16px!important;font-size:22px;line-height:1.25}
.cmac-flow-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:none}
.cmac-flow-step{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;border:1px solid #D7E0E6;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(18,32,46,.05)}
.cmac-flow-step-title{font-size:16px;font-weight:700;line-height:1.3;color:var(--cmac-ink)}
.cmac-flow-step-n{color:var(--cmac-accent)}
.cmac-flow-choice .cmac-flow-steps{list-style:none}
.cmac-flow-step-image{display:block;margin-top:auto}
.cmac-flow-step-image img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #E4EAEF}

@media (min-width:641px) and (max-width:900px){
  /* On a tablet auto-fit puts three 210px steps across and leaves the fourth alone on
     its own row. Two by two is the honest shape at that width. */
  .cmac-flow-4 .cmac-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:480px){
  /* The author photo and two or three lines of text do not both fit on a narrow
     phone without the name wrapping mid-word. */
  .cmac-author{flex-direction:column;align-items:flex-start;gap:12px}
  /* The callout keeps its circle, but the text needs the full width. */
  .cmac-info{gap:12px;padding:14px 15px}
  .cmac-flow-step{padding:15px 15px 17px}
}

/* Explanation cards ------------------------------------------------------ */
.cmac-explanation-cards{margin:18px 0 28px}
.cmac-explanation-cards-list{display:grid;gap:12px;margin:0!important;padding:0!important;list-style:none!important}
.cmac-explanation-cards-2 .cmac-explanation-cards-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.cmac-explanation-cards-3 .cmac-explanation-cards-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmac-explanation-cards-4 .cmac-explanation-cards-list{grid-template-columns:repeat(4,minmax(0,1fr))}
.cmac-explanation-card{display:flex;min-width:0;flex-direction:column;gap:3px;margin:0!important;padding:13px 14px 14px!important;border:1px solid #D7E0E6;border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(18,32,46,.035);list-style:none!important}
.cmac-explanation-card-title{display:block;color:var(--cmac-ink);font-size:16px;font-weight:700;line-height:1.25}
.cmac-explanation-card-text{display:block;color:var(--cmac-muted);font-size:14px;line-height:1.35}
@media (min-width:601px) and (max-width:900px){
  .cmac-explanation-cards-3 .cmac-explanation-cards-list,.cmac-explanation-cards-4 .cmac-explanation-cards-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .cmac-explanation-cards-2 .cmac-explanation-cards-list,.cmac-explanation-cards-3 .cmac-explanation-cards-list,.cmac-explanation-cards-4 .cmac-explanation-cards-list{grid-template-columns:1fr}
}

/* Interactive Guide ------------------------------------------------------- */
.cmac-interactive-guide{width:100%;margin:1.6rem 0}.cmac-interactive-guide-frame{display:block;width:100%;min-height:360px;border:0;border-radius:14px;background:#f4f6f8;box-shadow:0 12px 30px rgba(18,32,46,.08)}
.cmac-interactive-guide-missing{padding:18px 20px;border:1px solid #EBDC3C;border-left:6px solid #EBDC3C;border-radius:10px;background:#FCFCE8;color:#12202E}
.cmac-interactive-guide-missing p{margin:0 0 6px}
.cmac-interactive-guide-missing p:last-child{margin-bottom:0}
.cmac-guide-missing-title{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4A3B05}
.cmac-guide-missing-id{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:#4A3B05}
@media(max-width:782px){.cmac-interactive-guide-frame{border-radius:10px}}

/* CM Contents ------------------------------------------------------------- */
.cmac-contents{margin:clamp(28px,4vw,40px) 0 64px;padding:24px;border:1px solid rgba(156,204,61,.55);border-radius:12px;background:#FBFDF8}
.cmac-contents-title{margin:0 0 14px;color:var(--cmac-ink);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cmac-contents-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--cmac-toc-rows,4),minmax(46px,auto));grid-auto-flow:column;gap:10px 18px;margin:0!important;padding:0!important;list-style:none!important;counter-reset:cmac-toc}
.cmac-contents-list li{margin:0!important;padding:0!important;list-style:none!important}
.cmac-contents-list a,.cmac-contents-list li>span{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 8px;border-radius:7px;color:var(--cmac-ink)!important;font-size:16px;font-weight:600;line-height:1.25;text-decoration:none!important}
.cmac-contents-list a:hover{color:var(--cmac-accent)!important;background:#F0F6E7}
.cmac-contents-list a::before,.cmac-contents-list li>span::before{counter-increment:cmac-toc;content:counter(cmac-toc);display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:50%;color:#fff;background:var(--cmac-brand);font-size:13px;font-weight:700}
.cmac-contents-level-3 a,.cmac-contents-level-3>span{padding-left:22px;font-size:15px;font-weight:600;color:var(--cmac-muted)!important}
.cmac-contents-level-3 a::before,.cmac-contents-level-3>span::before{width:25px;height:25px;flex-basis:25px;font-size:11px;background:#B7C3CF}
.cmac-contents-empty{margin:0;color:var(--cmac-muted);font-size:14px}
@media(max-width:900px){.cmac-contents-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}
@media(max-width:640px){.cmac-contents{padding:20px;margin-bottom:40px}}

/* CM Guide Switcher ------------------------------------------------------- */
.cmac-guide-switcher{margin:36px 0 54px}
.cmac-guide-switcher-chooser{padding:26px;border:1px solid #D7E0E8;border-radius:14px;background:#F8FAFC}
.cmac-guide-switcher-title{margin:0 0 6px;color:var(--cmac-ink);font-size:26px;font-weight:700;line-height:1.2}
.cmac-guide-switcher-intro{margin:0 0 20px;color:var(--cmac-muted);font-size:16px}
.cmac-guide-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cmac-guide-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:128px;padding:20px 52px 20px 20px;border:2px solid #D7E0E8;border-radius:12px;color:var(--cmac-ink);background:#fff;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.cmac-guide-option:hover{border-color:var(--cmac-accent);box-shadow:0 7px 20px rgba(24,90,188,.10);transform:translateY(-1px)}
.cmac-guide-option.is-active{border-color:var(--cmac-brand);box-shadow:0 0 0 5px rgba(156,204,61,.14)}
.cmac-guide-option::after{content:"";position:absolute;top:22px;right:20px;width:18px;height:18px;border:2px solid #AAB6C2;border-radius:50%;background:#fff}
.cmac-guide-option.is-active::after{border:6px solid var(--cmac-brand)}
.cmac-guide-option strong{color:var(--cmac-ink);font-size:22px;line-height:1.2}
.cmac-guide-option span{margin-top:8px;color:var(--cmac-muted);font-size:16px;line-height:1.4}
.cmac-guide-switcher-panels{margin-top:30px}
.cmac-guide-panel{scroll-margin-top:78px}
.cmac-guide-switcher.cmac-js-ready:not([data-cmac-active]).cmac-default-first .cmac-guide-panel-second{display:none}
.cmac-guide-switcher.cmac-js-ready:not([data-cmac-active]).cmac-default-second .cmac-guide-panel-first{display:none}
.cmac-guide-panel[hidden]{display:none!important}
@media(max-width:700px){.cmac-guide-switcher-chooser{padding:20px}.cmac-guide-options{grid-template-columns:1fr}.cmac-guide-option{min-height:112px}}

/* ------------------------------------------------ guard against global link CSS
   The site has link rules with !important and higher specificity than one class,
   which turned button labels blue (invisible on the secondary button) and stopped
   the guide card's call to action from changing on hover. These selectors are
   deliberately heavier than any theme link rule. */
html body .cmac-button-wrap a.cmac-button,
html body .cmac-button-wrap a.cmac-button:visited{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:12px 22px!important;border-radius:8px!important;font-family:inherit;font-size:17px!important;font-weight:700!important;line-height:1.2!important;text-decoration:none!important;box-shadow:none!important;transition:background-color .18s ease,color .18s ease,border-color .18s ease!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-primary,
html body .cmac-button-wrap a.cmac-button.cmac-button-primary:visited{background:#9CCC3D!important;color:#fff!important;border:2px solid #9CCC3D!important}
html body .cmac-button-wrap a.cmac-button,
html body .cmac-button-wrap a.cmac-button *{-webkit-text-fill-color:currentColor!important}
html body a.cmac-guide span.cmac-guide-badge{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-primary:hover,
html body .cmac-button-wrap a.cmac-button.cmac-button-primary:focus-visible,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:hover,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:focus-visible{background:#185ABC!important;color:#fff!important;border-color:#185ABC!important;text-decoration:none!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary:hover,
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary:focus-visible{background:#9CCC3D!important;color:#fff!important;border-color:#9CCC3D!important;text-decoration:none!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary,
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary:visited{background:#185ABC!important;color:#fff!important;border:2px solid #185ABC!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-outline,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:visited{background:transparent!important;color:#185ABC!important;border:2px solid #185ABC!important}
html body .cmac-button-wrap a.cmac-button:hover,
html body .cmac-button-wrap a.cmac-button:focus-visible{background:#185ABC!important;color:#fff!important;border-color:#185ABC!important;text-decoration:none!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary:hover,
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary:focus-visible{background:#9CCC3D!important;border-color:#9CCC3D!important}
html body .cmac-button-wrap a.cmac-button:focus-visible{outline:2px solid #185ABC;outline-offset:3px}

html body a.cmac-guide,
html body a.cmac-guide:visited,
html body a.cmac-guide:hover{color:#12202E!important;text-decoration:none!important}
html body a.cmac-guide .cmac-guide-title{color:#12202E!important;-webkit-text-fill-color:#12202E!important}
html body a.cmac-guide .cmac-guide-desc,
html body a.cmac-guide .cmac-guide-note{-webkit-text-fill-color:currentColor!important}
html body a.cmac-guide span.cmac-guide-cta,
html body a.cmac-guide span.cmac-guide-cta span{display:inline-flex!important;align-items:center;gap:.35em;color:#185ABC!important;-webkit-text-fill-color:#185ABC!important;text-decoration:none!important;transition:color .15s ease,-webkit-text-fill-color .15s ease!important}
html body a.cmac-guide .cmac-guide-cta .cmac-guide-arrow{display:inline-block}
html body a.cmac-guide:hover span.cmac-guide-cta,
html body a.cmac-guide:hover span.cmac-guide-cta span,
html body a.cmac-guide:focus-visible span.cmac-guide-cta,
html body a.cmac-guide:focus-visible span.cmac-guide-cta span{color:#9CCC3D!important;-webkit-text-fill-color:#9CCC3D!important;text-decoration:none!important}
html body a.cmac-guide:focus-visible{outline:2px solid #185ABC;outline-offset:3px}

/* ---------------------------------------------------------------------- video */
/* Matches the video embed Academy uses in its articles. */
.cmac-video{margin:26px 0}
.cmac-video-tip{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-bottom:6px;font-family:'Titillium Web',sans-serif;font-size:.68rem;font-weight:400;line-height:1.25;color:#123D8A}
.cmac-video-tip strong{font-weight:700}
.cmac-video-tip-icon{display:inline-block;width:12px;height:12px;object-fit:contain;vertical-align:middle}
.cmac-video-frame{box-sizing:border-box;border:2px solid #9CCC3D;border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.28);line-height:0;background:#123D8A}
.cmac-video-inner{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#123D8A}
.cmac-video-inner iframe{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;border:0;transform:scaleX(1.012);transform-origin:center;z-index:1}
.cmac-video-actions{display:flex;justify-content:flex-start;margin-top:8px}
html body .cmac-video button.cmac-video-fullscreen{display:inline-flex;align-items:center;gap:5px;margin:0;padding:6px 10px 6px 8px;box-sizing:border-box;border:2px solid transparent;border-radius:7px;background:#9ccc3d;color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:'Titillium Web',sans-serif;font-size:.72rem;font-weight:400!important;letter-spacing:.01em;line-height:1.1;text-transform:none;text-shadow:none!important;cursor:pointer;box-shadow:0 5px 13px rgba(0,0,0,.25);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
html body .cmac-video button.cmac-video-fullscreen span{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:400!important;text-shadow:none!important}
html body .cmac-video button.cmac-video-fullscreen:hover,
html body .cmac-video button.cmac-video-fullscreen:focus,
html body .cmac-video button.cmac-video-fullscreen:active{background:#185abc;border-color:transparent;color:#fff!important;box-shadow:0 6px 15px rgba(0,0,0,.28)}
html body .cmac-video button.cmac-video-fullscreen:focus-visible{outline:2px solid #185abc;outline-offset:2px}
.cmac-video-fullscreen-icon{display:block;width:11px;height:11px;min-width:11px;object-fit:contain}

/* Label colour on every button state, set on the link and anything inside it, so no
   global link or text-fill rule can win. */
html body .cmac-button-wrap a.cmac-button.cmac-button-primary,
html body .cmac-button-wrap a.cmac-button.cmac-button-primary *,
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary,
html body .cmac-button-wrap a.cmac-button.cmac-button-secondary *{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-outline,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline *{color:#185ABC!important;-webkit-text-fill-color:#185ABC!important}
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:hover,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:hover *,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:focus-visible,
html body .cmac-button-wrap a.cmac-button.cmac-button-outline:focus-visible *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Screenshot widths. Full is the article width. */
.cmac-shot.cmac-shot-w-narrow{max-width:760px}
.cmac-shot.cmac-shot-w-small{max-width:560px}

/* Video from the Media Library, and the optional "Video" label. */
.cmac-video-label{margin:0 0 9px 14px}
.cmac-video-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 8px;border-radius:999px;background:#EEF7D9;color:#1F354D!important;-webkit-text-fill-color:#1F354D!important;font-family:'Titillium Web',sans-serif;font-size:12px;font-weight:800;line-height:1;letter-spacing:.07em;text-transform:uppercase}
.cmac-video-pill::before{content:"\25B6";display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;padding-left:1px;border-radius:50%;background:#9CCC3D;color:#fff;-webkit-text-fill-color:#fff;font-size:10px;line-height:1;letter-spacing:0}
.cmac-video-frame-file{background:#000}
.cmac-video-frame-file video{display:block;width:100%!important;height:auto!important;max-width:none!important;margin:0;border:0;background:#000}
@media (max-width:700px){.cmac-video-label{margin-left:8px}}

/* Feature cards. */
.cmac-feature-cards{margin:22px 0 32px}
html body .cmac-feature-cards .cmac-feature-cards-list{display:grid;gap:22px;align-items:stretch;margin:0!important;padding:0!important;list-style:none!important}
.cmac-feature-cards-2 .cmac-feature-cards-list{grid-template-columns:repeat(2,minmax(0,1fr))}
html body .cmac-feature-cards-3 .cmac-feature-cards-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
html body .cmac-feature-cards .cmac-feature-card{display:flex;flex-direction:column;min-width:0;margin:0!important;padding:20px!important;border:1px solid #D9E2EA;border-radius:14px;background:#fff;box-shadow:0 7px 18px rgba(18,32,46,.045);list-style:none!important}
html body .cmac-feature-cards-3 .cmac-feature-card{padding:18px!important}
.cmac-feature-card-title{display:block;margin:0 0 8px;color:var(--cmac-ink);font-size:19px;font-weight:700;line-height:1.25}
.cmac-feature-cards-3 .cmac-feature-card-title{font-size:18px}
.cmac-feature-card-text{font-size:16px;line-height:1.5}
html body .cmac-feature-card-text p{margin:0 0 10px!important;font-size:inherit!important;line-height:inherit!important}
html body .cmac-feature-card-text p:last-child{margin-bottom:0!important}
html body .cmac-feature-card .cmac-feature-card-image{margin:auto 0 0!important;padding:16px 0 0!important}
.cmac-feature-card-image img{display:block;width:100%;height:auto;margin:0!important}
html body .cmac-feature-cards-top .cmac-feature-card-image{order:-1;margin:0 0 14px!important;padding:0!important}
html body .cmac-feature-cards-at-text .cmac-feature-card-image{margin:0!important}
@media (max-width:900px){html body .cmac-feature-cards-3 .cmac-feature-cards-list{grid-template-columns:1fr}}
@media (max-width:700px){.cmac-feature-cards-2 .cmac-feature-cards-list{grid-template-columns:1fr}}

/* Numbers on green are white. */
html body .cmac-step .cmac-step-number{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Route box: the same straight accent bar as Guide Reference. A thick border-left on a
   rounded box bends with the corner; a clipped bar inside the box does not. */
html body .cmac-route-box{border:1px solid rgba(97,170,242,.34)!important;border-radius:14px!important;padding-left:28px!important}
html body .cmac-route-box > .cmac-route-accent,
html body .cmac-route-box::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:#61aaf2;z-index:1}
@media (max-width:640px){html body .cmac-route-box{padding-left:22px!important}}
html body .cmac-route-box .cmac-route-label{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Even space above and below. */
html body .cmac-route-box{padding-top:18px!important;padding-bottom:20px!important}
html body .cmac-route-box > *:first-child,
html body .cmac-route-box .cmac-route-label{margin-top:0!important}
html body .cmac-route-box .cmac-route-label{margin-bottom:10px!important}
html body .cmac-route-box .cmac-route-path{margin-top:0!important;margin-bottom:0!important}
html body .cmac-route-box{padding-top:12px!important}

/* Author, as in Academy's own articles: blue name, blue glow on the photo, no rule above. */
html body .cmac-author{margin:50px 0 0!important;padding:30px 0!important;border:0!important}
html body .cmac-author .cmac-author-photo{box-shadow:0 0 12px rgba(24,90,188,.5)!important}
html body .cmac-author .cmac-author-name{margin:0;color:#185ABC!important;-webkit-text-fill-color:#185ABC!important;font-size:20px!important;font-weight:700!important;line-height:1.25}
html body .cmac-author .cmac-author-date,
html body .cmac-author .cmac-author-updated{margin:0;color:#555!important;-webkit-text-fill-color:#555!important;font-size:14px!important;line-height:1.45}
@media (max-width:480px){html body .cmac-author{flex-direction:row!important;align-items:center!important;gap:14px!important}}
html body .cmac-route-box .cmac-route-label{margin-top:-8px!important}

/* Guide Switcher options are buttons, and the theme paints buttons dark on hover and
   focus. Keep them white cards in every state. */
html body .cmac-guide-switcher .cmac-guide-option,
html body .cmac-guide-switcher .cmac-guide-option:hover,
html body .cmac-guide-switcher .cmac-guide-option:focus,
html body .cmac-guide-switcher .cmac-guide-option:active{background:#fff!important;color:var(--cmac-ink)!important;-webkit-text-fill-color:currentColor!important;text-decoration:none!important;outline:none}
html body .cmac-guide-switcher .cmac-guide-option:focus-visible{outline:2px solid #185ABC!important;outline-offset:3px}
html body .cmac-guide-switcher .cmac-guide-option strong{color:#12202E!important;-webkit-text-fill-color:#12202E!important;font-weight:700!important}
html body .cmac-guide-switcher .cmac-guide-option span{color:#677482!important;-webkit-text-fill-color:#677482!important;font-weight:400!important}

/* Headings inside a guide panel, at the size Academy's own guides use. */
html body .cmac-guide-panel h2.wp-block-heading{margin:44px 0 14px!important;font-size:30px!important;line-height:1.16!important;font-weight:700!important}
html body .cmac-guide-panel h3.wp-block-heading{margin:30px 0 10px!important;font-size:22px!important;line-height:1.22!important;font-weight:700!important}
html body .cmac-guide-panel > h2.wp-block-heading:first-child{margin-top:8px!important}
@media (max-width:700px){html body .cmac-guide-panel h2.wp-block-heading{font-size:25px!important}html body .cmac-guide-panel h3.wp-block-heading{font-size:20px!important}}

/* CM Contents, matched to the Contents box Academy builds by hand. */
html body .cmac-contents{padding:18px 23px!important;border:1px solid rgba(156,204,61,.58)!important;border-radius:12px!important;background:#FBFDF8!important}
html body .cmac-contents .cmac-contents-list{padding:0!important}
/* Three headings or fewer: the title sits to the left, on the same line as the items, so the box is one row high. */
html body .cmac-contents.cmac-contents-short{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;padding:16px 23px!important}
html body .cmac-contents.cmac-contents-short .cmac-contents-title{margin:0!important}
@media (max-width:700px){html body .cmac-contents.cmac-contents-short{display:block}html body .cmac-contents.cmac-contents-short .cmac-contents-title{margin:0 0 6px!important}}
html body .cmac-contents .cmac-contents-title{margin:0 0 6px!important;color:#1F354D!important;-webkit-text-fill-color:#1F354D!important;font-size:15px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase}
html body .cmac-contents .cmac-contents-list a,
html body .cmac-contents .cmac-contents-list a:link,
html body .cmac-contents .cmac-contents-list a:visited{color:#12202E!important;-webkit-text-fill-color:#12202E!important;font-size:16px!important;font-weight:600!important;line-height:1.25!important;text-decoration:none!important;background:transparent}
html body .cmac-contents .cmac-contents-list a:hover,
html body .cmac-contents .cmac-contents-list a:focus,
html body .cmac-contents .cmac-contents-list a:active{background:#F0F6E7!important;color:#185ABC!important;-webkit-text-fill-color:#185ABC!important;text-decoration:none!important}
html body .cmac-contents .cmac-contents-list a::before{background:#9CCC3D!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:13px!important;font-weight:800!important}
@media (max-width:900px){html body .cmac-contents .cmac-contents-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(var(--cmac-toc-rows-2,5),auto)!important;grid-auto-flow:column!important}}
@media (max-width:700px){html body .cmac-contents .cmac-contents-list{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-flow:row!important}}

/* Step: the body text starts at the left edge under the number, not indented under the title. */
html body .cmac-step .cmac-step-copy{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
html body .cmac-step .cmac-step-copy > div{display:contents}
html body .cmac-step .cmac-step-copy .cmac-step-title{grid-column:2}
html body .cmac-step .cmac-step-copy .cmac-step-content{grid-column:1 / -1;margin-top:8px}
html body .cmac-step .cmac-step-copy:not(:has(.cmac-step-number)){column-gap:0}

/* Two-digit step numbers: centre the digits in the circle and keep it round. */
html body .cmac-step .cmac-step-number{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:0!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1!important;box-sizing:border-box;width:36px!important;min-width:36px!important;height:36px!important;text-indent:0!important}
/* Tabular digits give "1" the width of "0", with the extra space on its left, so "10"
   sat off to the right. Proportional digits and no letter-spacing centre it. */
html body .cmac-step .cmac-step-number{font-variant-numeric:proportional-nums!important;font-feature-settings:"pnum" 1,"tnum" 0!important;letter-spacing:0!important;text-indent:0!important;padding:0!important}
html body .cmac-step .cmac-step-number::before,html body .cmac-step .cmac-step-number::after{content:none!important}
html body .cmac-step .cmac-step-number.cmac-step-number-wide{padding-right:3px!important}

/* Section numbers from CM Contents "sections": the same green circle as the Contents list. */
html body .cmac-section-heading{display:flex!important;align-items:center;gap:14px}
html body .cmac-section-heading .cmac-section-no{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:#9CCC3D;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:18px;font-weight:800;line-height:1;letter-spacing:0;font-variant-numeric:proportional-nums}
html body .cmac-section-heading .cmac-section-no-wide{padding-right:3px}
@media (max-width:700px){html body .cmac-section-heading{gap:11px}html body .cmac-section-heading .cmac-section-no{flex-basis:38px;width:38px;height:38px;font-size:16px}}