/* ==========================================================================
   Public site stylesheet. Hand written, a single file, no framework.
   Order: font faces, variables, base, primitives, components, CMS Kit content,
   CMS Kit markup compatibility, focus and reduced motion.
   Layout notes: hero, page header, call-to-action band, error, sent and empty
   blocks size themselves; sections, method, about and contact are the padded
   containers; post lists, pagination and service lists fill their container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font faces
   -------------------------------------------------------------------------- */

/* Latin subset of Unbounded 600 (Fontsource 5.3.0). Same path as the preload link. */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/unbounded/unbounded-latin-600-normal-5.3.0.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Latin subset of Onest, variable weight (Fontsource 5.3.1). */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/onest/onest-latin-wght-normal-5.3.1.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Metric-adjusted fallbacks so the swap to the web fonts does not move the text.
   Computed against Arial (unitsPerEm 2048, xWidthAvg 913) with capsize unpack 4.0.1 and metrics 4.4.0:
   Unbounded 600 unitsPerEm 1000, ascent 995, descent -245, lineGap 0, xWidthAvg 625;
   Onest unitsPerEm 1000, ascent 970, descent -305, lineGap 0, xWidthAvg 469. */
@font-face {
  font-family: "Unbounded Fallback";
  font-weight: 600;
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 140.20%;
  ascent-override: 70.97%;
  descent-override: 17.48%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 105.20%;
  ascent-override: 92.20%;
  descent-override: 28.99%;
  line-gap-override: 0.00%;
}

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

