/* ============================================================================
   GJ Consulting Group — Contractor Financial Resources
   Knowledge Center stylesheet. Namespaced sk- / --sk- to avoid host-theme collisions.
   Scoped entirely under .sk — no global resets, no html/body/host styles touched.
   ============================================================================ */

/* --- Tier 1: primitive tokens -------------------------------------------- */
.sk {
  /* Brand ramp, derived from the GJ Consulting Group logo.
     --sk-brand-500 (#4587c7) is the exact blue of the logo mark and wordmark.
     The darker steps are the same hue and saturation, lightened/darkened only,
     so action states meet WCAG AA while still reading as the client's blue.
     TO REBRAND: sample the client's mark, set it at 500, regenerate the rest. */
  --sk-brand-50:  #eff5fa;
  --sk-brand-100: #d8e6f3;
  --sk-brand-200: #b1cce7;
  --sk-brand-300: #89b3dc;
  --sk-brand-400: #629ad0;
  --sk-brand-500: #4587c7;   /* logo blue, verbatim */
  --sk-brand-600: #326ca5;
  --sk-brand-700: #285785;
  --sk-brand-800: #20456a;
  --sk-brand-900: #18334e;

  /* Neutral slate spine */
  --sk-neutral-0:   #ffffff;
  --sk-neutral-50:  #f7f8fa;
  --sk-neutral-100: #eef0f4;
  --sk-neutral-200: #dfe3ea;
  --sk-neutral-300: #c6ccd7;
  --sk-neutral-400: #9aa3b2;
  --sk-neutral-500: #6b7383;
  --sk-neutral-600: #545c6b;
  --sk-neutral-700: #363c48;
  --sk-neutral-800: #232833;
  --sk-neutral-900: #141821;

  /* Status — feedback only, never decoration */
  --sk-status-positive: #1d6b45;
  --sk-status-attention: #8a5a00;

  /* Spacing — 4px base */
  --sk-space-1: 4px;   --sk-space-2: 8px;   --sk-space-3: 12px;
  --sk-space-4: 16px;  --sk-space-5: 20px;  --sk-space-6: 24px;
  --sk-space-8: 32px;  --sk-space-10: 40px; --sk-space-12: 48px;
  --sk-space-16: 64px; --sk-space-20: 80px; --sk-space-24: 96px;

  --sk-radius-sm: 6px;
  --sk-radius-md: 10px;
  --sk-radius-lg: 16px;

  --sk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Fluid type scale, ratio ~1.2 */
  --sk-text-xs:   0.75rem;
  --sk-text-sm:   0.875rem;
  --sk-text-base: 1rem;
  --sk-text-md:   clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem);
  --sk-text-lg:   clamp(1.2rem, 1.09rem + 0.5vw, 1.45rem);
  --sk-text-xl:   clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  --sk-text-2xl:  clamp(1.7rem, 1.36rem + 1.5vw, 2.4rem);
  --sk-text-3xl:  clamp(2.05rem, 1.5rem + 2.4vw, 3.1rem);

  --sk-measure: 68ch;
  --sk-container: 1140px;

  --sk-ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --sk-dur-fast: 140ms;
  --sk-dur-mid: 240ms;
  --sk-dur-slow: 320ms;

  /* Host-site integration knob: raise if the host header is sticky. */
  --sk-sticky-offset: 0px;   /* raise if a host header is sticky above this component */

  /* --- Tier 2: semantic tokens (the theme layer) ------------------------- */
  --sk-color-surface:        var(--sk-neutral-0);
  --sk-color-surface-sunken: var(--sk-neutral-50);
  --sk-color-surface-raised: var(--sk-neutral-0);
  --sk-color-ink-strong:     #262c41;   /* logo wordmark navy */
  --sk-color-ink-body:       var(--sk-neutral-700);
  --sk-color-ink-muted:      var(--sk-neutral-600);
  --sk-color-border:         var(--sk-neutral-200);
  --sk-color-border-strong:  var(--sk-neutral-300);
  /* Action colour sampled from the live site's buttons (#004a80). The logo blue
     (--sk-brand-500) is lighter than AA allows behind white button text, so the
     site uses this deeper navy for actions — we match it exactly. */
  --sk-color-brand:          #004a80;
  --sk-color-brand-strong:   #003a66;
  --sk-color-brand-soft:     var(--sk-brand-50);
  --sk-color-on-brand:       var(--sk-neutral-0);
  --sk-color-focus-ring:     var(--sk-brand-500);
  --sk-color-field-border:   #838c9c;
  --sk-color-diagram-alt:    var(--sk-brand-700);
  --sk-shadow-sm: 0 1px 2px rgba(20, 24, 33, .06), 0 1px 3px rgba(20, 24, 33, .04);
  --sk-shadow-md: 0 4px 12px rgba(20, 24, 33, .07), 0 2px 4px rgba(20, 24, 33, .04);
  --sk-shadow-lg: 0 12px 32px rgba(20, 24, 33, .10), 0 4px 8px rgba(20, 24, 33, .04);
}

