.toc{overflow-y:auto}.toc>.toc-list{overflow:hidden;position:relative}.toc>.toc-list li{list-style:none}.toc-list{margin:0;padding-left:10px}a.toc-link{color:currentColor;height:100%}.is-collapsible{max-height:1000px;overflow:hidden;transition:all 300ms ease-in-out}.is-collapsed{max-height:0}.is-position-fixed{position:fixed !important;top:0}.is-active-link{font-weight:700}.toc-link::before{background-color:#eee;content:" ";display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:2px}.is-active-link::before{background-color:#54bc4b}

:root{
    --k15t-color-night-n25: #f7f8fc;
    --k15t-color-night-n50: #F2F3F7;
    --k15t-color-night-n100: #E7E9EE;
    --k15t-color-night-n200: #D5D7DD;
    --k15t-color-night-n300: #AAAEBB;
    --k15t-color-night-n400: #80869A;
    --k15t-color-night-n500: #555D78;
    --k15t-color-night-n600: #2B3556;
    --k15t-color-night-n700: #000C34;

    --k15t-color-red-r25: #FFF0F0;
    --k15t-color-red-r50: #FFDCDC;
    --k15t-color-red-r100: #FCC0C0;
    --k15t-color-red-r200: #F69896;
    --k15t-color-red-r300: #FC7D70;
    --k15t-color-red-r400: #EF6F5D;
    --k15t-color-red-r500: #F04E43;
    --k15t-color-red-r600: #E53C38;
    --k15t-color-red-r700: #D12A2A;

    --k15t-color-yellow-y25: #FFF8CF;
    --k15t-color-yellow-y50: #FFF8B6;
    --k15t-color-yellow-y100: #FFF799;
    --k15t-color-yellow-y200: #FFF383;
    --k15t-color-yellow-y300: #FFEB69;
    --k15t-color-yellow-y400: #FFDF4F;
    --k15t-color-yellow-y500: #FFC420;
    --k15t-color-yellow-y600: #F99D1C;
    --k15t-color-yellow-y700: #F76400;

    --k15t-color-green-g25: #DEFFEE;
    --k15t-color-green-g50: #C0FCE0;
    --k15t-color-green-g100: #A2FCD5;
    --k15t-color-green-g200: #75F9C3;
    --k15t-color-green-g300: #25E9A4;
    --k15t-color-green-g400: #30CE91;
    --k15t-color-green-g500: #2EB785;
    --k15t-color-green-g600: #16A86D;
    --k15t-color-green-g700: #008756;

    --k15t-color-blue-b25: #DCF8FF;
    --k15t-color-blue-b50: #C3EEFC;
    --k15t-color-blue-b100: #99E2FF;
    --k15t-color-blue-b200: #5AC0FF;
    --k15t-color-blue-b300: #0099FF;
    --k15t-color-blue-b400: #0086FF;
    --k15t-color-blue-b500: #1062FB;
    --k15t-color-blue-b600: #0D0DFC;
    --k15t-color-blue-b700: #0404A3;

    --k15t-color-purple-p25: #F2E9FF;
    --k15t-color-purple-p50: #E4D4FC;
    --k15t-color-purple-p100: #D1BAF4;
    --k15t-color-purple-p200: #BB9AE8;
    --k15t-color-purple-p300: #9C69D0;
    --k15t-color-purple-p400: #7C38B8;
    --k15t-color-purple-p500: #7032B2;
    --k15t-color-purple-p600: #5D07A0;
    --k15t-color-purple-p700: #45057C;
    --k15t-color-white: #ffffff;


    --k15t-font-akadmie-light: 'akademie-light', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-regular: 'akademie-regular', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-italic: 'akademie-italic', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-medium: 'akademie-medium', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-bold: 'akademie-bold', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-semibold: 'akademie-semibold', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-black: 'akademie-black', Helvetica, Arial, sans-serif;
    --k15t-font-akadmie-mono-light: 'akademie-mono-light', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-light-italic: 'akademie-mono-light-italic', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-regular: 'akademie-mono-regular', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-italic: 'akademie-mono-italic', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-medium: 'akademie-mono-medium', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-medium-italic: 'akademie-mono-medium-italic', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-bold: 'akademie-mono-bold', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-bold-italic: 'akademie-mono-bold-italic', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-black: 'akademie-mono-black', 'Courier New', Courier, monospace;
    --k15t-font-akadmie-mono-black-italic: 'akademie-mono-black-italic', 'Courier New', Courier, monospace;
    --k15t-font-untitled-regular: 'untitled-regular', Helvetica, Arial, sans-serif;
    --k15t-font-untitled-medium: 'untitled-medium', Helvetica, Arial, sans-serif;
    --k15t-font-mega-outline-glow: 'mega-midi-outline-glow', Helvetica, Arial, sans-serif;


    --k15t-font-size-2x-small: 0.625rem; /* => 10px */
    --k15t-font-size-x-small: 0.75rem; /* => 12px */
    --k15t-font-size-small: 0.8125rem; /* => 13px */
    --k15t-font-size-medium: 1rem; /* => 16px -> lineheight 20px */
    --k15t-font-size-medium-large: 1.25rem; /* => 20px Paragraph */
    --k15t-font-size-large: 1.5rem; /* => 24px Header Text */
    --k15t-font-size-x-large: 2rem; /* => 32px */
    --k15t-font-size-2x-large: 3rem; /* => 48px */
    --k15t-font-size-3x-large: 3.75rem; /* => 60px */
    --k15t-font-size-4x-large: 4.5rem; /* => 72px Main Heading */


    --k15t-line-height-x-small: 1.1;
    --k15t-line-height-small: 1.3;
    --k15t-line-height-medium: 20px;
    --k15t-line-height-large: 1.5;

    --k15t-gap-x-small: .5rem; /* => 8px */
    --k15t-gap-small: 1rem; /* => 16px */
    --k15t-gap-medium: 1.5rem; /* => 24px */
    --k15t-gap-large: 2rem; /* => 32px */
    --k15t-gap-x-large: 2.5rem; /* => 40px */
    --k15t-gap-2x-large: calc(2* var(--k15t-gap-large)); /* => 64px */
    --k15t-gap-3x-large: calc(2* var(--k15t-gap-x-large)); /* => 80px */


    --k15t-radius-x-small: 5px;
    --k15t-radius-small: 8px;
    --k15t-radius-medium: 10px;
    --k15t-radius-large: 15px;
    --k15t-radius-circle: 50%;
    --k15t-radius-pill: calc(1000px * 0.0375);


    --k15t-icon-size-small: 12px;
    --k15t-icon-size-medium: 24px;
    --k15t-icon-size-large: 32px;
}
:root {
    --k15t-content-layout-max-width: 1220px;

    --k15t-font-heading: var(--k15t-font-untitled-medium);
    --k15t-font-subheading: var(--k15t-font-akadmie-bold);
    --k15t-font-text: var(--k15t-font-akadmie-regular);

    --k15t-line-height-subheading: var(--k15t-line-height-small);

    --k15t-color-background: var(--k15t-color-night-n50);
    --k15t-color-background-transparent: rgba(0,12,52, .75);
    --k15t-color-surface-translucent: rgba(255, 255, 255, .3); /* chip/label fill on editor-colored backgrounds */

    --k15t-button-color: var(--k15t-color-night-n700);
    --k15t-button-color-hovered: var(--k15t-color-night-n50);
    --k15t-button-font-size: 18px;
    --k15t-button-text-color: var(--k15t-color-night-n50);
    --k15t-button-text-color-hovered: var(--k15t-color-night-n700);

    --k15t-button-secondary-color: var(--k15t-color-white);
    --k15t-button-secondary-color-hover: var(--k15t-color-night-n200);
    --k15t-button-secondary-text-color: var(--k15t-color-night-n700);
    --k15t-button-secondary-text-color-hovered: var(--k15t-color-night-n700);

    --k15t-box-shadow: var(--k15t-color-night-n700) 0 10px 0;

    --k15t-border-standard: 2px solid var(--k15t-color-night-n700);
    --k15t-border-radius: var(--k15t-radius-small);
    --k15t-border-radius-circle: var(--k15t-radius-circle);

    --k15t-box-border-radius: 0 40px 40px 40px;
    --k15t-box-border: 3px solid;

    --k15t-card-hover-blanket-color: var(--k15t-color-night-n700);
    --k15t-card-img-scale: 1;
    --k15t-card-img-hover-scale: 1.05;


    /* --- Semantic color tokens --- */
    /* Text colors */
    --k15t-color-text-primary: var(--k15t-color-night-n700);        /* Main body text and headings */
    --k15t-color-text-secondary: var(--k15t-color-night-n500);      /* Supporting/muted text, captions */
    --k15t-color-text-tertiary: var(--k15t-color-night-n400);       /* Subtle labels, placeholders */
    --k15t-color-text-link: var(--k15t-color-blue-b500);            /* Inline text links */
    --k15t-color-text-on-dark: var(--k15t-color-white);             /* Text on dark backgrounds */

    /* Surface colors */
    --k15t-color-surface: var(--k15t-color-white);                  /* Default page/card surface */
    --k15t-color-surface-sunken: var(--k15t-color-night-n50);       /* Recessed/secondary surfaces */

    /* Border & divider colors */
    --k15t-color-border-subtle: var(--k15t-color-night-n100);       /* Light dividers, table borders */
    --k15t-color-border-default: var(--k15t-color-night-n200);      /* Standard borders */

    /* Interactive element colors */
    --k15t-color-focus-ring: var(--k15t-color-blue-b400);           /* Focus outlines for accessibility */
    --k15t-color-interactive: var(--k15t-color-blue-b400);          /* Interactive accents (share icons, form links, hover borders) */
}
.bg-gradient {
    background: linear-gradient(
            308deg,
            var(--k15t-color-purple-p300),
            var(--k15t-color-purple-p200),
            var(--k15t-color-purple-p300)
    );
    background-size: 600% 600%;

    -webkit-animation: gradientAnimation 60s ease infinite;
    -moz-animation: gradientAnimation 60s ease infinite;
    animation: gradientAnimation 60s ease infinite;
}

@-webkit-keyframes gradientAnimation {
    0%{background-position:0% 10%}
    50%{background-position:100% 90%}
    100%{background-position:0% 10%}
}
@-moz-keyframes gradientAnimation {
    0%{background-position:0% 10%}
    50%{background-position:100% 90%}
    100%{background-position:0% 10%}
}
@keyframes gradientAnimation {
    0%{background-position:0% 10%}
    50%{background-position:100% 90%}
    100%{background-position:0% 10%}
}

.lds-ring,
.lds-ring div {
    box-sizing: border-box;
}
.lds-ring {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid currentColor;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.animation-ping:after {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
@font-face {
    font-family: 'akademie-light';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_light-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_light-webfont.woff') format('woff');
}

@font-face {
    font-family: 'akademie-regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_regular-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'akademie-medium';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_medium-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_medium-webfont.woff') format('woff');
}

@font-face {
    font-family: 'akademie-bold';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_bold-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_bold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'akademie-semibold';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_semibold-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_semibold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'akademie-black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_black-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_black-webfont.woff') format('woff');
}

@font-face {
    font-family: 'akademie-italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_italic-webfont.woff2') format('woff2'),
    url('../fonts/nb_akademie_italic-webfont.woff') format('woff');
}

/* No woff file exists for untitled-regular — woff2 only */
@font-face {
    font-family: 'untitled-regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/UntitledSerifWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'untitled-medium';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/UntitledSerifWeb-Medium.woff2') format('woff2'),
    url('../fonts/UntitledSerifWeb-Medium.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-light';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_light.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_light.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-light-italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_light_italic.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_light_italic.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_regular.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_regular.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_italic.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_italic.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-medium';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_medium.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_medium.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-medium-italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_medium_italic.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_medium_italic.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-bold';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_bold.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_bold.woff') format('woff');
}

@font-face {
    font-family: 'akademie-mono-bold-italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_bold_italic.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_bold_italic.woff') format('woff');
}

/* No woff file exists for akademie-mono-black — woff2 only */
@font-face {
    font-family: 'akademie-mono-black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_black.woff2') format('woff2');
}

@font-face {
    font-family: 'akademie-mono-black-italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nb_akademie_mono_black_italic.woff2') format('woff2'),
    url('../fonts/nb_akademie_mono_black_italic.woff') format('woff');
}

*, html {
    box-sizing: border-box;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 12px 24px;
    background: var(--k15t-color-night-n700);
    color: var(--k15t-color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--k15t-border-radius) 0;
}

.skip-link:focus {
    top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

html {
    background-color: var(--k15t-color-surface);
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body * {
    font-variant-ligatures: none;
}

figure {
    margin: 0;
}

figure img {
    max-width: 100%;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
}

.container {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-2x-large);
    max-width: 1298px; /* padding (48px) + container width (1220px) */
    margin: 0 auto;
    padding: 0 var(--k15t-gap-medium);
}

main > :first-child:has(.infoBox) {
    padding-top: 130px;
}

header + main > :first-child:not(:has(.infoBox)) {
    padding-top: 170px;
}

.module-wrapper {
    padding: var(--k15t-gap-3x-large) 0;
}

.module-wrapper.module-wrapper--small {
    padding: 40px 0;
}


.module-wrapper:has(.infoBox) {
    padding: var(--k15t-gap-large) 0;
}

main > :first-child:not(:has(.infoBox)) {
    padding-top: 170px;
}

.module-wrapper--header {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.module-wrapper--header-small {
    padding-top: 150px;
}

.module-wrapper--logoStripe {
    padding: var(--k15t-gap-large) 0;
}

.module-wrapper--thinStripe {
    padding: var(--k15t-gap-medium) 0;
}

.clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.clamp--1 {
    -webkit-line-clamp: 1;
}

.clamp--3 {
    -webkit-line-clamp: 3;
}

.clamp--5 {
    -webkit-line-clamp: 5;
}

.sticky {
    position: sticky;
}

.sticky--top {
    top: 100px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.border-standard {
    border: var(--k15t-border-standard);
}

.k15t-slider-swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}

.k15t-slider-swipe-wrap {
    overflow: hidden;
    position: relative;
}

.k15t-slider-swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media(max-width: 1200px) {
    main > :first-child {
        padding-top: 120px;
    }
}


/* Tablet */
@media(max-width: 1024px) {
    header + main > :first-child:not(:has(.infoBox)) {
        padding-top: 110px;
    }

    .flex-row {
        flex-direction: column;
    }

    .container {
        gap: var(--k15t-gap-x-large);
        max-width: 1024px;
    }
}

/* Smartphone */
@media(max-width: 768px) {

    header + main > :first-child:not(:has(.infoBox)),
    main > :first-child:not(:has(.infoBox)) {
        padding-top: 110px;
        padding-bottom: 50px;
    }

    .container {
        gap: var(--k15t-gap-large);
        max-width: 100%;
    }
}
*, html {
    -webkit-text-size-adjust: 100%;
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-text);
    color: var(--k15t-color-night-n700);
}

/* Inline-editable property wrappers must not break parent color inheritance.
   The universal `*` selector above sets `color` directly, which would otherwise
   override the parent's color on every [data-prop] span (e.g. button text on
   dark backgrounds). Applied globally because helper macros emit [data-prop]
   on production pages too, not just inside the docs shell. */
[data-prop] {
    color: inherit;
}

h1 {
    font-family: var(--k15t-font-heading);
    font-weight: 400;
    font-size: var(--k15t-font-size-4x-large);
    margin: 0;
}

h2, h3, h4, h5, h6 {
    font-family: var(--k15t-font-akadmie-medium);
    font-weight: 400;
    margin: 0;
}

h2 {
    font-size: var(--k15t-font-size-2x-large);
}

h3 {
    font-size: var(--k15t-font-size-x-large);
    line-height: 1.4;
}

h4 {
    font-size: var(--k15t-font-size-large);
}

h5 {
    font-size: var(--k15t-font-size-medium);
}

h6 {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-medium);
}

p, a {
    font-size: var(--k15t-font-size-medium-large);
    margin: 0;
    padding: 0;
    line-height: var(--k15t-line-height-large);
}

/* Tablet */
@media(max-width: 1024px) {
    h1 {
        font-size: var(--k15t-font-size-2x-large);
        margin: var(--k15t-gap-x-large) 0 0;
    }

    h2 {
        font-size: var(--k15t-font-size-x-large);
    }

    h3 {
        font-size: var(--k15t-font-size-large);
    }

    h4 {
        font-size: var(--k15t-font-size-medium-large);
    }

    h5 {
        font-size: var(--k15t-font-size-medium);
    }

    p, a {
        font-size: var(--k15t-font-size-medium);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    h1 {
        font-size: var(--k15t-font-size-x-large);
        margin: var(--k15t-gap-x-large) 0 0;
    }

    h2 {
        font-size: var(--k15t-font-size-large);
    }

    h3 {
        font-size: var(--k15t-font-size-medium-large);
    }

    h4 {
        font-size: var(--k15t-font-size-medium);
    }

    h5 {
        font-size: var(--k15t-font-size-medium);
    }

    p, a {
        font-size: var(--k15t-font-size-medium);
    }
}
.footer {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
}

.footer .footer-category-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--k15t-gap-2x-large);
    justify-content: space-between;
}

.footer .footer-category-container,
.footer .footer-subCategory-container {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-category {
    color: var(--k15t-color-text-on-dark);
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
    margin-bottom: var(--k15t-gap-medium);
}

.footer-logo-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.footer-logo-container > img {
    height: 100%;
    max-width: 113px;
}

.footer-link {
    margin-bottom: var(--k15t-gap-small);
}

.footer-link > a.link {
    color: var(--k15t-color-text-on-dark);
    text-decoration: none;
    font-size: var(--k15t-font-size-medium);
}

.footer-link > a.link:hover {
    text-decoration: underline;
}

.footer-attribution {
    flex-flow: wrap-reverse;
    gap: var(--k15t-gap-large);
    padding: var(--k15t-gap-large);
    background-color: var(--k15t-color-night-n700);
    justify-content: space-between;
    border-top: 1px solid var(--k15t-color-night-n500);
}

.footer-attribution > div {
    gap: var(--k15t-gap-large);
    align-items: center;
}

.footer-attribution-text {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k15t-gap-medium);
}

.footer-attribution-text > span > a.link {
    line-height: 1.2;
}

.footer-attribution-text > span,
.footer-attribution-text > span > a.link,
.footer-attribution-text > a.link,
.footer-attribution-text > span > current-year,
.footer-attribution-text > button.link {
    color: var(--k15t-color-text-on-dark);
    font-size: var(--k15t-font-size-medium);
}

.footer-attribution-text > a.link,
.footer-attribution-text > span > a.link,
.footer-attribution-text > button.link {
    font-size: var(--k15t-font-size-medium);
}

.footer-attribution-social {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-large);
}

.social-icon {
    border-radius: var(--k15t-border-radius-circle);
    width: 40px;
    height: 40px;
}

.social-icon:hover {
    background-position: center;
}

.social-icon-facebook {
    background-image: url("../images/icons/social/facebook.svg");
}
.social-icon-facebook:hover {
    background-image: url("../images/icons/social/facebook-hover.svg");
}

.social-icon-instagram {
    background-image: url("../images/icons/social/instagram.svg");
}
.social-icon-instagram:hover {
    background-image: url("../images/icons/social/instagram-hover.svg");
}

.social-icon-linkedin {
    background-image: url("../images/icons/social/linkedin.svg");
}
.social-icon-linkedin:hover {
    background-image: url("../images/icons/social/linkedin-hover.svg");
}

.social-icon-tiktok {
    background-image: url("../images/icons/social/tiktok.svg");
}
.social-icon-tiktok:hover {
    background-image: url("../images/icons/social/tiktok-hover.svg");
}

.social-icon-youtube {
    background-image: url("../images/icons/social/youtube.svg");
}
.social-icon-youtube:hover {
    background-image: url("../images/icons/social/youtube-hover.svg");
}

/* Tablet */
@media(max-width: 1024px) {
    .footer {
        display: none;
    }


    .footer-attribution > div {
        align-items: unset;
    }

    .footer-attribution-social {
        flex-direction: row;
        justify-content: center;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .footer-attribution-text {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .footer-logo-container {
        flex-direction: column;
        gap: var(--k15t-gap-large);
    }
}
body {
    --local-navigation-width: 1250px;
}


nav.navigation {
    position: fixed;
    display: flex;
    flex-direction: row;
    top: 0;
    width: 100%;
    justify-content: center;
    padding: 0 var(--k15t-gap-small);
    background-color: transparent;
    z-index: 999;
}

.navigation__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--k15t-color-surface);
    z-index: 0;
}

.navigation__wrapper {
    display: flex;
    max-width: var(--local-navigation-width);
    width: 100%;
    position: relative;
    padding: var(--k15t-gap-medium) 0;
}

.navigation__menus {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-3x-large);
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
}

.navigation__menus--logo > img {
    width: 96px;
}

.navigation__menus--mobile {
    display: none;
}

.navigation__menus--mobile > img {
    width: var(--k15t-icon-size-large);
}

.navigation__entries--mobile-button {
    display: none;
}

.navigation__entries {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-medium);
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation__entries li button,
.navigation__entries li a.link {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-small);
    align-items: center;
    padding: var(--k15t-gap-x-small) var(--k15t-gap-small);
    min-height: 44px;
    border-radius: 100px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.navigation__entries li:hover button,
.navigation__entries li:hover a.link,
.navigation__entries li.is-active button,
.navigation__entries li.is-active a.link,
.navigation__entries li.is-open button,
.navigation__entries li.is-open a.link {
    background-color: var(--k15t-color-night-n50);
}

.navigation__entries--mobile-button a.link,
.navigation__entries li button span,
.navigation__entries li a.link span {
    position: relative;
    font-size: var(--k15t-font-size-medium);
}


.navigation__entries__icon {
    width: 20px;
    height: auto;
    transform: rotate(0deg);
}

.navigation__entries li.is-open .navigation__entries__icon {
    transform: rotate(180deg);
}

/* BLANKET */

.blanket {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(9, 30, 66, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    z-index: 997;
}

.blanket--active {
    opacity: 1;
    visibility: visible;
}

/* Sub-Navigation */

.navigation__button {
    position: relative;
    z-index: 2;
}

.subNavigation {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: calc(100% + 5px);
    padding: 0;
    gap: var(--k15t-gap-2x-large);
    justify-content: center;
    right: 0;
    left: calc(100px + var(--k15t-gap-3x-large));
    width: auto;
    background-color: var(--k15t-color-surface);
    z-index: -1;
    max-height: 90vh;
    border-radius: var(--k15t-radius-small);
}

.subNavigation::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: transparent;
}

.subNavigation__container {
    display: flex;
    max-width: var(--local-navigation-width);
    height: 100%;
    width: 100%;
    border-radius: var(--k15t-radius-small);
    overflow: hidden;
    padding: var(--k15t-gap-medium);
}

.subNavigation__container__element {
    display: flex;
    position: relative;
    width: 100%;
}

.subNavigation__container__element--promotion {
    background-color: var(--k15t-color-purple-p50);
}

