/* New colour or typography values: none. Shared page classes are supplied by the host. */
.kx-hww-heading { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.kx-hww-stepper { color: #202d32; font-family: var(--site-body, NexusInter, Inter, system-ui, sans-serif); max-width: 1200px; margin: 0 auto; }
.kx-hww-stepper * { box-sizing: border-box; }
.kx-hww-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; margin: 0 0 40px; }
.kx-hww-tabs::before { content: ""; position: absolute; height: 1px; background: #d6e2ea; top: 28px; left: 12.5%; right: 12.5%; }
.kx-hww-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px 8px; color: #526b7e; text-decoration: none; font: 600 18px/25.2px NexusManrope, Manrope, system-ui, sans-serif; letter-spacing: -.18px; border-radius: 16px; touch-action: manipulation; }
.kx-hww-marker { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #d6e2ea; border-radius: 50%; background: #fafbfc; transition: background-color 180ms ease, border-color 180ms ease; }
.kx-hww-icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.kx-hww-tab:hover { color: #14638f; }
.kx-hww-tab:hover .kx-hww-marker { background: #dbeaf4; border-color: #2180b8; }
.kx-hww-tab:active .kx-hww-marker { transform: scale(.96); }
.kx-hww-tab[aria-selected="true"] { color: #14638f; }
.kx-hww-tab[aria-selected="true"] .kx-hww-marker { background: #173249; color: #ffffff; border-color: #173249; box-shadow: 0 0 0 5px #dbeaf4; }
.kx-hww-tab:focus-visible, .kx-hww-panel:focus-visible { outline: 3px solid #2180b8; outline-offset: 6px; }
.kx-hww-panels { display: grid; gap: 32px; }
.kx-hww-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 56px; border: 1px solid #d6e2ea; border-radius: 24px; padding: 40px; background: #edf3f8; }
.kx-hww-panel[hidden] { display: none; }
.kx-hww-intro { padding: 8px; }
.kx-hww-stage { display: inline-block; margin: 0 0 24px; padding: 8px 16px; border: 1px solid #d4e6f0; border-radius: 999px; color: #14638f; background: #ffffff; font: 600 13px/18.2px var(--site-body, NexusInter, Inter, system-ui, sans-serif); }
.kx-hww-title { margin: 0; max-width: 14ch; font: 600 30px/37.5px NexusManrope, Manrope, system-ui, sans-serif; letter-spacing: -.6px; text-wrap: balance; }
.kx-hww-description { margin: 20px 0 0; max-width: 34ch; color: #606b70; font-size: 18px; line-height: 29.7px; font-weight: 400; }
.kx-hww-document { min-width: 0; padding: 30px; background: #ffffff; border: 1px solid #d6e2ea; border-top: 3px solid #2180b8; border-radius: 16px; box-shadow: 0 12px 0 -6px #dbeaf4; }
.kx-hww-document-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.kx-hww-document-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #173249; color: #ffffff; }
.kx-hww-label { color: #526b7e; font-size: 13px; line-height: 18.2px; font-weight: 600; }
.kx-hww-document-title { margin: 0; font: 600 26px/31.2px NexusManrope, Manrope, system-ui, sans-serif; letter-spacing: -.52px; }
.kx-hww-document-subtitle { margin: 8px 0 24px; color: #606b70; font-size: 16px; line-height: 27.2px; font-weight: 400; }
.kx-hww-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.kx-hww-tile { padding: 16px; background: #fafbfc; border: 1px solid #d6e2ea; border-radius: 16px; }
.kx-hww-tile .kx-hww-icon { width: 20px; height: 20px; color: #14638f; margin-bottom: 14px; }
.kx-hww-tile-label { margin: 0 0 6px; font-size: 13px; line-height: 18.2px; font-weight: 600; }
.kx-hww-tile p { margin: 0; color: #606b70; font-size: 16px; line-height: 24.8px; font-weight: 400; }
@media (max-width: 900px) {
  .kx-hww-panel { gap: 28px; padding: 24px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .kx-hww-document { padding: 24px; }
}
@media (max-width: 700px) {
  .kx-hww-heading { margin-bottom: 32px; }
  .kx-hww-tabs { margin-bottom: 28px; }
  .kx-hww-tabs::before { top: 22px; }
  .kx-hww-tab { gap: 12px; padding: 0 0 8px; font: 600 13px/18.2px var(--site-body, NexusInter, Inter, system-ui, sans-serif); letter-spacing: normal; }
  .kx-hww-marker { width: 44px; height: 44px; }
  .kx-hww-marker .kx-hww-icon { width: 20px; height: 20px; }
  .kx-hww-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 20px 12px; border-radius: 24px; }
  .kx-hww-intro { padding: 4px 8px 0; }
  .kx-hww-stage { margin-bottom: 16px; padding: 6px 12px; }
  .kx-hww-title { max-width: 22ch; font-size: 24px; line-height: 28.8px; letter-spacing: -.48px; }
  .kx-hww-description { margin-top: 12px; font-size: 16px; line-height: 26.4px; }
  .kx-hww-document { padding: 20px 12px; }
  .kx-hww-document-top { gap: 10px; margin-bottom: 20px; }
  .kx-hww-document-title { font-size: 22px; line-height: 27.5px; letter-spacing: -.44px; }
  .kx-hww-document-subtitle { font-size: 15px; line-height: 25.5px; margin-bottom: 20px; }
  .kx-hww-tiles { gap: 8px; }
  .kx-hww-tile { padding: 12px 10px; overflow-wrap: anywhere; }
  .kx-hww-tile p { font-size: 15px; line-height: 25.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-hww-marker { transition: none; }
  .kx-hww-tab:active .kx-hww-marker { transform: none; }
}
@media (forced-colors: active) {
  .kx-hww-tab[aria-selected="true"] .kx-hww-marker { outline: 3px solid; outline-offset: 3px; }
}

/* Phones: the four parts stack, so long values are not squeezed into two narrow columns (13 Oct). */
@media (max-width: 600px) {
  .kx-hww-tiles { grid-template-columns: minmax(0, 1fr); }
}