.sk[data-sk-theme="dark"] {
  --sk-color-surface:        var(--sk-neutral-900);
  --sk-color-surface-sunken: #10141c;
  --sk-color-surface-raised: var(--sk-neutral-800);
  --sk-color-ink-strong:     var(--sk-neutral-50);
  --sk-color-ink-body:       #cfd5e0;
  --sk-color-ink-muted:      #a3abba;
  --sk-color-border:         #2c323f;
  --sk-color-border-strong:  #3c4453;
  --sk-color-brand:          var(--sk-brand-300);
  --sk-color-brand-strong:   var(--sk-brand-200);
  --sk-color-brand-soft:     #16233a;
  --sk-color-on-brand:       var(--sk-neutral-900);
  --sk-color-focus-ring:     var(--sk-brand-300);
  --sk-color-field-border:   #6f7a8f;
  --sk-color-diagram-alt:    var(--sk-brand-200);
  --sk-status-positive: #5ec08e;
  --sk-status-attention: #e0a548;
  --sk-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --sk-shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --sk-shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

/* --- Scoped reset (never leaves .sk) ------------------------------------- */
.sk, .sk *, .sk *::before, .sk *::after { box-sizing: border-box; }
.sk {
  font-family: var(--sk-font-sans);
  font-size: var(--sk-text-base);
  line-height: 1.6;
  color: var(--sk-color-ink-body);
  background: var(--sk-color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sk h1, .sk h2, .sk h3, .sk h4, .sk p, .sk ul, .sk ol, .sk figure, .sk dl, .sk dd {
  margin: 0;
}
.sk ul, .sk ol { padding: 0; list-style: none; }
.sk h1, .sk h2, .sk h3, .sk h4 {
  color: var(--sk-color-ink-strong);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 650;
}
.sk a { color: var(--sk-color-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sk a:hover { color: var(--sk-color-brand-strong); }
.sk img, .sk svg { max-width: 100%; }
.sk button { font: inherit; color: inherit; }

.sk :focus-visible {
  outline: 3px solid var(--sk-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--sk-radius-sm);
}

/* --- Layout primitives ---------------------------------------------------- */
.sk-container {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-space-5);
}
.sk-section { padding-block: var(--sk-space-16); }
.sk-section--sunken { background: var(--sk-color-surface-sunken); }
.sk-section__head { max-width: var(--sk-measure); margin-bottom: var(--sk-space-10); }
.sk-eyebrow {
  display: block;
  font-size: var(--sk-text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sk-color-brand);
  margin-bottom: var(--sk-space-3);
}
.sk-h2 { font-size: var(--sk-text-2xl); }
.sk-h3 { font-size: var(--sk-text-lg); }
.sk-lede {
  font-size: var(--sk-text-md);
  color: var(--sk-color-ink-muted);
  margin-top: var(--sk-space-4);
  max-width: var(--sk-measure);
}
.sk-prose p + p { margin-top: var(--sk-space-4); }
.sk-prose { max-width: var(--sk-measure); }

.sk-grid { display: grid; gap: var(--sk-space-5); }
@media (min-width: 900px)  { .sk-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .sk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sk-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.sk-skiplink {
  position: absolute; left: -9999px; top: 0;
  background: var(--sk-color-brand); color: var(--sk-color-on-brand);
  padding: var(--sk-space-3) var(--sk-space-4); border-radius: var(--sk-radius-sm);
  z-index: 40; font-weight: 600; text-decoration: none;
}
.sk-skiplink:focus { left: var(--sk-space-4); top: var(--sk-space-4); }
.sk-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Buttons -------------------------------------------------------------- */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-space-2);
  min-height: 54px; padding: var(--sk-space-3) var(--sk-space-8);
  /* The host site uses fully-rounded buttons; matching the shape is the single
     biggest cue that this page belongs to the same site. */
  border-radius: 999px; border: 1px solid transparent;
  font-size: var(--sk-text-base); font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--sk-dur-fast) var(--sk-ease),
              border-color var(--sk-dur-fast) var(--sk-ease),
              transform var(--sk-dur-fast) var(--sk-ease),
              box-shadow var(--sk-dur-fast) var(--sk-ease);
}
.sk-btn--primary { background: var(--sk-color-brand); color: #fff; box-shadow: var(--sk-shadow-sm); }
.sk-btn--primary:hover { background: var(--sk-color-brand-strong); color: #fff; transform: translateY(-1px); box-shadow: var(--sk-shadow-md); }

/* --- Host-CMS defence -----------------------------------------------------
   Some CMS themes style bare anchor elements globally with their own color
   and text-decoration. These rules keep the primary CTA legible no
   matter what the host stylesheet does. !important is used deliberately and
   only on the properties hosts actually override. */
.sk a.sk-btn, .sk button.sk-btn { text-decoration: none !important; }
.sk a.sk-btn--primary,
.sk a.sk-btn--primary:link,
.sk a.sk-btn--primary:visited,
.sk button.sk-btn--primary {
  background-color: var(--sk-color-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #fff;
}
.sk a.sk-btn--primary:hover,
.sk a.sk-btn--primary:focus,
.sk a.sk-btn--primary:focus-visible,
.sk a.sk-btn--primary:active,
.sk button.sk-btn--primary:hover,
.sk button.sk-btn--primary:focus,
.sk button.sk-btn--primary:focus-visible,
.sk button.sk-btn--primary:active {
  background-color: var(--sk-color-brand-strong) !important;
  color: #fff !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #fff;
}
.sk .sk-btn--primary > * { color: #fff !important; }
.sk .sk-btn--primary .sk-btn__icon,
.sk .sk-btn--primary svg {
  color: #fff !important;
  stroke: currentColor !important;
  fill: none !important;
}
/* Dark theme uses a light brand ramp, so restore the AA-verified dark ink. */
.sk[data-sk-theme="dark"] a.sk-btn--primary,
.sk[data-sk-theme="dark"] a.sk-btn--primary:link,
.sk[data-sk-theme="dark"] a.sk-btn--primary:visited,
.sk[data-sk-theme="dark"] button.sk-btn--primary,
.sk[data-sk-theme="dark"] .sk-btn--primary > *,
.sk[data-sk-theme="dark"] .sk-btn--primary svg {
  color: var(--sk-color-on-brand) !important;
  -webkit-text-fill-color: var(--sk-color-on-brand);
}

/* Buttons size to their content; only deliberate layouts stretch them. */
.sk .sk-btn { width: auto; max-width: 100%; }
.sk-hero__actions .sk-btn, .sk-cta__actions .sk-btn { flex: 0 0 auto; }
.sk-btn--secondary { background: var(--sk-color-surface-raised); color: var(--sk-color-ink-body); border-color: var(--sk-color-field-border); }
.sk-btn--secondary:hover { background: var(--sk-color-surface-sunken); color: var(--sk-color-ink-strong); border-color: var(--sk-color-ink-muted); transform: translateY(-1px); }
.sk-btn--ghost { background: transparent; color: var(--sk-color-brand); border-color: var(--sk-color-field-border); }
.sk-btn--ghost:hover { background: var(--sk-color-brand-soft); color: var(--sk-color-brand-strong); }
.sk-btn--sm { min-height: 44px; padding: var(--sk-space-2) var(--sk-space-5); font-size: var(--sk-text-sm); }
.sk-btn__icon { flex: none; width: 1em; height: 1em; }

/* --- Hero ----------------------------------------------------------------- */
.sk-hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 82px) clamp(40px, 5vw, 68px);
  background:
    radial-gradient(120% 110% at 12% -10%, var(--sk-color-brand-soft) 0%, transparent 58%),
    var(--sk-color-surface);
  border-bottom: 1px solid var(--sk-color-border);
  overflow: hidden;
}
.sk-hero__inner { display: grid; gap: var(--sk-space-8); align-items: start; }
@media (min-width: 940px) { .sk-hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--sk-space-10); } }
.sk-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--sk-space-2);
  padding: var(--sk-space-1) var(--sk-space-3);
  border: 1px solid var(--sk-color-border-strong); border-radius: 999px;
  font-size: var(--sk-text-xs); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sk-color-ink-muted);
  background: var(--sk-color-surface-raised);
}
.sk-hero__title {
  font-size: var(--sk-text-3xl); font-weight: 700; letter-spacing: -0.03em;
  margin-top: var(--sk-space-5);
}
.sk-hero__answer {
  font-size: var(--sk-text-md); color: var(--sk-color-ink-body);
  margin-top: var(--sk-space-5); max-width: 56ch;
}
.sk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); margin-top: var(--sk-space-6); }