.subNavigation__container__element--border::after {
    content: ' ';
    width: 1px;
    height: 100%;
    background: linear-gradient(#1062FB, #FFFFFF);
    position: absolute;
    right: 0;
    top: 0;
}

.subNavigation__link--leftAlign {
    width: 100%;
}
.subNavigation__link--leftAlign a.link {
    margin-left: auto;
}


/* Sub-Naivgation List */


.subNavigation--transform {
    transform: translateY(-100%);
}

.subNavigation--transform--active {
    transform: translateY(0);
}

.subNavigation > div {
    display: none;
}

.subNavigation--mobile--navigateBack {
    display: none;
}

.secondLevelNavigation {
    display: flex;
    flex-direction: column;
}

[k15t-data="secondLevelContainer"] {
    display: flex;
    padding: var(--k15t-gap-medium) var(--k15t-gap-3x-large) var(--k15t-gap-3x-large);
    width: 100%;
}


/* Mobile Navigation (≤ 1024px) */
@media(max-width: 1024px) {
    nav.navigation {
        padding: var(--k15t-gap-x-small) var(--k15t-gap-large);
        z-index: 998;
    }

    .navigation__wrapper {
        padding-top: 0;
        padding-bottom: 0;
    }

    a.link.navigation__menus--logo > img {
        width: 80px;
    }

    .navigation__menus {
        justify-content: space-between;
    }

    .navigation__button {
        display: none;
    }

    .navigation__menus--mobile {
        display: flex;
    }

    .navigation__entries {
        display: none;
        align-items: start;
    }

    .navigation__entries--mobile {
        display: flex;
        position: fixed;
        flex-direction: column;
        top: 0;
        left: 0;
        padding: var(--k15t-gap-large) 0 0 var(--k15t-gap-large);
        margin-top: 60px;
        height: calc(100vh - 66px);
        width: 100vw;
        background-color: var(--k15t-color-surface);
        overflow-y: auto;
        z-index: 999;
    }

    .navigation__entries--mobile-button {
        display: flex;
        margin-top: 0;
    }

    .navigation__entries--mobile-button a.link {
        font-size: var(--k15t-font-size-medium);
    }

    .navigation__entries li button {
        width: 100%;
        justify-content: space-between;
    }

    .navigation__entries__icon {
        transform: rotate(-90deg);
    }

    /* Sub-Navigation mobile overlay */
    .subNavigation {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: calc(100vh - 73px);
        margin-top: 73px;
        overflow-y: auto;
        border-radius: 0;
        z-index: 1000;
    }

    .subNavigation--transform {
        transform: translateX(100%);
    }

    .subNavigation--transform--active {
        transform: translateX(0);
    }

    .subNavigation--mobile--navigateBack {
        display: flex;
        gap: var(--k15t-gap-x-small);
        align-items: center;
        padding: var(--k15t-gap-medium) 0;
        font-family: var(--k15t-font-akadmie-medium);
        font-size: var(--k15t-font-size-medium);
    }

    .subNavigation--mobile--navigateBack img {
        transform: rotate(180deg);
        width: 16px;
    }

    .subNavigation__container {
        max-width: 100vw;
        display: flex;
        flex-direction: column;
        padding: var(--k15t-gap-medium);
        padding-top: 0;
        padding-bottom: var(--k15t-gap-3x-large);
    }

    .subNavigation__container__element {
        flex-direction: column;
        overflow-y: auto;
        padding-top: 0;
    }

    .subNavigation__container__element:nth-child(odd),
    .subNavigation__container__element:nth-child(even) {
        padding: 0 0 var(--k15t-gap-medium) 0;
    }

    .subNavigation__container__element--border::after {
        display: none;
    }

    [k15t-data="secondLevelContainer"] {
        position: fixed;
        display: flex;
        top: 0;
        left: 0;
        flex-direction: column;
        width: 100vw;
        height: 100%;
        background: var(--k15t-color-surface);
        transform: translateX(100%);
        overflow: auto;
        padding: 0 var(--k15t-gap-medium) calc(2*var(--k15t-gap-3x-large)) var(--k15t-gap-medium);
    }

    a.link.subNavigation__card__link span:last-of-type {
        max-width: 100%;
    }

    .promoCard__media > img.promoCard--logo {
        height: 50px;
    }

    .navigation__menus--mobile {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ─── Skip link ──────────────────────────────────────────────────────────────
   Visually hidden until focused. Appears just below the nav bar on :focus.
   Uses top: -9999px (not clip/clip-path) so the element is reachable by
   Tab without needing JS. ──────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 1rem;
    z-index: 9999;
    background: var(--k15t-color-surface);
    color: var(--k15t-color-text-link);
    padding: 0.5rem 1rem;
    border-radius: var(--k15t-radius-small);
    border: 2px solid var(--k15t-color-focus-ring);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.skip-link:focus {
    top: calc(100% + 4px);
}

/* ─── Focus indicators ───────────────────────────────────────────────────────
   :focus-visible targets keyboard focus only, leaving mouse interactions
   unaffected. Outline matches --k15t-color-focus-ring (blue-b400). ──────── */
.navigation__entries li button:focus-visible,
.navigation__entries li a.link:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
    /* Preserve the pill shape of existing nav buttons */
    border-radius: 100px;
}

.navigation__menus--mobile:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--k15t-radius-small);
}

.subNavigation a:focus-visible,
.subNavigation button:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--k15t-radius-x-small);
}

.navigation__button .link-button:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
    /* Match the pill shape of .link-button (border-radius: 50px in linkButton.css) */
    border-radius: 50px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────
   All nav transitions are gated so users who prefer reduced motion get
   instant state changes with no animation. ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .navigation__entries li button,
    .navigation__entries li a.link {
        transition: background-color 250ms;
    }

    .navigation__entries__icon {
        transition: transform 250ms;
    }

    .blanket {
        transition: opacity ease-in-out 200ms, visibility 200ms;
    }

    .subNavigation {
        transition: transform ease-in-out 200ms;
    }

    [k15t-data="secondLevelContainer"] {
        transition: transform ease-in-out 200ms;
    }
}
.subNavigation__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}


.subNavigation__list__item {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 50%;
    padding: var(--k15t-gap-x-small);
    box-sizing: border-box;
}

.subNavigation__list__item--heading {
    font-size: 13px;
    text-transform: uppercase;
    font-family: var(--k15t-font-akadmie-medium);
    padding: 0 var(--k15t-gap-x-small) 8px;
    margin-bottom: var(--k15t-gap-small);
    color: var(--k15t-color-night-n500);
    letter-spacing: 0.5px;
}
.subNavigation__promotion {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    width: 100%;
}

.subNavigation__promotion h2 {
    font-size: 13px;
    font-family: var(--k15t-font-akadmie-medium);
    text-transform: uppercase;
    padding: 0 var(--k15t-gap-medium);
    color: var(--k15t-color-night-n500);
    letter-spacing: 0.5px;
}

.subNavigation__promotion__card {
    display: flex;
    gap: var(--k15t-gap-medium);
    width: 100%;
    max-width: 656px;
    padding: var(--k15t-gap-medium);
    border-radius: var(--k15t-radius-x-small);
    border: 1px solid var(--k15t-color-purple-p50);
}

.subNavigation__promotion__card--no-border {
    border: none;
}

.subNavigation__promotion__card:hover {
    background-color: var(--k15t-color-surface);
    border: 1px solid var(--k15t-color-interactive);
    text-decoration: none;
}

.subNavigation__promotion__card--no-border:hover {
    background-color: var(--k15t-color-surface);
}

.subNavigation__promotion__img {
    width: 100%;
    height: 100%;
    max-width: 160px;
    max-height: 90px;
}

.subNavigation__promotion__name {
    display: flex;
    flex-direction: column;
}

.subNavigation__promotion__name > h3 {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-regular);
}

.subNavigation__promotion__name > p {
    font-size: 14px;
    color: var(--k15t-color-night-n400);
}

@media(max-width: 1024px) {
    .subNavigation__promotion__card {
        flex-direction: column;
    }
}

.subNavigation__flyOut {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Featured block (Pattern A) */
.subNavigation__flyOut__featured {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0 48px 0;
    margin-bottom: 0;
    gap: 10px;
}

.subNavigation__flyOut__featured--logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    border-radius: var(--k15t-radius-x-small);
    flex-shrink: 0;
    padding: 7px;
    box-sizing: border-box;
}

.subNavigation__flyOut__featured--logo {
    max-height: 48px;
}

.subNavigation__flyOut__featured--text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.subNavigation__flyOut__featured--name {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-medium);
    margin: 0;
    line-height: 1.2;
}

.subNavigation__flyOut__featured--description-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-small);
}

.subNavigation__flyOut__featured--description {
    font-size: 14px;
    color: var(--k15t-color-night-n600);
    margin: 0;
    line-height: 1.4;
}

.subNavigation__flyOut__featured--description-link {
    font-size: 14px !important;
    white-space: nowrap;
}

.subNavigation__flyOut__featured--description-wrapper a.link.subNavigation__flyOut__featured--description-link > svg {
    height: 16px;
    width: 16px;
}

.subNavigation__flyOut__featured--cta {
    margin-left: auto;
}

/* Two-column container */
.subNavigation__flyOut__container {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

/* Category columns */
.subNavigation__flyOut__category {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(50% - 24px);
    width: calc(50% - 24px);
    max-width: calc(50% - 24px);
    min-width: calc(50% - 24px);
    padding: var(--k15t-gap-x-small) 0;
    box-sizing: border-box;
}

.subNavigation__flyOut__category__heading {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--k15t-gap-x-small);
    padding: 0 8px 8px;
    color: var(--k15t-color-night-n700);
}

.subNavigation__flyOut__category__more {
    margin-top: var(--k15t-gap-small);
    padding: 0 8px;
}

@media(max-width: 1024px) {
    .subNavigation__flyOut__featured {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 0 var(--k15t-gap-medium) 0;
        gap: var(--k15t-gap-small);
    }

    .subNavigation__flyOut__featured--logo-wrapper {
        flex-shrink: 0;
        align-self: flex-start;
        padding: 0;
    }

    .subNavigation__flyOut__featured--text {
        flex: 1;
        min-width: 0;
    }

    .subNavigation__flyOut__featured--name {
        font-size: var(--k15t-font-size-medium);
    }

    .subNavigation__flyOut__featured--description {
        font-size: 14px;
    }

    .subNavigation__flyOut__featured--description-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--k15t-gap-x-small);
    }

    .subNavigation__flyOut__featured--cta {
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }

    .subNavigation__flyOut__container {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--k15t-gap-medium);
    }

    .subNavigation__flyOut__category {
        flex: unset;
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }
}

/* Sub-Navigation Type List */

.subNavigation__card {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    gap: var(--k15t-gap-medium);
}

.subNavigation__card__container {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    gap: var(--k15t-gap-medium);
}

.subNavigation__card h2 {
    font-size: 15px;
    font-family: var(--k15t-font-akadmie-medium);
    text-transform: uppercase;
    padding: var(--k15t-gap-x-small);
}

.subNavigation__card__item {
    width: 100%;
    max-width: 265px;
    height: fit-content;
}

.subNavigation__card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--k15t-gap-x-small);
    padding: var(--k15t-gap-x-small);
    border-radius: var(--k15t-radius-x-small);
}

.subNavigation__card__link span:first-of-type {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-small);
    font-size: 18px;
    font-family: var(--k15t-font-akadmie-medium);
}

a.link.subNavigation__card__link:hover {
    text-decoration: none;
    background-color: var(--k15t-color-night-n50);
}

a.link.subNavigation__card__link span:last-of-type {
    color: var(--k15t-color-night-n400);
    font-family: var(--k15t-font-akadmie-regular);
    font-size: 14px;
    padding-left: var(--k15t-gap-large);
}
.navLinkList {
    list-style: none;
    padding: var(--k15t-gap-small) 0 0;
    margin-block: 0;
    /* default hover background custom property to satisfy linters and provide a fallback */
    --nav-hover-bg: var(--k15t-color-night-n50);
}

.navLinkList .linkEntry__image {
    width: var(--k15t-icon-size-medium);
    height: var(--k15t-icon-size-medium);
}

.navLinkList .linkEntry__heading {
    font-size: var(--k15t-font-size-medium);
}

.navLinkList .linkEntry__text {
    font-size: 14px;
}

.navLinkList--noSpacing {
    padding-top: 0;
}

.navLinkList__entry {
    margin-bottom: 4px;
}

.navLinkList__entry a.link {
    padding: var(--k15t-gap-x-small);
    border-radius: var(--k15t-radius-x-small);
}

.navLinkList .navLinkList__entry--image--large {
    width: 40px;
    height: 40px;
}

.navLinkList .navLinkList__entry--image--xlarge {
    width: 90px;
    height: 90px;
}

.navLinkList__entry--special {
    margin-bottom: var(--k15t-gap-small);
}

.navLinkList__entry--special a.link {
    gap: var(--k15t-gap-medium);
}

.navLinkList__entry--special .navLinkList__entry__content {
    gap: var(--k15t-gap-x-small);
}

.navLinkList__entry--subtext {
    color: var(--k15t-color-night-n600);
}

.navLinkList__entry a.link:hover {
    background-color: var(--nav-hover-bg, var(--k15t-color-night-n50));
    text-decoration: none;
}


.overlay {
    display: none;
    position: fixed;
    justify-content: center;
    z-index: 999;
}

.overlay--full {
    inset: 0;
    background-color: rgba(0, 12, 52, .5);
}

.overlay--bottom {
    transition: opacity ease-in-out 200ms;
    opacity: 0;
    bottom: var(--k15t-gap-small);
    right: var(--k15t-gap-small);
    max-height: 100vh;
    overflow: auto;
}

.overlay_container {
    position: relative;
    background-color: var(--k15t-color-surface);
    padding: var(--k15t-gap-medium) var(--k15t-gap-medium) var(--k15t-gap-large) var(--k15t-gap-medium);
    color: var(--k15t-color-night-n700);
    margin: auto;
    max-width: fit-content;
    max-height: fit-content;
    border: var(--k15t-border-standard);
}

.overlay_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--k15t-gap-medium);
}

.overlay_container:has(.websiteAnnouncement__content) .overlay_header {
    max-width: 350px;
}

.overlay_header--heading {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-x-large);
    padding-right: 40px;
}

.overlay_header--close {
    position: absolute;
    padding: 5px 8px;
    cursor: pointer;
    background-color: var(--k15t-color-surface);
    right: var(--k15t-gap-medium);
    border: var(--k15t-border-standard);
}

.overlay_header--close:hover {
    background-color: var(--k15t-color-yellow-y500);
}

.overlay__urlTriggerForm--text {
    max-width: 700px;
}

.overlay__urlTriggerForm--container {
    margin: var(--k15t-gap-large) 0;
}


/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .overlay--bottom {
        right: 0;
        bottom: 0;
    }
}
.websiteAnnouncement__content {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    max-width: 350px;
}

.websiteAnnouncement__content img {
    width: 100%;
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {

}
[k15t-data="reset-services-message"] {
    max-width: 600px;
}

[k15t-data="reset-services-message"] p {
    font-size: var(--k15t-font-size-medium);
    margin-bottom: var(--k15t-gap-medium);
}

[k15t-data="reset-services-message"] ul {
    list-style: disc;
    margin-bottom: var(--k15t-gap-medium);
    padding-left: var(--k15t-gap-small);
    padding-right: var(--k15t-gap-medium);
}

[k15t-data="reset-services-message"] ul li {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium);
    margin-bottom: var(--k15t-gap-small);
}

[k15t-data="reset-services-message"] ul li div {
    font-family: var(--k15t-font-akadmie-medium);
}



.embedded-video {
    position: relative;
    height: 100%;
    width: 100%;
    padding-bottom: 56.68%;
    min-width: 570px;
}

.embedded-video:has(img) {
    padding-bottom: 0;
}

.embedded-video > img {
    max-width: 100%;
}

.embedded-video--embedService-notice {
    padding-bottom: 0;
    height: fit-content;
}

.embedded-video__spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--k15t-color-surface-sunken);
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-border-radius);
    box-sizing: border-box;
}

.embedded-video__spinner-circle {
    width: 40px;
    height: 40px;
    border: 3px solid var(--k15t-color-border-default);
    border-top-color: var(--k15t-color-text-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.embedded-video--consent-blocked .embedded-video__spinner,
.embedded-video--consent-granted .embedded-video__spinner {
    display: none;
}

.cookieConsentFallback {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k15t-gap-small);
    text-align: center;
    padding: var(--k15t-gap-medium);
    background-color: var(--k15t-color-surface-sunken);
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-radius-medium);
    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
}

.embedded-video--consent-blocked {
    padding-bottom: 0;
    height: auto;
}

.embedded-video--consent-blocked .cookieConsentFallback {
    display: flex;
}

.embedded-video--consent-granted .cookieConsentFallback {
    display: none;
}

.cookieConsentFallback__icon {
    color: var(--k15t-color-text-tertiary);
}

.cookieConsentFallback__icon svg {
    width: 48px;
    height: 48px;
}

.cookieConsentFallback__title {
    font-size: var(--k15t-font-size-medium-large);
    font-weight: 600;
    color: var(--k15t-color-text-primary);
    margin: 0;
}

.cookieConsentFallback__text {
    font-size: var(--k15t-font-size-medium);
    color: var(--k15t-color-text-secondary);
    margin: 0;
    max-width: 420px;
}

.cookieConsentFallback__button {
    margin-top: 4px;
    padding: 10px 20px;
    font-size: var(--k15t-font-size-medium);
    font-weight: 500;
    color: var(--k15t-color-text-on-dark);
    background-color: var(--k15t-color-text-link);
    border: none;
    border-radius: var(--k15t-border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cookieConsentFallback__button:hover {
    background-color: var(--k15t-color-blue-b600);
}

.cookieConsentFallback__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k15t-gap-x-small);
}

.cookieConsentFallback__link {
    font-size: var(--k15t-font-size-medium);
    color: var(--k15t-color-text-link);
    text-decoration: none;
    font-weight: 500;
}

.cookieConsentFallback__link:hover {
    text-decoration: underline;
    color: var(--k15t-color-blue-b600);
}

.embedded-video > iframe,
.embedded-video > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-radius-medium);
}

.embedded-video--pip {

}

.embedded-video--pip video {
    position: fixed;
    top: unset;
    left: unset;
    bottom: var(--k15t-gap-small);
    right: var(--k15t-gap-small);
    width: 450px;
    height: 255px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    background: var(--k15t-color-night-n700);
}

.embedded-video--pip-close {
    position: fixed;
    display: none;
    z-index: 1000;
    bottom: 270px;
    right: var(--k15t-gap-small);
    padding: 5px;
}
.embedService {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.embedService__placeholderImage {
    width: 100%;
    height: fit-content;
}

.embedService [k15t-service] {
    position: absolute;
    inset: 0;
    display: flex;
    height: 100%;
    padding: var(--k15t-gap-medium);
}

.embedService [k15t-service] > div {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
    height: fit-content;
    margin: auto;
    text-align: center;
}

.embedService [k15t-service] > div > h3 {
    font-size: var(--k15t-font-size-large);
}

.embedService .embedService--blockingText {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-regular);
}

.embedService [k15t-service] button {
    margin: auto;
}

.embedService [k15t-service] a {
    font-size: var(--k15t-font-size-small);
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .embedService {
        background-color: var(--k15t-color-night-n50);
    }

    .embedService > img {
        display: none;
    }

    .embedService [k15t-service] {
        position: relative;
    }

    .embedService .embedService--blockingText {
        font-size: var(--k15t-font-size-medium);
    }

    .embedService [k15t-service] > div > h3 {
        font-size: var(--k15t-font-size-medium-large);
    }
}
[data-component="table"] {
    table th {
        --_mask-image-url: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.668%204.8%208%201.47%2011.327%204.8l-.977.961L8.69%204.103v7.778l1.659-1.658.977.977L8%2014.528%204.668%2011.2l.965-.977%201.675%201.658V4.103L5.633%205.76l-.965-.96Z%22%20fill%3D%22%2523000C34%22%2F%3E%3C%2Fsvg%3E");

        &:has(button) {
            position: relative;
            vertical-align: top;
            padding: 0;
            min-inline-size: 7ch;

            button {
                display: flex;
                flex-direction: column;
                cursor: pointer;
                border: none;
                padding-inline-start: 0.5rem;
                padding-inline-end: 2rem;
                padding-block: 0.7rem;
                inline-size: 100%;
                block-size: 100%;
                line-height: inherit;
                text-align: start;
                background: none;
                outline: none;

                > span {
                    position: absolute;
                    aspect-ratio: 1 / 1;
                    inset-inline-end: 0.25rem;
                    inline-size: max(1lh, 24px);
                    display: flex;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    background-color: transparent;
                    border-radius: calc(3px *2);
                    border: 1px solid transparent;
                }

                > span::after {
                    display: inline-block;
                    mask-image: var(--_mask-image-url);
                    background-color: currentColor;
                    aspect-ratio: 1 / 1;
                    inline-size: 16px;
                    content: '';
                }

                &:is(:hover, :focus-visible) > span {
                    background-color: var(--k15t-color-night-n200);
                    border-color: var(--k15t-color-night-n200);
                }

                &:focus-visible > span {
                    outline-style: auto;
                    outline-color: Highlight;
                    outline-color: -webkit-focus-ring-color;
                }

                :first-child {
                    margin-block-start: 0;
                }

                :nth-last-child(2) {
                    margin-block-end: 0;
                }
            }
        }

        &:not([aria-sort]):has(button) {
            --_mask-image-url: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.668%204.8%208%201.47%2011.327%204.8l-.977.961L8.69%204.103v7.778l1.659-1.658.977.977L8%2014.528%204.668%2011.2l.965-.977%201.675%201.658V4.103L5.633%205.76l-.965-.96Z%22%20fill%3D%22%2523000C34%22%2F%3E%3C%2Fsvg%3E");
        }

        &[aria-sort='ascending'] {
            --_mask-image-url: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.30821%2014.4919V4.11541L4.44191%206.98969L3.46436%206.00816L7.99987%201.47266L12.5394%206.00816L11.5578%206.98571L8.69154%204.11541V14.4919H7.30821Z%22%20fill%3D%22%2523000C34%22%2F%3E%3C%2Fsvg%3E");
        }

        &[aria-sort='descending'] {
            --_mask-image-url: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.99987%2014.4919L3.46436%209.95236L4.44191%208.97482L7.30821%2011.8451V1.47266H8.69154V11.8451L11.5578%208.97482L12.5394%209.95236L7.99987%2014.4919Z%22%20fill%3D%22%2523000C34%22%2F%3E%3C%2Fsvg%3E%0A");
        }
    }
}

[data-component="table"] {
    --_inline-size: var(--width, var(--_theme-table-width));

    [data-component="table"] {
        /* Note: Reset value because tables nested inside tables should take up the full available space */
        --_theme-table-width: initial;
        --width: initial;
    }

    table {
        table-layout: auto;
        inline-size: var(--_inline-size);
        max-inline-size: 100%;
        border-collapse: collapse;
        /* NOTE: Necessary to prevent Safari from creating unnecessary horizontal scrollbars. */
        border: 1px solid transparent;

        th,
        td {
            border: 1px solid var(--k15t-color-night-n100);
            padding-inline: 0.5rem;
            padding-block: 0.7rem;
            vertical-align: top;
        }

        th {
            position: relative;
            background-color: var(--k15t-color-night-n50);
            text-align: start;

            :not([data-component="image"]) > img {
                display: inline-block;
                vertical-align: text-top;

                max-block-size: 1em;
                inline-size: auto;

                border-radius: 3px;
            }
        }

        td {
            background-color: var(--bg-color);
        }

        :is(th, td) {
            & > :first-child {
                margin-block-start: 0;
            }

            & > :last-child {
                margin-block-end: 0;
            }
        }
    }
}

.theme-table {
    /* Note: --width is derived from [data-component="table"] using Velocity and moved up to the .theme-table wrapper */
    --_theme-table-width: var(--width, 760px);

    display: block;
    margin-block: 1.375rlh;
    margin-block-end: 1rlh;
    inline-size: var(--_theme-table-width);
    max-inline-size: 100%;
}

/* The Confluence legacy editor supports tables nested inside lists.
 Tables nested like this must span the whole width of the list item. */
li:has(> .theme-table) {
    container-type: inline-size;

    table {
        max-inline-size: 100cqw;
    }
}

/* Screen reader only text - hide visually but keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.content-adjustments [data-component="page-properties"] {
    display: none;
}

.content-adjustments > *:first-child {
    margin-top: 0;
}

.content-adjustments h1 {
    font-size: var(--k15t-font-size-2x-large);
    font-family: var(--k15t-font-akadmie-bold);
    margin: var(--k15t-gap-x-large) 0 0;
}

.content-adjustments h2 {
    font-size: var(--k15t-font-size-x-large);
    font-family: var(--k15t-font-akadmie-medium);
    margin-top: var(--k15t-gap-2x-large);
    margin-bottom: var(--k15t-gap-large);
}

.content-adjustments h3 {
    font-size: var(--k15t-font-size-large);
    font-family: var(--k15t-font-akadmie-semibold);
    margin: var(--k15t-gap-2x-large) 0 var(--k15t-gap-medium) 0;
}

.content-adjustments h4 {
    font-size: var(--k15t-font-size-medium-large);
    margin: var(--k15t-gap-2x-large) 0 var(--k15t-gap-small) 0;
}

.content-adjustments h5 {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-black);
    margin: var(--k15t-gap-2x-large) 0 var(--k15t-gap-small) 0;
}

.content-adjustments h6 {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-bold);
    margin: var(--k15t-gap-2x-large) 0 var(--k15t-gap-small) 0;
}

.content-adjustments h1,
.content-adjustments h2,
.content-adjustments h3,
.content-adjustments h4,
.content-adjustments h5,
.content-adjustments h6 {
    /* Modern approach: scroll-margin-top accounts for fixed navigation */
    scroll-margin-top: 170px;
}

/* Inline-formatting elements inside headings must not alter the heading's appearance.
   Forces ALL typographic properties to inherit from the heading and resets backgrounds
   and decorations that browser defaults or prior rules add (<mark> yellow, <u> underline,
   <code> monospace, <s> strikethrough). <a> and <sub>/<sup>/<small> are intentionally
   excluded: links keep their blue-link affordance; sub/sup/small keep semantic sizing. */
.content-adjustments :is(h1, h2, h3, h4, h5, h6)
:is(strong, b, em, i, u, s, mark, code, span, q, cite, dfn, abbr, ins, del) {
    font: inherit; /* shorthand: family, style, weight, size, line-height */
    color: inherit;
    background: transparent;
    text-decoration: inherit;
    letter-spacing: inherit;
}

.content-adjustments p:first-of-type {
    margin-top: 0;
}

.content-adjustments p,
.content-adjustments p > span,
.content-adjustments a,
.content-adjustments strong,
.content-adjustments em,
.content-adjustments u {
    font-size: var(--k15t-font-size-medium-large);
    line-height: var(--k15t-line-height-large);
    word-break: break-word;
}

.content-adjustments p,
.content-adjustments figure,
.content-adjustments .block-image {
    margin: var(--k15t-gap-medium) 0;
    padding: 0;
}


/* Images / Figures */

.content-adjustments figure[data-border-size] *,
.content-adjustments div[data-component="image"] img:not(.inline-image img) {
    border: var(--k15t-border-standard);
}

/* Attached videos render at their intrinsic size (e.g. 1920px) unless capped, which breaks
   out of the content column. The :not() spares .embedded-video's absolutely positioned player. */
.content-adjustments p img,
.content-adjustments div[data-component="image"] img:not(.inline-image img),
.content-adjustments figure img,
.content-adjustments figure video:not(.embedded-video video),
.content-adjustments video:not(.embedded-video video) {
    max-width: 100%;
    height: auto;
}

