#criteri .preference-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 4rem;
    padding: 24px 0;
}
#criteri .preference-copy { min-width: 0; }
#criteri .preference-copy p,
#search-details-dialog .details-preferences .preference-copy p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4e524f;
}
#criteri .preference-copy strong { color: #1c211f; font-weight: 700; }
.criteria-example-trigger,
.repeat-search button.criteria-example-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-mono, monospace);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
    vertical-align: baseline;
    cursor: pointer;
    color: #c63f37;
}
.criteria-example-trigger svg { width: 20px; height: 20px; }
.criteria-example-trigger:hover { text-decoration-thickness: 2px; }
.criteria-example-trigger:focus-visible { outline: 2px solid #c63f37; outline-offset: 4px; }
.criteria-example-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.criteria-example-panel p {
    max-width: 640px;
    padding: 16px 20px;
    border-left: 2px solid #c63f37;
    background: #ffffffb3;
    font-size: 15px;
    line-height: 1.6;
    margin: 12px 0 20px;
}
#search-details-dialog .details-preferences { margin-top: 24px; }
#search-details-dialog .details-preferences .preference-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 4rem;
    gap: 24px;
    padding: 20px 0;
}
#search-details-dialog .details-preferences h3 { font-size: 18px; }
#search-details-dialog .details-preferences .likert-wrap { min-width: 0; }
.mission-statements h2 { font-size: 44px; line-height: 1.15; }
.mission-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.mission-columns > span { min-width: 0; overflow-wrap: anywhere; }
.mission-columns > span:first-child { color: #d1c0c0; }
.mission-columns > span:last-child { color: #ffffff; }
.ranking-preview { background: #e6ebe7; }
.ranking-preview .ranking-preview__heading { margin-bottom: 64px; padding-bottom: 20px; border-bottom: 1px solid #b8c4ba; }
.ranking-preview .ranking-preview__heading h2 { font-size: 14px; line-height: 1.6; }
.ranking-preview .ranking-dossier {
    position: relative;
    padding: 40px 40px 24px;
    border: 1px solid #c8cec8;
    border-top: 5px solid #43574a;
    background: #fffefa;
    box-shadow: 0 8px 0 -1px #f4f6f1, 0 9px 0 0 #c8cec8, 0 16px 0 -1px #eef2ec, 0 17px 0 0 #c8cec8, 0 24px 32px -20px #253c3059;
}
.ranking-dossier::before {
    position: absolute;
    top: -21px;
    left: 40px;
    width: 84px;
    height: 16px;
    background: #43574a;
    content: "";
    z-index: 2;
}
.ranking-dossier::after { position: absolute; inset: 0; background-image: url('/images/paper-texture.png'); opacity: 0.12; pointer-events: none; content: ""; }
.ranking-dossier .ranking-result { position: relative; z-index: 1; grid-template-columns: 72px 142px minmax(0, 1fr) 104px; padding-block: 32px; gap: 20px 20px; border-color: #d9ddd5; }
.ranking-dossier .ranking-result__position { align-self: start; padding-top: 8px; font-family: var(--font-mono); }
.ranking-dossier .ranking-result__position > span { display: block; margin-bottom: 6px; color: #606762; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ranking-dossier .ranking-result__position > strong { color: #c63f37; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.ranking-dossier .score-components { grid-column: 3 / -1; }
.ranking-dossier .ranking-result:first-child { border-top: 0; padding-top: 12px; }
.ranking-dossier .ranking-result:last-child { border-bottom: 0; }
.ranking-dossier .ranking-result__title { font-size: 28px; line-height: 1.2; max-width: 28ch; min-width: 0; overflow-wrap: anywhere; }
.ranking-dossier .ranking-result__score > strong { font-size: 44px; }
.ranking-dossier .example-company-logo {
    width: 142px;
    height: 88px;
    padding: 12px;
    border: 0;
    background: transparent;
    justify-self: start;
    overflow: visible;
}
.ranking-dossier .example-company-logo > span { font-family: Arial, sans-serif; font-size: 28px; font-weight: 900; line-height: 1.1; }
.ranking-dossier .example-company-logo > small { font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.ranking-dossier .example-company-logo--N > span { text-transform: uppercase; color: #243c34; }
.ranking-dossier .example-company-logo--N > small { color: #c63f37; text-transform: uppercase; }
.ranking-dossier .example-company-logo--A { border-top: 2px solid #687b88; border-bottom: 2px solid #687b88; color: #354e60; }
.ranking-dossier .example-company-logo--A > span { font-family: Georgia, serif; font-weight: 700; }
.ranking-dossier .example-company-logo--M > span { font-family: Georgia, serif; font-size: 32px; font-style: italic; color: #256957; }
.ranking-dossier .example-company-logo--M > small { color: #256957; text-transform: uppercase; }
.ranking-dossier .example-company-logo--K > span { font-style: italic; font-size: 34px; border-bottom: 4px solid #c63f37; padding-right: 12px; }
.ranking-dossier .example-company-logo--L > span { font-weight: 400; font-size: 28px; color: #735128; }
.ranking-dossier .example-company-logo--L > small { font-size: 10px; color: #735128; text-transform: uppercase; }
@media (min-width: 768px) and (max-width: 1023px) {
    .ranking-dossier .ranking-result { grid-template-columns: 64px 110px minmax(0, 1fr) 90px; column-gap: 12px; }
    .ranking-dossier .example-company-logo { width: 110px; padding-inline: 0; }
    .ranking-dossier .ranking-result__title { font-size: 22px; }
}
@media (max-width: 767px) {
    .ranking-preview .ranking-preview__heading { margin-bottom: 48px; }
    .ranking-preview .ranking-dossier { padding: 24px 18px 12px; }
    .ranking-dossier::before { left: 18px; width: 64px; }
    .ranking-dossier .ranking-result { grid-template-columns: minmax(0, 1fr) 76px; gap: 16px 10px; padding-block: 28px; }
    .ranking-dossier .ranking-result__position { grid-column: 1; grid-row: 1; padding-top: 0; }
    .ranking-dossier .example-company-logo { grid-column: 1 / -1; grid-row: 2; width: 128px; height: 76px; padding: 8px; }
    .ranking-dossier .ranking-result__score { grid-column: 2; grid-row: 1; min-width: 0; text-align: right; }
    .ranking-dossier .ranking-result__score > strong { font-size: 36px; }
    .ranking-dossier .ranking-result__title { grid-column: 1 / -1; grid-row: 3; font-size: 22px; }
    .ranking-dossier .score-components { grid-column: 1 / -1; }
    .mission-statements h2 { font-size: 32px; }
    .mission-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    #criteri .preference-row,
    #search-details-dialog .details-preferences .preference-row {
        grid-template-columns: minmax(0, 1fr) 4rem;
        gap: 20px 12px;
    }
    #criteri .preference-row > div:first-child,
    #search-details-dialog .details-preferences .preference-row > div:first-child { grid-column: 1 / -1; }
    #criteri .preference-row .likert-wrap,
    #search-details-dialog .details-preferences .preference-row .likert-wrap { grid-column: 1; grid-row: 2; }
    #criteri .preference-row output,
    #search-details-dialog .details-preferences .preference-row output { grid-column: 2; grid-row: 2; }
    #criteri .preference-row h3 { font-size: 18px; }
}