/* Public pages, organised like the homepage. Loaded last on every generated page (after public-illustration.css,
   before footer.css): centred section openings over card grids, one card language, the homepage's numbered FAQ,
   and the same proportional scaling on big desktop screens. Copy and markup are untouched. */

/* Section openings: kicker, heading and intro sit centred over a grid of cards, as on the homepage. A section whose
   body is running text (.mk-prose) or a reading split keeps a left-aligned opening, which reads better. */
.mk-public-editorial .pg-page .pg-section:not(.pg-reading-section):not(:has(>.mk-prose))>.pg-heading,
.mk-public-editorial .mk-section:not(.pg-reading-section):not(:has(>.mk-prose))>.mk-section-head{display:flex;flex-direction:column;align-items:center;max-width:780px;margin-inline:auto;text-align:center}
.mk-public-editorial .pg-page .pg-section:not(.pg-reading-section):not(:has(>.mk-prose))>.pg-heading p,
.mk-public-editorial .mk-section:not(.pg-reading-section):not(:has(>.mk-prose))>.mk-section-head p{max-width:620px;margin-inline:auto}
.mk-public-editorial .mk-section-head h2,.mk-public-editorial .pg-page .pg-heading h2{text-wrap:balance}
.mk-public-editorial .mk-section-head p,.mk-public-editorial .pg-page .pg-heading p{text-wrap:pretty}

/* One card language: soft paper cards with the homepage's 3px "shelf" shadow and a gentle lift on hover. */
.mk-public-editorial :is(.mk-cards>.mk-card,.pg-boundary-grid>*,.pg-related-grid>article>a,.pg-steps>li){box-shadow:0 3px 0 #e6ece1;transition:transform .25s,box-shadow .25s,border-color .25s}
.mk-public-editorial :is(.pg-related-grid>article>a,.mk-cards>.mk-card:has(a.mk-card-link)):hover{transform:translateY(-2px);box-shadow:0 6px 0 #dfe7d9}
.mk-public-editorial .pg-feature-grid .pg-feature-card{box-shadow:0 4px 0 rgba(41,77,80,.12)}
/* A lone last card in a two-column grid sits centred at a normal width instead of stretching across the row. */
@media(min-width:861px){
  .mk-public-editorial :is(.pg-card-grid.pg-card-count-3,.pg-card-grid.pg-card-count-5,.pg-card-grid.pg-card-count-7)>.mk-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,calc(50% - 12px))}
}

/* FAQ groups: the homepage's two-column layout — heading on the left, numbered paper cards on the right. An open
   card takes the page's pastel colours in turn (mint, lavender, peach). */