/* Honor Confluence's --width on .block-image, capped at the container width.
   width:100% on the child guarantees SVGs without intrinsic dimensions still fill the box. */
.content-adjustments .block-image {
    width: min(var(--width, 100%), 100%);
}

.content-adjustments .block-image > img,
.content-adjustments .block-image > svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Enforce link color + no-underline on the anchor AND any nested inline formatting (e.g. <u>,
   <strong>) so editor-added inline styles can't bleed an underline or alternate color in. */
.content-adjustments a,
.content-adjustments a * {
    color: var(--k15t-color-blue-b500);
    text-decoration: none;
}

.content-adjustments a {
    cursor: pointer;
    word-break: break-word;
}

.content-adjustments a:hover,
.content-adjustments a:hover * {
    text-decoration: underline;
}

.content-adjustments strong,
.content-adjustments b {
    font-family: var(--k15t-font-akadmie-semibold);
}

.content-adjustments em,
.content-adjustments i {
    font-family: var(--k15t-font-akadmie-italic);
    /* The akademie-italic face is already slanted by design; font-style:normal prevents
       the browser applying a synthetic second slant on top of it. */
    font-style: normal;
}

.content-adjustments ul,
.content-adjustments ol {
    margin: var(--k15t-gap-medium) 0;
    list-style-position: outside;
    list-style-type: disc;
    padding-left: var(--k15t-gap-medium);
}

.content-adjustments ul ul,
.content-adjustments ol ol {
    list-style: circle;
    margin-top: 0;
    margin-bottom: var(--k15t-gap-x-large);
}

.content-adjustments ul li,
.content-adjustments ol li {
    margin: var(--k15t-gap-small);
}

.content-adjustments ul li p,
.content-adjustments ol li p {
    margin: var(--k15t-gap-small) 0;
}

.content-adjustments ul li ul li,
.content-adjustments ol li ul li {
    margin: var(--k15t-gap-x-small) 0;
}

.content-adjustments ul li ul li p,
.content-adjustments ul li ul li p {
    margin: 0;
}

.content-adjustments .unknown-content {
    display: none;
}

/* Layouts */
.content-adjustments .layout-section {
    display: grid;
    /* --columns comes from VPT */
    grid-template-columns: var(--columns);
    gap: var(--k15t-gap-x-large);
}


/* Block Quote */

blockquote {
    margin: var(--k15t-gap-2x-large);
}

blockquote p:last-of-type {
    color: var(--k15t-color-night-n500);
    margin-top: var(--k15t-gap-x-small);
}

blockquote p:first-of-type,
blockquote p:first-of-type > * {
    color: var(--k15t-color-night-n700);
    font-size: var(--k15t-font-size-x-large);
    margin-bottom: var(--k15t-gap-x-small);
}

/* Smartphone */
@media(max-width: 768px) {
    .content-adjustments h1 {
        font-size: var(--k15t-font-size-x-large);
    }

    .content-adjustments h2 {
        font-size: var(--k15t-font-size-large);
    }

    .content-adjustments h3 {
        font-size: var(--k15t-font-size-medium-large);
    }

    .content-adjustments h4 {
        font-size: var(--k15t-font-size-medium);
    }

    .content-adjustments h5 {
        font-size: var(--k15t-font-size-medium);
    }

    .content-adjustments h6 {
        font-size: var(--k15t-font-size-medium);
    }

    .content-adjustments h1,
    .content-adjustments h2,
    .content-adjustments h3,
    .content-adjustments h4,
    .content-adjustments h5,
    .content-adjustments h6 {
        scroll-margin-top: 80px;
        margin: 0 0 var(--k15t-gap-medium) 0;
    }

    .content-adjustments p,
    .content-adjustments a,
    .content-adjustments strong,
    .content-adjustments em,
    .content-adjustments u {
        font-size: var(--k15t-font-size-medium);
    }
}


/* Expandable images */
.expandable-image {
    cursor: zoom-in;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.expandable-image:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.expandable-image:focus {
    outline: 2px solid var(--k15t-color-blue-b400);
    outline-offset: 2px;
}

/* Image Modal */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    padding: var(--k15t-gap-large);
}

.image-modal--visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.9);
}

.image-modal--closing {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
}

.image-modal__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k15t-gap-medium);
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.image-modal--visible .image-modal__content {
    transform: scale(1);
}

.image-modal--closing .image-modal__content {
    transform: scale(0.9);
}

.image-modal__img {
    max-width: 90vw;
    max-height: calc(90vh - 80px);
    width: auto;
    height: auto;
    object-position: center;
    border-radius: var(--k15t-border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.image-modal__caption {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: var(--k15t-gap-small) var(--k15t-gap-medium);
    border-radius: var(--k15t-border-radius);
    font-size: var(--k15t-font-size-small);
    max-width: 600px;
    text-align: center;
}

.image-modal__close {
    position: absolute;
    top: var(--k15t-gap-medium);
    right: var(--k15t-gap-medium);
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: var(--k15t-font-size-x-large);
    line-height: 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    color: var(--k15t-color-night-n700);
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.image-modal__close:hover {
    background-color: white;
    transform: scale(1.1);
}

.image-modal__close:active {
    transform: scale(0.95);
}

.image-modal__close:focus {
    outline: 2px solid var(--k15t-color-blue-b400);
    outline-offset: 2px;
}

/* Navigation buttons */
.image-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    color: var(--k15t-color-night-n700);
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.image-modal__nav svg {
    width: var(--k15t-icon-size-medium);
    height: var(--k15t-icon-size-medium);
}

.image-modal__nav--prev {
    left: var(--k15t-gap-large);
}

.image-modal__nav--next {
    right: var(--k15t-gap-large);
}

.image-modal__nav:hover {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
}

.image-modal__nav:active {
    transform: translateY(-50%) scale(0.95);
}

.image-modal__nav:focus {
    outline: 2px solid var(--k15t-color-blue-b400);
    outline-offset: 2px;
}

.image-modal__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.image-modal__nav:disabled:hover {
    transform: translateY(-50%) scale(1);
}

/* Mobile adjustments */
@media(max-width: 768px) {
    .image-modal {
        padding: var(--k15t-gap-medium);
        align-items: flex-start;
        padding-top: 60px;
    }

    .image-modal__content {
        max-height: calc(100vh - 140px);
    }

    .image-modal__img {
        max-height: calc(100vh - 200px);
    }

    .image-modal__close {
        top: var(--k15t-gap-small);
        right: var(--k15t-gap-small);
        width: 36px;
        height: 36px;
        font-size: 28px;
    }

    .image-modal__nav {
        position: fixed;
        top: auto;
        bottom: var(--k15t-gap-medium);
        transform: none;
        width: 50px;
        height: 50px;
    }

    .image-modal__nav svg {
        width: var(--k15t-icon-size-medium);
        height: var(--k15t-icon-size-medium);
    }

    .image-modal__nav--prev {
        left: 50%;
        margin-left: -65px;
    }

    .image-modal__nav--next {
        right: 50%;
        margin-right: -65px;
    }

    .image-modal__nav:hover {
        transform: scale(1.1);
    }

    .image-modal__nav:active {
        transform: scale(0.95);
    }

    .expandable-image:hover {
        transform: none;
    }
}


.heading-link-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    top: -2px;
    padding: var(--k15t-gap-x-small);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: var(--k15t-border-radius);
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
    white-space: nowrap;
}

.heading-link-copy__icon {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--k15t-color-night-n500);
    transition: color 0.2s ease-in-out;
}

.heading-link-copy:hover .heading-link-copy__icon {
    color: var(--k15t-color-night-n700);
}

.heading-link-copy--copied .heading-link-copy__icon {
    color: var(--k15t-color-green-g500);
}

/* Heading text wrapper keeps button inline with text */
.heading-text-wrapper {
    display: flex;
    /* Ensure wrapper inherits all heading properties */
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-wrap: pretty;
}

.content-adjustments h1:hover .heading-link-copy,
.content-adjustments h2:hover .heading-link-copy,
.content-adjustments h3:hover .heading-link-copy,
.content-adjustments h4:hover .heading-link-copy,
.content-adjustments h5:hover .heading-link-copy,
.content-adjustments h6:hover .heading-link-copy {
    opacity: 0.6;
}

.heading-link-copy:hover {
    opacity: 1 !important;
    background-color: var(--k15t-color-night-n100);
}

.heading-link-copy:active {
    background-color: var(--k15t-color-night-n200);
}

.heading-link-copy--copied {
    opacity: 1 !important;
    background-color: var(--k15t-color-green-g100);
}

.heading-link-copy:focus {
    outline: none;
}

.heading-link-copy:focus-visible {
    /* Base state is opacity: 0 (hover-revealed) — keyboard focus must reveal the button too (WCAG 2.4.7) */
    opacity: 1;
    outline: 2px solid var(--k15t-color-blue-b400);
    outline-offset: 2px;
}

/* Tooltip */
.heading-link-copy__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background-color: var(--k15t-color-night-n700);
    color: white;
    padding: var(--k15t-gap-x-small) var(--k15t-gap-small);
    border-radius: var(--k15t-border-radius);
    font-size: var(--k15t-font-size-small);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
    z-index: 1000;
}

.heading-link-copy__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--k15t-color-night-n700);
}

.heading-link-copy__tooltip--visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

[data-component="code"] {
    padding: var(--k15t-gap-x-small) var(--k15t-gap-small) ;
    background-color: var(--k15t-color-night-n50);
    border: var(--k15t-border-standard);
}

[data-component="code"] pre {
    margin: 0;
    font-size: var(--k15t-font-size-x-large);
}

[data-component="code"] pre code {
    font-family: monospace;
}

/* Mobile adjustments */
@media(max-width: 768px) {
    .heading-link-copy {
        opacity: 0.6;
    }

    .heading-link-copy__icon {
        width: 16px;
        height: 16px;
    }
}

[data-component="panel"] {
    --_background-color: var(--k15t-color-night-n50);
    --_text-color: var(--k15t-color-night-n700);
    /* TODO: move private custom properties it to class .panel when HTML transformation has been updated */
    --_icon: initial;
    --_icon-size: 24px;

    display: flex;
    column-gap: 1rem;
    margin-block: 2rlh;
    padding: 1rem;
    color: var(--_text-color);
    background-color: var(--_background-color);
    border: 1px solid var(--k15t-border-standard);
    border-radius: var(--k15t-border-radius);

    @media (min-width: 768px) {
        padding: var(--k15t-gap-large);
    }

    &[data-appearance="info"] {
        --_icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM12 11.375C11.6685 11.375 11.3505 11.5067 11.1161 11.7411C10.8817 11.9755 10.75 12.2935 10.75 12.625V15.75C10.75 16.0815 10.8817 16.3995 11.1161 16.6339C11.3505 16.8683 11.6685 17 12 17C12.3315 17 12.6495 16.8683 12.8839 16.6339C13.1183 16.3995 13.25 16.0815 13.25 15.75V12.625C13.25 12.2935 13.1183 11.9755 12.8839 11.7411C12.6495 11.5067 12.3315 11.375 12 11.375ZM12 9.96875C12.4558 9.96875 12.893 9.78767 13.2153 9.46534C13.5377 9.14301 13.7188 8.70584 13.7188 8.25C13.7188 7.79416 13.5377 7.35699 13.2153 7.03466C12.893 6.71233 12.4558 6.53125 12 6.53125C11.5442 6.53125 11.107 6.71233 10.7847 7.03466C10.4623 7.35699 10.2812 7.79416 10.2812 8.25C10.2812 8.70584 10.4623 9.14301 10.7847 9.46534C11.107 9.78767 11.5442 9.96875 12 9.96875Z" fill="currentColor"></path></svg>');
        --_icon-color: var(--k15t-color-interactive);
        background-color: var(--k15t-color-blue-b50);
    }

    &[data-appearance="note"] {
        --_icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 2H17C17.663 2 18.2989 2.26339 18.7678 2.73223C19.2366 3.20107 19.5 3.83696 19.5 4.5V19.5C19.5 20.163 19.2366 20.7989 18.7678 21.2678C18.2989 21.7366 17.663 22 17 22H7C6.33696 22 5.70107 21.7366 5.23223 21.2678C4.76339 20.7989 4.5 20.163 4.5 19.5V4.5C4.5 3.83696 4.76339 3.20107 5.23223 2.73223C5.70107 2.26339 6.33696 2 7 2ZM8.875 7C8.70924 7 8.55027 7.06585 8.43306 7.18306C8.31585 7.30027 8.25 7.45924 8.25 7.625V8.875C8.25 9.04076 8.31585 9.19973 8.43306 9.31694C8.55027 9.43415 8.70924 9.5 8.875 9.5H15.125C15.2908 9.5 15.4497 9.43415 15.5669 9.31694C15.6842 9.19973 15.75 9.04076 15.75 8.875V7.625C15.75 7.45924 15.6842 7.30027 15.5669 7.18306C15.4497 7.06585 15.2908 7 15.125 7H8.875ZM8.875 12C8.70924 12 8.55027 12.0658 8.43306 12.1831C8.31585 12.3003 8.25 12.4592 8.25 12.625V13.875C8.25 14.0408 8.31585 14.1997 8.43306 14.3169C8.55027 14.4342 8.70924 14.5 8.875 14.5H12.625C12.7908 14.5 12.9497 14.4342 13.0669 14.3169C13.1842 14.1997 13.25 14.0408 13.25 13.875V12.625C13.25 12.4592 13.1842 12.3003 13.0669 12.1831C12.9497 12.0658 12.7908 12 12.625 12H8.875Z" fill="currentColor"></path></svg>');
        --_icon-color: var(--k15t-color-purple-p300);
        background-color: var(--k15t-color-purple-p50);
    }

    &[data-appearance="success"] {
        --_icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM13.705 8.295L11.015 13.4325L9.08625 11.695C8.9642 11.5852 8.82172 11.5005 8.66694 11.4457C8.51216 11.391 8.3481 11.3672 8.18415 11.3759C8.0202 11.3845 7.85955 11.4254 7.71139 11.4961C7.56322 11.5669 7.43044 11.6661 7.32063 11.7881C7.21081 11.9102 7.1261 12.0527 7.07135 12.2074C7.0166 12.3622 6.99287 12.5263 7.00152 12.6902C7.01016 12.8542 7.05102 13.0148 7.12175 13.163C7.19248 13.3112 7.2917 13.4439 7.41375 13.5538L10.5388 16.3663C10.6803 16.4938 10.8492 16.5872 11.0325 16.6395C11.2157 16.6917 11.4085 16.7014 11.596 16.6678C11.7836 16.6341 11.9609 16.558 12.1146 16.4453C12.2682 16.3326 12.3941 16.1863 12.4825 16.0175L15.92 9.455C16.0738 9.16127 16.1047 8.81847 16.0057 8.502C15.9068 8.18553 15.6862 7.92133 15.3925 7.7675C15.0988 7.61367 14.756 7.58283 14.4395 7.68176C14.123 7.78068 13.8588 8.00127 13.705 8.295V8.295Z" fill="currentColor"></path></svg>');
        --_icon-color: var(--k15t-color-green-g500);
        background-color: var(--k15t-color-green-g50);
    }

    &[data-appearance="warning"] {
        --_icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4897 4.34592L21.8561 18.8611C21.9525 19.0288 22.0021 19.2181 21.9999 19.4101C21.9977 19.6021 21.9438 19.7903 21.8435 19.9559C21.7432 20.1215 21.6001 20.2588 21.4282 20.3542C21.2563 20.4497 21.0616 20.4999 20.8636 20.5H3.13707C2.93882 20.5 2.74401 20.4498 2.57196 20.3543C2.39992 20.2588 2.25663 20.1213 2.15631 19.9556C2.05598 19.7898 2.00212 19.6015 2.00006 19.4093C1.998 19.2171 2.04782 19.0278 2.14456 18.86L10.5121 4.34592C10.6602 4.08939 10.8762 3.87577 11.1377 3.72708C11.3993 3.57838 11.6971 3.5 12.0003 3.5C12.3036 3.5 12.6013 3.57838 12.8629 3.72708C13.1245 3.87577 13.3404 4.08939 13.4885 4.34592H13.4897ZM12.0003 7.82538C11.8232 7.82537 11.6482 7.86212 11.4869 7.93317C11.3257 8.00423 11.182 8.10793 11.0656 8.2373C10.9492 8.36668 10.8627 8.51872 10.8119 8.68321C10.7611 8.8477 10.7473 9.02083 10.7713 9.19093L11.3546 13.3416C11.3754 13.4933 11.4523 13.6326 11.5711 13.7334C11.6899 13.8343 11.8424 13.8899 12.0003 13.8899C12.1582 13.8899 12.3107 13.8343 12.4295 13.7334C12.5483 13.6326 12.6253 13.4933 12.6461 13.3416L13.2293 9.19093C13.2533 9.02083 13.2395 8.8477 13.1887 8.68321C13.138 8.51872 13.0515 8.36668 12.935 8.2373C12.8186 8.10793 12.6749 8.00423 12.5137 7.93317C12.3525 7.86212 12.1774 7.82537 12.0003 7.82538V7.82538ZM12.0003 17.3369C12.3395 17.3369 12.6649 17.2062 12.9047 16.9737C13.1446 16.7412 13.2793 16.4258 13.2793 16.0969C13.2793 15.7681 13.1446 15.4527 12.9047 15.2202C12.6649 14.9877 12.3395 14.857 12.0003 14.857C11.6611 14.857 11.3358 14.9877 11.0959 15.2202C10.8561 15.4527 10.7213 15.7681 10.7213 16.0969C10.7213 16.4258 10.8561 16.7412 11.0959 16.9737C11.3358 17.2062 11.6611 17.3369 12.0003 17.3369V17.3369Z" fill="currentColor"></path></svg>');
        --_icon-color:  var(--k15t-color-yellow-y600);
        background-color: var(--k15t-color-yellow-y50);
    }

    &[data-appearance="error"] {
        --_icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.8562 11.9112L16.5088 9.26C16.7433 9.02545 16.8751 8.70733 16.8751 8.37563C16.8751 8.04392 16.7433 7.7258 16.5088 7.49125C16.2742 7.2567 15.9561 7.12493 15.6244 7.12493C15.2927 7.12493 14.9746 7.2567 14.74 7.49125L12.09 10.1438L9.4375 7.49125C9.20295 7.25686 8.8849 7.12526 8.55331 7.12537C8.22172 7.12549 7.90376 7.25732 7.66937 7.49188C7.43499 7.72643 7.30338 8.04448 7.3035 8.37607C7.30361 8.70766 7.43545 9.02561 7.67 9.26L10.32 11.91L7.67 14.5625C7.4423 14.7983 7.31631 15.114 7.31916 15.4418C7.32201 15.7695 7.45347 16.083 7.68523 16.3148C7.91699 16.5465 8.2305 16.678 8.55825 16.6808C8.88599 16.6837 9.20175 16.5577 9.4375 16.33L12.0888 13.68L14.74 16.33C14.8561 16.4461 14.9939 16.5383 15.1455 16.6012C15.2972 16.664 15.4597 16.6964 15.6239 16.6965C15.7881 16.6966 15.9507 16.6643 16.1024 16.6015C16.2541 16.5387 16.392 16.4467 16.5081 16.3306C16.6243 16.2146 16.7164 16.0768 16.7793 15.9251C16.8422 15.7734 16.8746 15.6109 16.8746 15.4467C16.8747 15.2825 16.8424 15.1199 16.7796 14.9682C16.7168 14.8165 16.6248 14.6786 16.5088 14.5625L13.8562 11.9112V11.9112ZM12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22Z" fill="currentColor"></path></svg>');
        --_icon-color: var(--k15t-color-red-r500);
        background-color: var(--k15t-color-red-r50);
    }

    /*&[data-appearance="custom"] {*/
    /*    --_icon: url('./../images/icons/logos/logo-atlassian-confluence-light.svg');*/
    /*    --_icon-size: 50px;*/
    /*    background-color: var(--k15t-color-night-n50);*/
    /*    flex-direction: column;*/
    /*    row-gap: 3rem;*/
    /*    border: var(--k15t-border-standard);*/

    /*    > .panel-meta {*/
    /*        display: none;*/
    /*    }*/
    /*}*/

    /* TODO: The icon pseudo element should be replaced by an SVG in the DOM (requires update to the HTML transformation) */
    &:is([data-appearance="info"],
		[data-appearance="note"],
		[data-appearance="success"],
		[data-appearance="warning"],
		/*[data-appearance="custom"],*/
		[data-appearance="error"])::before {
        content: '';
        display: block;
        flex-shrink: 0;
        align-self: first baseline;
        inline-size: var(--_icon-size);
        min-block-size: 1lh;
        aspect-ratio: 1 / 1;
        mask-image: var(--_icon);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color:  var(--_icon-color, currentColor);
    }

    /*&:is([data-appearance="custom"])::before {*/
    /*    width: 206px;*/
    /*    height: 50px;*/
    /*    aspect-ratio: auto;*/
    /*    background-image: var(--_icon);*/
    /*    background-size: contain;*/
    /*    background-repeat: no-repeat;*/
    /*    background-position: center;*/
    /*    background-color: transparent;*/
    /*    mask-image: none;*/
    /*    mask-size: 0;*/
    /*    mask-repeat: no-repeat;*/
    /*    mask-position: center;*/
    /*}*/

    /* TODO: Add support for optional title element */

    .panel-content {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            padding-top: 0;
            margin-top: 0;
        }

        > * {
            margin-block-end: 0.25rlh;
        }

        > :first-child {
            margin-block-start: 0;
        }

        > :last-child {
            margin-block-end: 0;
        }
    }

    .panel-meta {
        min-inline-size: auto;
        align-self: start;
    }

    .panel-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        inline-size: var(--_icon-size);
        aspect-ratio: 1 / 1;
        font-size: var(--_icon-size);
        user-select: none;
        line-height: 1lh;
    }
}

.toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    list-style: none;
    padding-left: 0;
}

a.toc-list__item__link.link {
    color: var(--k15t-color-night-n500);
    font-size: 18px;
}

a.toc-list__item__link.link.active-link {
    color: var(--k15t-color-night-n700);
    text-decoration: underline;
}

.base_tile {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--k15t-color-night-n700);
    border-radius: var(--k15t-radius-medium);
    width: 100%;
}

.base_tile_thumbnail_container {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    aspect-ratio: 16/9;
    transition: transform .2s ease-out;
}

.base_tile_blanket {
    position: absolute;
    inset: 0;
}

.base_tile_author-image {
    width: 50px;
    border-radius: var(--k15t-border-radius-circle);
    object-fit: contain;
}

.base_tile_blanket > .author,
.base_tile_blanket > .categoryLabels {
    position: absolute;
    display: flex;
    bottom: var(--k15t-gap-small);
    transition: opacity .2s ease;
    opacity: 0;
}

.base_tile_blanket > .author {
    right: var(--k15t-gap-small);
}


.base_tile_blanket > .categoryLabels {
    left: var(--k15t-gap-small);
}

.base_tile_description {
    position: absolute;
    background-color: var(--k15t-color-background-transparent);
    backdrop-filter: blur(2px);
    inset: 0;
    transition: opacity .2s ease;
    opacity: 0;
    width: 100%;
    padding: var(--k15t-gap-small);
}

.base_tile_description > p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--k15t-font-akadmie-medium);
    line-height: var(--k15t-line-height-large);
    color: var(--k15t-color-night-n50);
}

.base_tile_description-small > p {
    font-size: var(--k15t-font-size-medium);
}

.base_tile_description-big > p {
    font-size: var(--k15t-font-size-medium-large);
}

.contentTile:hover .base_tile_description,
.contentTile:hover .base_tile_blanket > .author,
.contentTile:hover .base_tile_blanket > .categoryLabels {
    opacity: 1;
}
.button {
    position: relative;
    display: block;
    width: fit-content;
    padding: var(--k15t-gap-x-small) var(--k15t-gap-small);
    cursor: pointer;
    margin: auto;
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-radius-pill);
    background-color: var(--k15t-button-color);
}

.button--embedService {
    background-color: var(--k15t-button-color);
}

.button_text {
    display: inline-flex;
    align-items: center;
    color: var(--k15t-button-text-color);
    font-size: 16px;
    font-family: var(--k15t-font-akadmie-semibold);
}

.button_text:after {
    background: transparent url("../images/icons/arrow-right-white.svg") no-repeat;
    margin-left: var(--k15t-gap-x-small);
    height: 17px;
    width: 17px;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    content: none;
}

.button:hover {
    background-color: var(--k15t-button-color-hovered);
}

.button:hover .button_text {
    color: var(--k15t-button-text-color-hovered);
}


.button:hover .button_text:after {
    background: transparent url("../images/icons/arrow-right-dark.svg") no-repeat;
    margin-left: 10px;
    margin-right: -2px;
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .button {
        width: 100%
    }
}

.byline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.byline > span {
    height: fit-content;
}

.article_byline {
    display: flex;
    gap: var(--k15t-gap-medium);
    margin-top: var(--k15t-gap-small);
    align-items: center;
}


/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .byline {
        gap: var(--k15t-gap-x-small);
    }
}
.categoryLabels {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-small);
}

.categoryLabel {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-regular);
    width: fit-content;
    text-transform: capitalize;
}

.categoryLabel--pill {
    border-radius: var(--k15t-radius-pill);
    border: var(--k15t-border-standard);
    background-color: var(--k15t-color-surface);
    padding: 5px 10px;
}