.sk-takeaways {
  background: var(--sk-color-surface-raised);
  border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-md);
  padding: var(--sk-space-6);
}
.sk-takeaways__title {
  font-size: var(--sk-text-sm); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sk-color-brand); margin-bottom: var(--sk-space-4);
}
.sk-takeaways__list { display: grid; gap: var(--sk-space-4); }
.sk-takeaways__item { display: grid; grid-template-columns: 22px 1fr; gap: var(--sk-space-3); align-items: start; }
.sk-takeaways__marker {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  background: var(--sk-color-brand-soft); color: var(--sk-color-brand-strong);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none;
}
.sk-takeaways__item p { font-size: var(--sk-text-sm); }
.sk-takeaways__item b { color: var(--sk-color-ink-strong); font-weight: 650; }

/* --- Branded masthead & footer (active when the host chrome is off) -------- */
.sk-masthead { border-bottom: 1px solid var(--sk-color-border); background: var(--sk-color-surface); }
.sk-masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sk-space-5); min-height: 126px; padding-block: var(--sk-space-4);
}
.sk-masthead__brand {
  display: inline-flex; align-items: center; min-height: 44px; flex: none;
  min-width: 110px;  /* reserves space so the logo cannot shift the row on load */
}
/* Host CMS themes commonly ship blanket `img { height: auto }` or max-height
   rules that shrink an embedded logo. These are scoped to the component and
   use !important only on the two properties hosts actually override. */
.sk .sk-masthead__logo {
  height: 94px !important;
  width: auto !important;
  max-width: 400px; display: block;
}
.sk .sk-masthead__mark { display: none !important; }

/* Below 640px the full lockup would crowd out the consultation button, so the
   square symbol mark takes over. Same brand, appropriate to the space. */
@media (max-width: 639px) {
  .sk-masthead__inner { min-height: 96px; }
  .sk-masthead__brand { min-width: 72px; }
  .sk .sk-masthead__logo { display: none !important; }
  .sk .sk-masthead__mark { display: block !important; height: 72px !important; width: auto !important; }
}
.sk-masthead__brandText { font-size: var(--sk-text-md); font-weight: 700; color: var(--sk-color-ink-strong); letter-spacing: -0.02em; }
.sk-masthead__nav { display: flex; align-items: center; gap: var(--sk-space-2); }
.sk-masthead__link {
  display: none; align-items: center; min-height: 44px; padding: 0 var(--sk-space-4);
  font-size: var(--sk-text-base); font-weight: 500; color: var(--sk-color-ink-strong);
  text-decoration: none; border-radius: var(--sk-radius-sm);
}
.sk-masthead__link:hover { color: var(--sk-color-brand); background: var(--sk-color-surface-sunken); }
/* Sized to the host site's header button: 55px tall, generous pill padding. */
.sk .sk-masthead__cta {
  min-height: 55px;
  padding-inline: var(--sk-space-10);
  min-width: 190px;
  font-size: var(--sk-text-base);
}
@media (max-width: 639px) {
  .sk .sk-masthead__cta { min-height: 48px; min-width: 0; padding-inline: var(--sk-space-6); }
}
@media (min-width: 860px) { .sk-masthead__link { display: inline-flex; } }
/* 640-859px: nav links are hidden, so the lockup steps down to sit comfortably
   beside the consultation button without crowding it. */
@media (min-width: 640px) and (max-width: 859px) {
  .sk-masthead__inner { min-height: 112px; }
  .sk .sk-masthead__logo { height: 80px !important; }
}

.sk-colophon__brand {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sk-space-4);
  padding-bottom: var(--sk-space-5); margin-bottom: var(--sk-space-5);
  border-bottom: 1px solid var(--sk-color-border);
}
.sk .sk-colophon__logo {
  height: 58px !important; width: auto !important; max-width: 260px; display: block;
}
.sk-colophon__nav { display: flex; flex-wrap: wrap; gap: var(--sk-space-2) var(--sk-space-5); }
.sk-colophon__nav a { font-size: var(--sk-text-sm); font-weight: 600; text-decoration: none; }
.sk-colophon__nav a:hover { text-decoration: underline; }

/* --- Section nav ---------------------------------------------------------- */
.sk-subnav {
  position: sticky; top: var(--sk-sticky-offset); z-index: 20;
  background: color-mix(in srgb, var(--sk-color-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sk-color-border);
}
@supports not (backdrop-filter: blur(4px)) { .sk-subnav { background: var(--sk-color-surface); } }
.sk-subnav__list {
  display: flex; gap: var(--sk-space-1); overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sk-subnav__list::-webkit-scrollbar { display: none; }
.sk-subnav__link {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 var(--sk-space-3);
  white-space: nowrap; font-size: var(--sk-text-sm); font-weight: 550;
  color: var(--sk-color-ink-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--sk-dur-fast) var(--sk-ease), border-color var(--sk-dur-fast) var(--sk-ease);
}
.sk-subnav__link:hover { color: var(--sk-color-ink-strong); }
.sk-subnav__link[aria-current="true"] { color: var(--sk-color-brand); border-bottom-color: var(--sk-color-brand); }

/* --- Cards ---------------------------------------------------------------- */
.sk-card {
  background: var(--sk-color-surface-raised);
  border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-lg);
  padding: var(--sk-space-6);
  height: 100%;
  transition: border-color var(--sk-dur-mid) var(--sk-ease),
              box-shadow var(--sk-dur-mid) var(--sk-ease),
              transform var(--sk-dur-mid) var(--sk-ease);
}
.sk-card--interactive:hover { border-color: var(--sk-color-border-strong); box-shadow: var(--sk-shadow-md); transform: translateY(-2px); }

/* Triage */
.sk-triage__link {
  display: flex; align-items: flex-start; gap: var(--sk-space-4);
  text-decoration: none; color: inherit; height: 100%;
}
.sk-triage__quote { font-size: var(--sk-text-md); font-weight: 600; color: var(--sk-color-ink-strong); letter-spacing: -0.012em; }
.sk-triage__to { display: block; margin-top: var(--sk-space-3); font-size: var(--sk-text-sm); color: var(--sk-color-brand); font-weight: 600; }
.sk-triage__arrow { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--sk-color-brand); transition: transform var(--sk-dur-mid) var(--sk-ease); }
.sk-card--interactive:hover .sk-triage__arrow { transform: translateX(3px); }

/* Topic areas */
.sk-topic__title { font-size: var(--sk-text-base); font-weight: 650; color: var(--sk-color-ink-strong); }
.sk-topic__def { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-2); }
.sk-topic__list { margin-top: var(--sk-space-4); display: grid; gap: var(--sk-space-2); border-top: 1px solid var(--sk-color-border); padding-top: var(--sk-space-4); }
.sk-topic__list li {
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-body);
  padding-left: var(--sk-space-5); position: relative;
}
.sk-topic__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sk-brand-300);
}