.mk-public-editorial .mk-faq-group{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:22px clamp(40px,5vw,80px);align-items:start}
.mk-public-editorial .mk-faq-group>h2{position:sticky;top:110px;margin:0;font-size:clamp(30px,2.9vw,40px);line-height:1.2;letter-spacing:-.045em;text-wrap:balance}
.mk-public-editorial .mk-faq-group>:not(h2){grid-column:2}
.mk-public-editorial .mk-faq-page+.mk-faq-page,.mk-public-editorial .mk-faq-page{gap:clamp(48px,6vw,88px)}
.mk-public-editorial .mk-faq-list{display:grid;gap:12px;align-content:start;border-top:0;counter-reset:faq}
.mk-public-editorial .mk-faq-list details{--faq-open:#eaf5e6;--faq-edge:#bcd6b2;--faq-dot:#2f5d55;counter-increment:faq;position:relative;border:1px solid #dde5da;border-radius:18px;background:#fffefb;padding:0 22px 0 76px;box-shadow:0 3px 0 #e9eee4;transition:background-color .25s,border-color .25s,box-shadow .25s,transform .25s}
.mk-public-editorial .mk-faq-list details:nth-child(3n+2){--faq-open:#f1ebfb;--faq-edge:#cdbde6;--faq-dot:#4f3f86}
.mk-public-editorial .mk-faq-list details:nth-child(3n){--faq-open:#fff0de;--faq-edge:#e8c597;--faq-dot:#8a5317}
.mk-public-editorial .mk-faq-list details::before{content:counter(faq,decimal-leading-zero);position:absolute;left:22px;top:19px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f0f4ee;color:#3f6660;font:650 12px/1 var(--display);letter-spacing:.02em;transition:background-color .25s,color .25s}
.mk-public-editorial .mk-faq-list details:hover{border-color:#c5d3c0;transform:translateY(-1px);box-shadow:0 5px 0 #e3eadd}
.mk-public-editorial .mk-faq-list details[open]{background:var(--faq-open);border-color:var(--faq-edge);box-shadow:0 4px 0 color-mix(in srgb,var(--faq-edge) 45%,transparent);transform:none}
.mk-public-editorial .mk-faq-list details[open]::before{background:var(--faq-dot);color:#fffef6}
.mk-public-editorial .mk-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px;padding-block:18px;font-size:15.5px;font-weight:600;line-height:1.45;letter-spacing:-.012em;color:#1d3c3e;cursor:pointer;list-style:none}
.mk-public-editorial .mk-faq-list summary::-webkit-details-marker{display:none}
.mk-public-editorial .mk-faq-list summary svg{display:none}
/* The round +/× control is drawn in CSS, so it works whether or not the summary carries its own icon. */
.mk-public-editorial .mk-faq-list details>summary::after,.mk-public-editorial .mk-faq-list details[open]>summary::after{content:"";flex:none;width:32px;height:32px;border:1px solid #d6dfd3;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat,#fff;color:#2f5552;transition:transform .3s,background-color .25s,border-color .25s,color .25s}
.mk-public-editorial .mk-faq-list details:hover>summary::after{border-color:#a9bfa6}
.mk-public-editorial .mk-faq-list details[open]>summary::after{transform:rotate(45deg);background-color:var(--faq-dot);border-color:var(--faq-dot);color:#fff}
.mk-public-editorial .mk-faq-list details>:not(summary){max-width:62ch;margin:0;padding:0 50px 0 0;font-size:14px;line-height:1.8;color:#4f6662}
.mk-public-editorial .mk-faq-list details>:not(summary):last-child{padding-bottom:24px}
.mk-public-editorial .mk-faq-list details :is(ul,ol){padding-left:20px}
.mk-public-editorial .mk-faq-list a{color:#2f5d63;text-underline-offset:3px}
@supports(interpolate-size:allow-keywords){
  .mk-public-editorial .mk-faq-list{interpolate-size:allow-keywords}
  .mk-public-editorial .mk-faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .32s ease,content-visibility .32s allow-discrete}
  .mk-public-editorial .mk-faq-list details[open]::details-content{block-size:auto}
}

@media(max-width:900px){
  .mk-public-editorial .mk-faq-group{grid-template-columns:minmax(0,1fr)}
  .mk-public-editorial .mk-faq-group>h2{position:static}
  .mk-public-editorial .mk-faq-group>:not(h2){grid-column:1}
}
@media(max-width:600px){
  .mk-public-editorial .mk-faq-list{gap:10px}
  .mk-public-editorial .mk-faq-list details{padding:0 14px 0 60px;border-radius:16px}
  .mk-public-editorial .mk-faq-list details::before{left:14px;top:17px;width:32px;height:32px;font-size:11px}
  .mk-public-editorial .mk-faq-list summary{min-height:66px;gap:12px;font-size:14.5px}
  .mk-public-editorial .mk-faq-list details>summary::after,.mk-public-editorial .mk-faq-list details[open]>summary::after{width:30px;height:30px}
  .mk-public-editorial .mk-faq-list details>:not(summary){padding-right:4px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .mk-public-editorial :is(.mk-cards>.mk-card,.pg-related-grid>article>a,.mk-faq-list details,.mk-faq-list details::before,.mk-faq-list summary::after),.mk-public-editorial .mk-faq-list details::details-content{transition:none}
  .mk-public-editorial :is(.pg-related-grid>article>a,.mk-cards>.mk-card,.mk-faq-list details):hover{transform:none}
}

/* Big desktop screens: the same proportional scaling as the homepage, so wide monitors show the laptop
   composition larger instead of a narrow column with empty margins. */
@media(min-width:1680px){.mk-landing.mk-public-editorial{zoom:1.1}}
@media(min-width:1860px){.mk-landing.mk-public-editorial{zoom:1.2}}
@media(min-width:2100px){.mk-landing.mk-public-editorial{zoom:1.35}}
@media(min-width:2400px){.mk-landing.mk-public-editorial{zoom:1.55}}
@media(min-width:3000px){.mk-landing.mk-public-editorial{zoom:1.85}}

/* Closing call to action: the button and its note line up under the heading, as in the homepage's final card. */
.mk-public-editorial .mk-final .mk-final-cta{justify-items:start;text-align:left}