/*
General Classes
 */

.contentTile {
    position: relative; /* Ensure the transform works correctly */
    width: 387px;
    height: fit-content;
}

.contentTile_info {
    padding: var(--k15t-gap-small) 0;
    z-index: 1;
    overflow: hidden;
}

.contentTile_info .categoryLabel {
    display: none;
}

.contentTile_stretched-link {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
    word-break: break-word;
    line-height: var(--k15t-line-height-subheading);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contentTile_stretched-link > div {
    display: block;
    margin-bottom: var(--k15t-gap-x-small);
    text-transform: capitalize;
}

.contentTile_stretched-link-big {
    font-size: var(--k15t-font-size-large);
}

.contentTile_stretched-link:after {
    position: absolute;
    display: block;
    inset: 0;
    z-index: 10;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

.contentTile:hover .base_tile_thumbnail_container {
    transform: scale(1.2);
}

/*
Variation Small
 */

.contentTile--small {
    width: 400px;
    flex-direction: column;
}

/*
Variation Big
 */

.contentTile--big {
    width: 580px;
}


/* Tablet */
@media(max-width: 1024px) {
    .contentTile_info .categoryLabel {
        display: flex;
        margin-top: 0;
    }

    .contentTile_stretched-link-small,
    .contentTile_stretched-link-big {
        font-size: var(--k15t-font-size-medium-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .contentTile:not([isContentRow="true"]) {
        width: 100%;
    }

    .contentTile_stretched-link > div {
        font-size: 14px;
    }

    .contentTile--small {
        width: 270px;
    }

    .contentTile_stretched-link {
        -webkit-line-clamp: 5;
    }
}
.crumbs {
    width: 100%;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    list-style: none;
    padding: 0;
    margin: 0;
}

.crumbs > ol > li, .crumbs > ol > li > a {
    font-size: var(--k15t-font-size-medium);
    text-decoration: none;
}


.crumbs > ol > li > a:hover {
    text-decoration: underline;
}

.crumbs li:not(:last-of-type)::after {
    display: inline;
    margin: 0 15px;
    content: "/";
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {

}
.form {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--k15t-gap-small);
    margin: auto;
    height: auto;
    width: 100%;
    max-width: 550px;
}

.form--singleField {
    flex-direction: row;
    width: fit-content;
    max-width: 500px;
}

.form--singleField.form--leftAlignment {
    justify-content: left;
    margin: 0;
}

.form.form--singleField > button {
    position: absolute;
    left: 255px;
    height: 55px;
}

.form.form--singleField > input {
    background-color: var(--k15t-color-surface);
    background-image: url('../images/icons/email-label.svg');
    background-repeat: no-repeat;
    background-position-x: 2%;
    background-position-y: center;
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-radius-pill) 0 0 var(--k15t-radius-pill);
    color: var(--k15t-color-night-n700);
    margin: 0;
    padding: .5rem 2rem .5rem 2.5rem;
    height: 55px;
    width: 280px;
}

.form.form--singleField > label {
    display: none;
}

.form > label {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium);
    text-align: left;
}

.boxesLeftRight__boxContainer:has(.form) .form.form--singleField > button {
    position: relative;
    left: 0;
    width: 100%;
}

.boxesLeftRight__boxContainer:has(.form) .form.form--singleField > input {
    border-radius: var(--k15t-radius-pill);
    width: 100%;
}

.form-consent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 5px;
    margin: auto;
}

.form-consent,
.form-consent span,
.form-consent a.form-consent--link {
    font-size: var(--k15t-font-size-x-small);
}

.form-consent a.form-consent--link {
    color: var(--k15t-color-interactive);
}

.form > input,
.form > textarea {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium-large);
    padding: var(--k15t-gap-small);
    background-color: var(--k15t-color-surface);
    border: 1px solid var(--k15t-color-night-n700);
    border-radius: var(--k15t-border-radius);
    margin: 0;
    width: 100%;
    max-width: 600px;
}

.form > input:focus,
.form > textarea:focus {
    background-color: var(--k15t-color-night-n50);
}

.form-submitted {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
    align-items: center;
}

.form-submitted--heading {
    font-size: var(--k15t-font-size-x-large);
    font-family: var(--k15t-font-akadmie-medium);
}

.form-submitted--text {
    font-size: var(--k15t-font-size-medium-large);
    text-align: center;
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .form-consent {
        display: flex;
    }

    .form.form--singleField > button {
        position: relative;
        left: 0;
    }

    .form.form--singleField {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .form.form--singleField > input {
        width: 100%;
        border-radius: var(--k15t-radius-pill);
    }

    .form-consent {
        margin-top: var(--k15t-gap-x-small);
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}
.link-button {
    position: relative;
    display: block;
    padding: var(--k15t-gap-x-small) var(--k15t-gap-small);
    width: fit-content;
    text-decoration: none;
    border: var(--k15t-border-standard);
    border-radius: 50px;
    background-color: var(--k15t-button-color);
    cursor: pointer;
    z-index: 1;
}


.link-button_link {
    font-size: 16px;
    font-family: var(--k15t-font-akadmie-semibold);
    color: var(--k15t-button-text-color);
    width: max-content;
}

.link-button:hover {
    background-color: var(--k15t-button-color-hovered);
}

.link-button:hover .link-button_link {
    color: var(--k15t-button-text-color-hovered);
}

.link-button_link:after {
    display: inline-block;
    background: transparent url("../images/icons/arrow-right-white.svg") no-repeat;
    margin-left: var(--k15t-gap-x-small);
    height: 16px;
    width: 17px;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    content: none;
}

.link-button:hover .link-button_link:after {
    background: transparent url("../images/icons/arrow-right-dark.svg") no-repeat;
    margin-left: 10px;
    margin-right: -2px;
}

/* BUTTON SECONDARY */

.button--secondary,
.button--tertiary,
.link-button--secondary,
.link-button--tertiary {
    background-color: var(--k15t-button-secondary-color);
}

.button--secondary .button_text,
.button--tertiary .button_text,
.link-button--secondary .link-button_link,
.link-button--tertiary .link-button_link {
    font-family: var(--k15t-font-akadmie-semibold);
    color: var(--k15t-button-secondary-text-color);
}

.button--secondary:hover,
.button--tertiary:hover,
.link-button--tertiary:hover {
    background-color: var(--k15t-button-secondary-color-hover);
}

.link-button--secondary:hover {
    background-color: var(--k15t-color-night-n700);
}

.button--secondary .button_text:hover,
.button--tertiary .button_text:hover,
a.link-button--tertiary.link-button,
a.link-button--tertiary:hover.link-button_link {
    color: var(--k15t-button-secondary-text-color-hovered);
    text-decoration: none;
}

.link-button--secondary:hover .link-button_link {
    color: var(--k15t-color-text-on-dark);
    text-decoration: none;
}

.link-button--secondary:hover .link-button_link:after {
    margin-left: 10px;
    margin-right: -2px;
}

.link-button--secondary .link-button_link:after {
    background: transparent url("../images/icons/arrow-right-dark.svg") no-repeat;
}

.link-button--secondary:hover .link-button_link:after {
    background: transparent url("../images/icons/arrow-right-white.svg") no-repeat;
}

/* BUTTON Tertiary */

.button--tertiary,
.link-button--tertiary {
    border-radius: var(--k15t-radius-small);
}

.button--tertiary .button_text,
.link-button--tertiary > .link-button_link {
    font-family: var(--k15t-font-akadmie-semibold);
    font-size: var(--k15t-font-size-medium);
}

.button--tertiary .button_text:after,
.link-button--tertiary .link-button_link:after {
    display: none;
}

.link-button.link-button--small {
    padding: var(--k15t-gap-x-small) var(--k15t-gap-medium);;
}

.link-button_link.link-button_link--small {
    font-size: 14px;
    line-height: 1.5;
}

.link-button_link.link-button_link--small:after {
    height: 14px;
    width: 14px;
}


/* Tablet */
@media(max-width: 1024px) {


}

/* Smartphone */
@media(max-width: 768px) {
    .link-button_link {
        width: inherit;
        text-align: center;
    }
}

a.link.linkEntry {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    transition: background-color 200ms ease;
    color: var(--k15t-color-night-n700);
    line-height: 1.4;
}

a.link.linkEntry.link--simple {
    width: fit-content;
    align-items: center;
}

a.link.linkEntry:hover {
    text-decoration: none;
}

.linkEntry__image {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    object-fit: contain;
}

.linkEntry__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.linkEntry__heading {
    font-size: var(--k15t-font-size-large);
    font-family: var(--k15t-font-akadmie-medium);
}

.linkEntry__text {
    font-size: var(--k15t-font-size-medium-large);
}

/* Framed variant (opt-in via cssClass 'linkEntry--framed'): the content area
   gets an n700 frame + surface background on hover; the icon stays flush left,
   so no left border. Used by linkListBoxes and dataSheet. */
a.link.linkEntry.linkEntry--framed {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
    overflow: hidden;
    transition: all 200ms ease;
}

a.link.linkEntry.linkEntry--framed:hover {
    text-decoration: none;
}

.linkEntry--framed .linkEntry__content {
    padding: 0 16px 0;
    height: stretch;
    width: 100%;
    justify-content: center;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

a.link.linkEntry.linkEntry--framed:hover .linkEntry__content {
    border-color: var(--k15t-color-night-n700);
    background-color: var(--k15t-color-surface);
    text-decoration: none;
}


.share-options_content {
    position: relative;
    margin: 0 auto;
    width: 492px;
}

.share-options_content > div {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.share-options_content > div:first-of-type {
    justify-content: space-between;
    margin-bottom: var(--k15t-gap-small);
}

button[k15t-data="shareOptionsEmbedOption"] {
    background-color: transparent;
    cursor: pointer;
    border: none;
}

.share-options_content > div:last-of-type input {
    width: 100%;
    border: var(--k15t-border-standard);
    padding: var(--k15t-gap-x-small) var(--k15t-gap-2x-large) var(--k15t-gap-x-small) var(--k15t-gap-x-small);
    background-color: var(--k15t-color-night-n50);
}

.share-options_content > div:last-of-type label {
    display: none;
}

.share-options_content > div:last-of-type span {
    position: absolute;
    right: var(--k15t-gap-small);
    color: var(--k15t-color-interactive);
    cursor: pointer;
}

.share-options_embed {
    position: relative;
    display: none;
    flex-direction: row;
    width: 922px;
}

.share-options_embed > textarea {
    width: 100%;
    word-break: break-all;
    border: var(--k15t-border-standard);
    background-color: var(--k15t-color-night-n50);
}
.author {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-small);
}

.author > img {
    display: block;
    width: 100%;
    max-width: 120px;
    border-radius: var(--k15t-border-radius-circle);
}

.author.author--imgOnly {
    max-width: 50px;
}

.author__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author__details span:first-of-type {
    font-family: var(--k15t-font-akadmie-medium);
}
.boxTile {
    display: flex;
    flex-direction: column;
    padding: var(--k15t-gap-large);
    border-radius: var(--k15t-box-border-radius);
    border: var(--k15t-box-border);
    gap: var(--k15t-gap-medium);
}

.boxTile--noBorder {
    border: none;
}

.centeredHeadingWithText {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-large);
}

.centeredHeadingWithText h2 {
    font-family: var(--k15t-font-akadmie-semibold);
    font-size: var(--k15t-font-size-2x-large);
    text-align: center;
}

.centeredHeadingWithText--text {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-large);
    text-align: center;
}

/* Tablet */
@media(max-width: 1024px) {
    .centeredHeadingWithText h2 {
        margin: 0 var(--k15t-gap-x-large);
        font-size: var(--k15t-font-size-x-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .centeredHeadingWithText h2 {
        margin: 0;
    }

    .centeredHeadingWithText--text {
        font-size: var(--k15t-font-size-medium);
    }
}
a.link {
    display: flex;
    align-items: center;
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

a.link:hover {
    text-decoration: underline;
}

.link--withArrow a.link {
    font-size: var(--k15t-font-size-medium);
    color: var(--k15t-color-text-link);
}

.link--withArrow a.link > svg {
    height: var(--k15t-icon-size-medium);
    width: var(--k15t-icon-size-medium);
    transform: translateX(5px);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.link--withArrow:hover a.link > svg {
    transform: translateX(10px);
    color: var(--k15t-color-text-link);
}

div.link--withArrow a.link:hover {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}
.moduleHeading {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

.moduleHeading h2 {
    font-size: var(--k15t-font-size-2x-large);
    font-family: var(--k15t-font-akadmie-medium);
    scroll-margin-top: 150px;
}

.moduleHeading p,
.moduleHeading p > *,
.moduleHeading p > a {
    max-width: 80%;
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-large);
}

.moduleHeading p > a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.moduleHeading p > a:hover {
    text-decoration: underline;
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .moduleHeading p,
    .moduleHeading p > a,
    .moduleHeading p > * {
        max-width: 100%;
        font-size: var(--k15t-font-size-medium-large);
    }

    .moduleHeading p > a {

    }

    .moduleHeading h2 {
        font-size: var(--k15t-font-size-x-large);
    }
}
.promoCard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.promoCard--row,
.promoCard--row-reverse {
    gap: var(--k15t-gap-3x-large);
}

.promoCard--row {
    flex-direction: row;
}

.promoCard--row-reverse {
    flex-direction: row-reverse;
}

.promoCard--vertical {
    flex-direction: column;
    max-width: 600px;
    gap: var(--k15t-gap-large);
}

.promoCard.promoCard--vertical > img {
    max-width: fit-content;
}

.promoCard__media {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-large);
    width: 100%;
    max-width: 620px;
}

.promoCard--vertical:has(.promoCard__media) .promoCard__media {
    max-width: 580px;
}

.promoCard__media > img {
    width: 100%;
}

.promoCard--img {
}

.promoCard__media > img.promoCard--logo {
    width: fit-content;
    height: 64px;
}

.promoCard__content {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    margin: auto 0;
    width: 480px;
}

.promoCard.promoCard--vertical > .promoCard__content {
    margin: 0;
}

.promoCard__content * {
    max-width: 480px;
}

.promoCard__content ul {
    margin: 0;
    padding: var(--k15t-gap-large) var(--k15t-gap-large) var(--k15t-gap-large) 52px;
    border-radius: var(--k15t-box-border-radius);
    border: var(--k15t-box-border);
    list-style-position: outside;
    border-color: var(--promo-list-border-color);
    background-color: var(--promo-list-bg-color);
}

.promoCard__content ul li > * {
    font-size: var(--k15t-font-size-medium-large);
}

.promoCard__label mark {
    font-family: 'akademie-mono-italic', monospace;
    font-style: italic;
    font-size: var(--k15t-font-size-large);
    letter-spacing: -3.2px;
    padding: 2px 8px;
    width: fit-content;
}

.promoCard__content h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--k15t-font-size-x-large);;
    max-width: 520px;
}

.promoCard__content img {
    height: 64px;
    width: fit-content;
    margin-bottom: var(--k15t-gap-small);
}

.promoCard__content p {
    font-size: var(--k15t-font-size-large);;
}

/*
 * The text carrier is a <div>, not a <p>, because a `richtext` value is FLOW
 * content: contentLeftRight passes a rich value and a <p> wrapping a <p> is
 * auto-closed by every parser, which left the data-prop carrier EMPTY and
 * unbindable (measured live, build 1286). A <div> legally holds flow content.
 *
 * These declarations reproduce exactly what the <p> used to get, so the five
 * callers that pass a PLAIN value render unchanged:
 *   font-size   from `.promoCard__content p` above (and the 768px rule below)
 *   line-height from `p, a` in css/base/typography.css
 *   margin/padding are 0 on a div already, matching that same rule.
 * The flex column reproduces the other half: rich content used to land as
 * SIBLING flex items of .promoCard__content, spaced by its gap. Now nested one
 * level deeper, it keeps that spacing instead of collapsing into a solid block.
 * Descendant rules (`.promoCard__content p a`, `p strong`, `ul`) still match
 * through the wrapper, so rich content is styled exactly as before.
 */
.promoCard__content .promoCard__text {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    font-size: var(--k15t-font-size-large);
    line-height: var(--k15t-line-height-large);
    margin: 0;
    padding: 0;
}

.promoCard__content p a {
    font-size: inherit;
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.promoCard__content p a:hover {
    text-decoration: underline;
}

.promoCard__content p strong {
    font-size: var(--k15t-font-size-large);
    font-family: var(--k15t-font-akadmie-medium);
}

.promoCard__content .link-button {
    margin-top: var(--k15t-gap-x-small);
}

/* Small Desptop */
@media(max-width: 1205px) {
    .promoCard {
        justify-content: space-around;
    }
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .promoCard--row,
    .promoCard--row-reverse {
         gap: var(--k15t-gap-small);
    }

    .promoCard__content {
        width: 100%;
    }

    .promoCard__content h3 {
        font-size: var(--k15t-font-size-medium-large);
    }

    .promoCard__content p,
    .promoCard__content .promoCard__text {
        font-size: 18px;
    }

    .promoCard__label mark {
        font-size: var(--k15t-font-size-medium-large);
    }

    .promoCard--vertical .promoCard__media > img.promoCard--img {
        display: none;
    }
}
.sideInfo__item {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
}

.sideInfo__item > img {
    width: 100px;
    height: 100px;
}

.sideInfo__item-content {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

.sideInfo__item-content span:first-of-type {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-semibold);
}

.sideInfo__item-assetPage {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-small);
    align-items: center;
}

/* Link colour for both rendered shapes inside sideInfo content:
   (1) plain <a> tags emitted by Confluence rich-text (e.g. <span><p><a>label</a></p></span>)
   (2) #@link block macro wrapping an asset-page <div><p>
   The global `*, html { color: n700 }` rule in base/typography.css sets colour
   on every element, so plain inheritance from a.link isn't enough — we re-assert
   the link token on both the <a> itself and the inner <p> for case 2. */
.sideInfo__item-content a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.sideInfo__item-content a:hover {
    text-decoration: underline;
}

.sideInfo__item-content a.link p {
    color: var(--k15t-color-text-link);
}

.sideInfo__item-content span p {
    margin-bottom: 15px;
}

.sideInfo__item-content span p:last-of-type {
    margin-bottom: 0;
}

/* Strip bullets/numbers from rich-text lists authored in the text property */
.sideInfo__item-content ul,
.sideInfo__item-content ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* List variant: page icon capped to small-icon size (source images vary) */
.sideInfo__item-assetPage > img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* List variant: name + optional description stacked next to the image */
.sideInfo__item-assetPage--text {
    display: flex;
    flex-direction: column;
}

.sideInfo__item-assetPage--text p {
    margin: 0;
}

/* Scoped under a.link to outweigh both the semibold
   .sideInfo__item-content span:first-of-type rule and the link-blue
   .sideInfo__item-content a rule */
.sideInfo__item-content a.link .sideInfo__item-assetPage--description {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-regular);
    color: var(--k15t-color-text-secondary);
}


/* Smartphone */
@media(max-width: 768px) {
    .sideInfo__item > img {
        width: 60px;
        height: 60px;
    }

    .sideInfo__item-assetPage img {
        width: 20px;
    }
}

/* overlay — consolidated */

/* utils */

/* shared — now co-located */

/* components — already co-located */

.coloredStripe__base {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
    margin: auto;
    text-align: center;
    align-items: center;
}

.coloredStripe__base.boxTile {
    padding: 80px;
    width: 100%;
    border-radius: 0 80px 80px 80px;
}

.coloredStripe__base p.centeredHeadingWithText--text {
    font-size: var(--k15t-font-size-large);
}

.coloredStripe__base:has(.coloredStripeLogos__heading) {
    gap: var(--k15t-gap-medium);
}

/* Tablet */
@media(max-width: 1024px) {
    .coloredStripe__base > form.form {
        min-width: 450px;
    }

}

/* Smartphone */
@media(max-width: 768px) {
    .coloredStripe__base.boxTile {
        padding: 40px var(--k15t-gap-small);
    }

    .coloredStripe__base > form.form {
        min-width: 100%;
    }

    .coloredStripe__base.boxTile {
        border-radius: 0 40px 40px 40px;
    }
}
.featureListBase {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 47px;
}

.featureListBase img {
    max-width: 100%;
}

.featureListBase__feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--k15t-gap-small);
}

.featureListBase__feature hgroup {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small)
}

.featureListBase__feature h3 {
    font-size: var(--k15t-font-size-large);
    margin: 0;
}

.featureListBase__feature p strong {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-size-medium);
}

.featureListBase__feature p > a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.featureListBase__feature p > a:hover {
    text-decoration: underline;
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .featureListBase {
        gap: var(--k15t-gap-large);
    }

    .featureListBase__feature hgroup {
        display: contents;
    }

    .featureListBase__feature h3 {
        font-size: var(--k15t-font-size-medium-large);
        align-self: center;
    }
}

.applicationProcess {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
}

.applicationProcess > img {
    display: flex;
    width: 100%;
    max-width: var(--k15t-icon-size-large);
}

.applicationProcess__step {
    display: flex;
    flex-direction: column;
    width: 186px;
    gap: var(--k15t-gap-x-small);
}

.applicationProcess__step img {
    display: block;
    width: 100%;
}

.applicationProcess__step h3 {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
    margin: 0;
}

.applicationProcess__step p {
    font-size: var(--k15t-font-size-medium);
}

.applicationProcess__textHint * {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-regular);
}

.applicationProcess__textHint * > a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.applicationProcess__textHint * > a {
    text-decoration: underline;
}


/* Tablet */
@media(max-width: 1024px) {
    .applicationProcess {
        flex-direction: column;
        width: fit-content;
        align-items: center;
        margin: 0 auto;
    }

    .applicationProcess > img {
        transform: rotate(90deg);
    }

    .applicationProcess__step img {
        max-width: 100px;
    }
}

/* Smartphone */
@media(max-width: 768px) {

}
.boxesLeftRight {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-large);
    justify-content: space-around;
}

.boxesLeftRight .linkEntry__image {
    width: 40px;
    height: 40px;
}

.boxesLeftRight .linkEntry__heading {
    font-size: var(--k15t-font-size-medium);
}

.boxesLeftRight .linkEntry__text {
    font-size: 14px;
}

.boxesLeftRight__boxContainer {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-large);
    max-width: 500px;
    background-color: var(--k15t-color-surface);
    border: 2px solid var(--k15t-color-night-n700);
    box-shadow: -8px 0 0 0 var(--k15t-color-purple-p200);
    padding: var(--k15t-gap-x-large);
}

.boxesLeftRight__boxContainer > h3 {
    margin: 0 0 var(--k15t-gap-small) 0;
    font-size: var(--k15t-font-size-x-large);
    text-align: center;
}

.boxesLeftRight__boxContainer p > a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.boxesLeftRight__boxContainer p > a:hover {
    text-decoration: underline;
}

a.link.boxesLeftRight__boxEntry {
    padding: var(--k15t-gap-x-small);
    border-radius: var(--k15t-radius-x-small);
}

.boxesLeftRight__boxEntry:hover {
    background-color: var(--k15t-color-night-n50);
    text-decoration: none;
}

.boxesLeftRight__boxEntry--text {
    color: var(--k15t-color-night-n400);
    opacity: 0.8;
}

.contentLeftRight {
    display: flex;
    flex-direction: column;
    gap: 112px;
}
.contentSlider {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-3x-large);
}

.contentSlider__selection {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
    margin: 0 auto;
    width: 100%;
    overflow-x: auto;
}

.contentSlider__selection__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 50%;
    padding: var(--k15t-gap-small);
}

.contentSlider__selection__button:hover,
.contentSlider__selection__button--active {
    opacity: 100%;
}

.contentSlider__selection__button img {
    width: fit-content;
    max-width: 100px;
}

.contentSlider__selection__button span {
    font-family: var(--k15t-font-akadmie-bold);
    font-size: var(--k15t-font-size-large);
    color: var(--k15t-color-night-n700);
}

.contentSlider__contentContainer__card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.contentSlider__typeContainer {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-3x-large);
}

.contentTypeSlider__boxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--k15t-gap-2x-large);
    padding: 0 8px;
}

.contentSlider__typeContainer .boxesLeftRight__boxContainer {
    gap: unset;
}

.contentTypeSlider__boxes .boxesLeftRight__boxContainer h3 {
    text-align: left;
}

.contentTypeSlider__boxes > .contentTypeSlider__boxes--left {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-2x-large);
    width: 100%;
    max-width: 400px;
}

.contentTypeSlider__boxes--author {
    margin: var(--k15t-gap-small) 0;
}

.contentTypeSlider__boxes--author .author__details > span {
    font-size: var(--k15t-font-size-medium-large);
}

.contentTypeSlider__boxes--right {
    display: flex;
    flex-direction: column;
}

.contentTypeSlider__boxes--right h3,
.contentTypeSlider__boxes--left h3 {
    font-size: var(--k15t-font-size-large);
}

.contentTypeSlider__boxes--right-box h3,
.contentTypeSlider__boxes--left-box h3,
.contentTypeSlider__boxes--right div {
    margin-bottom: var(--k15t-gap-small);
    font-size: var(--k15t-font-size-medium-large);
}

.contentTypeSlider__boxes--right p,
.contentTypeSlider__boxes--left p {
    margin-bottom: var(--k15t-gap-medium);
}

.contentTypeSlider__boxes--right > .boxesLeftRight__boxContainer {
    max-width: 500px;
}