/* --- Disclosure (resources + FAQ) ---------------------------------------- */
.sk-disclosure {
  border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-raised);
  overflow: hidden;
  transition: border-color var(--sk-dur-mid) var(--sk-ease), box-shadow var(--sk-dur-mid) var(--sk-ease);
}
.sk-disclosure + .sk-disclosure { margin-top: var(--sk-space-4); }
.sk-disclosure[open] { border-color: var(--sk-color-border-strong); box-shadow: var(--sk-shadow-sm); }
.sk-disclosure__summary {
  display: flex; align-items: flex-start; gap: var(--sk-space-4);
  padding: var(--sk-space-5) var(--sk-space-6);
  cursor: pointer; list-style: none; min-height: 44px;
}
.sk-disclosure__summary::-webkit-details-marker { display: none; }
.sk-disclosure__summary:hover { background: var(--sk-color-surface-sunken); }
.sk-disclosure__heading { flex: 1; }
.sk-disclosure__title { font-size: var(--sk-text-md); font-weight: 650; color: var(--sk-color-ink-strong); letter-spacing: -0.014em; }
.sk-disclosure__sub { display: block; margin-top: var(--sk-space-2); font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); font-weight: 400; }
.sk-disclosure__chev {
  flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--sk-color-ink-muted);
  transition: transform var(--sk-dur-mid) var(--sk-ease);
}
.sk-disclosure[open] .sk-disclosure__chev { transform: rotate(180deg); }
.sk-disclosure__panel { padding: 0 var(--sk-space-6) var(--sk-space-6); }
.sk-disclosure__panel > * + * { margin-top: var(--sk-space-5); }
.sk-answer {
  font-size: var(--sk-text-base); color: var(--sk-color-ink-body);
  padding-top: var(--sk-space-2); max-width: var(--sk-measure);
}
.sk-answer strong { color: var(--sk-color-ink-strong); font-weight: 650; }

.sk-resource__index {
  flex: none; width: 34px; height: 34px; border-radius: var(--sk-radius-sm);
  background: var(--sk-color-brand-soft); color: var(--sk-color-brand-strong);
  display: grid; place-items: center; font-size: var(--sk-text-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sk-tag {
  display: inline-block; padding: 2px var(--sk-space-2);
  border: 1px solid var(--sk-color-border-strong); border-radius: 999px;
  font-size: var(--sk-text-xs); font-weight: 600; color: var(--sk-color-ink-muted);
  vertical-align: middle;
}
.sk-tag--feature { border-color: var(--sk-color-brand); color: var(--sk-color-brand); background: var(--sk-color-brand-soft); }

/* Checklist inside resources */
.sk-checklist { display: grid; gap: var(--sk-space-3); max-width: var(--sk-measure); }
.sk-checklist li {
  position: relative; padding-left: var(--sk-space-8);
  font-size: var(--sk-text-base); color: var(--sk-color-ink-body);
}
.sk-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.28em;
  width: 18px; height: 18px; border: 1.5px solid var(--sk-color-field-border);
  border-radius: 4px; background: var(--sk-color-surface);
}
.sk-checklist li b { color: var(--sk-color-ink-strong); font-weight: 650; }

.sk-subhead {
  font-size: var(--sk-text-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sk-color-ink-muted);
}

/* Data table */
.sk-table-wrap { overflow-x: auto; border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md); }
.sk-table { width: 100%; border-collapse: collapse; font-size: var(--sk-text-sm); min-width: 460px; }
.sk-table caption { text-align: left; padding: var(--sk-space-4) var(--sk-space-4) var(--sk-space-2); font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); }
.sk-table th, .sk-table td { padding: var(--sk-space-3) var(--sk-space-4); text-align: left; border-bottom: 1px solid var(--sk-color-border); }
.sk-table thead th { background: var(--sk-color-surface-sunken); color: var(--sk-color-ink-strong); font-weight: 650; font-size: var(--sk-text-xs); letter-spacing: .05em; text-transform: uppercase; }
.sk-table tbody tr:last-child th, .sk-table tbody tr:last-child td { border-bottom: 0; }
.sk-table td { font-variant-numeric: tabular-nums; }
.sk-table tbody th { font-weight: 600; color: var(--sk-color-ink-strong); font-variant-numeric: tabular-nums; }

/* Callout */
.sk-callout {
  border-left: 3px solid var(--sk-color-brand);
  background: var(--sk-color-brand-soft);
  padding: var(--sk-space-4) var(--sk-space-5);
  border-radius: 0 var(--sk-radius-md) var(--sk-radius-md) 0;
  font-size: var(--sk-text-sm);
  color: var(--sk-color-ink-body);
  max-width: var(--sk-measure);
}
.sk-callout b { color: var(--sk-color-ink-strong); }

/* --- Snapshot (signature module) ----------------------------------------- */
.sk-snapshot { display: grid; gap: var(--sk-space-8); }
@media (min-width: 1000px) {
  .sk-snapshot { grid-template-columns: 1fr 380px; align-items: start; gap: var(--sk-space-10); }
  .sk-readout { max-height: calc(100vh - var(--sk-sticky-offset) - 96px); overflow-y: auto; }
}
.sk-snapshot__areas { display: grid; gap: var(--sk-space-4); }
@media (min-width: 640px) { .sk-snapshot__areas { grid-template-columns: repeat(2, 1fr); } }

.sk-area {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md);
  background: var(--sk-color-surface-raised); padding: var(--sk-space-5);
  margin: 0; min-width: 0;
  transition: border-color var(--sk-dur-mid) var(--sk-ease);
}
.sk-area:focus-within { border-color: var(--sk-color-border-strong); }
.sk-area__legend { font-size: var(--sk-text-base); font-weight: 650; color: var(--sk-color-ink-strong); padding: 0; }
.sk-area__opts { margin-top: var(--sk-space-4); display: grid; gap: var(--sk-space-1); }
.sk-check {
  display: flex; align-items: flex-start; gap: var(--sk-space-3);
  padding: var(--sk-space-2); margin: calc(var(--sk-space-2) * -1) calc(var(--sk-space-2) * -1) 0;
  border-radius: var(--sk-radius-sm); cursor: pointer; min-height: 44px;
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-body);
  transition: background-color var(--sk-dur-fast) var(--sk-ease);
}
.sk-check:hover { background: var(--sk-color-surface-sunken); }
.sk-check input {
  flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sk-color-brand);
  cursor: pointer;
}