:root {
  --md-violet: #6B2DB3;
  --md-violet-dark: #4A3575;
  --md-ink: #1E1630;
  --md-text: #333333;
  --md-text-muted: #5C5C66;
  --md-nav-text: #4A4458;
  --md-lavender: #EFE8FA;
  --md-lavender-mid: #DCD0F2;
  --md-lavender-light: #F6F3FA;
  --md-border: #E4DEEE;
  --md-border-strong: #CFC2E8;
  --md-empty-border: #D8CDEB;
  --md-disabled: #A39BB3;
  --md-star-fill: #FEBE10;
  --md-star-stroke: #D99E00;
  --md-star-empty-fill: #FFFFFF;
  --md-star-empty-stroke: #C9BCE3;
  --md-backdrop: rgba(30, 22, 48, 0.55);
  --md-spec-separator: #EEE9F5;
  --md-deep: #2A1D47;
  --md-on-deep-link: #C9BCE3;
  --md-on-deep-muted: #A99BC7;
  --md-on-violet: #E9E1F7;
  --md-saffron: #FEBE10;
  --md-accent-gradient: linear-gradient(90deg, #EE324E, #FEBE10);
  --md-approved-text: #1F7A4D;
  --md-approved-bg: #E7F3EC;
  --md-error-text: #B0203A;
  --md-error-border: #C0223B;
  --md-alert-bg: #FBEAED;
  --md-alert-border: #F2C4CC;
  --md-alert-text: #8E1A2E;
  --md-radius-pill: 999px;
  --md-radius-block: clamp(24px, 3vw, 40px);
  --md-radius-container: 32px;
  --md-radius-step: 28px;
  --md-radius-spec: 24px;
  --md-radius-field: 16px;
  --md-touch: 44px;
  --md-touch-footer: 32px;
  --md-font-heading: "Unbounded", "Unbounded Fallback", sans-serif;
  --md-font-text: "Onest", "Onest Fallback", sans-serif;
  --md-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --md-focus: #4A3575;
  --md-gutter: clamp(20px, 3vw, 40px);
  --md-gutter-blocks: clamp(12px, 2vw, 24px);
  --md-section-gap: clamp(28px, 3vw, 44px);
  --md-card-gap: clamp(16px, 1.4vw, 20px);
  --md-col: min(760px, 100% - 2 * clamp(8px, 1vw, 16px));
  --md-block-width: min(100% - 2 * var(--md-gutter-blocks), 1392px - 2 * var(--md-gutter-blocks));
  --md-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}

/* Focus ring colour per background: saffron on dark and violet blocks, ink on the saffron band. */
.md-hero__main, .md-step--3, .md-step--4, .md-about__mission, .md-contact__aside, .md-footer { --md-focus: #FEBE10; }
.md-cta { --md-focus: #1E1630; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--md-font-text); font-size: 17px; line-height: 1.6; color: var(--md-text); background: #FFFFFF; -webkit-font-smoothing: antialiased; }
main { display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--md-font-heading); font-weight: 600; color: var(--md-ink); }
h1, h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }
a { color: var(--md-violet); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
img { height: auto; }

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.md-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.md-icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* --------------------------------------------------------------------------
   Components: header and navigation
   -------------------------------------------------------------------------- */

.md-header__inner { max-width: 1392px; margin: 0 auto; padding: 18px var(--md-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.md-header__brand { display: flex; flex: 0 0 auto; }
.md-header__logo { display: block; width: clamp(220px, 21vw, 300px); height: auto; }
.md-nav { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow-x: auto; }
.md-nav__link { display: inline-flex; align-items: center; min-height: var(--md-touch); padding: 0 clamp(7px, 1.1vw, 16px); border-radius: var(--md-radius-pill); color: var(--md-nav-text); font-size: clamp(14px, 1.05vw, 15px); font-weight: 500; text-decoration: none; white-space: nowrap; }
.md-nav__link:hover { background: var(--md-lavender-light); }
.md-nav__link[aria-current="page"] { background: var(--md-lavender); color: var(--md-ink); font-weight: 600; }
.md-nav__link--action { margin-inline-start: clamp(2px, 0.5vw, 6px); padding-inline: clamp(14px, 1.4vw, 20px); background: var(--md-violet); color: #FFFFFF; font-weight: 600; }
.md-nav__link--action:hover { background: var(--md-violet-dark); }
.md-nav__link--action[aria-current="page"] { background: var(--md-violet-dark); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Components: buttons and arrow links
   -------------------------------------------------------------------------- */

.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 2px solid transparent; border-radius: var(--md-radius-pill); background: none; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.md-btn--accent, .md-btn--dark, .md-btn--outline-light { min-height: 56px; }
.md-btn--accent { padding-inline: 30px; background: var(--md-saffron); color: var(--md-ink); }
.md-btn--accent:hover { filter: brightness(1.06); }
.md-btn--primary { background: var(--md-violet); color: #FFFFFF; }
.md-btn--primary:hover { background: var(--md-violet-dark); }
.md-btn--dark { padding-inline: 32px; background: var(--md-ink); color: #FFFFFF; }
.md-btn--dark:hover { background: var(--md-deep); }
.md-btn--outline, .md-btn--outline-strong { min-height: 48px; padding-inline: 24px; border-color: var(--md-border); color: var(--md-ink); font-size: 15px; font-weight: 600; }
.md-btn--outline:hover, .md-btn--outline-strong:hover { background: var(--md-lavender-light); }
.md-btn--outline-strong { min-height: 52px; border-color: var(--md-border-strong); background: #FFFFFF; font-size: 16px; }
.md-btn--outline-light { padding-inline: 30px; border-color: rgba(255, 255, 255, 0.7); color: #FFFFFF; font-weight: 600; }
.md-btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); }
.md-btn--arrow { padding-inline: 22px; }
.md-btn--arrow .md-icon { color: var(--md-violet); }
.md-btn--sm { min-height: 40px; padding-inline: 14px; font-size: 14px; }
.md-link-arrow { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: var(--md-touch); color: var(--md-violet); font-size: 16px; font-weight: 600; text-decoration: none; }
.md-link-arrow:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Components: hero and specification card
   -------------------------------------------------------------------------- */

.md-hero { max-width: 1392px; margin: 0 auto; padding: 8px var(--md-gutter-blocks) 0; display: flex; flex-wrap: wrap; gap: clamp(12px, 1.2vw, 16px); }
.md-hero__main { flex: 2 1 560px; min-width: 0; min-height: 540px; padding: clamp(32px, 5vw, 72px); border-radius: var(--md-radius-block); background: var(--md-violet); display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; }
.md-hero__title { max-width: 14ch; font-size: clamp(32px, 4.6vw, 72px); line-height: 1.06; color: #FFFFFF; text-wrap: balance; }
.md-hero__text { margin: 0; max-width: 34em; font-size: clamp(17px, 1.35vw, 19px); color: var(--md-on-violet); text-wrap: pretty; }
.md-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.md-hero__aside { flex: 1 1 420px; min-width: 0; padding: clamp(16px, 2.8vw, 40px); border-radius: var(--md-radius-block); background: var(--md-lavender); display: flex; align-items: center; justify-content: center; }
.md-spec { margin: 0; width: 100%; max-width: 480px; }
.md-spec__card { padding: clamp(22px, 2.4vw, 32px); border-radius: var(--md-radius-spec); background: #FFFFFF; box-shadow: 0 24px 48px -28px rgba(42, 29, 71, 0.35); display: flex; flex-direction: column; gap: 22px; }
.md-spec__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.md-spec__heading { display: flex; flex-direction: column; gap: 8px; }
.md-spec__file { font-family: var(--md-font-mono); font-size: 13px; color: var(--md-text-muted); }
.md-spec__title { font-family: var(--md-font-heading); font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--md-ink); }
.md-spec__status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: var(--md-radius-pill); background: var(--md-approved-bg); color: var(--md-approved-text); font-size: 14px; font-weight: 600; }
.md-spec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.md-spec__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--md-spec-separator); }
.md-spec__label { display: flex; align-items: center; gap: 12px; color: var(--md-ink); font-size: 16px; font-weight: 500; }
.md-spec__label .md-icon { color: var(--md-violet); }
.md-spec__value { font-family: var(--md-font-mono); font-size: 14px; color: var(--md-text-muted); }
.md-spec__value--next { color: var(--md-violet); font-weight: 500; }
.md-spec__progress { display: flex; flex-direction: column; gap: 10px; }
.md-spec__bar { height: 8px; border-radius: 4px; background: var(--md-spec-separator); overflow: hidden; }
.md-spec__bar-fill { width: 75%; height: 8px; border-radius: 4px; background: var(--md-accent-gradient); }
.md-spec__progress-text { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--md-text-muted); }

/* --------------------------------------------------------------------------
   Components: sections, services, method and contact band
   -------------------------------------------------------------------------- */

.md-section { max-width: 1392px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--md-gutter); display: flex; flex-direction: column; gap: var(--md-section-gap); }
.md-hero + .md-section { padding-top: clamp(64px, 8vw, 120px); }
.md-page-header + .md-section { padding-block: clamp(48px, 6vw, 96px) clamp(64px, 8vw, 112px); }
.md-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.md-heading { max-width: 16ch; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; text-wrap: balance; }
.md-heading--page { max-width: none; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.05; }

.md-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 2px; border: 2px solid var(--md-border); border-radius: var(--md-radius-container); background: var(--md-border); overflow: hidden; }
.md-services--detail { grid-template-columns: 1fr; }
.md-service { padding: clamp(28px, 3.4vw, 48px); background: #FFFFFF; display: flex; flex-direction: column; gap: 16px; }
.md-services--detail .md-service { padding: clamp(28px, 4vw, 56px); gap: 20px; }
.md-service__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--md-lavender); color: var(--md-violet); display: flex; align-items: center; justify-content: center; }
.md-services--detail .md-service__icon { width: 56px; height: 56px; }
.md-service__title { margin-top: 8px; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; }
.md-services--detail .md-service__title { margin-top: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
.md-service__text { margin: 0; max-width: 34em; color: var(--md-text-muted); text-wrap: pretty; }
.md-services--detail .md-service__text { max-width: none; font-size: 18px; line-height: 1.7; color: var(--md-text); }
@media (min-width: 800px) {
  .md-services--detail .md-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: clamp(28px, 5vw, 80px); row-gap: 20px; align-content: start; }
  .md-services--detail .md-service__icon, .md-services--detail .md-service__title { grid-column: 1; }
  .md-services--detail .md-service__text { grid-column: 2; grid-row: 1 / span 2; }
}

.md-method { max-width: 1392px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--md-gutter) clamp(64px, 8vw, 120px); display: flex; flex-direction: column; gap: var(--md-section-gap); }
.md-method__intro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px clamp(28px, 5vw, 80px); }
.md-method__intro > .md-heading { flex: 1 1 380px; min-width: 0; }
.md-method__intro > :not(.md-heading) { flex: 1.3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.md-method__intro p { margin: 0; text-wrap: pretty; }
.md-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(12px, 1.2vw, 16px); }
.md-step { min-height: 280px; padding: 32px; border-radius: var(--md-radius-step); display: flex; flex-direction: column; gap: 10px; }
.md-step__number { margin-bottom: 30px; font-family: var(--md-font-heading); font-size: 56px; line-height: 1; font-weight: 600; }
.md-step__title { font-size: 21px; line-height: 1.2; }
.md-step__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--md-text); }
.md-step--1 { background: var(--md-lavender); }
.md-step--1 .md-step__number { color: var(--md-violet); }
.md-step--2 { background: var(--md-lavender-mid); }
.md-step--2 .md-step__number { color: var(--md-violet-dark); }
.md-step--3 { background: var(--md-violet); }
.md-step--3 .md-step__number, .md-step--3 .md-step__title, .md-step--4 .md-step__title { color: #FFFFFF; }
.md-step--3 .md-step__text { color: var(--md-on-violet); }
.md-step--4 { background: var(--md-deep); }
.md-step--4 .md-step__number { color: var(--md-saffron); }
.md-step--4 .md-step__text { color: var(--md-on-deep-link); }

.md-cta { width: var(--md-block-width); margin: 0 auto clamp(48px, 6vw, 88px); padding: clamp(36px, 6vw, 88px); border-radius: var(--md-radius-block); background: var(--md-saffron); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.md-cta__body { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.md-cta__title { max-width: 16ch; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; text-wrap: balance; }
.md-cta__text { margin: 0; max-width: 32em; font-size: 18px; color: var(--md-deep); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Components: page header, about, blog
   -------------------------------------------------------------------------- */

.md-page-header { width: var(--md-block-width); margin: 8px auto 0; padding: clamp(36px, 5.5vw, 80px) clamp(24px, 5vw, 72px); border-radius: var(--md-radius-block); background: var(--md-lavender); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px clamp(28px, 5vw, 80px); }
.md-page-header__title { flex: 1 1 320px; min-width: 0; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.05; }
.md-page-header__intro { flex: 1.4 1 420px; min-width: 0; margin: 0; font-size: clamp(17px, 1.4vw, 20px); text-wrap: pretty; }
.md-blog-filter { flex: 1 1 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: var(--md-nav-text); }

.md-about { max-width: 1392px; margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--md-gutter); display: flex; flex-wrap: wrap; gap: clamp(12px, 1.2vw, 16px); }
.md-about__mission, .md-about__approach { min-width: 0; padding: clamp(28px, 4vw, 56px); border-radius: var(--md-radius-container); display: flex; flex-direction: column; gap: 20px; }
.md-about__mission { flex: 1 1 360px; background: var(--md-violet); }
.md-about__approach { flex: 1.5 1 520px; border: 2px solid var(--md-border); background: #FFFFFF; }
.md-about h2 { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.md-about__mission h2 { color: #FFFFFF; }
.md-about p { margin: 0; text-wrap: pretty; }
.md-about__mission p { margin-bottom: 24px; font-size: clamp(18px, 1.45vw, 21px); color: var(--md-on-violet); }
.md-about__approach p { font-size: 18px; line-height: 1.7; }
.md-about__isotype { display: block; margin-top: auto; width: min(180px, 50%); height: auto; }

/* auto-fill keeps the empty columns, so one or two cards keep the width of a column instead of filling the row. */
.md-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--md-card-gap); }
.md-posts > li { display: flex; }
.md-post-card { width: 100%; display: flex; flex-direction: column; border: 2px solid var(--md-border); border-radius: var(--md-radius-step); background: #FFFFFF; overflow: hidden; }
.md-post-card__cover, .md-post-card__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--md-lavender); }
.md-post-card__body { flex: 1 1 auto; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.md-post-card__date { margin: 0; font-size: 14px; color: var(--md-text-muted); }
.md-post-card__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; }
.md-post-card__title a { color: inherit; text-decoration: none; }
.md-post-card__title a:hover { text-decoration: underline; }
.md-post-card__summary { margin: 0; color: var(--md-text-muted); }
.md-post-card__body .md-link-arrow { margin-top: auto; }
.md-post-card--featured { flex-direction: row; flex-wrap: wrap; border-radius: var(--md-radius-container); }
.md-post-card--featured .md-post-card__cover { flex: 1.25 1 440px; min-width: 0; width: auto; align-self: stretch; }
.md-post-card--featured .md-post-card__body { flex: 1 1 360px; min-width: 0; padding: clamp(28px, 4vw, 56px); justify-content: center; gap: 16px; }
.md-post-card--featured .md-post-card__title { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; }
.md-post-card--featured .md-post-card__summary { font-size: 17px; }
.md-post-card--featured + .md-posts { margin-top: calc(var(--md-card-gap) - var(--md-section-gap)); }

.md-empty { width: min(640px, 100% - 2 * var(--md-gutter)); margin: clamp(48px, 6vw, 96px) auto clamp(64px, 8vw, 120px); padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px); border: 2px dashed var(--md-empty-border); border-radius: var(--md-radius-container); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.md-section > .md-empty { width: min(640px, 100%); margin-block: 0; }
.md-empty p { margin: 0; font-family: var(--md-font-heading); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; color: var(--md-ink); }
.md-empty__isotype { display: block; width: 120px; height: auto; }

.md-pagination, .md-pagination__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.md-pagination { margin-top: clamp(16px, 2vw, 28px); }
.md-pagination__list { list-style: none; margin: 0; padding: 0; }
.md-pagination__link, .md-pagination__control { min-width: 48px; height: 48px; padding: 0 8px; border: 2px solid var(--md-border); border-radius: var(--md-radius-pill); display: flex; align-items: center; justify-content: center; color: var(--md-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.md-pagination__link:hover, a.md-pagination__control:hover { background: var(--md-lavender-light); }
.md-pagination__link[aria-current="page"] { border-color: var(--md-violet); background: var(--md-violet); color: #FFFFFF; font-weight: 700; }
.md-pagination__control { color: var(--md-violet); }
.md-pagination__control--disabled { color: var(--md-disabled); }

/* --------------------------------------------------------------------------
   Components: contact form, sent and error pages
   -------------------------------------------------------------------------- */

.md-contact { max-width: 1392px; margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--md-gutter) clamp(64px, 8vw, 112px); display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(12px, 1.2vw, 16px); }
.md-form { flex: 1.7 1 540px; min-width: 0; margin: 0; padding: clamp(24px, 4vw, 56px); border: 2px solid var(--md-border); border-radius: var(--md-radius-container); background: #FFFFFF; display: flex; flex-direction: column; gap: 24px; }
.md-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.md-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.md-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.md-field__label { font-size: 15px; font-weight: 600; color: var(--md-ink); }
.md-field__input { width: 100%; height: 54px; padding: 0 18px; border: 2px solid var(--md-border); border-radius: var(--md-radius-field); background: #FFFFFF; font: inherit; font-size: 16px; color: var(--md-ink); }
textarea.md-field__input { height: auto; min-height: 176px; padding: 14px 18px; line-height: 1.5; resize: vertical; }
.md-field__input:focus { border-color: var(--md-violet); }
.md-field__input[aria-invalid="true"] { border-color: var(--md-error-border); }
.md-field__help { margin: 0; font-size: 14px; color: var(--md-text-muted); }
.md-field__error { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--md-error-text); }
.md-field__error:empty { display: none; }
.md-field__error::before { content: ""; width: 16px; height: 16px; margin-top: 2px; color: var(--md-error-border); --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.md-form__consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
.md-form__consent > :not(input) { grid-column: 2; }
.md-form__consent > input { grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin: 11px 0 0; accent-color: var(--md-violet); }
.md-form__consent > input[aria-invalid="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--md-error-border); }
.md-form__consent > label { min-height: var(--md-touch); padding-block: 11px; font-size: 15px; line-height: 1.5; color: var(--md-text); }
.md-form__consent a { font-weight: 600; }
.md-form .md-btn { align-self: flex-start; min-height: 56px; padding-inline: 32px; }
.md-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--md-radius-field); font-size: 15px; line-height: 1.55; }
.md-alert[hidden] { display: none; }
.md-alert .md-icon { margin-top: 1px; color: var(--md-error-border); }
.md-alert p { margin: 0; }
.md-alert--error { border: 2px solid var(--md-alert-border); background: var(--md-alert-bg); color: var(--md-alert-text); }
.md-contact__aside { flex: 1 1 300px; min-width: 0; align-self: flex-start; padding: clamp(28px, 4vw, 48px); border-radius: var(--md-radius-container); background: var(--md-violet); display: flex; flex-direction: column; gap: 10px; }
.md-contact__aside p { margin: 0; font-size: 15px; color: var(--md-on-violet); }
.md-contact__aside a { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; color: #FFFFFF; text-decoration: none; overflow-wrap: anywhere; }
.md-contact__isotype { display: block; margin-top: 32px; width: min(160px, 50%); height: auto; }

.md-sent { width: min(640px, 100% - 2 * var(--md-gutter)); margin: clamp(48px, 6vw, 96px) auto clamp(64px, 8vw, 120px); padding: clamp(32px, 5vw, 56px); border: 2px solid var(--md-border); border-radius: var(--md-radius-container); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.md-sent__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--md-approved-bg); color: var(--md-approved-text); display: flex; align-items: center; justify-content: center; }
.md-sent p { margin: 0; font-family: var(--md-font-heading); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--md-ink); text-wrap: balance; }

.md-error { width: var(--md-block-width); margin: 8px auto clamp(64px, 8vw, 112px); padding: clamp(48px, 7vw, 104px) clamp(24px, 5vw, 72px); border-radius: var(--md-radius-block); background: var(--md-lavender); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.md-error__code { margin: 0; font-family: var(--md-font-heading); font-size: clamp(88px, 14vw, 200px); line-height: 0.9; font-weight: 600; letter-spacing: -0.05em; color: var(--md-violet); }
.md-error__icon { width: clamp(88px, 10vw, 128px); height: clamp(88px, 10vw, 128px); border-radius: 50%; background: var(--md-violet); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.md-error__title { font-size: clamp(26px, 3vw, 42px); line-height: 1.1; }
.md-error > p:not(.md-error__code) { margin: 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 19px); }
.md-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 6px; }

/* --------------------------------------------------------------------------
   Components: footer
   -------------------------------------------------------------------------- */

.md-footer { background: var(--md-deep); }
.md-footer__inner { max-width: 1392px; margin: 0 auto; padding: clamp(48px, 5vw, 72px) var(--md-gutter) 28px; display: flex; flex-direction: column; gap: 40px; }
.md-footer__top { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.md-footer__brand { flex: 2 1 280px; min-width: 0; }
.md-footer__logo { display: block; width: clamp(200px, 18vw, 260px); height: auto; }
.md-footer__column { flex: 1 1 160px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.md-footer__title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #FFFFFF; }
.md-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.md-footer__links > li { display: flex; }
.md-footer__links > li[hidden] { display: none; }
.md-footer__link, .md-footer__link-button { display: inline-flex; align-items: center; min-height: var(--md-touch-footer); color: var(--md-on-deep-link); font-size: 15px; text-decoration: none; }
.md-footer__link:hover, .md-footer__link-button:hover { text-decoration: underline; }
.md-footer__link[aria-current="page"] { color: #FFFFFF; font-weight: 600; }
.md-footer__link-button { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; cursor: pointer; }
.md-footer__bottom { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--md-on-deep-muted); }
.md-footer__login { font-size: 14px; color: var(--md-on-deep-muted); }
.md-footer__account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.md-footer__user { display: inline-flex; align-items: center; gap: 10px; min-height: var(--md-touch-footer); color: #FFFFFF; font-weight: 600; }
.md-footer__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--md-violet-dark); color: var(--md-on-violet); display: inline-flex; align-items: center; justify-content: center; }
.md-footer__account-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }

/* --------------------------------------------------------------------------
   Components: cookie notice and panel
   -------------------------------------------------------------------------- */

.md-consent__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.md-consent__banner { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; max-height: 60vh; overflow-y: auto; padding: 0 var(--md-gutter-blocks) var(--md-gutter-blocks); }
.md-consent__banner[hidden] { display: none; }
.md-consent__inner { max-width: 1344px; margin: 0 auto; padding: clamp(20px, 2.4vw, 32px); border: 2px solid var(--md-border); border-radius: var(--md-radius-step); background: #FFFFFF; box-shadow: 0 24px 60px -24px rgba(30, 22, 48, 0.35); }
[data-md-consent-prompt] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 8px; align-items: center; }
[data-md-consent-prompt][hidden] { display: none; }
[data-md-consent-prompt] .md-consent__actions { grid-column: 2; grid-row: 1 / span 2; }
.md-consent__title { margin: 0; font-family: var(--md-font-heading); font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--md-ink); }
.md-consent__text { margin: 0; font-size: 14.5px; line-height: 1.55; }
.md-consent__text a, .md-consent__panel > p a { font-weight: 600; }
.md-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.md-consent .md-btn { min-height: 48px; padding-inline: 24px; font-size: 15px; }
.md-consent__confirmation { display: block; margin: 0; font-size: 15px; font-weight: 600; color: var(--md-ink); }
.md-consent__confirmation[hidden] { display: none; }
@media (max-width: 720px) {
  [data-md-consent-prompt] { grid-template-columns: minmax(0, 1fr); }
  [data-md-consent-prompt] .md-consent__actions { grid-column: 1; grid-row: auto; }
}
body.md-consent-pending { padding-bottom: var(--md-consent-banner-height, 0px); }
body:has(#md-consent-banner:not([hidden])) { padding-bottom: var(--md-consent-banner-height, 16rem); }
/* Google may position the reCAPTCHA badge with an inline style, hence !important. */
body.md-consent-pending .grecaptcha-badge { bottom: calc(var(--md-consent-banner-height, 0px) + 1rem) !important; }

.md-consent__panel { width: min(640px, 100vw - 24px); max-height: calc(100dvh - 32px); padding: clamp(24px, 3vw, 36px); border: 0; border-radius: clamp(24px, 3vw, 32px); background: #FFFFFF; color: var(--md-text); box-shadow: 0 40px 80px -30px rgba(30, 22, 48, 0.5); overflow-y: auto; }
.md-consent__panel[open] { display: flex; flex-direction: column; gap: 18px; }
.md-consent__panel::backdrop { background: var(--md-backdrop); }
.md-consent__panel > p { margin: 0; font-size: 15.5px; }
.md-consent__panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.md-consent__panel-title { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.02em; }
.md-consent__close { flex: 0 0 auto; width: var(--md-touch); height: var(--md-touch); padding: 0; border: 0; border-radius: 50%; background: var(--md-lavender); color: var(--md-violet-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.md-consent__category { padding: 20px 22px; border: 2px solid var(--md-border); border-radius: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.md-consent__category > p, .md-consent__category > div { flex: 1 1 100%; margin: 0; font-size: 15px; color: var(--md-nav-text); }
.md-consent__category-title { margin: 0; font-family: var(--md-font-text); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.md-consent__badge { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: var(--md-radius-pill); background: var(--md-approved-bg); color: var(--md-approved-text); font-size: 13.5px; font-weight: 600; }
.md-consent__badge .md-icon { width: 14px; height: 14px; }
.md-consent__category > #md-consent-analytics-state { font-weight: 600; color: var(--md-ink); }

/* --------------------------------------------------------------------------
   CMS Kit content: blog entry and pages by slug
   -------------------------------------------------------------------------- */

.md-main--cms { max-width: 1392px; margin: 0 auto; padding: 8px var(--md-gutter-blocks) clamp(64px, 8vw, 112px); }
.md-main--cms .row, .md-main--cms [class*="col-"] { display: block; margin: 0; padding: 0; width: auto; max-width: none; }
.md-main--cms .card { margin: 0; padding: 0; border: 0; background: none; }
.md-main--cms .card-body { padding: 0; }

/* Entry: the card becomes a flex column so the header block, cover and text can be ordered without touching the DOM. */
.md-main--blog-post .card { display: flex; flex-direction: column; }
.md-main--blog-post .card-body,
.md-main--blog-post .card-body > .row:first-child,
.md-main--blog-post .card-body > .row:first-child > [class*="col-"] { display: contents; }
.md-main--blog-post :where(.card-body > .row:first-child > [class*="col-"] > *) { order: 4; width: var(--md-col); margin-inline: auto; margin-block-end: 22px; }
.md-main--blog-post .card-body > .row:first-child > [class*="col-"] > p.mb-lg-5 { order: 1; width: auto; margin: 0; padding: clamp(36px, 5.5vw, 80px) clamp(24px, 5vw, 72px) 0; border-radius: var(--md-radius-block) var(--md-radius-block) 0 0; background: var(--md-lavender); font-size: 15px; line-height: 1.6; color: var(--md-nav-text); }
.md-main--blog-post .card-body > .row:first-child > [class*="col-"] > h1:first-child { order: 2; width: auto; margin: 0 0 clamp(24px, 3vw, 40px); padding: 20px clamp(24px, 5vw, 72px) clamp(36px, 5.5vw, 80px); border-radius: 0 0 var(--md-radius-block) var(--md-radius-block); background: var(--md-lavender); font-size: clamp(34px, 4.6vw, 68px); line-height: 1.05; text-wrap: balance; }
.md-main--blog-post p.mb-lg-5 .fw-bold { font-weight: 700; color: var(--md-ink); }
.md-main--blog-post p.mb-lg-5 small { margin-inline-start: 12px; font-size: 15px; color: var(--md-nav-text); }
.md-main--blog-post img.card-img-ratio { order: 3; display: block; width: min(1100px, 100% - 2 * clamp(8px, 1vw, 16px)); aspect-ratio: 16 / 9; height: auto; margin: 0 auto clamp(40px, 5vw, 72px); border-radius: clamp(20px, 2.4vw, 32px); object-fit: cover; }
.md-main--blog-post .card-body > .row + .row { display: block; order: 4; width: var(--md-col); margin: 0 auto 22px; }
.md-main--blog-post .card-body > .row + .row .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }

/* Pages by slug: the first heading of the content is the header block, the rest is a 760px column. CMS Kit renders the
   content inside the wrapper of its content fragment widget, so the rules also reach the children of that wrapper. */
.md-main--cms-page :is(.card-body, .card-body > .abp-widget-wrapper) > :not(.abp-widget-wrapper) { width: var(--md-col); margin-inline: auto; margin-block-end: 22px; }
.md-main--cms-page :is(.card-body, .card-body > .abp-widget-wrapper) > h1:first-of-type { width: auto; margin: 0 0 clamp(40px, 5vw, 72px); padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 72px); border-radius: var(--md-radius-block); background: var(--md-lavender); font-size: clamp(34px, 4.6vw, 68px); line-height: 1.05; }
.md-main--cms-page .card-body { font-size: 17px; line-height: 1.75; }

/* Prose */
.md-main--blog-post .card-body { font-size: 18px; line-height: 1.75; }
.md-main--cms .card-body :is(p, ul, ol, blockquote, pre, table, figure) { margin-block: 0 22px; }
.md-main--cms .card-body h2 { margin-block: 18px 22px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.md-main--cms-page .card-body h2 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; }
.md-main--cms .card-body h3 { margin-block: 12px 14px; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; }
.md-main--cms :is(p, li, td, blockquote) a:not(.btn) { font-weight: 600; text-decoration: underline; }
.md-main--blog-post p.mb-lg-5 a { color: var(--md-nav-text); font-weight: inherit; text-decoration: none; }
.md-main--cms .card-body :is(ul, ol) { padding-inline-start: 24px; }
.md-main--cms .card-body li + li { margin-top: 8px; }
.md-main--cms-page .card-body ul { padding: 20px 24px 20px 44px; border-radius: 20px; background: var(--md-lavender-light); }
.md-main--cms-page .card-body ul ul { margin: 6px 0 0; padding: 0 0 0 24px; background: none; }
.md-main--cms .card-body blockquote { margin-inline: auto; padding: 24px 28px; border: 0; border-radius: 20px; background: var(--md-lavender); font-size: 19px; line-height: 1.65; color: var(--md-ink); }
.md-main--cms .card-body blockquote p:last-child { margin: 0; }
.md-main--cms .card-body hr { height: 0; border: 0; border-top: 2px solid var(--md-border); }
.md-main--cms .card-body img { max-width: 100%; height: auto; }
.md-main--cms img.img-fluid { border-radius: 20px; }
.md-main--cms .card-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.md-main--cms .card-body :is(td, th) { padding: 10px 14px; border: 1px solid var(--md-border); text-align: start; }
.md-main--cms :not(pre) > code { padding: 2px 7px; border-radius: 6px; background: var(--md-lavender); font-family: var(--md-font-mono); font-size: 15px; color: var(--md-violet-dark); }
.md-main--cms pre { border-radius: 20px; background: var(--md-deep); overflow: hidden; }
.md-main--cms pre code.hljs { display: block; padding: 24px 28px; background: var(--md-deep); font-family: var(--md-font-mono); font-size: 15px; line-height: 1.65; color: #EDE7F7; overflow-x: auto; }
.md-main--cms pre code.hljs [class*="hljs-"] { color: inherit; background: none; font-style: normal; }
.md-main--cms pre code.hljs .hljs-comment { color: var(--md-on-deep-muted); }
.md-main--cms pre code.hljs :is(.hljs-keyword, .hljs-selector-tag, .hljs-built_in) { color: var(--md-saffron); }
.md-main--blog-post small[style*="opacity"] { opacity: 1 !important; }
.md-main--cms small[style*="opacity"] { color: var(--md-text-muted); }

/* Tags and rating */
.md-main--cms .cms-tags-area { margin: 0; }
.md-main--cms .cms-tags-area > * { display: flex; flex-wrap: wrap; gap: 8px; }
.md-main--cms .cmskit-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--md-radius-pill); background: var(--md-lavender); color: var(--md-violet-dark); font-size: 14px; font-weight: 600; text-decoration: none; }
.md-main--cms .cms-rating-area { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.md-main--cms .live-rating { display: inline-block; text-align: center; font-size: 15px; color: var(--md-nav-text); }
.md-main--cms .my-rating { padding: 4px; color: var(--md-ink); }
/* star-rating-svg writes stroke: black inline on every polygon, which only an important declaration overrides. The
   widths are in the units of its viewBox (309 per star, drawn at 16px by CMS Kit): 24.8 and 17.7 give the 1.28px and
   0.92px strokes of the design's 22px stars. Overflow is visible so that the stroke of the tips is not clipped. */
.md-main--cms .jq-star-svg { overflow: visible; }
.md-main--cms .jq-star-svg [class*="svg-empty-"] { fill: var(--md-star-empty-fill); stroke: var(--md-star-empty-stroke) !important; stroke-width: 24.8; stroke-linejoin: round; }
.md-main--cms .jq-star-svg [class*="svg-active-"], .md-main--cms .jq-star-svg [class*="svg-hovered-"] { fill: var(--md-star-fill); stroke: var(--md-star-stroke) !important; stroke-width: 17.7; stroke-linejoin: round; }
.md-main--cms .rating-login { display: block; flex: 1 1 100%; }
.md-main--cms .rating-login[hidden] { display: none; }

/* Rating detail dialog: hidden until the entry script opens it. */
.md-main--cms .modal { display: none; }
.md-main--cms .modal.md-modal--open { position: fixed; inset: 0; z-index: 1050; padding: 16px; display: flex; align-items: center; justify-content: center; background: rgba(30, 22, 48, 0.5); }
.md-main--cms .modal-dialog { width: min(520px, 100%); }
.md-main--cms .modal-content { max-height: calc(100dvh - 32px); padding: clamp(20px, 3vw, 32px); border-radius: var(--md-radius-step); background: #FFFFFF; box-shadow: 0 40px 80px -30px rgba(30, 22, 48, 0.5); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.md-main--cms .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.md-main--cms .modal-title { margin: 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.02em; }
.md-main--cms .btn-close { position: relative; flex: 0 0 auto; width: var(--md-touch); height: var(--md-touch); padding: 0; border: 0; border-radius: 50%; background: var(--md-lavender); cursor: pointer; }
.md-main--cms .btn-close::before { content: ""; position: absolute; inset: 13px; background-color: var(--md-violet-dark); -webkit-mask: var(--md-icon-close) center / contain no-repeat; mask: var(--md-icon-close) center / contain no-repeat; }
.md-main--cms .modal-body { text-align: center; }
.md-main--cms .modal-body .row { display: flex; align-items: center; gap: 12px; }
.md-main--cms .modal-body .row > * { flex: 1 1 0; }
.md-main--cms .bar-container { height: 8px; border-radius: 4px; background: var(--md-spec-separator); overflow: hidden; }
.md-main--cms .bar-container > * { height: 100%; background: var(--md-violet); }

/* Comments */
.md-main--cms .md-heading { width: var(--md-col); max-width: none; margin: clamp(48px, 6vw, 80px) auto 24px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.md-main--cms .cms-comment-area { width: var(--md-col); margin: clamp(48px, 6vw, 80px) auto 0; display: flex; flex-direction: column; gap: 16px; }
.md-main--cms .md-heading + .cms-comment-area { margin-top: 0; }
.md-main--cms .cms-comment-area > .text-end { padding: 24px 28px; border-radius: 24px; background: var(--md-lavender-light); text-align: end; }
.md-main--cms .cms-comment-area .card { margin: 0 0 16px; padding: 24px 28px; border: 2px solid var(--md-border); border-radius: 24px; background: #FFFFFF; display: flex; flex-direction: column; gap: 12px; }
.md-main--cms .cms-comment-area .comment-container { margin: 8px 0 0; margin-inline-start: clamp(16px, 3vw, 40px); padding: 20px 24px; border: 0; border-radius: 20px; background: var(--md-lavender-light); }
.md-main--cms .cms-comment-area h5:not(.cms-comment-content-area h5), .md-comment__author { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--md-font-text); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--md-ink); }
.md-main--cms .cms-comment-area small { margin-inline-start: auto; font-size: 14px; font-weight: 400; }
.md-main--cms .cms-comment-content-area p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--md-text); }
.md-main--cms .cms-comment-area .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md-main--cms .cms-comment-area .comment-reply-link { border-color: var(--md-border); background: #FFFFFF; color: var(--md-violet-dark); }
.md-main--cms .cms-comment-form, .md-main--cms .cms-comment-form-area { display: flex; flex-direction: column; gap: 12px; }
.md-main--cms .cms-comment-area .card .cms-comment-form-area { gap: 12px; }
.md-main--cms textarea.form-control { width: 100%; min-height: 120px; padding: 14px 18px; border: 2px solid var(--md-border); border-radius: var(--md-radius-field); background: #FFFFFF; font: inherit; font-size: 16px; line-height: 1.5; color: var(--md-ink); resize: vertical; }
.md-main--cms textarea.form-control:focus { border-color: var(--md-violet); }
/* Comment, reply and edit forms: CMS Kit puts the text area, the Markdown note and the buttons in one grid row. They
   are stacked, so the text area takes the whole width and the note and the buttons go under it, at the end. */
.md-main--cms .cms-comment-area :is(.cms-comment-form, .cms-comment-update-form) > .row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.md-main--cms :is(.cms-comment-form, .cms-comment-update-form) .text-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.md-main--cms :is(.cms-comment-form, .cms-comment-update-form) small { display: block; text-align: end; font-size: 14px; color: var(--md-text-muted); }

/* Buttons of the widgets, and of the SweetAlert2 dialogs of the entry, which hang from the body, outside main. */
:is(.md-main--cms, .swal2-container) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--md-touch); padding: 0 20px; border: 2px solid transparent; border-radius: var(--md-radius-pill); background: none; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
:is(.md-main--cms, .swal2-container) .btn-primary { background: var(--md-violet); color: #FFFFFF; }
:is(.md-main--cms, .swal2-container) .btn-primary:hover { background: var(--md-violet-dark); }
.md-main--cms .btn-light { border-color: var(--md-border); background: #FFFFFF; color: var(--md-violet-dark); }
.md-main--cms .btn-link { color: var(--md-text-muted); font-weight: 600; }
.md-main--cms .btn-sm { min-height: 40px; padding-inline: 14px; font-size: 14px; }
:is(.md-main--cms, .swal2-container) .btn.disabled, :is(.md-main--cms, .swal2-container) .btn:disabled { opacity: 0.6; pointer-events: none; }
.swal2-container .btn-outline-primary { border-color: var(--md-border); background: #FFFFFF; color: var(--md-violet-dark); }
.swal2-container .btn-outline-primary:hover { border-color: var(--md-violet); }
.swal2-container .swal2-actions { gap: 12px; }
.md-main--cms .alert-danger { padding: 16px 18px; border: 2px solid var(--md-alert-border); border-radius: var(--md-radius-field); background: var(--md-alert-bg); font-size: 15px; color: var(--md-alert-text); }

/* Blocking overlay that abp.ui.setBusy adds to the document body or to a container. */
.md-body > .abp-block-area, .md-main--cms .abp-block-area { position: fixed; inset: 0; z-index: 1040; cursor: progress; }

/* --------------------------------------------------------------------------
   CMS Kit markup compatibility: icon font glyphs drawn with masks
   -------------------------------------------------------------------------- */

.md-field__error::before, .md-main--cms i.fa, .md-main--cms i.far { display: inline-block; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--md-icon) center / contain no-repeat; mask: var(--md-icon) center / contain no-repeat; }
.md-main--cms i.fa, .md-main--cms i.far { width: 1em; height: 1em; vertical-align: -0.125em; }
.md-main--cms .fa-reply { --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M20 20v-4a7 7 0 0 0-7-7H4'/%3E%3C/svg%3E"); }
.md-main--cms .fa-pencil { --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
.md-main--cms .fa-trash { --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.md-main--cms .fa-comment-alt { color: var(--md-violet); --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.md-main--cms :is(.fa-times, .fa-close) { --md-icon: var(--md-icon-close); }
.md-main--cms .fa-ban { --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); }
.md-main--cms .fa-smile-o { --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2.5 4 2.5 4-2.5 4-2.5M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); }
.md-main--cms .fa-question-circle { --md-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   Focus and reduced motion
   -------------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--md-focus); outline-offset: 3px; }

/* The scripts move the focus programmatically (confirmation text, the button that opened the panel, the captcha
   alert) and that focus does not match :focus-visible after a mouse click, so :focus must show the ring too. */
.md-consent a:focus, .md-consent button:focus, .md-consent__confirmation:focus, .md-alert:focus { outline: 3px solid var(--md-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}