.boxesLeftRight__boxContainer > div.contentTypeSlider__boxes--right-box {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
    justify-content: space-between;
    margin: var(--k15t-gap-x-large) 0;
}

.contentTypeSlider__boxes--right-box > hgroup,
.contentTypeSlider__boxes--right-box > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contentTypeSlider__boxes--right-box > div {
    gap: var(--k15t-gap-medium);
}

.contentTypeSlider__boxes--right-box > hgroup .link {
    font-family: var(--k15t-font-akadmie-medium);
}

.contentTypeSlider__boxes--right-box > hgroup .link > img {
    margin-left: 10px;
}

.contentTypeSlider__boxes--right-box > hgroup .link:hover > img {
    margin-left: 13px;
}


.contentTypeSlider__boxes--right-box > hgroup > address {
    font-style: normal;
}

.contentTypeSlider__boxes--right-box > img {
    height: fit-content;
}


/* Tablet */
@media(max-width: 1024px) {
    .contentTypeSlider__boxes > .contentTypeSlider__boxes--left {
        flex-direction: row;
        max-width: 100%;
    }

    .contentTypeSlider__boxes--right > .boxesLeftRight__boxContainer {
        width: 100%;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .contentSlider__selection__button span {
        font-size: var(--k15t-font-size-medium-large);
    }

    .contentTypeSlider__boxes > .contentTypeSlider__boxes--left {
        flex-direction: column;
    }

    .boxesLeftRight__boxContainer h3 {
        font-size: var(--k15t-font-size-medium-large);
    }

    .contentTypeSlider__boxes--right-box > img {
        width: 60px;
        height: fit-content;
    }
}

.ctaTiles {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.ctaTile {
    max-width: 585px;
}

.ctaTile__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-small);
}

.ctaTile__logo {
    width: auto;
    height: 48px;
    object-fit: contain;
}

.ctaTile__titleContainer {
    display: flex;
    flex-direction: column;
}

.ctaTile__title {
    font-size: var(--k15t-font-size-large);
    font-family: var(--k15t-font-akadmie-bold);
    color: var(--k15t-color-night-n700);
    line-height: 1.1;
}

.ctaTile__heading {
    font-size: var(--k15t-font-size-x-large);
    font-family: var(--k15t-font-akadmie-medium);
    margin: var(--k15t-gap-small) 0;
    line-height: 44px;
    color: var(--k15t-color-night-n700);
}

.ctaTile__footer {
    margin-top: auto;
}

/* Tablet */
@media(max-width: 1024px) {
    .ctaTiles {
        gap: var(--k15t-gap-x-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .ctaTiles {
        flex-direction: column;
        gap: var(--k15t-gap-x-large);
    }

    .ctaTile {
        max-width: 100%;
    }

    .ctaTile__title {
        font-size: var(--k15t-font-size-medium-large);
    }

    .ctaTile__heading {
        font-size: var(--k15t-font-size-large);
        line-height: 1.3;
    }
}

.coloredStripeButton .centeredHeadingWithText h2 {
    font-family: var(--k15t-font-akadmie-semibold);
    font-size: var(--k15t-font-size-2x-large);
    line-height: var(--k15t-line-height-x-small);
    color: var(--k15t-color-night-n700);
    margin: 0;
}

.coloredStripeForm .button,
.coloredStripeButton .link-button {
    padding: var(--k15t-gap-x-small) var(--k15t-gap-large);
}

.coloredStripeForm .button {
    padding: 15px 32px;
}

.coloredStripeForm .button_text,
.coloredStripeButton .link-button_link {
    font-size: var(--k15t-button-font-size);
    font-family: var(--k15t-font-akadmie-regular);
}

.coloredStripeForm .button_text:after,
.coloredStripeButton .link-button_link:after {
    content: "";
}

.coloredStripeButton__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--k15t-gap-medium);
}

@media(max-width: 768px) {
    .coloredStripeButton .centeredHeadingWithText h2 {
        font-size: var(--k15t-font-size-x-large);
    }
}
.coloredStripeImages {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-large);
    justify-content: space-around;
}

.coloredStripeImages__image {
    position: relative;
    width: 395px;
    height: 245px;
    cursor: pointer;
}

.coloredStripeImages__image--initial,
.coloredStripeImages__image--hovered {
    transition: opacity ease-in-out 200ms;
}

.coloredStripeImages__image--initial img,
.coloredStripeImages__image--hovered img {
    max-width: 395px;
}

.coloredStripeImages__image--initial {
    position: absolute;
    opacity: 1;
    z-index: 10;
}

.coloredStripeImages__image--hovered {
    position: absolute;
    opacity: 0;
    z-index: 1;
}

.coloredStripeImages__image:hover .coloredStripeImages__image--hovered {
    opacity: 1;
}

.coloredStripeImages__image:hover .coloredStripeImages__image--initial {
    opacity: 0;
}

.coloredStripeLogos {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
    justify-content: flex-start;
    width: 100%;
}

.coloredStripeLogos__heading {
    font-size: var(--k15t-font-size-large);
    font-family: var(--k15t-font-akadmie-medium);
    color: var(--k15t-color-night-n700);
}

.coloredStripeLogos__heading--small {
    font-size: var(--k15t-font-size-medium-large);
}

.slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(
            to right,
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
    );
}

.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    /* Track holds exactly two copies of the logo list (duplicated in the .vm),
       so sizing to content and sliding -50% is always exactly one copy — seamless
       at every breakpoint without keeping width constants in sync. */
    width: max-content;
}

.slider .slide {
    height: 75px;
    width: 184px;
    margin: 0 24px;
}

.slider .slide img {
    height: stretch;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Tablet */
@media(max-width: 1024px) {
    .slider .slide {
        width: 163px;
        height: 63px;
        margin: 0 16px;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .coloredStripeLogos__heading {
        font-size: var(--k15t-font-size-large);
    }
}
.coloredStripe__pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--k15t-gap-medium);
}

.coloredStripe__pill {
    display: flex;
    gap: var(--k15t-gap-x-small);
    align-items: center;
    border-radius: var(--k15t-radius-pill);
    border: var(--k15t-border-standard);
    padding: 5px 10px;
}

.coloredStripe__pill span {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-medium);
}
.contentTilesRow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-large);;
}

.contentTilesRow > h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.contentTilesRow_wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
    width: fit-content;
    overflow: hidden;
}

[data-k15t="horizontal-scroll"] {
    overflow-x: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

[data-k15t="horizontal-scroll"]::-webkit-scrollbar {
    background: transparent; /* make scrollbar transparent */
}

.contentTilesRow nav {
    display: none;
    flex-direction: row;
    justify-content: end;
    gap: var(--k15t-gap-large);
}

button.prev,
button.next {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: var(--k15t-border-standard);
    background-color: var(--k15t-color-surface);
    cursor: pointer;
}

button.prev > img {
    transform: rotate(-180deg);
}

button.next {

}

button.prev:hover,
button.next:hover {
    background-color: var(--k15t-color-yellow-y500);
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {

}
.contentImage {
    display: flex;
    justify-content: center;
}

.contentImage__image {
    max-width: 100%;
    height: auto;
}

.dataSheet {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-2x-large);
    justify-content: space-between;
}

.dataSheet__container {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
}

.dataSheet__container--left {
    max-width: 600px;
}

.dataSheet__container--right {
    max-width: 495px;
}

.dataSheet__container__main {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

/* Main heading/text match the aside sections (.dataSheet__aside-heading / body) */
.dataSheet__container__main h2 {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-semibold);
}

.dataSheet__container__main p {
    font-size: var(--k15t-font-size-medium);
}

.dataSheet__container__details {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-large);
}

.dataSheet__container__details--item {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-small);
    max-width: 185px;
    min-width: 185px;
}

.dataSheet__container__details--item span:first-of-type {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
}

/* Aside sections: heading + content (link-entry rows, pills, or rich text) */
.dataSheet__aside {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

.dataSheet__aside-heading {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-semibold);
}

.dataSheet__aside-text p {
    font-size: var(--k15t-font-size-medium);
}

.dataSheet__aside-text a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.dataSheet__aside-text a:hover {
    text-decoration: underline;
}

/* Strip bullets from rich-text lists authored in the text property */
.dataSheet__aside-text ul,
.dataSheet__aside-text ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Rich-text lines with inline icons (<span class="inline-image"><img>… text):
   flex centers icon and text on one line — inline/baseline imgs would
   otherwise ride high above the text */
.dataSheet__aside-text li {
    margin-bottom: var(--k15t-gap-small);
}

.dataSheet__aside-text li p {
    display: flex;
    align-items: center;
    gap: var(--k15t-gap-x-small);
    margin: 0;
}

.dataSheet__aside-text .inline-image {
    display: inline-flex;
}

/* Fallback for icon lines authored with <br> instead of bullets */
.dataSheet__aside-text .inline-image img {
    vertical-align: middle;
}

.dataSheet__aside-links {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

a.link.dataSheet__linkEntry.linkEntry {
    line-height: 1;
}

/* Shared .linkEntry rows using the linkEntry--framed variant
   (components/shared/linkEntry.css) — only aside-column sizing lives here;
   base icon is 112px (box context) */
.dataSheet__linkEntryIcon {
    width: 48px;
    height: 48px;
}

.linkEntry__content.dataSheet__linkEntryContent {
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.dataSheet__linkEntryHeading {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-semibold);
}

.dataSheet__linkEntryText {
    font-size: var(--k15t-font-size-medium);
    color: var(--k15t-color-text-secondary);
}

/* Pill tiles: small white rounded tiles (icon + name), "apps used" / "platform used".
   Visual language follows .categoryLabel--pill (displayCategory.css). */
.dataSheet__pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-small);
}

a.link.dataSheet__pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-x-small);
    border-radius: var(--k15t-radius-x-small);
    background-color: var(--k15t-color-surface);
    padding: 4px 8px;
    width: fit-content;
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-medium);
    color: var(--k15t-color-text-primary);
    text-decoration: none;
}

a.link.dataSheet__pill:hover {
    text-decoration: underline;
}

.dataSheet__pill-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* "Platforms used" (the only pills section in the right column) gets larger icons */
.dataSheet__container--right .dataSheet__pill-img {
    width: 32px;
    height: 32px;
}

/* Explicit font on the span — the global `*, html` rule in base/typography.css
   sets akademie-regular on every element, so anchor-level family never inherits */
.dataSheet__pill-name {
    font-size: var(--k15t-font-size-medium);
    font-family: var(--k15t-font-akadmie-medium);
    color: var(--k15t-color-text-primary);
}

.dataSheet__container__numbers {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

.dataSheet__container__numbers--number {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-small);
    justify-content: space-between;
}

.dataSheet__container__numbers--number .numberStripe__number-container {
    gap: var(--k15t-gap-small);
}

.dataSheet__container__numbers--number .numberStripe__text-after {
    font-family: var(--k15t-font-akadmie-regular);
    font-style: normal;
    letter-spacing: 0;
}

/* Tablet */
@media(max-width: 1024px) {
    .dataSheet {
        flex-wrap: wrap;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .dataSheet__container__numbers--number .numberStripe__number span {
        font-size: var(--k15t-font-size-x-large);
    }
}
.displayCurrentJobs {
    display: flex;
    flex-direction: column;
}

joblistings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-medium);
}

joblistings > div {
    width: fit-content;
    min-width: 300px;
    max-height: 300px;
}

joblistings .jobListings__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k15t-gap-x-small);
    background-color: var(--k15t-color-surface);
    padding: var(--k15t-gap-x-large);
    max-width: 350px;
    height: 100%;
    border: var(--k15t-border-standard);
    border-color: var(--k15t-color-night-n700);
}

joblistings .jobListings__link span {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-small);
    align-items: center;
}

joblistings .jobListings__link--name {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-large);
    margin-bottom: var(--k15t-gap-x-small);
}

joblistings .jobListings__link--location,
joblistings .jobListings__link--schedule {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium-large);
}

joblistings .jobListings__link--schedule {
    text-transform: capitalize;
}

joblistings .jobListings__link:hover {
    background-color: var(--k15t-color-night-n50);
    text-decoration: none;
}

.displayCurrentJobs__disclaimer {
    font-family: var(--k15t-font-akadmie-light);
    font-size: var(--k15t-font-size-medium);
    margin-top: var(--k15t-gap-x-large);
}

.displayCurrentJobs__socialProof {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-large);
    margin-top: var(--k15t-gap-3x-large);
}

.displayCurrentJobs__socialProof img {
    display: block;
    width: 100%;
    height: fit-content;
    max-width: 150px;
}
.faqs {
    display: flex;
    flex-direction: column;
}

.faqs__item {
    border-top: 1px solid var(--k15t-color-night-n100);
    overflow: hidden;
}

.faqs__item:last-child {
    border-bottom: 1px solid var(--k15t-color-night-n100);
}

.faqs__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k15t-gap-medium);
    padding: var(--k15t-gap-medium) 0;
    color: var(--k15t-color-night-n700);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.faqs__question span {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-large);
}

.faqs__question:hover {
    color: var(--k15t-color-night-n500);
    background-color: var(--k15t-color-night-n50);
}

.faqs__question:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--k15t-radius-x-small);
    background-color: var(--k15t-color-night-n50);
}

.faqs__icon {
    display: inline-block;
    width: var(--k15t-icon-size-medium);
    min-width: var(--k15t-icon-size-medium);
    height: var(--k15t-icon-size-medium);
    transition: transform 0.3s ease;
}

.faqs__item--open .faqs__icon {
    transform: rotate(180deg);
}

.faqs__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faqs__item--open .faqs__answer {
    grid-template-rows: 1fr;
}

.faqs__answerInner {
    overflow: hidden;
}

.faqs__answerContent {
    padding: 0 0 var(--k15t-gap-medium);
    font-size: var(--k15t-font-size-medium-large);
    color: var(--k15t-color-night-n500);
    line-height: var(--k15t-line-height-large);
}

.faqs__answerContent a {
    font-size: inherit;
}

.faqs__answerContent .link--withArrow a.link {
    display: flex;
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium-large);
    color: var(--k15t-color-text-link);
    margin-top: var(--k15t-gap-small);
    align-items: center;
}

/* Smartphone */
@media(max-width: 768px) {
    .faqs__question {
        padding: var(--k15t-gap-small) 0;
    }

    .faqs__question span {
        font-size: var(--k15t-font-size-medium);
    }

    .faqs__answerContent {
        font-size: var(--k15t-font-size-medium);
    }

    .faqs__answerContent .link--withArrow a.link {
        font-size: var(--k15t-font-size-medium);
    }
}

.companyValues__feature {
    max-width: 590px;
}

.companyValues__feature img {
    width: 96px;
    height: 96px;
}

/* Tablet */
@media(max-width: 1024px) {
    .companyValues__feature img {
        width: 96px;
        height: 96px;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .companyValues__feature {
        display: grid;
        grid-template-columns: 96px 1fr;
        grid-template-rows: auto auto;
        gap: var(--k15t-gap-small);
    }

    .companyValues__feature img {
        grid-column: 1;
        grid-row: 1;
        width: 96px;
        height: 96px;
    }

    .companyValues__feature h3 {
        grid-column: 2;
        grid-row: 1;
    }

    .companyValues__feature hgroup > div {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.featureList__feature {
    max-width: 385px;
}

.featureList__feature img {
    width: var(--k15t-icon-size-large);
    height: var(--k15t-icon-size-large);
}

/* Tablet */
@media(max-width: 1024px) {
    .featureList__feature img {
        width: var(--k15t-icon-size-large);
        height: var(--k15t-icon-size-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .featureList__feature {
        display: grid;
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
        gap: var(--k15t-gap-small);
    }

    .featureList__feature img {
        grid-column: 1;
        grid-row: 1;
        width: var(--k15t-icon-size-large);
        height: var(--k15t-icon-size-large);
    }

    .featureList__feature h3 {
        grid-column: 2;
        grid-row: 1;
    }

    .featureList__feature hgroup > div {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.freeContent {
    display: block;
}

.free-content--centered {
    margin: auto;
}

.free-content-width {
    width: 750px;
}

.freeContent__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-small);
    margin-bottom: var(--k15t-gap-medium);
}

.freeContent__author img {
    width: 60px;
    height: 60px;
    border-radius: var(--k15t-border-radius-circle);
}

.freeContent__author .link {
    font-family: var(--k15t-font-akadmie-medium);
}

.freeContent__backLink {
    margin-bottom: var(--k15t-gap-small);
}

.freeContent__link {
    text-decoration: none;
}

.freeContent__link:hover {
    text-decoration: underline;
}

.freeContent__link--text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-small);
}

.freeContent__link--text img {
    transform: rotate(180deg);
}

.freeContent__buttons {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
}

/* Tablet */
@media(max-width: 1024px) {
}

/* Smartphone */
@media(max-width: 768px) {
    .free-content-width {
        width: 100%;
    }
}
.filePreview {
    margin: var(--k15t-gap-x-large) 0;
}

.filePreview__container {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 110%;
}

.filePreview__file {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--k15t-gap-3x-large);
}

.header > img {
    max-width: 600px;
}

.header__content {
    display: flex;
    flex-direction: column;
    max-width: 900px;
}

.header__content > img + hgroup {
    margin-top: var(--k15t-gap-2x-large);
}

.header__content > hgroup {
    margin-bottom: 48px;
    min-width: 600px;
}

.header__content > hgroup + .header__buttons,
.header__content > hgroup + .form {
    margin-top: 0;
}

/* Label chip (e.g. "Customer Success Story") — header background color is
   editor-controlled, so the fill is semi-transparent white to work on any of them */
.header__content__label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: var(--k15t-gap-2x-large);
    padding: 10px 16px;
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-radius-medium);
    background-color: var(--k15t-color-surface-translucent);
    font-family: var(--k15t-font-akadmie-semibold);
    font-size: var(--k15t-font-size-medium);
    color: var(--k15t-color-text-primary);
}

.header__content > img {
    width: fit-content;
    height: 64px;
}

.header__content hgroup h1 {
    margin-top: 0;
    margin-bottom: var(--k15t-gap-medium);
    font-size: 56px;
    font-family: var(--k15t-font-akadmie-semibold);
}

/* Customer story pages (parent page titled "customers"): smaller h1.
   Desktop only — the chained-class specificity (0,2,2) would otherwise beat
   the (0,1,2) breakpoint rules below 1024px, freezing mobile at 48px/60px */
@media(min-width: 1025px) {
    .header__content.header__content--customer hgroup h1 {
        font-size: var(--k15t-font-size-2x-large); /* 48px */
        line-height: 60px;
    }
}

.header__content hgroup .header__content__text {
    max-width: 80%;
    font-size: var(--k15t-font-size-large);
}

.header__content hgroup .header__content__text strong,
.header__content hgroup .header__content__text b {
    font-family: var(--k15t-font-akadmie-bold);
}

.header__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-medium);
}

.header__buttons .link-button {
    padding: var(--k15t-gap-x-small) var(--k15t-gap-large);
}

.header__buttons .link-button_link {
    font-size: var(--k15t-button-font-size);
    font-family: var(--k15t-font-akadmie-regular);
}

.header__buttons .link-button--secondary .link-button_link {
    font-family: var(--k15t-font-akadmie-regular);
}

.header__buttons .link-button_link:after {
    content: "";
}

.header__media {
    display: flex;
    flex-direction: column;
    margin: auto 0;
}

.header__media--mobile {
    display: none;
    margin-bottom: var(--k15t-gap-small);
}

.header__media > img {
    width: fit-content;
}

.header__media > img[src*=".png"], .header__media > img[src*=".jpg"] {
    max-width: 570px;
    height: auto;
}
.header__media > img[src*=".svg"] {
    width: fit-content;
}

.header_media > .embedded-video {
    min-width: 570px;
}

/* Tablet */
@media(max-width: 1024px) {
    .header {
        gap: var(--k15t-gap-2x-large);
        flex-wrap: wrap;
    }

    .header__content > img {
        max-width: 250px;
    }

    .header__content > hgroup {
        min-width: 100%;
    }

    .header__content hgroup h1 {
        font-size: var(--k15t-font-size-2x-large);
    }

    .header__content hgroup .header__content__text * {
        font-size: var(--k15t-font-size-medium-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .header__content__label {
        margin-bottom: var(--k15t-gap-large);
    }

    .header__content > img + hgroup {
        margin-top: var(--k15t-gap-large);
    }

    .header__content > hgroup + .header__buttons {
        margin-top: var(--k15t-gap-large);
    }

    .header__content hgroup h1 {
        margin-bottom: var(--k15t-gap-small);
    }

    .header__content > hgroup {
        margin-bottom: 0;
    }

    .header__content > img {
        max-width: 300px;
        width: auto;
        height: 48px;
        margin-right: auto;
    }

    .header__content hgroup h1 {
        font-size: var(--k15t-font-size-x-large);
    }

    .header__content hgroup .header__content__text * {
        font-size: 18px;
        width: 100%;
        max-width: 100%;
    }

    .header__media--desktop {
        display: none
    }


    .header__media--mobile {
        display: flex
    }

    .header_media > .embedded-video {
        min-width: 100%;
    }

}
header.header_centered {
    position: relative;
    margin: 0 auto 0 auto;
    overflow: hidden;
    padding-top: 0 !important;
    background-color: var(--k15t-color-night-n700);
    color: var(--k15t-color-text-on-dark);
    min-height: 500px;
    display: flex;
    align-items: center;
}

.header_centered__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.header_centered__shape {
    position: absolute;
    opacity: 0.8;
    pointer-events: none;
    animation: float 20s infinite ease-in-out;
    z-index: 1;
}

.header_centered__pattern-top {
    width: 326px;
    height: 326px;
    top: -180px;
    left: 58%;
    animation-duration: 25s;
}

.header_centered__pattern-right {
    width: 631px;
    height: 631px;
    top: 100px;
    right: -340px;
    animation-duration: 30s;
    animation-delay: -5s;
}

.header_centered__pattern-bottom {
    width: 485px;
    height: 485px;
    bottom: -130px;
    right: 68%;
    animation-duration: 22s;
    animation-delay: -2s;
}

.header_centered__pattern-top svg,
.header_centered__pattern-right svg,
.header_centered__pattern-bottom svg,
.header_centered__pattern-top img,
.header_centered__pattern-right img,
.header_centered__pattern-bottom img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.05);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

.header_content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding: var(--k15t-gap-3x-large) 0;
    gap: 0;
    text-align: center;
    width: 100%;
}

.header_content--centered {
    padding: 272px 0 96px 0;
}

.header_content h1 {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-4x-large);
    line-height: 1.1;
    margin-bottom: 96px;
    color: var(--k15t-color-text-on-dark);
}

.header_content__highlight {
    font-size: var(--k15t-font-size-4x-large);
    line-height: 1.1;
    margin-bottom: var(--k15t-gap-medium);
    color: var(--k15t-color-text-on-dark);
    font-family: var(--k15t-font-akadmie-medium);
}

.header_content__subtitle {
    color: var(--k15t-color-night-n700);
}

.header_content__subtitle mark {
    font-family: 'akademie-mono-italic', monospace;;
    font-style: italic;
    font-size: 28px;
    line-height: 1.6;
    letter-spacing: -3.2px;
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 1px 6px;
    margin: 0 auto;
}

.header_content__subtitle mark:first-of-type {
    background-color: var(--k15t-color-purple-p100);
}

.header_content__subtitle mark:last-of-type {
    background-color: var(--k15t-color-blue-b100);
}

.header_centered__buttons {
    display: flex;
    justify-content: center;
    gap: var(--k15t-gap-medium);
    margin-top: var(--k15t-gap-2x-large);
}

.header_centered__button {
    display: inline-flex;
    align-items: center;
    gap: var(--k15t-gap-x-small);
    padding: 10px 24px;
    border: 2px solid var(--k15t-color-text-on-dark);
    border-radius: var(--k15t-radius-pill);
    color: var(--k15t-color-text-on-dark);
    text-decoration: none;
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium);
    transition: all 0.2s ease-in-out;
}

.header_centered__button:first-child {
    border-color: var(--k15t-color-purple-p200);
}

.header_centered__button:last-child {
    border-color: var(--k15t-color-blue-b200);
}

.header_centered__button:hover {
    background-color: var(--k15t-color-surface);
    color: var(--k15t-color-night-n700);
}

.header_centered__button svg path {
    fill: var(--k15t-color-text-on-dark);
    transition: fill 0.2s ease-in-out;
}

.header_centered__button:hover svg path {
    fill: var(--k15t-color-night-n700);
}

.header_centered__button-icon {
    display: flex;
    align-items: center;
}

@media (max-width: 1200px) {
    header.header_centered {
        margin-top: 75px;
    }
    .header_content h1 {
        font-size: 64px;
    }
}

@media(max-width: 768px) {
    header.header_centered {
        margin-top: 0;
        min-height: 400px;
    }

    .header_centered__buttons {
        margin-top: 48px;
    }

    .header_content h1 {
        font-size: 40px;
        margin-bottom: 48px;
    }
    .header_content--centered {
        padding: calc(2*var(--k15t-gap-2x-large)) 20px var(--k15t-gap-2x-large) 20px;
    }
    .header_content__subtitle mark {
        font-size: var(--k15t-font-size-medium-large);
    }

    .header_content__subtitle {
        padding: 0 15px;
    }

    .header_content__highlight {
        font-size: 40px;
    }
    .header_centered__background {
        display: none;
    }
    .header_centered__buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--k15t-gap-small);
    }
}
.headerPlatform {
    position: relative;
    overflow: hidden;
}