.sk-readout {
  position: sticky; top: calc(var(--sk-sticky-offset) + 64px);
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-raised); box-shadow: var(--sk-shadow-md);
  padding: var(--sk-space-6);
}
.sk-readout__title { font-size: var(--sk-text-md); font-weight: 650; }
.sk-meters { margin-top: var(--sk-space-4); display: grid; gap: var(--sk-space-3); }
.sk-meter__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-3); }
.sk-meter__label { font-size: var(--sk-text-xs); color: var(--sk-color-ink-muted); }
.sk-meter__state { font-size: var(--sk-text-xs); font-weight: 650; color: var(--sk-color-ink-muted); white-space: nowrap; }
.sk-meter__track { display: flex; gap: 4px; margin-top: var(--sk-space-2); }
.sk-meter__seg {
  height: 6px; flex: 1; border-radius: 3px; background: var(--sk-color-border);
  transition: background-color var(--sk-dur-slow) var(--sk-ease);
}
.sk-meter__seg[data-on="1"] { background: var(--sk-color-brand); }
.sk-meter[data-complete="1"] .sk-meter__state { color: var(--sk-status-positive); }
.sk-readout__actions { margin-top: var(--sk-space-6); display: grid; gap: var(--sk-space-3); }

/* Score — the visually dominant element of the panel */
.sk-score { margin-top: var(--sk-space-5); }
.sk-score__empty { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); }
.sk-score__label {
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sk-color-brand);
}
.sk-score__value {
  font-size: clamp(2.6rem, 2.1rem + 2vw, 3.4rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.035em; color: var(--sk-color-ink-strong);
  font-variant-numeric: tabular-nums; margin-top: var(--sk-space-2);
}
.sk-score__track {
  height: 8px; border-radius: 4px; background: var(--sk-color-border);
  margin-top: var(--sk-space-4); overflow: hidden;
}
.sk-score__fill {
  display: block; height: 100%; width: 0%; border-radius: 4px;
  background: var(--sk-color-brand);
  transition: width var(--sk-dur-slow) var(--sk-ease);
}
.sk-no-motion .sk-score__fill { transition: none; }
.sk-score__band {
  font-size: var(--sk-text-md); font-weight: 650; color: var(--sk-color-ink-strong);
  margin-top: var(--sk-space-4); letter-spacing: -0.012em;
}
.sk-score__count { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-2); }
.sk-readout__disclaimer {
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted);
  margin-top: var(--sk-space-4); padding-top: var(--sk-space-4);
  border-top: 1px solid var(--sk-color-border);
}
.sk-readout__privacy { font-size: var(--sk-text-xs); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-3); }

/* Ranked category lists */
.sk-rank { margin-top: var(--sk-space-6); padding-top: var(--sk-space-5); border-top: 1px solid var(--sk-color-border); }
.sk-rank__title {
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sk-color-ink-muted);
}
.sk-rank__list { margin-top: var(--sk-space-3); display: grid; gap: var(--sk-space-3); }
.sk-rank__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sk-space-2);
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-body);
  padding-left: var(--sk-space-5); position: relative; line-height: 1.45;
}
.sk-rank__item::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 2px;
}
.sk-rank--weak .sk-rank__item::before { background: var(--sk-status-attention); }
.sk-rank--strong .sk-rank__item::before { background: var(--sk-status-positive); }
.sk-rank__name { font-weight: 600; color: var(--sk-color-ink-strong); }
.sk-rank__count { color: var(--sk-color-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Category meters — secondary detail */
.sk-meters-block { margin-top: var(--sk-space-6); padding-top: var(--sk-space-5); border-top: 1px solid var(--sk-color-border); }
.sk-meters-block__title {
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sk-color-ink-muted);
}

/* --- Glossary ------------------------------------------------------------- */
.sk-glossary { display: grid; gap: var(--sk-space-5); }
@media (min-width: 700px)  { .sk-glossary { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sk-glossary { grid-template-columns: repeat(3, 1fr); } }
.sk-term { border-top: 2px solid var(--sk-color-border-strong); padding-top: var(--sk-space-4); }
.sk-term dt { font-size: var(--sk-text-base); font-weight: 650; color: var(--sk-color-ink-strong); }
.sk-term dd { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-2); }

/* --- Authority ------------------------------------------------------------ */
.sk-authority { display: grid; gap: var(--sk-space-8); }
@media (min-width: 940px) { .sk-authority { grid-template-columns: 1.1fr 0.9fr; gap: var(--sk-space-12); align-items: start; } }
.sk-facts { display: grid; gap: var(--sk-space-4); }
.sk-fact {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md);
  background: var(--sk-color-surface-raised); padding: var(--sk-space-5);
}
.sk-fact__label { font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sk-color-brand); }
.sk-fact__value { font-size: var(--sk-text-base); color: var(--sk-color-ink-body); margin-top: var(--sk-space-2); }
.sk-fact__value b { color: var(--sk-color-ink-strong); font-weight: 650; }
.sk-toolrow { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); margin-top: var(--sk-space-3); }
.sk-tool {
  font-size: var(--sk-text-xs); font-weight: 600; color: var(--sk-color-ink-muted);
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-sm);
  padding: var(--sk-space-1) var(--sk-space-3); background: var(--sk-color-surface);
}

/* --- Consultation CTA ----------------------------------------------------- */
.sk-cta {
  border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-lg);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--sk-color-brand-soft) 0%, transparent 60%),
    var(--sk-color-surface-raised);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--sk-shadow-sm);
}
.sk-cta__title { font-size: var(--sk-text-xl); max-width: 22ch; }
.sk-cta__body { margin-top: var(--sk-space-4); font-size: var(--sk-text-md); color: var(--sk-color-ink-muted); max-width: 58ch; }
.sk-cta__actions { margin-top: var(--sk-space-8); display: flex; flex-wrap: wrap; gap: var(--sk-space-3); }
.sk-cta__reassure { margin-top: var(--sk-space-5); font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); }

/* --- Footer meta ---------------------------------------------------------- */
.sk-colophon {
  border-top: 1px solid var(--sk-color-border);
  padding-block: var(--sk-space-8);
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted);
}
.sk-colophon p + p { margin-top: var(--sk-space-3); }
.sk-colophon__meta { display: flex; flex-wrap: wrap; gap: var(--sk-space-2) var(--sk-space-6); margin-bottom: var(--sk-space-4); }

/* --- Config warning (only shows if a URL was never set) ------------------- */
.sk-config-warning {
  display: none;
  margin-top: var(--sk-space-4); padding: var(--sk-space-4);
  border: 1px dashed var(--sk-status-attention); border-radius: var(--sk-radius-md);
  color: var(--sk-status-attention); font-size: var(--sk-text-sm); font-weight: 600;
}
.sk[data-sk-config="incomplete"] .sk-config-warning { display: block; }