.headerPlatform__shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.headerPlatform__shape {
    position: absolute;
    animation: headerPlatformFloat 20s infinite ease-in-out;
    z-index: 1;
}

.headerPlatform__shape img {
    width: 100%;
    height: auto;
    display: block;
}

.headerPlatform__shape--1 {
    width: 631px;
    top: -310px;
    right: -20px;
    animation-name: headerPlatformFloatHorizontal;
    animation-duration: 25s;
}

.headerPlatform__shape--2 {
    width: 386px;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    animation-duration: 30s;
    animation-delay: -5s;
}

.headerPlatform__shape--3 {
    width: 328px;
    bottom: -210px;
    left: 40%;
    animation-duration: 22s;
    animation-delay: -2s;
}

.header--platform .header__content hgroup h1 {
    font-size: var(--k15t-font-size-4x-large);
}

.headerPlatform .header__content hgroup .header__content__text,
.headerPlatform .header__content hgroup .header__content__text * {
    font-size: var(--k15t-font-size-x-large);
}

.headerPlatform .header__content hgroup .header__content__text strong,
.headerPlatform .header__content hgroup .header__content__text b {
    font-family: var(--k15t-font-akadmie-semibold);
}

.headerPlatform .container {
    position: relative;
    z-index: 2;
}

@keyframes headerPlatformFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.05);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

@keyframes headerPlatformFloatHorizontal {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -15px) scale(1.05);
    }
    66% {
        transform: translate(-40px, 10px) scale(0.95);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .headerPlatform__shape--1 {
        width: 240px;
    }
    .headerPlatform__shape--2 {
        width: 220px;
    }
    .headerPlatform__shape--3 {
        width: 260px;
    }

    .headerPlatform .header__content hgroup h1 {
        font-size: var(--k15t-font-size-2x-large);
    }

    .headerPlatform .header__content hgroup .header__content__text,
    .headerPlatform .header__content hgroup .header__content__text * {
        font-size: 28px;
    }
}

/* Smartphone */
@media (max-width: 768px) {
    .headerPlatform__shapes {
        display: none;
    }

    .headerPlatform .header__content hgroup h1 {
        font-size: var(--k15t-font-size-x-large);
    }

    .headerPlatform .header__content hgroup .header__content__text,
    .headerPlatform .header__content hgroup .header__content__text * {
        font-size: var(--k15t-font-size-medium-large);
    }
}

/* Clip the decorative patterns to the module's painted area — they use
   negative offsets and would otherwise bleed over the nav / next module */
.module-wrapper--header-small {
    overflow: hidden;
}

.header--small {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-2x-large);
}

/* Patterns sit above the wrapper's background color but behind the text
   (without an explicit z-index they'd paint over the static heading,
   as they follow it in the DOM) */
.header--small--pattern1,
.header--small--pattern2 {
    position: absolute;
    z-index: 0;
}

.header--small--pattern1 {
    right: 170px;
    bottom: -275px
}

.header--small--pattern2 {
    right: -295px;
    top: -260px;
}

.header__heading--small {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
}

.header__heading--small h1 {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-3x-large);
}

.header__heading--small p {
    font-size: var(--k15t-font-size-large);
}

/* When the wrapper's background matches the default text color (night-n700),
   flip the header text to white so it remains legible. */
.header--small--inverse-text,
.header--small--inverse-text h1,
.header--small--inverse-text p {
    color: white;
}


/* Smartphone */
@media(max-width: 768px) {
    .header--small--left-media {
        display: none;
    }

    .header--small--right-media {
        display: none;
    }
}
.headerUseCase {
    justify-content: space-between;
    gap: var(--k15t-gap-3x-large);
}

.headerUseCase .header__content {
    max-width: none;
    flex: 1;
}

.headerUseCase .header__media {
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.headerUseCase .header__media > img {
    width: 264px;
}

.headerUseCase .header__media--desktop {
    max-width: max-content;
}

.headerUseCase .header__media--mobile {
    align-items: flex-start;
}

.headerUseCase .header__media--mobile > img {
    max-width: 160px;
}

.header--subpage {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-2x-large);
}

.header__heading--subpage {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
}

.header__logo {
    display: flex;
    max-height: 50px;
    width: fit-content;
}

.header__heading--subpage h1 {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-2x-large);
}

.header__heading--subpage p {
    font-size: var(--k15t-font-size-large);
}
.infoBox {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-3x-large);
}

.infoBox__text {
    width: 890px;
    max-width: 100%;
}

.infoBox__text--heading {
    display: flex;
    gap: var(--k15t-gap-x-small);
    flex-wrap: wrap;
    align-items: center;
    font-size: 18px;
    font-family: var(--k15t-font-akadmie-medium);
    margin-bottom: var(--k15t-gap-medium);
}

.infoBox__text--icon {
    width: 20px;
    height: 20px;
}

.infoBox__text--text {
    font-size: var(--k15t-font-size-medium);
}

.infoBox__links {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
    justify-content: center;
}

.infoBox__links > a.link {
    color: var(--k15t-color-text-link);
    font-size: var(--k15t-font-size-medium);
}

/* Tablet */
@media(max-width: 1200px) {
    .infoBox {
        flex-direction: column;
        gap: var(--k15t-gap-x-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {

}
.imageGallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    height: 703px;
    overflow: hidden;
}

.imageGallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: cover;
}

.imageGallery img.visible {
    opacity: 1;
}

/* Tablet */
@media(max-width: 1024px) {
    .imageGallery {
        height: 450px;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .imageGallery {
        height: 300px;
    }
}
.linkListBoxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k15t-gap-3x-large);
}

.linkListBoxes__box {
    flex: 1 1 585px;
    max-width: 585px;
}

.linkListBoxes--single .linkListBoxes__box {
    max-width: 100%;
}

.linkListBoxes__boxHeading {
    font-size: var(--k15t-font-size-x-large);
    font-family: var(--k15t-font-akadmie-medium);
    color: var(--k15t-color-night-n700);
    margin: 0 0 var(--k15t-gap-small) 0;
}

.linkListBoxes__links {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-large);
}

/* Layout + hover come from the shared linkEntry--framed variant
   (components/shared/linkEntry.css) — only box-specific sizing lives here */
.linkListBoxes__linkIcon {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    object-fit: contain;
}

.linkListBoxes__linkHeading {
    line-height: 1.2;
    font-family: var(--k15t-font-akadmie-semibold);
    font-size: var(--k15t-font-size-medium-large);
}

.linkListBoxes__linkText {
    color: var(--k15t-color-night-n600);
}

/* Tablet */
@media(max-width: 1024px) {
    .linkListBoxes {
        gap: var(--k15t-gap-x-large);
    }

    .linkListBoxes__box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .linkListBoxes {
        gap: var(--k15t-gap-large);
    }

    .linkListBoxes__boxHeading {
        font-size: var(--k15t-font-size-large);
    }

    a.link.linkEntry.linkListBoxes__link {
        align-items: unset;
    }

    .linkListBoxes__linkIcon {
        width: 60px;
        height: 60px;
    }

    .linkListBoxes__linkHeading {
        font-size: 18px;
    }

    .linkListBoxes__linkText {
        font-size: var(--k15t-font-size-medium);
    }
}

.logoCollection {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
}

.logoCollection__category {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-medium);
}

.logoCollection__category:not(:last-child) {
    margin-bottom: var(--k15t-gap-3x-large);
}

.logoCollection__category__item {
    padding: var(--k15t-gap-small);
    background-color: var(--k15t-color-night-n50);
    width: 215px;
}

.logoCollection__category__item:hover {
    background-color: var(--k15t-color-night-n25);
}

.logoCollection__category__item img {
    width: 100%;
}

/* Tablet */
@media(max-width: 1024px) {
    .logoCollection__category:not(:last-child) {
        margin-bottom: var(--k15t-gap-2x-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .logoCollection__category__item {
        width: 170px;
    }
}
.mediaWithAside {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-2x-large);
    justify-content: space-between;
}

.mediaWithAside__media {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    flex: 1 1 auto;
    min-width: 0;
}

.mediaWithAside__media h2 {
    font-size: var(--k15t-font-size-x-large);
}

.mediaWithAside__media-item {
    width: 100%;
    height: auto;
    display: block;
}

/* PDF preview: portrait aspect, capped on short viewports */
object.mediaWithAside__media-item {
    aspect-ratio: 3 / 4;
    max-height: 70vh;
    height: auto;
}

/* Embedded-video wrapper inherits its own sizing from renderVideo.css; ensure it spans the column */
.mediaWithAside__media .embedded-video {
    width: 100%;
}

.mediaWithAside__aside {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
    flex: 0 1 auto;
    max-width: 495px;
}

/* Tablet */
@media(max-width: 1024px) {
    .mediaWithAside {
        flex-wrap: wrap;
    }

    .mediaWithAside__media,
    .mediaWithAside__aside {
        max-width: 100%;
    }

    .mediaWithAside__media h2 {
        font-size: var(--k15t-font-size-large);
    }
}

.pageCollection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-x-large) var(--k15t-gap-medium) ;
}

.pageCollection__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
    width: 400px;
}

.pageCollection__tile__imgContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    border: var(--k15t-border-standard);
    border-radius: var(--k15t-radius-medium);
}

.pageCollection__tile__imgContainer--blanket {
    position: absolute;
    background-color: var(--k15t-color-night-n700);
    transition: opacity .2s ease;
    inset: 0;
    opacity: 0;
}

.pageCollection__tile__imgContainer--blanket--text {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--k15t-color-text-on-dark);
    width: max-content;
}

.pageCollection__tile__imgContainer--blanket--text svg {
    margin-left: 10px;
}

.pageCollection__tile__imgContainer--img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    aspect-ratio: 4/3;
    transition: transform .2s ease-out;
}

.pageCollection__tile__heading {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-small);
}

.pageCollection__tile__heading--icon {
    height: 50px;
    width: 50px;
    border-radius: var(--k15t-border-radius-circle);
}

.pageCollection__tile__heading a {
    display: flex;
    font-size: var(--k15t-font-size-large);
    flex-direction: column;
    align-items: center;
}

.pageCollection__tile__heading a:after {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    cursor: pointer;
    content: "";
    background-color: transparent;
}

.pageCollection__tile__heading a h3,
.pageCollection__tile__heading a span {
    width: 100%;
}

.pageCollection__tile__heading a h3 {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
    margin: 0;
}

.pageCollection__tile__heading a span {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium-large);
}

.pageCollection__tile:hover .pageCollection__tile__imgContainer--zoom {
    transform: scale(1.2);
}


.pageCollection__tile:has(a.link:hover) .pageCollection__tile__imgContainer--blanket {
    opacity: .9;
}

.pageCollection__tile:hover .pageCollection__tile__heading a {
    text-decoration: none;
}

.pageCollection__tile__heading >  {
    opacity: 1;
}

/* Variant: small */
.pageCollection--small .pageCollection__tile {
    width: 230px;
}

.pageCollection--small .pageCollection__tile__imgContainer {
    height: 170px;
}

/* Variant: landscape (16:9 image area instead of the default 4:3) */
.pageCollection--landscape .pageCollection__tile__imgContainer {
    height: auto;
    aspect-ratio: 16 / 9;
}

.pageCollection--landscape .pageCollection__tile__imgContainer--img {
    aspect-ratio: 16 / 9;
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .pageCollection__tile__imgContainer {
        height: auto;
    }
}


.pricing {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-3x-large);
    align-items: flex-start;
}

.pricing__box {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
    background-color: var(--pricing-box-bg-color);
    border-radius: 40px 0 40px 40px;
    border: 3px solid var(--pricing-box-border-color);
    padding: var(--k15t-gap-x-large);
    max-width: 420px;
    min-width: 280px;
    box-sizing: border-box;
}

.pricing__logo {
    width: auto;
    max-width: 200px;
    object-fit: contain;
    align-self: flex-start;
}

.pricing__priceText {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

.pricing__priceLabel {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-large);
    color: var(--k15t-color-night-n700);
}

.pricing__priceValue {
    font-family: var(--k15t-font-akadmie-bold);
    font-size: var(--k15t-font-size-x-large);
    line-height: var(--k15t-line-height-x-small);
    color: var(--k15t-color-night-n700);
}

.pricing__priceInfo {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-large);
    color: var(--k15t-color-night-n700);
}

.pricing__textBelow {
    margin-top: var(--k15t-gap-small);
}

.pricing__textBelow * {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: 0.875rem; /* 14px */
    line-height: var(--k15t-line-height-large);
    color: var(--k15t-color-night-n500);
}

.pricing__textBelow a {
    color: var(--k15t-color-text-link);
    text-decoration: none;
}

.pricing__textBelow a:hover {
    text-decoration: underline;
}

.pricing__features {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    padding-top: var(--k15t-gap-medium);
}

.pricing__featuresHeading {
    font-family: var(--k15t-font-akadmie-semibold);
    font-size: var(--k15t-font-size-medium-large);
    line-height: var(--k15t-line-height-small);
    color: var(--k15t-color-night-n700);
    margin: 0;
}

.pricing__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
    padding-top: var(--k15t-gap-large);
    padding-bottom: var(--k15t-gap-x-large);
}

.pricing__listItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--k15t-gap-x-small);
    font-family: var(--k15t-font-akadmie-regular);
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-large);
    color: var(--k15t-color-night-n700);
}

.pricing__checkIcon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Tablet */
@media(max-width: 1024px) {
    .pricing {
        gap: var(--k15t-gap-x-large);
    }

    .pricing__box {
        min-width: 240px;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .pricing {
        flex-direction: column;
        gap: var(--k15t-gap-x-large);
    }

    .pricing__box {
        max-width: 100%;
        min-width: unset;
        padding: var(--k15t-gap-large);
        gap: var(--k15t-gap-large);
    }

    .pricing__priceValue {
        font-size: var(--k15t-font-size-large);
    }

    .pricing__featuresHeading {
        font-size: var(--k15t-font-size-medium);
    }

    .pricing__list {
        padding-top: var(--k15t-gap-medium);
        padding-bottom: var(--k15t-gap-large);
    }
}

.productTiles{
    display: flex;
    flex-wrap: wrap;
    gap: var(--k15t-gap-medium);
    justify-content: space-evenly;
}

.productTile {
    display: flex;
    flex-direction: column;
    background-color: var(--k15t-color-surface);
    gap: var(--k15t-gap-large);
    justify-content: space-between;
    padding: var(--k15t-gap-large);
    border: 2px solid var(--k15t-color-night-n700);
    border-radius: var(--k15t-box-border-radius);
    max-width: 390px;
}

.productTile__content {
    display: flex;
    flex-direction: column;
}

.productTile img {
    height: 48px;
    width: fit-content;
    margin-bottom: var(--k15t-gap-x-large);
}

.productTile h3 {
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-medium);
    margin-bottom: var(--k15t-gap-small);
}

.productTile p {
    font-size: var(--k15t-font-akadmie-medium);
    font-family: var(--k15t-font-akadmie-regular);
}

.productTile__links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-small);
}

/* Tablet */
@media(max-width: 1024px) {
    .productTile {
        max-width: 100%;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .productTiles {
        gap: var(--k15t-gap-small);
    }

    .productTile {
        padding: var(--k15t-gap-medium);
        gap: var(--k15t-gap-medium);
    }

    .productTile img {
        height: 40px;
        margin-bottom: var(--k15t-gap-large);
    }

    .productTile h3 {
        font-size: var(--k15t-font-size-medium);
    }
}
.promoVerticalCards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Tablet */
@media(max-width: 1024px) {
    .promoVerticalCards {
        gap: var(--k15t-gap-3x-large);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .promoCard__content h3 {
        font-size: var(--k15t-font-size-large);
    }

    .promoCard__media {
        width: 100%;
        align-items: flex-start;
    }

    .promoCard--vertical .promoCard__media > img.promoCard--img {
        display: none;
    }

}


.numberStripe {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
}

.numberStripe__items {
    display: flex;
    flex-wrap: wrap;
    padding: 0 var(--k15t-gap-x-large);
    gap: var(--k15t-gap-3x-large);
    justify-content: space-between;
}

.numberStripe__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k15t-gap-x-small);
}

.numberStripe__box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--k15t-gap-x-small);
    padding: var(--k15t-gap-x-small);
    width: fit-content;
    height: auto;
}

.numberStripe__icon {
    height: var(--k15t-icon-size-large);
    width: var(--k15t-icon-size-large);
    object-fit: contain;
}

.numberStripe__number-container {
    display: flex;
    align-items: center;
    font-style: italic;
}

.numberStripe__number {
    display: flex;
    align-items: center;
    letter-spacing: -3.2px;
}

.numberStripe__number span {
    font-size: var(--k15t-font-size-x-large);
    font-family: var(--k15t-font-akadmie-mono-italic);
    line-height: 1;
    color: var(--k15t-color-night-n700);
}

.numberStripe__text-after {
    font-size: var(--k15t-font-size-x-large);
    font-family: var(--k15t-font-akadmie-mono-italic);
    letter-spacing: -3.2px;
    line-height: 1;
    color: var(--k15t-color-night-n700);
}

.numberStripe__description {
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-small);
    font-family: var(--k15t-font-akadmie-regular);
    color: var(--k15t-color-night-n700);
    text-align: center;
    margin: 0;
}

/* Tablet */
@media(max-width: 1024px) {
    .numberStripe__items {
        gap: var(--k15t-gap-medium);
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .numberStripe__item {
        flex: 1 1 100%;
        max-width: none;
    }

    .numberStripe__number span,
    .numberStripe__text-after {
        font-size: var(--k15t-font-size-large);
    }
}
.thinStripeFeatureIcon {
    display: flex;
    padding: 0;
    list-style: none;
    flex-flow: row wrap;
    gap: var(--k15t-gap-medium) 5px;
}

.thinStripeFeatureIcon__feature {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    flex: 0 0 33%;
    gap: var(--k15t-gap-x-small);
}

.thinStripeFeatureIcon__feature img {
    display: block;
    width: var(--k15t-icon-size-medium);
    height: var(--k15t-icon-size-medium);
}

.thinStripeFeatureIcon__feature span {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
}


/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .thinStripeFeatureIcon__feature {
        flex: unset;
        gap: var(--k15t-gap-small);
    }

    .thinStripeFeatureIcon__feature img {
        width: var(--k15t-icon-size-medium);
        height: var(--k15t-icon-size-medium);
    }

    .thinStripeFeatureIcon__feature span {
        font-size: var(--k15t-font-akadmie-medium);
    }
}
.quotes__quote {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-large);
}

.quotes__quote > img {
    height: fit-content;
    max-width: 300px;
    background-color: var(--k15t-color-white);
    border-radius: 40px 0 40px 40px;;
    border: 2px solid var(--quotes-accent-color, var(--k15t-color-night-n700));
    object-fit: contain;
}

.quotes__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
}

.quotes__quote--icon {
    display: none;
}


.quotes__quote--text-container {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-small);
    z-index: 10;
}

.quotes__quote--text mark {
    font-family: 'akademie-mono-italic', monospace !important;
    font-style: italic;
    font-size: var(--k15t-font-size-large);
    line-height: 1.6;
    letter-spacing: -3.2px;
}

.quotes__quote--text mark {
    background-color: var(--quotes-accent-color, var(--k15t-color-yellow-y400));
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: var(--k15t-gap-x-small) 6px;
}

.quotes__quote--author {
    display: flex;
    flex-direction: column;
    margin-top: var(--k15t-gap-x-small);
}

.quotes__quote--author-name {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: 1.125rem; /* 18px */
    line-height: var(--k15t-line-height-large);
}

.quotes__quote--author-title {
    font-family: var(--k15t-font-akadmie-regular);
    font-size: 1.125rem; /* 18px */
    line-height: var(--k15t-line-height-large);
}


.quotes__dots {
    display: flex;
    justify-content: center;
    gap: var(--k15t-gap-small);
    margin-top: var(--k15t-gap-medium);
}

.quotes__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--k15t-color-night-n300);
    border: 2px solid var(--k15t-color-night-n300);
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quotes__dot--active {
    background-color: var(--k15t-color-yellow-y400);
    border-color: var(--k15t-color-night-n300);
}

/* Tablet */
@media(max-width: 1024px) {
    .quotes__quote > img {
        max-height: 100px;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    .quotes__quote > img {
        display: none;
    }

    .quotes__quote--text {
        font-size: var(--k15t-font-size-medium);
    }

    .quotes__quote--text mark {
        font-size: var(--k15t-font-size-medium-large);
    }

    .quotes__quote--text-container {
        padding-top: 0;
        padding-left: 0;
    }
}

.vpcPreview__textContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--k15t-gap-small);
    min-height: 204px;
    z-index: 20;
}

.vpcPreview__textContainer--text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    align-self: end;
    transition: all ease-in-out 500ms;
    text-align: center;
    padding: var(--k15t-gap-medium);
    background-color: var(--k15t-color-night-n50);
    cursor: pointer;
}

.vpcPreview__textContainer--text h3 {
    font-size: var(--k15t-font-size-large);
    font-family: var(--k15t-font-akadmie-medium);
}

.vpcPreview__textContainer--text p {
    font-size: var(--k15t-font-size-medium-large);
}

.vpcPreview__imgContainer {
    display: block;
    border: 1px solid var(--k15t-color-border-default);
    height: fit-content;
    position: relative;
    user-select: none;
    z-index: 20;
}

.vpcPreview__imgContainer--image {
    max-width: 100%;
    transition: filter ease-in-out 500ms;
    filter: brightness(50%);
}

.js-vpc-preview__imgLeft {
    position: absolute;
    top: 0;
    left: 0;
}

.js-vpc-preview .js-vpc-preview__handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
}

.js-vpc-preview .js-vpc-preview__handle:before,
.js-vpc-preview .js-vpc-preview__handle:after {
    background-color: var(--k15t-color-night-n700);
    content: "";
    cursor: grab;
    left: 50%;
    position: absolute;
}

.js-vpc-preview .js-vpc-preview__handle:before {
    top: 0;
    height: 100%;
    width: 3px;
    transform: translateX(-50%);
}

.js-vpc-preview .js-vpc-preview__handle:after {
    top: 50%;
    height: 55px;
    width: 55px;
    border-radius: var(--k15t-border-radius-circle);
    background-color: var(--k15t-color-green-g400);
    border-color: var(--k15t-color-night-n700);
    transform: translate(-50%, -50%);
    background-image: url('../images/icons/handle.svg');
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
}

/* The explainer's default visibility. Selected by attribute, not by id: this
   was the theme's only id selector, and the docs page scopes every id inside a
   preview slot so a composition can render two instances of one module without
   duplicating one. Specificity drops from #id to [attr], which is safe here —
   viewportPreview.js sets --left/--right inline on this same element and no
   other rule declares either token. */
[k15t-data="vpc-preview-explainer"] {
    --left: hidden;
    --right: hidden;
}

[k15t-data="vpc-preview-vpc-text"]:before, [k15t-data="vpc-preview-confluence-text"]:before {
    position: absolute;
    height: 0;
    width: 0;
    top: 100%;
    left: 48%;
    content: '';
    border: .75rem solid transparent;
    border-top: none;
    border-bottom-color: var(--k15t-color-purple-p200);
    transform: rotate(180deg);
}

[k15t-data="vpc-preview-vpc-text"]:before {
    visibility: var(--right);
}

[k15t-data="vpc-preview-confluence-text"]:before {
    visibility: var(--left);
}

/* Tablet */
@media(max-width: 1024px) {

}

/* Smartphone */
@media(max-width: 768px) {
    .vpcPreview__textContainer {
        display: none;
    }
}



.blog-promoted {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-2x-large);
}

.blog-promoted-posts {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--k15t-gap-2x-large);
}

.blog-recent {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-large);
}

.blog-recent-posts {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-medium);
}

.blog-recent-search {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
}

.blog-recent-search input {
    background-color: rgba(255,255,255,.5);
    padding: var(--k15t-gap-small);
    font-size: var(--k15t-font-size-medium-large);
    font-family: var(--k15t-font-akadmie-regular);
    border-radius: var(--k15t-radius-pill);
    width: 580px;
    max-width: 600px;
    border: 2px solid var(--k15t-color-night-n700);
}

.blog-topic-filter {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
}

.blog-topic-filter__heading {
    font-family: var(--k15t-font-akadmie-medium);
    font-size: var(--k15t-font-size-medium-large);
}

.blog-topic-filter__topics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k15t-gap-small);
    overflow-x: auto;
}

.blog-topic-filter__topics > button {
    display: flex;
    padding: var(--k15t-gap-x-small) var(--k15t-gap-small);
    font-size: 16px;
    font-family: var(--k15t-font-akadmie-regular);
    color: inherit;
    border: 2px solid var(--k15t-color-night-n700);
    background-color: var(--k15t-color-surface);
    border-radius: var(--k15t-radius-pill);
    cursor: pointer;
}

.blog-topic-filter__topics > button:hover {
    background-color: var(--k15t-color-night-n700);
    color: var(--k15t-color-text-on-dark);
}

.blog-topic-filter__topics > button[filter="active"] {
    background-color: var(--k15t-color-night-n700);
    color: var(--k15t-color-text-on-dark);
}


.filtr-item {
    width: 387px;
}


/* Tablet */
@media(max-width: 1024px) {
    .blog-header h1 {
        font-size: var(--k15t-font-size-2x-large);
    }
    .blog-header p {
        font-size: var(--k15t-font-size-large);
    }

}

/* Smartphone */
@media(max-width: 768px) {
    .blog-promoted-posts {
        flex-direction: column;
    }
}
.teaser {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--k15t-radius-medium);
    gap: var(--k15t-gap-medium);
}

.teaser img {
    width: 100%;
    margin-top: -250px;
}

header .teaser h1 {
    margin-top: 0;
    font-size: 64px;
    font-family: var(--k15t-font-akadmie-semibold);
    text-wrap: balance;
}

article.blog-article {
    gap: var(--k15t-gap-x-large);
    margin-top: var(--k15t-gap-2x-large);
    margin-bottom: var(--k15t-gap-3x-large);
}

.blog-layout {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-large);
    justify-content: space-between;
}

.blog-metadata {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-small);
}

.blog-metadata--mobile {
    display: none;
}

.blog-metadata--date {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-x-small);
    align-items: center;
}

.blog-metadata--date .categoryLabel {
    margin: 0;
    text-decoration: underline;
}

.blog-aside {
    position: relative;
    max-width: 360px;
    width: 360px;
}

.blog-aside > nav {
    position: sticky;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    padding: var(--k15t-gap-large);
    background-color: var(--k15t-color-night-n25);
    border-radius: var(--k15t-radius-medium);
}

.blog-aside > nav > h3 {
    margin: 0;
    font-size: var(--k15t-font-size-medium-large);
}

.blog-byline {
    display: flex;
    gap: var(--k15t-gap-medium);
    margin-top: var(--k15t-gap-small);
}

.blog-byline--author img {
    max-width: 50px;
}

.blog-byline > span {
    height: fit-content;
    margin: auto 0;
}

.blog-action-icon {
    display: flex;
    flex-direction: column;
    width: fit-content;
    background: none;
    border: none;
}

.blog-action-icon:hover {
    text-decoration: underline;
    cursor: pointer;
}

.blog-action-icon > img {
    width: 28px;
}

.blog-aside__action-buttons {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-small);
    padding-top: var(--k15t-gap-small);
    border-top: 1px solid var(--k15t-color-night-n300);
}

article footer.blog-article__footer {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-large);
    justify-content: space-between;
}

article footer .blog-article__footer--comments {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-medium);
    width: 750px;
}

article footer .blog-article__footer--form {
    width: 360px;
}

article footer .blog-article__footer--form .boxesLeftRight__boxContainer h3 {
    text-align: left;
    font-size: var(--k15t-font-size-medium-large);
}

article footer .blog-article__footer--form .boxesLeftRight__boxContainer p {
    font-size: 18px;
}

footer .blog__footer {
    display: flex;
    flex-direction: row;
    gap: var(--k15t-gap-medium);
    justify-content: space-between;
}

/* Tablet */
@media(max-width: 1024px) {

    .blog-metadata--mobile {
        display: flex;
        gap: var(--k15t-gap-x-small);
        font-size: var(--k15t-font-size-small);
        align-items: center;
        margin-bottom: var(--k15t-gap-small);
    }

    .blog-metadata--mobile-separator {
        margin: 0 10px;
        font-size: var(--k15t-font-size-small);
    }

    .blog-metadata--mobile .categoryLabel {
        margin: 0 0 0 2px;
        line-height: normal;
        font-size: var(--k15t-font-size-small);
    }

    .blog-metadata--mobile > span {
        font-size: var(--k15t-font-size-small);
    }

    .blog-metadata--date,
    .blog-metadata--length {
        display: none;
    }

    .blog-aside {
        display: none;
    }

    article footer.blog-article__footer {
        flex-direction: column;
        align-items: start;
    }

    article footer .blog-article__footer--form {
        width: 100%;
    }
}

/* Smartphone */
@media(max-width: 768px) {
    header .teaser h1 {
        font-size: var(--k15t-font-size-x-large);
    }


    article footer .blog-article__footer--comments {
        width: 100%;
    }
}

/*
 * Website Documentation page.
 * Floating left sidebar (module nav), full-width preview, right props drawer.
 * Loaded site-wide via main.css; styles are scoped to #docs-shell / .docs-*.
 */

#docs-shell {
    --docs-nav-offset: 56px;
    --docs-sidebar-width: 280px;
    --docs-z-drawer: 90;
    --docs-z-toggle: 95;
    --docs-color-surface: var(--k15t-color-surface);
    --docs-color-surface-sunken: var(--k15t-color-surface-sunken);
    --docs-color-border: var(--k15t-color-border-default);
    --docs-color-border-subtle: var(--k15t-color-border-subtle);
    --docs-color-text: var(--k15t-color-text-primary);
    --docs-color-text-secondary: var(--k15t-color-text-secondary);
    --docs-color-accent: var(--k15t-color-interactive);
    --docs-color-accent-soft: var(--k15t-color-blue-b50);
    --docs-color-notice-bg: var(--k15t-color-blue-b25);
    --docs-color-notice-border: var(--k15t-color-blue-b200);
    --docs-color-notice-icon: var(--k15t-color-blue-b500);
    --docs-color-required: var(--k15t-color-red-r700);
    --docs-color-required-bg: var(--k15t-color-red-r25);

    font-family: var(--k15t-font-text);
    color: var(--docs-color-text);

    /* MEASURED, not guessed. On staging build 1297 the gap above
       #docs-viewbar was 130px, and none of it belonged to this page: the
       site-wide `main > :first-child:has(.infoBox) { padding-top: 130px }` in
       css/base/layout.css clears the FIXED SITE NAV for a normal page, and
       #docs-shell matches it only because one hidden module-preview slot
       happens to contain an .infoBox. The docs page replaces that nav with its
       own .docs-topbar, which is 56px — the same --docs-nav-offset the sidebar
       is pinned to (`top`) and the view bar sticks at. So the intended value
       was always the offset, and the page was carrying 74px of somebody else's
       clearance.

       Re-stated here rather than fixed in layout.css: that rule is right for
       every page that is not this one, and the accidental match is this page's
       own problem. An id beats the `:has()` selector's specificity, so this
       wins wherever the two apply.

       Load-bearing for the sticky bar as well as the gap: the view bar sticks
       at --docs-nav-offset, so any padding above it that is not the offset is
       whitespace the bar jumps across on the first scroll. */
    padding-top: var(--docs-nav-offset);
}

/* The preview content stretches between the sidebar and the right edge; the props panel flows below it. */
#docs-preview-container {
    min-height: calc(100vh - var(--docs-nav-offset));
    margin: 0 0 0 var(--docs-sidebar-width);
    padding: 0;
    background: var(--docs-color-surface);
}

#docs-preview-container .module-preview[hidden] {
    display: none;
}

#docs-preview-container .module-preview {
    position: relative;
}

/* ── A modal, previewed in place ──────────────────────────────────────
   contentOverlay is a MODAL. `.overlay` ships `display: none` and
   `position: fixed`, and overlay.js only un-hides it when the URL carries
   `<id>=`. The catalogue has no such trigger and no way to add one, so the
   slot measured 0px tall on staging build 1299 while carrying its full
   content in the DOM — a blank slot for a module that renders perfectly.

   Un-modalled HERE, in the docs stylesheet, and never in overlay.css or
   overlay.vm: the published modal behaviour must not change, and the shared
   macro is what every real page renders. These selectors need a
   `#docs-preview-container .module-preview` ancestor, which exists on this
   page and nowhere else, so the live site cannot match them.

   Not keyed to [data-module="contentOverlay"]: any module whose markup is an
   overlay has the same problem for the same reason, and naming the module
   would hide the next one.

   `display` is `!important` because overlay.js's closeOverlay() writes
   `style.display = 'none'` INLINE, and only `!important` outranks that. That
   in turn would leave the close button inert, which is why it is taken out of
   the preview entirely just below — `display: none` also removes it from the
   tab order, so nobody can reach a control that cannot act. In the catalogue
   the module is already in view; there is nothing for a close button to
   close. */
#docs-preview-container .module-preview .overlay {
    display: flex !important;
    position: static;
    /* `.overlay--full`'s scrim is the modal's backdrop; in place it would be a
       grey band across the slot. `inset` is inert once position is static. */
    background-color: transparent;
    /* In flow the panel would otherwise sit flush against the slot edges.
       `.overlay_container` keeps its own `max-width: fit-content` and
       `margin: auto`, so the panel stays the shrink-to-fit centred card the
       real modal shows — the preview is of the module, not of a rewrite. */
    padding: var(--k15t-gap-large) var(--k15t-gap-medium);
}

#docs-preview-container .module-preview .overlay .overlay_header--close {
    display: none;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.docs-sidebar {
    position: fixed;
    top: var(--docs-nav-offset);
    left: 0;
    width: var(--docs-sidebar-width);
    height: calc(100vh - var(--docs-nav-offset));
    background: var(--docs-color-surface);
    border-right: 1px solid var(--docs-color-border);
    z-index: var(--docs-z-drawer);
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .docs-sidebar {
        transition: transform 0.2s ease;
    }

    .docs-category__chevron {
        transition: transform 0.15s ease;
    }
}

.docs-sidebar__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.docs-sidebar__header {
    padding: var(--k15t-gap-medium) var(--k15t-gap-medium) var(--k15t-gap-x-small);
    border-bottom: 1px solid var(--docs-color-border-subtle);
}

.docs-sidebar__title {
    margin: 0;
    font-family: var(--k15t-font-heading);
    font-size: var(--k15t-font-size-large);
    line-height: var(--k15t-line-height-small);
    color: var(--docs-color-text);
}

.docs-sidebar__hint {
    margin: var(--k15t-gap-x-small) 0 0;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
}

.docs-sidebar__search {
    padding: var(--k15t-gap-small) var(--k15t-gap-medium);
    border-bottom: 1px solid var(--docs-color-border-subtle);
    background: var(--docs-color-surface);
}

.docs-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-medium);
    color: var(--docs-color-text);
    background: var(--docs-color-surface);
}

.docs-search-input::placeholder {
    color: var(--docs-color-text-secondary);
}

/* ── The module region (search + list), collapsed by view ────────────────
   The catalogue search and the module list as ONE unit, because they are one
   thing to a reader: a search box over an absent list is a control that can no
   longer act. It belongs to BROWSE — nobody in the composer is picking modules
   out of the catalogue — and collapsing it is what frees this column for
   #docs-composer-panel.

   This is the flex item that GROWS in browse, the role .docs-nav used to hold
   directly. `min-height: 0` is what lets .docs-nav scroll inside it rather
   than stretching the column: without it the nav's content sets an automatic
   minimum and pushes #docs-tray off the bottom of the screen.

   renderViewbar sets the `hidden` attribute; this rule is only what `hidden`
   means for a flex item, since `display: flex` below would otherwise beat the
   UA's `display: none`. */
.docs-sidebar__modules {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.docs-sidebar__modules[hidden] {
    display: none;
}

.docs-nav {
    flex: 1 1 auto;
    /* Paired with the wrapper's own `min-height: 0`: the scroller is only a
       scroller while something above it constrains its height. */
    min-height: 0;
    overflow-y: auto;
    padding: var(--k15t-gap-x-small) 0 var(--k15t-gap-medium);
}

.docs-category {
    border-bottom: 1px solid var(--docs-color-border-subtle);
}

.docs-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem var(--k15t-gap-medium);
    background: transparent;
    border: none;
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--docs-color-text-secondary);
    cursor: pointer;
}

.docs-category__header:hover {
    color: var(--docs-color-text);
    background: var(--docs-color-surface-sunken);
}

.docs-category__chevron {
    font-size: 0.65rem;
}

.docs-category--collapsed .docs-category__chevron {
    transform: rotate(-90deg);
}

.docs-category--collapsed .docs-category__list {
    display: none;
}

.docs-category__count {
    font-size: var(--k15t-font-size-2x-small);
    background: var(--docs-color-surface-sunken);
    color: var(--docs-color-text-secondary);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    margin-left: auto;
    margin-right: 0.5rem;
}

.docs-category__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.4rem;
}

.docs-module-item {
    margin: 0;
}

.docs-module-item__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem var(--k15t-gap-medium) 0.45rem calc(var(--k15t-gap-medium) + 0.5rem);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    font-family: inherit;
    font-size: var(--k15t-font-size-medium);
    color: var(--docs-color-text);
    cursor: pointer;
    line-height: 1.3;
}

.docs-module-item__button:hover {
    background: var(--docs-color-surface-sunken);
}

/* A module already in the composition. Replaces the old
   [aria-current="true"] rule: these buttons ADD an instance, so "current" was
   both wrong and mute about the thing an editor wants to know — whether this
   module is in the page and how often. aria-current now lives only on the tray
   row of the focused instance, where the concept applies. */
.docs-module-item__button--composed {
    background: var(--docs-color-accent-soft);
    border-left-color: var(--docs-color-accent);
    color: var(--docs-color-text);
    font-family: var(--k15t-font-akadmie-medium);
}

.docs-module-item__count {
    flex: 0 0 auto;
    min-width: 1.35rem;
    font-size: var(--k15t-font-size-2x-small);
    text-align: center;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--docs-color-accent);
    color: var(--k15t-color-white);
    font-variant-numeric: tabular-nums;
}

.docs-module-item__count[hidden] {
    display: none;
}

.docs-module-item__flag {
    display: inline-block;
    font-size: var(--k15t-font-size-2x-small);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--docs-color-surface-sunken);
    color: var(--docs-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.docs-nav__empty {
    padding: var(--k15t-gap-medium);
    margin: 0;
    color: var(--docs-color-text-secondary);
    font-size: var(--k15t-font-size-small);
    text-align: center;
}

/* ── Props panel ─────────────────────────────────────────────────────── */

/* Props panel renders inside the active module preview as a centered card */
.docs-props {
    max-width: 880px;
    margin: var(--k15t-gap-x-large) auto;
    background: var(--docs-color-surface-sunken);
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-medium);
    padding: var(--k15t-gap-medium);
    box-shadow: 0 2px 8px rgba(0, 12, 52, 0.05);
}

.docs-props__header {
    margin-bottom: var(--k15t-gap-medium);
    padding-bottom: var(--k15t-gap-small);
    border-bottom: 1px solid var(--docs-color-border-subtle);
}

.docs-props__category {
    display: inline-block;
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-2x-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--docs-color-text-secondary);
    margin: 0 0 0.25rem;
}

.docs-props__title {
    margin: 0 0 0.4rem;
    font-family: var(--k15t-font-heading);
    font-size: var(--k15t-font-size-large);
    line-height: var(--k15t-line-height-small);
    color: var(--docs-color-text);
}

.docs-props__description {
    margin: 0;
    color: var(--docs-color-text-secondary);
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-large);
}

.docs-props__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--k15t-gap-small);
}

.docs-props__flag {
    font-size: var(--k15t-font-size-2x-small);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--docs-color-notice-bg);
    color: var(--docs-color-notice-icon);
    border: 1px solid var(--docs-color-notice-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.docs-props__id {
    display: block;
    margin-top: var(--k15t-gap-small);
    font-family: var(--k15t-font-akadmie-mono-regular);
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
}

.docs-props__id code {
    font-family: inherit;
    background: var(--docs-color-surface);
    border: 1px solid var(--docs-color-border-subtle);
    padding: 0.05rem 0.3rem;
    border-radius: var(--k15t-radius-x-small);
}

.docs-props__section-title {
    margin: var(--k15t-gap-medium) 0 var(--k15t-gap-small);
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--docs-color-text-secondary);
}

.docs-prop-list {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-small);
}

.docs-prop {
    background: var(--docs-color-surface);
    border: 1px solid var(--docs-color-border-subtle);
    border-radius: var(--k15t-radius-small);
    padding: 0.75rem 0.85rem;
}

.docs-prop__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.docs-prop__key {
    font-family: var(--k15t-font-akadmie-mono-bold);
    font-size: var(--k15t-font-size-small);
    color: var(--docs-color-text);
    word-break: break-all;
}

.docs-prop__type {
    font-family: var(--k15t-font-akadmie-mono-regular);
    font-size: var(--k15t-font-size-2x-small);
    color: var(--docs-color-text-secondary);
    background: var(--docs-color-surface-sunken);
    padding: 0.05rem 0.4rem;
    border-radius: var(--k15t-radius-x-small);
}

/* Red chip flagging a property an editor must set (definition has required:true). */
.docs-prop__required {
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-2x-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--docs-color-required);
    background: var(--docs-color-required-bg);
    padding: 0.05rem 0.4rem;
    border-radius: var(--k15t-radius-x-small);
}

.docs-prop__description {
    margin: 0 0 0.35rem;
    font-size: var(--k15t-font-size-small);
    color: var(--docs-color-text);
    line-height: var(--k15t-line-height-large);
}

.docs-prop__allowed {
    margin: 0;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
}

.docs-prop__allowed-label {
    font-family: var(--k15t-font-subheading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

/* Inline native <select> + color swatch shown for properties whose definition
 * declares `type: "select"` (the four colour properties). Picking a value
 * rewrites the matching var(--k15t-color-*) token live in the preview. */
.docs-prop__color-control {
    display: flex;
    align-items: center;
    gap: var(--k15t-gap-x-small);
    margin: 0.35rem 0 0;
}

/* Variant control — same placement/spacing as the colour control, but no
 * swatch. Picking a value toggles the variant modifier class live in the
 * preview (see createVariantControl). */
.docs-prop__variant-control {
    margin: 0.35rem 0 0;
}

.docs-prop__select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 240px;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    background: var(--docs-color-surface);
    color: var(--docs-color-text);
    cursor: pointer;
}

.docs-prop__select:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

/* Link and video controls — a labelled text field per editable part, a standing
 * hint naming the constraint, and the refusal line. Same placement and spacing
 * as the colour and variant controls so a property card reads the same
 * whichever surface it carries. */
.docs-prop__link-control {
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-small);
    margin: 0.35rem 0 0;
}

.docs-prop__field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k15t-gap-x-small);
}

.docs-prop__field-label {
    flex: 0 0 9rem;
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-x-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--docs-color-text-secondary);
}

.docs-prop__input {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 240px;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    background: var(--docs-color-surface);
    color: var(--docs-color-text);
}

.docs-prop__input:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

/* readonly, not disabled — see createLinkField. Still focusable and still
 * readable, so the reason it cannot be edited reaches the reader; the sunken
 * background is the only signal that changes. */
.docs-prop__input:read-only {
    background: var(--docs-color-surface-sunken);
    cursor: default;
}

/* The hint is present before anything is refused (WCAG 3.3.2), and the refusal
 * line is present but EMPTY until there is something to say — a live region
 * that only appears when it has a message misses that first message in several
 * screen readers. `:empty` keeps the empty one from taking vertical space. */
.docs-prop__hint,
.docs-prop__withheld {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
}

.docs-prop__withheld {
    margin: 0.35rem 0 0;
    font-style: italic;
}

/* A refused value has to be VISIBLE, not only announced: the border carries it
 * for a sighted reader and the sentence below for everyone. Colour is never the
 * only signal — the border weight changes with it and the sentence is always
 * present when the state is. */
.docs-prop__input[aria-invalid="true"] {
    border-color: var(--docs-color-required);
    border-width: 2px;
}

/* --docs-color-required, not a raw red-r500: r500 (#F04E43) is 3.3:1 on the
 * page surface and fails WCAG AA for body text, while r700 — the token this
 * page already uses for its "Required" chip — is ~5:1. */
.docs-prop__refusal {
    margin: 0;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-required);
}

.docs-prop__refusal:empty {
    display: none;
}

.docs-prop__swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: var(--k15t-radius-x-small);
    border: 1px solid var(--docs-color-border);
    background: var(--swatch-color, transparent);
}

.docs-props__stub {
    padding: var(--k15t-gap-small);
    color: var(--docs-color-text-secondary);
    background: var(--docs-color-surface);
    border: 1px dashed var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    font-size: var(--k15t-font-size-small);
}

/* ── Child page properties panel ─────────────────────────────────────── */

/* Secondary props card rendered below the main panel for every property that
 * carries a `childProperties` schema. Visually distinguished from the main card
 * by a left accent border so editors can immediately tell which keys belong on
 * the child pages vs. on the parent module. */
.docs-props--child {
    border-left: 3px solid var(--docs-color-accent);
    margin-top: var(--k15t-gap-large);
}

.docs-props--child .docs-props__title {
    font-size: var(--k15t-font-size-medium);
}

/* Inline pointer on the parent `*_asset_pages` row that links the reader to
 * the corresponding child panel below. */
.docs-prop__child-note {
    margin: 0;
    font-size: var(--k15t-font-size-x-small);
    font-style: italic;
    color: var(--docs-color-accent);
}

.docs-prop__child-note::before {
    content: '↓ ';
    font-style: normal;
}

/* ── In-preview notice (requiresChildPages / requiresLiveData) ───────── */

.docs-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--k15t-gap-small);
    max-width: 720px;
    margin: var(--k15t-gap-large) auto;
    padding: var(--k15t-gap-medium);
    background: var(--docs-color-notice-bg);
    border: 1px solid var(--docs-color-notice-border);
    border-radius: var(--k15t-radius-medium);
    color: var(--docs-color-text);
}

.docs-notice__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--docs-color-notice-icon);
    color: var(--k15t-color-white);
    font-family: var(--k15t-font-subheading);
    font-size: 0.85rem;
    line-height: 1;
}

.docs-notice__text {
    margin: 0;
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-large);
}

/* ── Absent generated-previews guard ────────────────────────────────────
   documentation.vm #parse's the generated preview partial. If that partial
   never reached the theme, no .module-preview renders and the alert stays
   visible; one rendered slot preceding it is enough to hide it. Keep the
   sibling combinator — it is the whole detector. */

.docs-preview-missing {
    background: var(--docs-color-required-bg);
    border-color: var(--docs-color-required);
    color: var(--docs-color-required);
}

.docs-preview-missing .docs-notice__icon {
    background: var(--docs-color-required);
}

.module-preview ~ .docs-preview-missing {
    display: none;
}

/* ── The stale-link warning (CAP-6) ──────────────────────────────────────
   A second .docs-notice instance, NOT a second notice mechanism. It borrows
   .docs-preview-missing's warning tint and differs from it in exactly one
   way: its visibility is driven by whether documentation.js put a sentence
   in it, not by a sibling combinator. The combinator above is the
   absent-partial detector and is not reusable here — it hides its element on
   every build that rendered a slot, which is every build where a share link
   can be opened.

   Collapsed while empty rather than hidden with an attribute, like
   .docs-card-notice: the element ships in the markup and stays in the
   accessibility tree from first paint, which is what makes role="alert"
   announce its first message. */

.docs-stale-link {
    background: var(--docs-color-required-bg);
    border-color: var(--docs-color-required);
    color: var(--docs-color-required);
    font-size: var(--k15t-font-size-medium);
    line-height: var(--k15t-line-height-large);
}

/* The icon as a pseudo-element and not a child span, which is the whole
   reason :empty can be the collapse: a .docs-notice__icon child would make
   this element non-empty forever. Pseudo-elements do not count. The
   declarations mirror .docs-notice__icon because they are the same badge. */
.docs-stale-link::before {
    content: '!';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--docs-color-required);
    color: var(--k15t-color-white);
    font-family: var(--k15t-font-subheading);
    font-size: 0.85rem;
    line-height: 1;
}

.docs-stale-link:empty {
    display: none;
}

/* ── Composition tray ────────────────────────────────────────────────────
   Lives in the sidebar's existing flex column: .docs-nav keeps
   `flex: 1 1 auto` and scrolls, and this tray takes what it needs at the
   bottom with its own scroller, capped so it can never crowd the nav out.
   No new layout region, and nothing here is positioned. */

.docs-tray {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* Back to 45%: story 6 lowered this to 38% to make room for the saved
       list, and story B moved that list into the composer panel, so the cap
       goes back to what it was when the tray was the only region sharing this
       column. It still caps itself and scrolls inside its own cap, so
       .docs-nav keeps the remainder. */
    max-height: 45%;
    border-top: 1px solid var(--docs-color-border);
    background: var(--docs-color-surface-sunken);
}

.docs-tray__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem var(--k15t-gap-medium) 0.4rem;
}

.docs-tray__title {
    margin: 0;
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--docs-color-text-secondary);
}

.docs-tray__count {
    font-size: var(--k15t-font-size-2x-small);
    background: var(--docs-color-surface);
    color: var(--docs-color-text-secondary);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    margin-left: auto;
}

.docs-tray__empty {
    margin: 0;
    padding: 0 var(--k15t-gap-medium) var(--k15t-gap-small);
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
}

.docs-tray__list {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0 0 var(--k15t-gap-x-small);
}

.docs-tray__item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding-right: 0.4rem;
    border-left: 3px solid transparent;
}

.docs-tray__item--focused {
    background: var(--docs-color-accent-soft);
    border-left-color: var(--docs-color-accent);
}

.docs-tray__select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.3rem 0.4rem calc(var(--k15t-gap-medium) - 3px);
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    color: var(--docs-color-text);
    cursor: pointer;
}

.docs-tray__select[aria-current="true"] {
    font-family: var(--k15t-font-akadmie-medium);
}