/* --- Editorial notes: tips, warnings, mistakes, insights, summaries ------- */
.sk-note {
  border: 1px solid var(--sk-color-border);
  border-left: 3px solid var(--sk-color-border-strong);
  border-radius: 0 var(--sk-radius-md) var(--sk-radius-md) 0;
  background: var(--sk-color-surface-sunken);
  padding: var(--sk-space-4) var(--sk-space-5);
  max-width: var(--sk-measure);
}
.sk-note__label {
  display: flex; align-items: center; gap: var(--sk-space-2);
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sk-color-ink-muted);
  margin-bottom: var(--sk-space-2);
}
.sk-note__label svg { width: 15px; height: 15px; flex: none; }
.sk-note__body { font-size: var(--sk-text-sm); color: var(--sk-color-ink-body); }
.sk-note__body b { color: var(--sk-color-ink-strong); font-weight: 650; }
.sk-note__body p + p { margin-top: var(--sk-space-3); }
.sk-note--tip      { border-left-color: var(--sk-color-brand); }
.sk-note--tip      .sk-note__label { color: var(--sk-color-brand); }
.sk-note--warning  { border-left-color: var(--sk-status-attention); }
.sk-note--warning  .sk-note__label { color: var(--sk-status-attention); }
.sk-note--mistake  { border-left-color: var(--sk-status-attention); }
.sk-note--mistake  .sk-note__label { color: var(--sk-status-attention); }
.sk-note--best     { border-left-color: var(--sk-status-positive); }
.sk-note--best     .sk-note__label { color: var(--sk-status-positive); }
.sk-note--insight  { border-left-color: var(--sk-color-brand); background: var(--sk-color-brand-soft); }
.sk-note--insight  .sk-note__label { color: var(--sk-color-brand-strong); }

/* Section summary strip */
.sk-summary {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md);
  background: var(--sk-color-surface-sunken); padding: var(--sk-space-5);
  max-width: var(--sk-measure);
}
.sk-summary__title {
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sk-color-brand); margin-bottom: var(--sk-space-3);
}
.sk-summary__list { display: grid; gap: var(--sk-space-2); }
.sk-summary__list li {
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-body);
  position: relative; padding-left: var(--sk-space-5);
}
.sk-summary__list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--sk-brand-300);
}

/* --- Worked examples ------------------------------------------------------ */
.sk-example {
  border: 1px solid var(--sk-color-border-strong);
  border-radius: var(--sk-radius-md);
  background: var(--sk-color-surface-raised);
  overflow: hidden;
  max-width: var(--sk-measure);
}
.sk-example__head {
  padding: var(--sk-space-4) var(--sk-space-5);
  border-bottom: 1px solid var(--sk-color-border);
  background: var(--sk-color-surface-sunken);
}
.sk-example__tag {
  display: inline-block; font-size: var(--sk-text-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--sk-color-brand);
}
.sk-example__title { font-size: var(--sk-text-base); font-weight: 650; color: var(--sk-color-ink-strong); margin-top: var(--sk-space-1); }
.sk-example__body { padding: var(--sk-space-5); }
.sk-example__body > * + * { margin-top: var(--sk-space-4); }
.sk-figures { width: 100%; border-collapse: collapse; font-size: var(--sk-text-sm); }
.sk-figures th, .sk-figures td { padding: var(--sk-space-2) 0; text-align: left; border-bottom: 1px solid var(--sk-color-border); }
.sk-figures td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-figures th { font-weight: 400; color: var(--sk-color-ink-body); padding-right: var(--sk-space-4); }
.sk-figures tr.sk-figures--total th,
.sk-figures tr.sk-figures--total td {
  font-weight: 700; color: var(--sk-color-ink-strong);
  border-bottom: 0; border-top: 2px solid var(--sk-color-border-strong);
  padding-top: var(--sk-space-3);
}
.sk-figures tr.sk-figures--sub th, .sk-figures tr.sk-figures--sub td { font-weight: 650; color: var(--sk-color-ink-strong); }
.sk-example__takeaway {
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-body);
  border-top: 1px solid var(--sk-color-border); padding-top: var(--sk-space-4);
}
.sk-example__takeaway b { color: var(--sk-color-ink-strong); }

/* --- Diagrams ------------------------------------------------------------- */
.sk-figure { margin: 0; max-width: var(--sk-measure); }
.sk-figure__frame {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md);
  background: var(--sk-color-surface-raised); padding: var(--sk-space-5);
  overflow-x: auto;
}
.sk-figure__frame svg { display: block; width: 100%; height: auto; min-width: 340px; }
.sk-figure figcaption {
  font-size: var(--sk-text-xs); color: var(--sk-color-ink-muted);
  margin-top: var(--sk-space-3); line-height: 1.5;
}
.sk-dg-band { fill: var(--sk-color-brand-soft); }
.sk-dg-line { stroke: var(--sk-color-border-strong); stroke-width: 1.5; fill: none; }
.sk-dg-node { fill: var(--sk-color-brand); }
.sk-dg-node-soft { fill: var(--sk-color-border-strong); }
.sk-dg-box { fill: var(--sk-color-surface-sunken); stroke: var(--sk-color-border-strong); stroke-width: 1; }
.sk-dg-box-brand { fill: var(--sk-color-brand); }
.sk-dg-box-alt { fill: var(--sk-color-diagram-alt); }
.sk-dg-text { fill: var(--sk-color-ink-body); font-size: 11px; font-family: var(--sk-font-sans); }
.sk-dg-text-strong { fill: var(--sk-color-ink-strong); font-size: 11.5px; font-weight: 650; font-family: var(--sk-font-sans); }
.sk-dg-text-muted { fill: var(--sk-color-ink-muted); font-size: 10px; font-family: var(--sk-font-sans); }
.sk-dg-text-on-brand { fill: #fff; font-size: 11px; font-weight: 650; font-family: var(--sk-font-sans); }
.sk[data-sk-theme="dark"] .sk-dg-text-on-brand { fill: var(--sk-color-on-brand); }

/* --- Contextual CTA bands ------------------------------------------------- */
.sk-ctaband {
  border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-sunken);
  padding: var(--sk-space-6);
  display: grid; gap: var(--sk-space-5); align-items: center;
  max-width: var(--sk-measure);
}
@media (min-width: 760px) { .sk-ctaband { grid-template-columns: 1fr auto; gap: var(--sk-space-8); } }
.sk-ctaband__title { font-size: var(--sk-text-md); font-weight: 650; color: var(--sk-color-ink-strong); letter-spacing: -0.014em; }
.sk-ctaband__body { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-2); }
.sk-ctaband__action { display: flex; }
@media (max-width: 759px) { .sk-ctaband__action .sk-btn { width: 100%; } }

/* --- Downloads / lead magnets --------------------------------------------- */
.sk-dl { display: grid; gap: var(--sk-space-5); }
@media (min-width: 700px)  { .sk-dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sk-dl { grid-template-columns: repeat(3, 1fr); } }
.sk-dl__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-raised); padding: var(--sk-space-6); height: 100%;
  transition: border-color var(--sk-dur-mid) var(--sk-ease), box-shadow var(--sk-dur-mid) var(--sk-ease);
}
.sk-dl__card:hover { border-color: var(--sk-color-border-strong); box-shadow: var(--sk-shadow-md); }
.sk-dl__format {
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sk-color-brand);
}
.sk-dl__title { font-size: var(--sk-text-base); font-weight: 650; color: var(--sk-color-ink-strong); margin-top: var(--sk-space-2); }
.sk-dl__body { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-3); flex: 1 1 auto; }
.sk-dl__action { margin-top: var(--sk-space-5); }
.sk-dl__action .sk-btn { width: 100%; }

/* --- Email capture -------------------------------------------------------- */
.sk-optin {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-raised); padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--sk-shadow-sm);
}
.sk-optin__title { font-size: var(--sk-text-lg); }
.sk-optin__body { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-3); max-width: 60ch; }
.sk-optin__form { margin-top: var(--sk-space-6); display: grid; gap: var(--sk-space-4); max-width: 560px; }
.sk-field { display: grid; gap: var(--sk-space-2); }
.sk-field__label { font-size: var(--sk-text-sm); font-weight: 600; color: var(--sk-color-ink-strong); }
.sk-field__input {
  width: 100%; min-height: 46px; padding: var(--sk-space-3) var(--sk-space-4);
  border: 1px solid var(--sk-color-field-border); border-radius: var(--sk-radius-md);
  background: var(--sk-color-surface); color: var(--sk-color-ink-strong);
  font: inherit; font-size: var(--sk-text-base);
}
.sk-field__input::placeholder { color: var(--sk-color-ink-muted); }
.sk-field__hint { font-size: var(--sk-text-xs); color: var(--sk-color-ink-muted); }
.sk-consent { display: flex; align-items: flex-start; gap: var(--sk-space-3); font-size: var(--sk-text-sm); color: var(--sk-color-ink-body); cursor: pointer; min-height: 44px; padding-top: var(--sk-space-1); }
.sk-consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sk-color-brand); }
.sk-optin__note { font-size: var(--sk-text-xs); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-4); }
.sk-optin[data-sk-state="unconfigured"] .sk-optin__form { display: none; }
.sk-optin__pending { display: none; }
.sk-optin[data-sk-state="unconfigured"] .sk-optin__pending {
  display: block; margin-top: var(--sk-space-6); padding: var(--sk-space-5);
  border: 1px solid var(--sk-color-border); border-left: 3px solid var(--sk-color-brand);
  border-radius: 0 var(--sk-radius-md) var(--sk-radius-md) 0;
  background: var(--sk-color-brand-soft);
}
.sk-optin__pendingTitle { font-size: var(--sk-text-base); font-weight: 650; color: var(--sk-color-ink-strong); }
.sk-optin__pendingBody { font-size: var(--sk-text-sm); color: var(--sk-color-ink-body); margin-top: var(--sk-space-2); }

/* --- Page meta bar / E-E-A-T --------------------------------------------- */
.sk-metabar {
  display: flex; flex-wrap: wrap; gap: var(--sk-space-2) var(--sk-space-5);
  margin-top: var(--sk-space-5); padding-top: var(--sk-space-4);
  border-top: 1px solid var(--sk-color-border);
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted);
}
.sk-metabar__item { display: inline-flex; align-items: center; gap: var(--sk-space-2); }
.sk-metabar__item svg { width: 15px; height: 15px; flex: none; color: var(--sk-color-brand); }
.sk-metabar__item b { color: var(--sk-color-ink-strong); font-weight: 600; }

.sk-audience {
  margin-top: var(--sk-space-6); border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-md); background: var(--sk-color-surface-sunken);
  padding: var(--sk-space-5);
}
.sk-audience__title { font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-color-ink-muted); }
.sk-audience__list { margin-top: var(--sk-space-3); display: flex; flex-wrap: wrap; gap: var(--sk-space-2); }
.sk-audience__list li {
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-body);
  border: 1px solid var(--sk-color-border); border-radius: 999px;
  padding: var(--sk-space-1) var(--sk-space-3); background: var(--sk-color-surface);
}

.sk-author {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-raised); padding: var(--sk-space-6);
}
.sk-author__review {
  margin-top: var(--sk-space-4); padding-top: var(--sk-space-4);
  border-top: 1px solid var(--sk-color-border);
  font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted);
}

/* --- Authority trust asset (platform standard) ----------------------------
   One component, three layouts, selected automatically from the client's best
   available asset: owner portrait > team photograph > logo. Layout is driven by
   the data-sk-trust attribute, set at runtime from configuration. No redesign
   is required to move a client between tiers. */
.sk-trust {
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-raised); overflow: hidden;
}
.sk-trust__media { display: none; }
.sk-trust__body { padding: var(--sk-space-6); }
.sk-trust__name { font-size: var(--sk-text-md); font-weight: 650; color: var(--sk-color-ink-strong); letter-spacing: -0.014em; }
.sk-trust__role { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); margin-top: var(--sk-space-1); }
.sk-trust__bio { font-size: var(--sk-text-sm); color: var(--sk-color-ink-body); margin-top: var(--sk-space-4); }
.sk-trust__bio p + p { margin-top: var(--sk-space-3); }
.sk-trust__credential {
  display: flex; align-items: center; gap: var(--sk-space-5);
  margin-top: var(--sk-space-5); padding-top: var(--sk-space-5);
  border-top: 1px solid var(--sk-color-border);
  flex-wrap: wrap;
}
.sk-trust__badges { display: flex; align-items: center; gap: var(--sk-space-4); flex: none; }
/* Fixed height, auto width: portrait and landscape badges sit on one baseline.
   !important guards against blanket host `img` sizing rules. */
.sk .sk-trust__badge { height: 78px !important; width: auto !important; flex: none; }
@media (max-width: 479px) { .sk .sk-trust__badge { height: 64px !important; } }
.sk-trust__credentialText { flex: 1 1 220px; }
.sk-trust__credentialText { font-size: var(--sk-text-sm); color: var(--sk-color-ink-body); }
.sk-trust__credentialText b { color: var(--sk-color-ink-strong); font-weight: 650; }

/* Tier 3 — logo: a refined authority card in the client's own branding */
.sk-trust[data-sk-trust="logo"] .sk-trust__media {
  display: flex; align-items: center; justify-content: flex-start;
  padding: var(--sk-space-6) var(--sk-space-6) 0;
}
.sk .sk-trust[data-sk-trust="logo"] .sk-trust__media img {
  height: 72px !important; width: auto !important; max-width: 340px;
}
.sk-trust[data-sk-trust="logo"] .sk-trust__body { padding-top: var(--sk-space-5); }