.docs-tray__position {
    flex: 0 0 auto;
    min-width: 1.35rem;
    text-align: right;
    font-size: var(--k15t-font-size-2x-small);
    color: var(--docs-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.docs-tray__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-tray__controls {
    display: flex;
    flex: 0 0 auto;
    gap: 0.2rem;
}

/* 32px square, up from 28px — the touch-target debt this story ABSORBS
   rather than inherits.
   deferred-work.md recorded 28px as passing WCAG 2.2 SC 2.5.8 "on paper":
   above the 24x24 minimum, but with only 0.15rem between neighbours it sat
   close enough to the floor that any future padding change could cross it,
   and nobody had measured it live. 32px with 0.2rem of gap puts 36.2px
   between adjacent centres, so the 24px undisturbed circle SC 2.5.8 describes
   clears its neighbour with room to spare, and the number is no longer one
   refactor away from failing. */
.docs-tray__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k15t-radius-x-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    line-height: 1;
    color: var(--docs-color-text-secondary);
    cursor: pointer;
}

.docs-tray__control:hover {
    background: var(--docs-color-surface);
    border-color: var(--docs-color-border);
    color: var(--docs-color-text);
}

/* Disabled, not hidden: the first row's "up" and the last row's "down" stay in
   place so the control column does not reflow as rows move. */
.docs-tray__control:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Edit is the row's primary action — it is the only route to a member's
   content once the reader has left browse — so it carries the accent on hover
   where remove carries the destructive colour. Same 32px square as its
   neighbours: a primary action that was a different size would reflow the
   cluster and break the spacing SC 2.5.8 depends on. */
.docs-tray__control--edit:hover {
    color: var(--docs-color-accent);
    border-color: var(--docs-color-accent);
}

.docs-tray__control--remove:hover {
    color: var(--docs-color-required);
    border-color: var(--docs-color-required);
}

.docs-tray__select:focus-visible,
.docs-tray__control:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

/* ── Saved prototypes ────────────────────────────────────────────────────
   The tray's own pattern, one region further down the sidebar's flex column:
   a header, a capped scrolling list, and 28px square controls. Nothing here
   is positioned and no new layout region is introduced. */

/* Relocated by story B out of the sidebar's flex column and into the
   composer panel, so the two rules that were about that column are gone:
   `max-height: 32%` was a share of the sidebar's height and means nothing
   here, and the sunken background is now the PANEL's, so a second one would
   draw a box inside a box. The list keeps a cap of its own below — a long
   saved list must not push the prototype off the screen it belongs to. */
.docs-saved {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--docs-color-border);
}

.docs-saved__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem var(--k15t-gap-medium) 0.4rem;
}

.docs-saved__title {
    margin: 0;
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--docs-color-text-secondary);
}

.docs-saved__count {
    font-size: var(--k15t-font-size-2x-small);
    background: var(--docs-color-surface);
    color: var(--docs-color-text-secondary);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    margin-left: auto;
}

.docs-saved__form {
    display: flex;
    gap: 0.35rem;
    padding: 0 var(--k15t-gap-medium) var(--k15t-gap-x-small);
}

.docs-saved__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text);
    background: var(--docs-color-surface);
}

.docs-saved__input::placeholder {
    color: var(--docs-color-text-secondary);
}

.docs-saved__save {
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    background: var(--docs-color-surface);
    font-family: inherit;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text);
    cursor: pointer;
}

.docs-saved__save:hover:enabled {
    border-color: var(--docs-color-accent);
    color: var(--docs-color-accent);
}

/* Disabled and not hidden: an empty composition makes saving UNAVAILABLE, and
   a control that is present but visibly inert says so where a vanished one
   would just look like a missing feature. */
.docs-saved__save:disabled,
.docs-saved__input:disabled {
    opacity: 0.45;
    cursor: default;
}

.docs-saved__list {
    flex: 1 1 auto;
    max-height: 14rem;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0 0 var(--k15t-gap-x-small);
}

/* No `border-left` reservation, unlike .docs-tray__item: the tray marks the
   FOCUSED instance with a left rule and needs the 3px kept whether it is drawn
   or not. A saved row has no such state, so the transparent border was three
   dead pixels the .docs-saved__open padding below already accounts for. */
.docs-saved__item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding-right: 0.4rem;
}

.docs-saved__open {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.3rem 0.4rem var(--k15t-gap-medium);
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    color: var(--docs-color-text);
    cursor: pointer;
}

/* The sidebar is 260px under 1280px, so a name truncates here. The row's
   accessible name stays whole: documentation.js puts the full name in a
   .docs-visually-hidden span and in a title attribute. */
.docs-saved__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-saved__rename {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--k15t-gap-medium);
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--docs-color-accent);
    border-radius: var(--k15t-radius-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    color: var(--docs-color-text);
    background: var(--docs-color-surface);
}

.docs-saved__controls {
    display: flex;
    flex: 0 0 auto;
    gap: 0.2rem;
}

/* 32px square, matching .docs-tray__control — the same absorbed debt, and
   they are kept the same number deliberately: two control clusters on one
   page that differ by four pixels is a difference a reader feels and nobody
   intended. */
.docs-saved__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k15t-radius-x-small);
    font-family: inherit;
    font-size: var(--k15t-font-size-small);
    line-height: 1;
    color: var(--docs-color-text-secondary);
    cursor: pointer;
}

.docs-saved__control:hover {
    background: var(--docs-color-surface);
    border-color: var(--docs-color-border);
    color: var(--docs-color-text);
}

.docs-saved__control--delete:hover {
    color: var(--docs-color-required);
    border-color: var(--docs-color-required);
}

/* `.docs-saved__note` is gone with story B: the durability sentence is still
   stated exactly ONCE, but it now sits next to Copy share link as
   `.docs-composer-panel__durability`, because that is where the ordering it
   describes — the link lasts, this browser does not — is the ordering between
   two controls the reader can see. */
.docs-saved__empty {
    margin: 0;
    padding: 0 var(--k15t-gap-medium) var(--k15t-gap-x-small);
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
}

.docs-saved__message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 var(--k15t-gap-medium) var(--k15t-gap-x-small);
    padding: 0.4rem 0.5rem;
    border-left: 3px solid var(--docs-color-notice-border);
    border-radius: var(--k15t-radius-x-small);
    background: var(--docs-color-notice-bg);
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text);
}

.docs-saved__message[hidden] {
    display: none;
}

.docs-saved__message[data-tone="warn"] {
    border-left-color: var(--docs-color-required);
    background: var(--docs-color-required-bg);
}

.docs-saved__message-actions {
    display: flex;
    gap: 0.3rem;
    margin-left: auto;
}

.docs-saved__decide {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    background: var(--docs-color-surface);
    font-family: inherit;
    font-size: var(--k15t-font-size-2x-small);
    color: var(--docs-color-text);
    cursor: pointer;
}

.docs-saved__decide--replace:hover {
    border-color: var(--docs-color-required);
    color: var(--docs-color-required);
}

.docs-saved__decide--cancel:hover {
    border-color: var(--docs-color-accent);
    color: var(--docs-color-accent);
}

.docs-saved__open:focus-visible,
.docs-saved__control:focus-visible,
.docs-saved__save:focus-visible,
.docs-saved__input:focus-visible,
.docs-saved__rename:focus-visible,
.docs-saved__decide:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

/* ── The composer panel ──────────────────────────────────────────────────
   Share, Copy properties, the durability sentence and the saved prototypes.

   IN THE SIDEBAR COLUMN, under #docs-tray, and no longer a block in the
   preview column: in the preview column it was a 236px grey slab between the
   view bar and the composition, pushing the prototype — the one thing a reader
   in this view came to look at — down the page.

   So it is styled as a sidebar REGION and not as a card: flush to the column,
   no radius and no margin, separated from the tray above by a single rule, and
   sunken like the tray. A bordered, rounded box inside a 260px column would be
   a box drawn inside a box.

   It obeys .docs-sidebar__inner's flex contract, the same one
   .docs-sidebar__modules obeys in browse: it is the item that GROWS in the
   composer, `min-height: 0` lets it scroll rather than stretch the column, and
   #docs-tray keeps `flex: 0 0 auto` under its own cap above it — so a long
   saved list can never push the tray off the bottom of the screen.

   The two scrollers do not fight. .docs-saved__list caps itself at 14rem and
   scrolls inside its own region, which is the list's overflow; this one only
   engages when the panel's own fixed parts — the actions, the durability
   sentence, the message line — are together taller than the column has left,
   which is the short-viewport case. */

.docs-composer-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--k15t-gap-x-small);
    margin: 0;
    padding: var(--k15t-gap-small) 0 0;
    border-top: 1px solid var(--docs-color-border);
    background: var(--docs-color-surface-sunken);
}

/* Nothing in here shrinks. A flex item's default `flex-shrink: 1` would let
   the durability sentence and the saved region squash toward zero instead of
   letting the panel above scroll — which is clipping dressed up as fitting. */
.docs-composer-panel > * {
    flex: 0 0 auto;
}

/* The view decides this, in renderComposerPanel. Stated here because the
   element ships with the attribute and must be hidden before any script
   runs — a reader whose JS is slow or blocked should not see a panel of
   controls that cannot act. */
.docs-composer-panel[hidden] {
    display: none;
}

.docs-composer-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k15t-gap-x-small);
    padding: 0 var(--k15t-gap-medium);
}

/* 40px tall, matching .docs-viewbar__view rather than the tray's 28px control
   squares — comfortably past WCAG 2.2 SC 2.5.8, and kept at 40px now that the
   panel is IN the 260px sidebar rather than in spite of it: these are the two
   actions the whole view exists for, and shrinking them to the size of a glyph
   button would be the tray's recorded mistake repeated.

   FULL WIDTH AND STACKED. `flex: 1 1 100%` makes each button claim a row of
   its own, so "Copy share link" and "Copy properties" keep their labels intact
   at 260px instead of being squeezed side by side into two ellipsised stubs. */
.docs-composer-panel__action {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    background: var(--docs-color-surface);
    font-family: inherit;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text);
    cursor: pointer;
}

/* The share control is the one this panel's own sentence points at, so it
   carries the emphasis. */
.docs-composer-panel__action--share {
    border-color: var(--docs-color-accent);
    color: var(--docs-color-accent);
}

.docs-composer-panel__action:hover:enabled {
    border-color: var(--docs-color-accent);
    color: var(--docs-color-accent);
}

/* Disabled and not hidden, the rule .docs-saved__save already follows: an
   empty prototype makes both actions UNAVAILABLE, and a control that is
   present but visibly inert says so where a vanished one looks like a
   missing feature. */
.docs-composer-panel__action:disabled {
    opacity: 0.45;
    cursor: default;
}

.docs-composer-panel__action--copied {
    border-color: var(--docs-color-accent);
    color: var(--docs-color-accent);
}

.docs-composer-panel__action--error {
    border-color: var(--docs-color-required);
    color: var(--docs-color-required);
}

.docs-composer-panel__action:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

/* The durability sentence. Quieter than the controls it qualifies, and never
   styled as a warning: it states where prototypes live and which artifact
   outlives the browser, which is a property of the design and not a fault. */
.docs-composer-panel__durability {
    margin: 0;
    padding: 0 var(--k15t-gap-medium);
    max-width: 62ch;
    font-size: var(--k15t-font-size-2x-small);
    line-height: var(--k15t-line-height-small);
    color: var(--docs-color-text-secondary);
}

/* The lead clause is the ordering the whole sentence exists to state, so it
   is the one part that stays legible at a glance. */
.docs-composer-panel__durability strong {
    color: var(--docs-color-text);
}

/* Mirrors .docs-saved__message exactly, including the left rule that carries
   the tone: two message lines in one region that looked different would read
   as two different kinds of thing. */
.docs-composer-panel__message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 var(--k15t-gap-medium);
    padding: 0.4rem 0.5rem;
    border-left: 3px solid var(--docs-color-notice-border);
    border-radius: var(--k15t-radius-x-small);
    background: var(--docs-color-notice-bg);
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text);
}

.docs-composer-panel__message[hidden] {
    display: none;
}

.docs-composer-panel__message[data-tone="warn"] {
    border-left-color: var(--docs-color-required);
    background: var(--docs-color-required-bg);
}

/* ── Composed instances ──────────────────────────────────────────────────
   Clones render here; the generated slots above stay hidden. The focused
   instance is marked with an inset ring rather than a border, so nothing in
   the module's own layout shifts when focus moves. */

/* ── View switch and add control ─────────────────────────────────────── */

/* Sticky rather than fixed: the shell already spends its fixed positioning on
   the topbar and the sidebar, and a third fixed layer would need a fourth
   z-index token. Sticky keeps the switch reachable down a long module without
   leaving the preview container's own flow. */
.docs-viewbar {
    position: sticky;
    top: var(--docs-nav-offset);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--docs-color-border-subtle);
    background: var(--docs-color-surface);
}

.docs-viewbar__views {
    display: flex;
    gap: 0.25rem;
}

/* 40px tall, comfortably past WCAG 2.2 SC 2.5.8's 24x24 minimum — the tray's
   28px controls are recorded as debt in deferred-work.md and this bar does not
   repeat the mistake. */
.docs-viewbar__view {
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--k15t-radius-small);
    background: none;
    font-family: inherit;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
    cursor: pointer;
}

.docs-viewbar__view:hover {
    color: var(--docs-color-accent);
}

.docs-viewbar__view[aria-current='true'] {
    border-color: var(--docs-color-border);
    background: var(--docs-color-surface-sunken);
    color: var(--docs-color-text);
    font-weight: var(--k15t-font-weight-bold);
}

.docs-viewbar__count {
    margin-left: 0.3rem;
    color: var(--docs-color-text-secondary);
}

.docs-viewbar__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.docs-viewbar__actions[hidden] {
    display: none;
}

.docs-viewbar__add {
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--docs-color-accent);
    border-radius: var(--k15t-radius-small);
    background: var(--docs-color-accent);
    font-family: inherit;
    font-size: var(--k15t-font-size-x-small);
    color: var(--k15t-color-text-inverse, #fff);
    cursor: pointer;
}

/* Disabled and not hidden, the same ruling as the Save button: a control that
   is present but visibly inert says "already added" where a vanished one would
   just look like a missing feature. */
.docs-viewbar__add:disabled {
    border-color: var(--docs-color-border);
    background: var(--docs-color-surface);
    color: var(--docs-color-text-secondary);
    opacity: 0.7;
    cursor: default;
}

/* The sentence that says pending edits travel with the add. Visible, not
   SR-only: the reader who needs it is the one who cannot be expected to guess
   what "add" carries. */
.docs-viewbar__note {
    margin: 0;
    font-size: var(--k15t-font-size-xx-small, 0.75rem);
    color: var(--docs-color-text-secondary);
}

.docs-viewbar__view:focus-visible,
.docs-viewbar__add:focus-visible {
    outline: 2px solid var(--docs-color-accent);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .docs-viewbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.docs-composition {
    display: block;
}

#docs-preview-container .docs-instance {
    position: relative;
}

/* An overlay pseudo-element, so the ring costs the module's own layout
   nothing: a real border would shift every instance below it by 2px the
   moment focus moved. pointer-events: none keeps inline editing reachable
   through it. */
#docs-preview-container .docs-instance--focused::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--docs-color-accent);
}

/* forced-colors drops box-shadow entirely, which would leave the focused
   instance with no marking at all in Windows High Contrast. outline survives
   and honours the system palette, so the ring is re-stated with one. */
@media (forced-colors: active) {
    #docs-preview-container .docs-instance--focused::after {
        box-shadow: none;
        outline: 3px solid Highlight;
        outline-offset: -3px;
    }

    /* The panel's boundary is now a single top rule plus a sunken background,
       and forced-colors keeps the rule but flattens the background. That
       matters MORE in the sidebar than it did in the preview column: the tray
       directly above is sunken too, so with both backgrounds flattened this
       hairline is the only thing left telling the composition apart from the
       actions on it. Widened so it still reads as a boundary.

       `border-top-width` and not the `border-width` shorthand, which would
       claim to set three sides that have no border-style and therefore draw
       nothing — a rule that lies about what it does. */
    .docs-composer-panel {
        border-top-width: 2px;
    }

    /* Tone is carried by a left rule and a background, and forced-colors
       drops the background. The rule survives and is widened so a refusal
       still reads as louder than a confirmation — and the sentences
       themselves say which is which, so the colour was never the only
       carrier. */
    .docs-composer-panel__message[data-tone="warn"],
    .docs-saved__message[data-tone="warn"] {
        border-left-width: 6px;
    }

    /* Same reasoning one element along: the card refusal and the
       prototype-local line are a left rule over a tinted background, and
       forced-colors drops the background. The rule survives and is widened.
       Neither sentence depended on the colour to be read — both say in words
       what they mean — so this restores the emphasis, not the meaning. */
    .docs-card-notice,
    .docs-props__prototype-local {
        border-left-width: 6px;
    }

    /* The stale-link warning's tone is a tinted background inside a coloured
       1px border, and forced-colors flattens the background — leaving a
       hairline that reads as no warning at all. The border is widened, and
       the badge's filled circle is restated as a ring, because both its fill
       and its white glyph are overridden. The sentence says "outdated" in
       words, so this restores the emphasis and not the meaning. */
    .docs-stale-link {
        border-width: 2px;
    }

    .docs-stale-link::before {
        border: 1px solid CanvasText;
    }

    /* The editing cue is a dashed underline, which forced-colors keeps while
       flattening its colour. Re-stated against the system palette so an
       editable carrier is still distinguishable from a fixed one — the whole
       point of the cue. */
    #docs-shell[data-docs-current-view="browse"] [data-docs-editable] {
        text-decoration: underline dashed LinkText;
    }

    .docs-module-item__button--composed,
    .docs-tray__item--focused,
    .docs-saved__item--renaming,
    /* The current view is marked by background and border weight, and
       forced-colors overrides both — so it is re-stated with an outline, the
       same way the focused instance's ring is. */
    .docs-viewbar__view[aria-current='true'] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* ── Empty state ─────────────────────────────────────────────────────── */

.docs-empty-state {
    max-width: 480px;
    margin: 4rem auto;
    text-align: center;
    color: var(--docs-color-text-secondary);
}

/* ── Topbar (fixed; replaces the global site nav on the docs page) ───── */

.docs-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--docs-nav-offset);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--k15t-gap-small);
    padding: 0 var(--k15t-gap-medium);
    background: var(--k15t-color-night-n700);
    border-bottom: 1px solid var(--k15t-color-night-n600);
}

.docs-topbar__title {
    font-size: var(--k15t-font-size-small);
    font-weight: 600;
    color: var(--k15t-color-white);
    margin: 0;
    flex-shrink: 0;
}

/* Documentation-debt counter. Filled by documentation.js from the emitted
   drift report; ships hidden, so an absent report leaves no trace here. */
.docs-topbar__debt {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 2px var(--k15t-gap-x-small);
    border: 1px solid var(--k15t-color-night-n600);
    border-radius: var(--k15t-radius-x-small);
    font-size: var(--k15t-font-size-small);
    white-space: nowrap;
    flex-shrink: 0;
}

.docs-topbar__debt[hidden] {
    display: none;
}

.docs-topbar__debt-count {
    font-weight: 600;
    color: var(--k15t-color-white);
}

.docs-topbar__debt-label {
    color: var(--k15t-color-night-n200);
}

/* Zero debt is the goal state, so it reads as one rather than as a low number
   in the same colour every other count is drawn in. */
.docs-topbar__debt--clean {
    border-color: var(--k15t-color-green-g600);
}

.docs-topbar__debt--clean .docs-topbar__debt-count {
    color: var(--k15t-color-green-g300);
}

.docs-topbar__back-link {
    margin-left: auto;
    font-size: var(--k15t-font-size-small);
    color: var(--k15t-color-night-n200);
    text-decoration: none;
    flex-shrink: 0;
}

.docs-topbar__back-link:hover {
    color: var(--k15t-color-white);
}

.docs-topbar__back-link:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--k15t-radius-x-small);
}

/* ── Breadcrumb (inside topbar) ──────────────────────────────────────── */

.docs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--k15t-font-size-small);
    min-width: 0;
    flex: 1;
}

.docs-breadcrumb__segment {
    color: var(--k15t-color-night-n200);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-breadcrumb__segment--root {
    color: var(--k15t-color-night-n400);
    flex-shrink: 0;
}

.docs-breadcrumb__segment--label {
    color: var(--k15t-color-white);
    font-weight: 500;
}

.docs-breadcrumb__separator {
    color: var(--k15t-color-night-n500);
    flex-shrink: 0;
}

/* ── Props panel — id-note & copy button ─────────────────────────────── */

.docs-props__id-note {
    display: block;
    font-size: var(--k15t-font-size-x-small);
    color: var(--docs-color-text-secondary);
    margin-top: 4px;
}

.docs-props__copy-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--docs-color-border);
    border-radius: var(--k15t-radius-small);
    background: transparent;
    color: var(--docs-color-text);
    font-family: inherit;
    font-size: var(--k15t-font-size-x-small);
    cursor: pointer;
    margin-bottom: var(--k15t-gap-small);
}

.docs-props__copy-button:hover {
    background: var(--docs-color-surface-sunken);
    color: var(--docs-color-text);
}

.docs-props__copy-button:focus-visible {
    outline: 2px solid var(--k15t-color-focus-ring);
    outline-offset: 2px;
}

.docs-props__copy-button--copied {
    border-color: var(--k15t-color-green-g400);
    color: var(--k15t-color-green-g400);
}

.docs-props__copy-button--error {
    border-color: var(--k15t-color-red-r400, #ef4444);
    color: var(--k15t-color-red-r400, #ef4444);
}

/* ── Mobile drawer toggles (hidden on desktop) ───────────────────────── */

.docs-drawer-toggle {
    display: none;
    position: fixed;
    bottom: var(--k15t-gap-medium);
    z-index: var(--docs-z-toggle);
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: var(--k15t-color-night-n700);
    color: var(--k15t-color-white);
    border: none;
    border-radius: 999px;
    font-family: var(--k15t-font-subheading);
    font-size: var(--k15t-font-size-small);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 12, 52, 0.25);
}

.docs-drawer-toggle--left {
    left: var(--k15t-gap-medium);
}

.docs-drawer-toggle__icon {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: linear-gradient(currentColor 0 0) top/100% 2px no-repeat,
                  linear-gradient(currentColor 0 0) center/100% 2px no-repeat,
                  linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat;
            mask: linear-gradient(currentColor 0 0) top/100% 2px no-repeat,
                  linear-gradient(currentColor 0 0) center/100% 2px no-repeat,
                  linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat;
}

/* ── Inline editing — scoped under #docs-shell so production pages are untouched ─── */

/* THE DISCOVERABILITY HALF OF CAP-10, and the reason the selector moved.

   It used to be `#docs-shell [data-prop]`, which painted every carrier in
   every view: in the composer, where wireInlineEditing returns before it
   touches anything, and on a card's link label, which the child schema types
   `link` and CAP-10 puts out of scope. So the page advertised edits it then
   refused — the same defect the original report described, read from the
   other side ("the text in contentLeftRight cannot be edited" was a reader
   clicking cards that looked exactly like the module's own content).

   Two conditions now, and neither is a second copy of the rule:
     - the VIEW comes from documentation.js's renderViewbar, which renders
       from the same `state.view` the editing gate reads;
     - the CARRIER carries [data-docs-editable], painted by
       markEditableCarriers through the same carrierIsEditable() the arming
       path calls.

   The cue is STANDING, not hover-only: a reader has to be able to tell an
   editable carrier from a fixed one without probing the page with a mouse,
   which is also what makes it available to a keyboard and touch reader. */

#docs-shell[data-docs-current-view="browse"] [data-docs-editable] {
    cursor: text;
    text-decoration: underline dashed var(--docs-color-border);
    text-underline-offset: 3px;
}

#docs-shell[data-docs-current-view="browse"] [data-docs-editable]:hover {
    text-decoration: underline solid var(--docs-color-accent);
}

#docs-shell [data-prop].docs-prop-editing,
#docs-shell [data-prop][contenteditable="true"] {
    outline: 2px solid var(--docs-color-accent);
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: none;
}

/* ── The card refusal and the prototype-local statement (CAP-10) ─────── */

/* Collapsed while empty rather than hidden with an attribute: the element
   ships in the markup and stays in the accessibility tree from first paint,
   which is what makes the live region observe its first message. */

.docs-card-notice {
    margin: 0 0 var(--k15t-gap-small);
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--docs-color-notice-border);
    background: var(--docs-color-notice-bg);
    color: var(--docs-color-text);
    font-size: 0.875rem;
    border-radius: 2px;
}

.docs-card-notice:empty {
    display: none;
}

.docs-props__prototype-local {
    margin: 0.5rem 0 0;
    padding-left: 0.6rem;
    border-left: 3px solid var(--docs-color-notice-border);
    color: var(--docs-color-text-secondary);
    font-size: 0.8125rem;
}

/* ── Visually-hidden label (a11y) ────────────────────────────────────── */

.docs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
    #docs-shell {
        --docs-sidebar-width: 260px;
    }
}

@media (max-width: 1024px) {
    #docs-shell {
        --docs-nav-offset: 56px;
    }

    .docs-drawer-toggle {
        display: inline-flex;
    }

    .docs-sidebar {
        transform: translateX(-100%);
        box-shadow: 0 12px 30px rgba(0, 12, 52, 0.18);
        width: min(86vw, 360px);
    }

    .docs-sidebar[data-open="true"] {
        transform: translateX(0);
    }

    #docs-preview-container {
        margin-left: 0;
    }

    .docs-props {
        margin-left: var(--k15t-gap-medium);
        margin-right: var(--k15t-gap-medium);
    }

    /* The topbar is tight here, so the counter keeps only its ratio. Clipped
       rather than display:none, so the sentence stays in the accessibility tree
       and "21 of 45" is never read out without saying of what. */
    .docs-topbar__debt-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}