/* Tier 1 — owner or leadership portrait: editorial profile layout */
.sk-trust[data-sk-trust="portrait"] .sk-trust__media { display: block; }
.sk-trust[data-sk-trust="portrait"] .sk-trust__media img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
@media (min-width: 700px) {
  .sk-trust[data-sk-trust="portrait"] { display: grid; grid-template-columns: 240px 1fr; align-items: stretch; }
  .sk-trust[data-sk-trust="portrait"] .sk-trust__media { height: 100%; min-height: 280px; }
}
@media (max-width: 699px) {
  .sk-trust[data-sk-trust="portrait"] .sk-trust__media img { max-height: 320px; object-position: center 20%; }
}

/* Tier 2 — team photograph: wider organization profile */
.sk-trust[data-sk-trust="team"] .sk-trust__media { display: block; }
.sk-trust[data-sk-trust="team"] .sk-trust__media img {
  display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: center;
}

/* Editorial standards panel */
.sk-editorial {
  margin-top: var(--sk-space-6);
  border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg);
  background: var(--sk-color-surface-sunken); padding: var(--sk-space-6);
}
.sk-editorial__title {
  font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sk-color-brand); margin-bottom: var(--sk-space-4);
}
.sk-editorial__list { display: grid; gap: var(--sk-space-4); }
.sk-editorial__list li { font-size: var(--sk-text-sm); color: var(--sk-color-ink-body); }
.sk-editorial__list b { color: var(--sk-color-ink-strong); font-weight: 650; display: block; margin-bottom: 2px; }

/* --- FAQ groups ----------------------------------------------------------- */
.sk-faqgroup { margin-top: var(--sk-space-10); }
.sk-faqgroup:first-of-type { margin-top: 0; }
.sk-faqgroup__title {
  font-size: var(--sk-text-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sk-color-brand);
  padding-bottom: var(--sk-space-3); margin-bottom: var(--sk-space-4);
  border-bottom: 1px solid var(--sk-color-border);
}

/* --- Related services / internal links ------------------------------------ */
.sk-related { display: grid; gap: var(--sk-space-3); }
@media (min-width: 640px) { .sk-related { grid-template-columns: repeat(2, 1fr); } }
.sk-related__link {
  display: flex; align-items: baseline; gap: var(--sk-space-3);
  padding: var(--sk-space-4); border: 1px solid var(--sk-color-border);
  border-radius: var(--sk-radius-md); background: var(--sk-color-surface-raised);
  text-decoration: none; color: inherit; min-height: 44px;
  transition: border-color var(--sk-dur-fast) var(--sk-ease), background-color var(--sk-dur-fast) var(--sk-ease);
}
.sk-related__link:hover { border-color: var(--sk-color-border-strong); background: var(--sk-color-surface-sunken); color: inherit; }
.sk-related__name { font-size: var(--sk-text-sm); font-weight: 650; color: var(--sk-color-brand); }
.sk-related__desc { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); }

/* --- Sources -------------------------------------------------------------- */
.sk-sources { max-width: var(--sk-measure); display: grid; gap: var(--sk-space-3); }
.sk-sources li { font-size: var(--sk-text-sm); color: var(--sk-color-ink-muted); }
.sk-sources a { font-weight: 600; }

/* --- Motion --------------------------------------------------------------- */
.sk-reveal { opacity: 0; transform: translateY(14px); }
.sk-is-ready .sk-reveal {
  transition: opacity var(--sk-dur-slow) var(--sk-ease), transform var(--sk-dur-slow) var(--sk-ease);
}
.sk-reveal.sk-in { opacity: 1; transform: none; }
.sk-no-motion .sk-reveal, .sk-no-motion .sk-reveal.sk-in { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .sk *, .sk *::before, .sk *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sk-reveal { opacity: 1; transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
/* --- Printable resource pattern (platform standard) -----------------------
   Any element marked [data-sk-printable] gets a generated action bar. Printing
   renders the resource into a standalone document (see the script), so the host
   page is never printed and no host-CMS selectors are referenced here. */
.sk-actionbar {
  display: flex; flex-wrap: wrap; gap: var(--sk-space-3);
  margin-top: var(--sk-space-6); padding-top: var(--sk-space-5);
  border-top: 1px solid var(--sk-color-border);
}

/* If a visitor prints the page itself (Ctrl+P) rather than a resource, strip the
   screen-only furniture. This is a courtesy path — the resource Print action
   never uses it. */
@media print {
  .sk-subnav, .sk-masthead, .sk-hero__actions, .sk-cta__actions,
  .sk-readout__actions, .sk-skiplink, .sk-btn, .sk-actionbar,
  .sk-disclosure__chev, .sk-ctaband, .sk-config-warning { display: none !important; }
  .sk { background: #fff; color: #000; }
  .sk-card, .sk-disclosure, .sk-area, .sk-readout { box-shadow: none !important; }
  .sk-checklist li, .sk-note, .sk-callout, .sk-summary, .sk-example,
  .sk-figure, .sk-table-wrap, tr { break-inside: avoid; page-break-inside: avoid; }
}

/* --- Motion --------------------------------------------------------------- */
.sk-reveal { opacity: 0; transform: translateY(14px); }
.sk-is-ready .sk-reveal {
  transition: opacity var(--sk-dur-slow) var(--sk-ease), transform var(--sk-dur-slow) var(--sk-ease);
}
.sk-reveal.sk-in { opacity: 1; transform: none; }
.sk-no-motion .sk-reveal, .sk-no-motion .sk-reveal.sk-in { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .sk *, .sk *::before, .sk *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sk-reveal { opacity: 1; transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
/* --- Printable resource pattern (platform standard) -----------------------
   Any element marked [data-sk-printable] gets a generated action bar and a
   generated print masthead. No per-resource JavaScript or CSS is required.
   Browser-native: no external PDF service, no server round trip. */
.sk-actionbar {
  display: flex; flex-wrap: wrap; gap: var(--sk-space-3);
  margin-top: var(--sk-space-6); padding-top: var(--sk-space-5);
  border-top: 1px solid var(--sk-color-border);
}

/* --- Embedded mode -------------------------------------------------------
   Applied only when js/embed.js detects the page is inside an iframe. The
   parent sizes the frame to the reported content height, so this document
   must not also produce its own scrollbar. Has no effect when the site is
   visited directly. */
html.sk-embedded, html.sk-embedded body { overflow-y: hidden; }
html.sk-embedded body { margin: 0; }
/* Remove the one viewport-relative height in the layout while embedded. In a
   full-height iframe 100vh equals the frame height, which would make content
   height depend on frame height — the exact feedback path the measurement is
   designed to avoid. The sticky panel has no scroll container to stick to in an
   embed anyway, so nothing is lost visually. */
html.sk-embedded .sk-readout { position: static; max-height: none; overflow-y: visible; }