/* SAP Salary & Rate Guide landing (/sap-salary-and-rate-guide): one guide page = one section.
   Desktop: content scales like a 16:9 slide (--u = 1% of the stage width, capped so a section fits one screen);
   sections are as tall as their content (no dead space under short pages).
   Phones / small tablets: sections stack and reflow with fixed type sizes. */

html { scroll-behavior: smooth; }

.sl-page {
    --navy: #05153B;
    --navy-2: #0B1F5C;
    --ink: #222222;
    --muted: #555555;
    --line: #DDE3F0;
    --card: #FFFFFF;
    --bg-light: #EEF1F7;
    --yellow: #EBB500;
    --gold: #7D6200;
    --down: #B45309;

    --header: 84px;
    --u: min(calc((100vw - 48px) / 100), calc((100vh - var(--header) - 40px) / 56.25), 16px);
    --u: min(calc((100vw - 48px) / 100), calc((100svh - var(--header) - 40px) / 56.25), 16px);

    --t-title: calc(var(--u) * 3.05);
    --t-sub: calc(var(--u) * 1.4);
    --t-h: calc(var(--u) * 1.32);
    --t-body: calc(var(--u) * 1.1);
    --t-small: calc(var(--u) * .97);
    --t-tiny: calc(var(--u) * .84);

    font-family: var(--font-sec);
    color: var(--ink);
}

.sl {
    position: relative;
    display: flex;
    align-items: flex-start; /* content starts right under the header, so a contents jump shows it at the top */
    justify-content: center;
    padding: calc(var(--header) + var(--u) * 1.4) 24px calc(var(--u) * 2.4);
    overflow: hidden;
}
.sl--light { background: var(--bg-light); }
.sl--dark { background: radial-gradient(120% 90% at 75% 20%, #0D2263 0%, var(--navy) 60%); color: #FFFFFF; }
.sl--light + .sl--light { border-top: 1px solid var(--line); }

.sl__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(var(--u) * 100);
    font-size: var(--t-body);
    line-height: 1.4;
}

.sl a { color: inherit; }
.sl p { margin: 0; }
.sl h2, .sl h3 { margin: 0; color: inherit; }
.sl sup { font-size: .65em; line-height: 0; }
.sl-y { color: var(--yellow); }
.sl-gold { color: var(--gold); }
.sl-down { color: var(--down); }
.sl--dark .sl-gold { color: var(--yellow); }

.sl-title {
    font-family: var(--font-main);
    font-size: var(--t-title);
    font-weight: 600;
    line-height: 1.15;
    color: var(--navy);
}
.sl--dark .sl-title { color: #FFFFFF; }
.sl-sub {
    margin-top: calc(var(--u) * .6) !important;
    font-size: var(--t-sub);
    font-weight: 600;
    line-height: 1.35;
    color: var(--muted);
}
.sl--dark .sl-sub { color: #C9D2E8; }
.sl--dark .sl-sub.sl-y { color: var(--yellow); }
.sl-small { font-size: var(--t-small); color: var(--muted); }

/* footer: source note | back to contents | section number */
.sl__foot {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--u) * 2);
    margin-top: calc(var(--u) * 2);
    padding-top: calc(var(--u) * .8);
    font-size: var(--t-tiny);
    line-height: 1.35;
    color: #666666;
}
.sl--dark .sl__foot { color: #B4BDD0; }
.sl__note { flex: 1; }
.sl__note a { text-decoration: underline; text-underline-offset: 2px; }
.sl__back { flex-shrink: 0; font-weight: 700; white-space: nowrap; }
.sl__back:hover { color: var(--yellow); }
.sl__num { flex-shrink: 0; min-width: 2ch; text-align: right; font-weight: 700; }

/* shared bits */
.sl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(var(--u) * 3.6);
    height: calc(var(--u) * 3.6);
    border-radius: 50%;
    background: var(--navy);
}
.sl-icon img { width: 55%; height: 55%; }
.sl-icon__txt { color: var(--yellow); font-size: calc(var(--u) * 1.8); font-weight: 700; line-height: 1; }
.sl-icon--sm { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); }
.sl-icon--bare { background: none; }
.sl-icon--bare img { width: 100%; height: 100%; }

.sl-card {
    border-radius: calc(var(--u) * .7);
    background: var(--card);
    box-shadow: 0 2px 10px rgba(5, 21, 59, .07);
}

.sl-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: calc(var(--u) * 5.4);
    height: calc(var(--u) * 2.2);
    padding: 0 calc(var(--u) * .8);
    border-radius: 99px;
    background: var(--yellow);
    color: var(--navy);
    font-weight: 700;
    font-size: var(--t-body);
}

.sl-flags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); margin: 0; padding: 0; list-style: none; }
.sl-flags a { display: block; transition: transform .2s ease; }
.sl-flags a:hover { transform: translateY(-3px); }
.sl-flags img { display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 2); object-fit: cover; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* stat cards (navy) */
.sl-stats { display: grid; gap: calc(var(--u) * 1.4); }
.sl-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-stat {
    display: flex;
    flex-direction: column;
    padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4);
    border-radius: calc(var(--u) * .6);
    background: var(--navy);
    color: #FFFFFF;
}
.sl-stat__num { color: var(--yellow); font-size: calc(var(--u) * 2.3); font-weight: 700; line-height: 1.1; }
.sl-stat__lab { margin-top: calc(var(--u) * .3); font-weight: 700; }
.sl-stat__note { margin-top: calc(var(--u) * .2); font-size: var(--t-small); color: #C9D2E8; }
.sl-stat__note a { text-decoration: underline; text-underline-offset: 2px; }
a.sl-stat__num:hover, .sl-stat__note a:hover { color: var(--yellow); }
.sl-stat__note a:hover { color: #FFFFFF; }

/* ---------- 1 Cover ---------- */
/* desktop: the cover fills the screen, its content centred with the navy space shared above and below, the legal line at the bottom */
@media (min-width: 1024px) {
    .sl.sl-cover {
        align-items: stretch;
        min-height: 100vh;
        padding-top: calc(var(--header) + var(--u) * 4);
        padding-bottom: calc(var(--u) * 1.6);
    }
    .sl-cover .sl__foot { margin-top: calc(var(--u) * 4); }
}
/* floating side buttons (shown from 1282px): centred on the screen under the 71px menu, so on the cover too:
   menu + (screen - menu) / 2 - half the visible block (5 x 75px less the 16px outer margins) - the first 16px margin */
@media (min-width: 1282px) {
    .btn-box { top: calc(50vh + 35.5px - 171.5px - 16px); }
}
.sl-cover__body { margin: auto 0; }
.sl-cover__title { margin: 0; font-family: var(--font-main); font-size: calc(var(--u) * 3.9); font-weight: 600; line-height: 1.15; color: #FFFFFF; }
.sl-cover__lead { max-width: calc(var(--u) * 78); margin-top: calc(var(--u) * 1.6) !important; font-size: calc(var(--u) * 1.5); line-height: 1.5; color: #C9D2E8; }
.sl-cover__facts { max-width: calc(var(--u) * 78); margin-top: calc(var(--u) * 1.6); padding: calc(var(--u) * .9) calc(var(--u) * 1.3); border-left: 4px solid var(--yellow); border-radius: calc(var(--u) * .4); background: rgba(255, 255, 255, .07); }
.sl-cover__facts h2 { margin: 0 0 calc(var(--u) * .3); color: var(--yellow); font-family: var(--font-sec); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sl-cover__facts p { font-size: var(--t-small); line-height: 1.5; color: #E4E9F5; }
.sl-cover__markets { margin: calc(var(--u) * 2.4) 0 calc(var(--u) * 1) !important; color: var(--yellow); font-size: var(--t-small); font-weight: 700; letter-spacing: .1em; }
.sl-cover__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: calc(var(--u) * 2.6); }
.sl-cover__btns .btn { background: transparent; }
.sl-cover__btns .btn .btn__text { color: #FFFFFF; white-space: nowrap; }
/* CTA buttons in the site's button font (as on the home page) */
.sl-page .btn__text { font-family: var(--font-main); font-weight: 600; }
.sl-cover__btns .btn:hover { background: var(--yellow); border-color: var(--yellow); }
.sl-cover__btns .btn:hover .btn__text { color: var(--navy); }
.sl-cover__by { margin-top: calc(var(--u) * 2.6) !important; font-size: var(--t-small); color: #9AA6C4; }
/* "Scroll down for full guide" with a yellow arrow, right of the legal line */
.sl-cover__scroll { display: flex; flex-shrink: 0; align-items: center; gap: 8px; color: #FFFFFF; font-size: var(--t-small); font-weight: 700; white-space: nowrap; }
.sl-cover__scroll svg { width: 26px; height: 26px; fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: sl-nudge 1.8s ease-in-out infinite; }
.sl-cover__scroll:hover { color: var(--yellow); }
@keyframes sl-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sl-cover__scroll svg { animation: none; } }

/* ---------- 2 Contents ---------- */
.sl-toc {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(11, auto);
    column-gap: calc(var(--u) * 4);
    row-gap: calc(var(--u) * .35);
    margin: calc(var(--u) * 1.2) 0 0;
    padding: calc(var(--u) * 1) 0 0;
    border-top: 2px solid var(--navy);
    list-style: none;
}
.sl-toc a { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * .1) 0; }
.sl-toc a:hover .sl-toc__title { text-decoration: underline; text-underline-offset: 3px; }
.sl-toc__title { display: block; color: var(--navy); font-weight: 700; font-size: calc(var(--u) * 1.08); line-height: 1.25; }
.sl-toc__desc { display: block; font-size: var(--t-tiny); color: var(--muted); line-height: 1.3; }
/* contents: 21 rows, kept within one screen */
.sl-contents .sl-pill { height: calc(var(--u) * 1.9); }

/* ---------- 3 Market at a glance ---------- */
.sl-glance .sl-stats { margin-top: calc(var(--u) * 1.6); }
.sl-takes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.4); }
.sl-take { display: flex; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5); border-radius: calc(var(--u) * .7); background: #FFFFFF; box-shadow: 0 2px 10px rgba(5, 21, 59, .07); }
.sl-take__text { flex: 1.15; }
.sl-take__text h3 { margin-bottom: calc(var(--u) * .5); color: var(--navy); font-size: var(--t-h); font-weight: 700; line-height: 1.2; }
.sl-take__text p { font-size: var(--t-small); line-height: 1.45; }
.sl-take__text a { text-decoration: underline; text-underline-offset: 2px; }
.sl-take__fig { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * .9); border: 1px solid var(--line); border-radius: calc(var(--u) * .5); }
.sl-take__figtitle { font-size: var(--t-tiny); font-weight: 600; text-align: center; color: var(--muted); }
.sl-g2, .sl-g5 { display: flex; align-items: center; gap: calc(var(--u) * .6); font-size: var(--t-tiny); font-weight: 700; }
.sl-g2__lab, .sl-g5__lab { flex: 0 0 calc(var(--u) * 6.4); color: var(--navy); }
/* bar lengths are proportional to the values: a share (--p) of the plot, less room kept for the value after the bar */
.sl-g2__plot, .sl-g5__plot { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--u) * .6); }
.sl-g2__track { flex: none; display: flex; width: calc((100% - var(--u) * 4.4) * var(--p)); height: calc(var(--u) * 1.5); background: var(--navy); border-radius: 2px; }
.sl-g2__real { display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--navy); border-radius: 2px 0 0 2px; white-space: nowrap; }
.sl-g2__val { color: var(--navy); }
.sl-g5__bar { flex: none; width: calc((100% - var(--u) * 4.4) * var(--p)); height: calc(var(--u) * 1.2); background: var(--yellow); border-radius: 2px; }
.sl-g5__bar.is-median { background: var(--navy); }
.sl-g5__val { color: var(--navy); white-space: nowrap; }
.sl-chips { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .6); }
.sl-chip { padding: calc(var(--u) * .45) calc(var(--u) * .6); border-radius: 99px; background: #2F4691; color: #FFFFFF; font-size: var(--t-tiny); font-weight: 700; text-align: center; }
.sl-chip--dark { background: var(--navy); }
.sl-g4 { position: relative; display: flex; justify-content: space-between; margin: calc(var(--u) * .4) 0 0; padding: 0; list-style: none; }
.sl-g4::before { content: ''; position: absolute; left: 6%; right: 6%; top: calc(var(--u) * .55); height: 2px; background: var(--navy); }
.sl-g4 li { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .4); font-size: var(--t-tiny); font-weight: 600; color: var(--navy); }
.sl-g4 li span { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%; background: var(--navy); }
.sl-g4 li.is-key span { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); margin-top: calc(var(--u) * -.25); border: 2px solid var(--navy); background: var(--yellow); }
.sl-g4 li.is-key { font-weight: 700; }

/* ---------- 4 Introduction ---------- */
.sl-intro__cards { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 2); }
.sl-intro__card { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); border-radius: calc(var(--u) * .7); background: #EEF1F7; color: var(--ink); }
.sl-intro__card .sl-icon { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); background: none; }
.sl-intro__card .sl-icon img { width: 100%; height: 100%; }
.sl-intro__card h3 { margin-bottom: calc(var(--u) * .3); color: var(--navy); font-size: var(--t-h); font-weight: 700; }
.sl-intro__card p { font-size: var(--t-small); line-height: 1.45; }
.sl-intro__card a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 5 Values ---------- */
.sl-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.6); }
.sl-value { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .7); background: #FFFFFF; box-shadow: 0 2px 10px rgba(5, 21, 59, .07); }
.sl-value__text { flex: 1; }
.sl-value h3 { margin-bottom: calc(var(--u) * .35); color: var(--navy); font-size: var(--t-h); font-weight: 700; }
.sl-value p { font-size: var(--t-small); line-height: 1.4; }
.sl-ring {
    --c: var(--navy);
    position: relative;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 5.2);
    height: calc(var(--u) * 5.2);
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--pct) * 1%), #E1E5EF 0);
}
.sl-ring::before { content: ''; position: absolute; inset: calc(var(--u) * .75); border-radius: 50%; background: #FFFFFF; }
.sl-ring span { position: relative; color: var(--navy); font-weight: 700; font-size: var(--t-body); }
.sl-ring--1 { --c: var(--yellow); }
.sl-ring--2 { --c: #6B7593; }
.sl-values .sl-small { margin-top: calc(var(--u) * 1) !important; font-style: italic; }

/* ---------- 6 Skills heat table ---------- */
.sl-heat { margin-top: calc(var(--u) * 1.4); font-size: var(--t-small); }
.sl-heat__head, .sl-heat__row { display: grid; grid-template-columns: 27% 9% 9% 9% 8% 1fr; align-items: center; column-gap: calc(var(--u) * .8); }
.sl-heat__head { padding: calc(var(--u) * .7) calc(var(--u) * 1); border-radius: calc(var(--u) * .4); background: var(--navy); color: var(--yellow); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .06em; }
.sl-heat__head span:nth-child(n+2):nth-child(-n+5) { text-align: center; }
.sl-heat__row { padding: calc(var(--u) * .35) calc(var(--u) * 1); border-bottom: 1px solid var(--line); }
.sl-heat__skill strong { display: block; color: var(--navy); font-size: var(--t-body); line-height: 1.2; }
.sl-heat__skill small { display: block; color: var(--muted); font-size: var(--t-tiny); }
.sl-heat__cell { padding: calc(var(--u) * .5) 0; border-radius: calc(var(--u) * .3); font-weight: 700; text-align: center; }
.sl-heat__cell--1 { background: #E3E8F5; color: var(--navy); }
.sl-heat__cell--2 { background: #C9D2EA; color: var(--navy); }
.sl-heat__cell--3 { background: #7F8FC4; color: #FFFFFF; }
.sl-heat__cell--4 { background: #2F4691; color: #FFFFFF; }
.sl-heat__cell--5 { background: var(--navy); color: #FFFFFF; }
.sl-heat__trend { text-align: center; font-weight: 600; white-space: nowrap; }
.sl-heat__view { font-size: var(--t-tiny); line-height: 1.35; color: #333333; }
.sl-heat__legend { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * .8); font-size: var(--t-tiny); color: #333333; }
.sl-heat__legend strong { letter-spacing: .06em; color: var(--navy); }
.sl-heat__legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * .4); }
.sl-heat__legend i { display: inline-block; width: calc(var(--u) * 1.6); height: calc(var(--u) * .9); border-radius: 2px; }

/* ---------- 7 Key dates timeline: cards above / below the line, all the same height ---------- */
/* columns of 13.8% put each dot on a column line (13.8%, 27.6% ...); a card spans the two columns around its dot.
   rows "1fr auto 1fr" with no fixed height: both card rows take the tallest card, so every card is the same size */
.sl-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 13.8%) 1fr;
    grid-template-rows: 1fr calc(var(--u) * 5) 1fr;
    margin: calc(var(--u) * 1.4) 0 0;
    padding: 0;
    list-style: none;
}
.sl-timeline::before { content: ''; position: absolute; left: 0; right: calc(var(--u) * 1.2); top: 50%; height: calc(var(--u) * .5); margin-top: calc(var(--u) * -.25); border-radius: 99px; background: linear-gradient(90deg, #DDE3F0 0%, var(--yellow) 45%); }
.sl-timeline::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: calc(var(--u) * -.9); border: calc(var(--u) * .9) solid transparent; border-right: 0; border-left: calc(var(--u) * 1.5) solid var(--yellow); }
.sl-timeline__item { display: contents; }
.sl-timeline__card {
    display: flex;
    flex-direction: column;
    margin: 0 calc(var(--u) * .5);
    padding: calc(var(--u) * .9) calc(var(--u) * 1.1);
    border-radius: calc(var(--u) * .6);
    background: #FFFFFF;
    color: var(--ink);
    font-size: var(--t-tiny);
    line-height: 1.4;
}
.sl-timeline__item:nth-child(1) .sl-timeline__card { grid-area: 1 / 1 / 2 / 3; }
.sl-timeline__item:nth-child(2) .sl-timeline__card { grid-area: 3 / 2 / 4 / 4; }
.sl-timeline__item:nth-child(3) .sl-timeline__card { grid-area: 1 / 3 / 2 / 5; }
.sl-timeline__item:nth-child(4) .sl-timeline__card { grid-area: 3 / 4 / 4 / 6; }
.sl-timeline__item:nth-child(5) .sl-timeline__card { grid-area: 1 / 5 / 2 / 7; }
.sl-timeline__item:nth-child(6) .sl-timeline__card { grid-area: 3 / 6 / 4 / 8; }
/* dot + year: centred on the column line between the two columns the card spans */
.sl-timeline__dot, .sl-timeline__year { position: relative; z-index: 1; justify-self: center; }
.sl-timeline__item:nth-child(1) > :is(.sl-timeline__dot, .sl-timeline__year) { grid-area: 2 / 1 / 3 / 3; }
.sl-timeline__item:nth-child(2) > :is(.sl-timeline__dot, .sl-timeline__year) { grid-area: 2 / 2 / 3 / 4; }
.sl-timeline__item:nth-child(3) > :is(.sl-timeline__dot, .sl-timeline__year) { grid-area: 2 / 3 / 3 / 5; }
.sl-timeline__item:nth-child(4) > :is(.sl-timeline__dot, .sl-timeline__year) { grid-area: 2 / 4 / 3 / 6; }
.sl-timeline__item:nth-child(5) > :is(.sl-timeline__dot, .sl-timeline__year) { grid-area: 2 / 5 / 3 / 7; }
.sl-timeline__item:nth-child(6) > :is(.sl-timeline__dot, .sl-timeline__year) { grid-area: 2 / 6 / 3 / 8; }
.sl-timeline__dot { align-self: center; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border: 3px solid #FFFFFF; border-radius: 50%; background: var(--yellow); }
.sl-timeline__year { font-weight: 700; font-size: var(--t-body); white-space: nowrap; }
.sl-timeline__item.is-above .sl-timeline__year { align-self: start; }
.sl-timeline__item.is-below .sl-timeline__year { align-self: end; }
.sl-timeline__card h3 { display: flex; align-items: center; gap: calc(var(--u) * .6); margin-bottom: calc(var(--u) * .5); color: var(--navy); font-size: var(--t-body); font-weight: 700; line-height: 1.2; }
.sl-timeline__card p + p { margin-top: calc(var(--u) * .35); }
.sl-timeline__chips { display: flex; gap: calc(var(--u) * .6); margin-top: auto; padding-top: calc(var(--u) * .6); }
.sl-tchip { flex: 1; padding: calc(var(--u) * .25) 0; border-radius: 99px; font-weight: 700; text-align: center; white-space: pre; color: var(--navy); }
.sl-tchip--d { background: #FFF2C2; }
.sl-tchip--p { background: #E8ECF7; }

/* ---------- 8 / 9 Maps ---------- */
.sl-label { font-size: var(--t-tiny); font-weight: 700; letter-spacing: .08em; color: var(--navy); }
.sl-map__body { display: grid; grid-template-columns: 44% 1fr; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.2); min-height: 0; }
.sl-map__map { margin: 0; padding: calc(var(--u) * .6); display: flex; align-items: center; justify-content: center; }
.sl-map__frame { position: relative; display: inline-block; line-height: 0; }
.sl-map__map img { width: auto; max-width: 100%; height: calc(var(--u) * 37); object-fit: contain; }
.sl-map__spot { position: absolute; border-radius: 4px; }
.sl-map__spot:hover, .sl-map__spot:focus-visible { background: rgba(235, 181, 0, .22); box-shadow: 0 0 0 2px var(--yellow); outline: none; }
.sl-map__side { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.sl-map__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.sl-map__stat { display: flex; flex-direction: column; padding: calc(var(--u) * .7) calc(var(--u) * 1); font-size: var(--t-tiny); }
.sl-map__num { color: var(--navy); font-size: calc(var(--u) * 1.6); font-weight: 700; line-height: 1.15; }
.sl-map__who { margin-top: calc(var(--u) * .3); font-weight: 700; }
.sl-map__what { color: var(--muted); }
.sl-map__list { flex: 1; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4); }
.sl-rank { display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, 1fr); grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 1.4); height: calc(100% - var(--u) * 1.6); margin: calc(var(--u) * .6) 0 0; padding: 0; list-style: none; }
.sl-rank li { display: flex; align-items: center; gap: calc(var(--u) * .6); font-size: var(--t-small); font-weight: 700; color: var(--navy); }
.sl-rank__bar { width: calc(var(--u) * .5); height: calc(var(--u) * 1.5); border-radius: 1px; }
.sl-rank__n { width: calc(var(--u) * 1.5); }
.sl-rank img { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.2); object-fit: cover; }
.sl-rank__name { display: flex; flex: 1; align-items: center; gap: calc(var(--u) * .6); } /* flag + name: one link to the country page */
.sl-rank__name:hover span { text-decoration: underline; text-underline-offset: 2px; }
.sl-rank__val { white-space: nowrap; }
.sl-band-s1 { background: #DCE3F5; } .sl-band-s2 { background: #AEB9E0; } .sl-band-s3 { background: #6F86C8; } .sl-band-s4 { background: #2F4691; } .sl-band-s5 { background: #0B1A4A; }
.sl-band-r1 { background: #FCF0C8; } .sl-band-r2 { background: #F5D77A; } .sl-band-r3 { background: #EBB500; } .sl-band-r4 { background: #C08C00; } .sl-band-r5 { background: #7D5A00; }

/* ---------- 10 / 11 Ranges ---------- */
.sl-ranges__legend { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1); font-size: var(--t-small); }
.sl-ranges__legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); }
.sl-ranges__legend i { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 1.1); border: 1px solid rgba(255, 255, 255, .6); }
.sl-ranges__legend em { margin-left: auto; }
.sl-ranges__panels { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * .8); }
.sl-ranges__panel { display: flex; flex-direction: column; justify-content: space-around; margin: 0; padding: calc(var(--u) * .9) calc(var(--u) * 1.6); color: var(--navy); list-style: none; }
.sl-ranges__panel li { display: flex; align-items: center; gap: calc(var(--u) * 1.4); height: calc(var(--u) * 2.9); }
.sl-ranges__name { flex: 0 0 calc(var(--u) * 15); display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * .6); font-size: var(--t-body); font-weight: 700; text-align: right; }
.sl-ranges__name img { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.3); object-fit: cover; }
.sl-ranges__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.sl-ranges__plot { flex: 1; min-width: 0; }
.sl-ranges__bar { display: flex; height: calc(var(--u) * 2.1); }
.sl-ranges__bar span { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font-size: var(--t-tiny); font-weight: 700; white-space: nowrap; }
.sl-seg--low { background: #DDE3F0; color: var(--navy); }
.sl-seg--mid { background: var(--navy); color: #FFFFFF; }
.sl-seg--high { background: var(--yellow); color: var(--navy); }
.sl-ranges__note { margin-top: calc(var(--u) * .6) !important; color: #B4BDD0 !important; }

/* ---------- 12 Beyond salary ---------- */
.sl-beyond__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.2); }
.sl-beyond__col h3 { margin-bottom: calc(var(--u) * .6); font-size: var(--t-h); font-weight: 700; }
.sl-hbars { margin: 0; padding: calc(var(--u) * 1) calc(var(--u) * 1.2); color: var(--navy); list-style: none; }
.sl-hbars li { display: flex; align-items: center; gap: calc(var(--u) * .6); height: calc(var(--u) * 1.48); font-size: var(--t-tiny); }
.sl-hbars__lab { flex: 0 0 calc(var(--u) * 11); display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * .4); font-weight: 700; text-align: right; white-space: nowrap; }
.sl-hbars__lab img { width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.15); object-fit: cover; }
a.sl-hbars__lab:hover span { text-decoration: underline; text-underline-offset: 2px; } /* as the ranked lists */
.sl-hbars__track { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * .5); min-width: 0; }
.sl-hbars__bar { flex-shrink: 0; height: calc(var(--u) * 1.15); background: var(--navy); }
.sl-hbars--1 .sl-hbars__bar { background: var(--yellow); }
.sl-hbars--2 .sl-hbars__bar { background: #8D96B0; }
.sl-hbars__val { white-space: nowrap; }
.sl-beyond__note { margin-top: calc(var(--u) * .6) !important; color: #B4BDD0 !important; }

/* ---------- 13-19 Analysis charts ---------- */
.sw-navy { background: var(--navy); }
.sw-yellow { background: var(--yellow); }
.sw-gold { background: #C08C00; }
.sw-light { background: #B8C2DA; }
.sw-pale { background: #DCE3F5; }

.sl-analysis__body { display: grid; grid-template-columns: 1fr calc(var(--u) * 32.5); gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.2); }
.sl-chart { display: flex; flex-direction: column; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6); }
.sl-chart__grid {
    display: grid;
    grid-template-columns: calc(var(--u) * 2.2) calc(var(--u) * 11.5) var(--cols);
    align-items: center;
    column-gap: calc(var(--u) * .9);
    row-gap: calc(var(--u) * .18);
    margin-top: calc(var(--u) * .5);
    font-size: var(--t-tiny);
    color: var(--navy);
}
.sl-chart__legend { grid-column: 1 / 4; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.4); align-self: end; padding-bottom: calc(var(--u) * .3); color: #333333; }
.sl-chart__legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * .4); }
.sl-chart__legend i { display: inline-block; width: calc(var(--u) * .75); height: calc(var(--u) * .75); }
.sl-chart__barhead { display: none; }
.sl-chart__colhead { align-self: end; padding-bottom: calc(var(--u) * .3); font-size: calc(var(--u) * .62); font-weight: 700; letter-spacing: .04em; line-height: 1.2; color: #555555; }
.sl-chart__rank { font-weight: 700; color: #7D6200; }
.sl-chart__name { display: flex; align-items: center; gap: calc(var(--u) * .6); min-width: 0; font-weight: 700; line-height: 1.15; }
.sl-chart__name img { flex-shrink: 0; width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.07); object-fit: cover; }
.sl-chart__name sup { font-weight: 400; }
.sl-chart__name:hover span { text-decoration: underline; text-underline-offset: 2px; }
.sl-chart__bar { display: flex; align-items: center; height: calc(var(--u) * 1.45); min-width: 0; }
.sl-chart__val { white-space: nowrap; }
.sl-chart__val.is-strong { font-weight: 700; }

.sl-stack { display: flex; height: calc(var(--u) * 1.15); }
.sl-scroll__bar, .sl-scroll__hint { display: none; }
.sl-overlay { position: relative; display: flex; height: calc(var(--u) * 1.15); background: #DCE3F5; }
.sl-overlay__front { display: flex; align-items: center; padding-left: calc(var(--u) * .5); font-weight: 700; color: var(--navy); white-space: nowrap; }

/* 13 take-home: two columns of bars that fill the width (= €100k gross) */
.sl-takehome .sl-chart { margin-top: calc(var(--u) * 1.2); }
.sl-takehome__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); }
.sl-takehome__legend { align-self: flex-start; margin-top: calc(var(--u) * .5); font-size: var(--t-tiny); }
.sl-takehome .sl-chart__barhead--right { display: block; grid-column: 1 / -1; text-align: right; font-size: calc(var(--u) * .62); font-weight: 700; letter-spacing: .04em; color: #555555; }
.sl-takehome .sl-chart__grid { row-gap: calc(var(--u) * .5); }
.sl-takehome .sl-chart__bar { height: calc(var(--u) * 1.75); }
.sl-takehome .sl-stack { width: 100%; height: calc(var(--u) * 1.6); }
.sl-stack__net, .sl-stack__ded { display: flex; align-items: center; padding: 0 calc(var(--u) * .6); white-space: nowrap; overflow: hidden; }
.sl-stack__net { color: #FFFFFF; font-weight: 700; border-radius: 2px 0 0 2px; }
.sl-stack__ded { justify-content: flex-end; color: var(--navy); background: #C8D0E4; border-radius: 0 2px 2px 0; }
.sl-method { margin-top: calc(var(--u) * 1); padding: calc(var(--u) * .7) calc(var(--u) * 1); border: 1px solid var(--line); border-radius: calc(var(--u) * .5); font-size: calc(var(--u) * .66); line-height: 1.45; color: #333333; }

/* 18 contract vs permanent */
/* --prem: the premium column, as wide as its two-line title so the % figures centre under it */
.sl-analysis { --prem: calc(var(--u) * 8.4); }
.sl-pills { display: grid; grid-template-columns: calc(var(--u) * 6.6) calc(var(--u) * 1.6) calc(var(--u) * 6.6) var(--prem) 1fr; align-items: center; column-gap: calc(var(--u) * .5); width: 100%; font-variant-numeric: tabular-nums; }
.sl-vpill { padding: calc(var(--u) * .1) 0; border-radius: 99px; font-weight: 700; text-align: center; white-space: nowrap; }
.sl-vpill--y { background: var(--yellow); color: var(--navy); }
.sl-vpill--n { background: var(--navy); color: #FFFFFF; }
.sl-pills__vs { text-align: center; color: #777777; }
.sl-pills__prem { font-weight: 700; text-align: center; }
.sl-pills__track span { display: block; height: calc(var(--u) * .7); border-radius: 99px; background: #E8D9A0; }
.sl-analysis .sl-chart__barhead:not(:empty) { display: block; grid-column: 3; align-self: end; padding-bottom: calc(var(--u) * .3); }
.sl-pills__head { display: grid; grid-template-columns: calc(var(--u) * 6.6) calc(var(--u) * 1.6) calc(var(--u) * 6.6) var(--prem) 1fr; column-gap: calc(var(--u) * .5); font-size: calc(var(--u) * .62); font-weight: 700; letter-spacing: .04em; color: #555555; text-align: center; }
.sl-nowrap { white-space: nowrap; }
.sl-analysis .sl-chart__barhead:not(:empty) ~ .sl-chart__legend { grid-column: 1 / 3; }

/* right column */
.sl-analysis__side { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.sl-analysis__side .sl-map__stats { gap: calc(var(--u) * .8); }
.sl-analysis__side .sl-map__stat { padding: calc(var(--u) * .6) calc(var(--u) * .8); }
.sl-analysis__side .sl-map__num { font-size: calc(var(--u) * 1.45); }
.sl-info { flex: 1; padding: calc(var(--u) * .9) calc(var(--u) * 1.1); font-size: calc(var(--u) * .8); line-height: 1.45; }
.sl-info h3 { display: flex; align-items: center; gap: calc(var(--u) * .7); margin-bottom: calc(var(--u) * .5); color: var(--navy); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .06em; }
.sl-info a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 20 Country index ---------- */
.sl-index__grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1) calc(var(--u) * 1.6); margin: calc(var(--u) * 2) 0 0; padding: 0; list-style: none; }
.sl-index__grid a { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * .6) calc(var(--u) * .6) calc(var(--u) * .6) calc(var(--u) * 1.2); border: 2px solid #FFFFFF; border-radius: 99px; background: #FFFFFF; color: var(--navy); font-size: var(--t-h); font-weight: 700; transition: background-color .3s ease, color .3s ease; }
.sl-index__grid a:hover { background: var(--navy); color: #FFFFFF; }
.sl-index__grid .arrow-btn { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); margin: 0; }
.sl-index__grid .arrow-btn__icon { width: calc(var(--u) * 1.05); height: calc(var(--u) * 1.05); }
.sl-index__grid a:hover .arrow-btn { background: #FFFFFF; border-color: #FFFFFF; }
.sl-index__grid a:hover .arrow-btn__icon { transform: rotate(45deg); }
.sl-index__grid img { width: calc(var(--u) * 3); height: calc(var(--u) * 2); object-fit: cover; box-shadow: 0 0 0 1px rgba(5, 21, 59, .1); }
.sl-index__name { flex: 1; }
.sl-index__foot { margin-top: calc(var(--u) * 1.4) !important; color: #C9D2E8 !important; }

/* ---------- 21 In practice (colours as the PDF) ---------- */
.sl-practice__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.6); }
.sl-practice__col { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); color: var(--ink); }
.sl-practice__label { display: flex; align-items: center; gap: calc(var(--u) * .8); margin-bottom: calc(var(--u) * 1) !important; color: var(--gold); font-size: var(--t-small); font-weight: 700; letter-spacing: .1em; }
.sl-practice__col + .sl-practice__col .sl-practice__label { color: var(--navy); }
.sl-practice__label img { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }
.sl-practice__col ol { display: flex; flex-direction: column; gap: calc(var(--u) * .7); margin: 0; padding: 0; list-style: none; }
.sl-practice__col li { display: flex; align-items: center; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * .8) calc(var(--u) * 1.1); border: 1px solid #E1E6F0; border-radius: calc(var(--u) * .5); background: #FFFFFF; font-size: var(--t-small); line-height: 1.45; }
.sl-practice__col li p strong { color: var(--navy); }
.sl-practice__num .sl-y, .sl-practice__num strong { color: inherit; }
.sl-practice__col a { text-decoration: underline; text-underline-offset: 2px; }
.sl-practice__num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: var(--yellow); color: var(--navy); font-weight: 700; font-size: var(--t-small); }
.sl-practice__col + .sl-practice__col .sl-practice__num { background: var(--navy); color: #FFFFFF; }

/* ---------- 22 Hiring strategies ---------- */
.sl-strategies__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.4); }
.sl-strategy { display: flex; flex-direction: column; overflow: hidden; }
.sl-strategy__photo { position: relative; height: calc(var(--u) * 7.5); }
.sl-strategy__photo img { width: 100%; height: 100%; object-fit: cover; }
.sl-strategy__badge { position: absolute; left: calc(var(--u) * 1.2); bottom: calc(var(--u) * -1.1); display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border: 2px solid #FFFFFF; border-radius: 50%; background: var(--yellow); color: var(--navy); font-weight: 700; font-size: var(--t-small); }
.sl-strategy__text { padding: calc(var(--u) * 1.8) calc(var(--u) * 1.3) calc(var(--u) * 1.2); }
.sl-strategy h3 { margin-bottom: calc(var(--u) * .5); color: var(--navy); font-size: var(--t-body); font-weight: 700; }
.sl-strategy p { font-size: var(--t-small); line-height: 1.45; }
.sl-strategy--help { justify-content: center; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.4); border-radius: calc(var(--u) * .7); background: var(--navy); color: #FFFFFF; }
.sl-strategy--help h3 { color: #FFFFFF; font-size: var(--t-h); line-height: 1.3; }
.sl-strategy--help p { color: #D8DEF0; }
.sl-strategy__label { margin-bottom: calc(var(--u) * .7) !important; color: var(--yellow) !important; font-size: var(--t-tiny) !important; font-weight: 700; letter-spacing: .1em; }
.sl-ybtn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * .7); align-self: flex-start; margin-top: calc(var(--u) * 1.2); padding: calc(var(--u) * .7) calc(var(--u) * 2.2); border-radius: 99px; background: var(--yellow); color: var(--navy) !important; font-weight: 700; font-size: var(--t-small); transition: background .2s ease; }
.sl-ybtn:hover { background: #FFFFFF; }
.sl-ybtn img { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); }

/* ---------- 23 Methodology ---------- */
.sl-method-s__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.4); }
.sl-method-s__grid .sl-info { font-size: var(--t-small); }
.sl-method-s__grid .sl-info h3 { font-size: var(--t-body); letter-spacing: 0; }
.sl-method-s__ranges { margin-top: calc(var(--u) * 1.2) !important; padding: calc(var(--u) * .9) calc(var(--u) * 1.3); border-radius: calc(var(--u) * .6); background: var(--navy); color: #FFFFFF; font-size: var(--t-small); line-height: 1.45; }
.sl-method-s__ranges strong { color: var(--yellow); }
.sl-method-s__cite { margin-top: calc(var(--u) * .8) !important; }

/* ---------- 24 Glossary ---------- */
.sl-glossary__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.2); }
.sl-glossary__col { padding: calc(var(--u) * 1) calc(var(--u) * 1.4); }
.sl-glossary dl { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr; column-gap: calc(var(--u) * 1); margin: calc(var(--u) * .6) 0 0; font-size: calc(var(--u) * .74); line-height: 1.35; }
.sl-glossary dt, .sl-glossary dd { margin: 0; padding: calc(var(--u) * .32) 0; border-top: 1px solid var(--line); }
.sl-glossary dt { color: var(--navy); font-weight: 700; }
.sl-glossary dd a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 25 It's good to talk ---------- */
.sl-talk__top { display: grid; grid-template-columns: 1fr calc(var(--u) * 40); gap: calc(var(--u) * 3); align-items: center; }
.sl-talk__head { font-family: var(--font-sec); font-size: calc(var(--u) * 3.6); font-weight: 700; color: #FFFFFF; }
.sl-talk__tag { margin-top: calc(var(--u) * .4) !important; font-size: calc(var(--u) * 1.75); }
.sl-talk__lede { margin-top: calc(var(--u) * 2.2) !important; font-size: calc(var(--u) * 1.35); line-height: 1.6; color: #D8DEF0; }
.sl-talk__trust { margin-top: calc(var(--u) * 1.4) !important; font-size: var(--t-small); white-space: pre-wrap; }
.sl-talk__teamhead { text-align: center; font-size: calc(var(--u) * 1.85); font-weight: 700; line-height: 1.25; }
.sl-talk__team ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2) calc(var(--u) * 1); margin: calc(var(--u) * 1.2) 0 0; padding: 0; list-style: none; text-align: center; }
.sl-talk__team li a { display: flex; flex-direction: column; align-items: center; font-size: var(--t-tiny); color: #C9D2E8; transition: transform .2s ease; }
.sl-talk__team li a:hover { transform: translateY(-3px); }
.sl-talk__team li a:hover strong { color: var(--yellow); }
.sl-talk__team img { width: calc(var(--u) * 8.6); height: calc(var(--u) * 8.6); margin-bottom: calc(var(--u) * .7); border: 3px solid var(--yellow); border-radius: 50%; object-fit: cover; }
.sl-talk__team li strong { color: #FFFFFF; font-size: var(--t-small); }
.sl-talk__boxes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 2.4); }
.sl-talk__box { display: flex; flex-direction: column; padding: calc(var(--u) * 1.4) calc(var(--u) * 2); border-radius: calc(var(--u) * .7); background: #0E2160; font-size: var(--t-body); line-height: 1.55; }
.sl-talk__label { margin-bottom: calc(var(--u) * .6) !important; color: var(--yellow); font-size: var(--t-body); font-weight: 700; letter-spacing: .1em; }
.sl-talk__btns { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); margin-top: auto; }
.sl-talk__btns .sl-ybtn { min-width: calc(var(--u) * 17); }
.sl-talk__contact { margin-top: calc(var(--u) * 1.4) !important; font-size: var(--t-body); white-space: pre-wrap; }
.sl-talk__contact a:hover { color: var(--yellow); }

/* ---------- 19-22 (in practice, strategies, methodology, glossary): blue-grey boxes as in the guide ---------- */
.sl-practice, .sl-strategies, .sl-method-s, .sl-glossary { --card: #EEF1F7; }
.sl-strategies.sl--light, .sl-method-s.sl--light, .sl-glossary.sl--light { background: #FFFFFF; }
.sl-practice .sl-card, .sl-strategies .sl-card, .sl-method-s .sl-card, .sl-glossary .sl-card { background: var(--card); box-shadow: none; }
.sl-glossary dt, .sl-glossary dd, .sl-practice__col li { border-color: #D6DDEC; }

/* wide screens: keep clear of the site's floating side buttons (collapsed to tabs after scrolling) */
@media (min-width: 1282px) {
    .sl-page {
        --u: min(calc((100vw - 120px) / 100), calc((100vh - var(--header) - 40px) / 56.25), 16px);
        --u: min(calc((100vw - 120px) / 100), calc((100svh - var(--header) - 40px) / 56.25), 16px);
    }
    .sl { padding-left: 60px; padding-right: 60px; }
}

/* ---------- Phones / small tablets: stacked ---------- */
@media (max-width: 899px) {
    .sl-page {
        --u: 10px;
        --t-title: 26px;
        --t-sub: 16px;
        --t-h: 16px;
        --t-body: 15px;
        --t-small: 14px;
        --t-tiny: 12.5px;
    }
    .sl { height: auto; min-height: 0; padding: 40px 20px 28px; scroll-margin-top: 60px; /* fixed mobile header */ }
    .sl:first-child { padding-top: 110px; }
    .sl__stage { width: 100%; height: auto; }
    .sl__foot { flex-wrap: wrap; margin-top: 24px; }
    .sl__note { flex-basis: 100%; }
    .sl__back { margin-left: auto; }

    .sl-cover__title { font-size: 32px; }
    .sl-cover__lead { font-size: 16px; }

    .sl-toc { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
    .sl-stats--4, .sl-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-takes { grid-template-columns: 1fr; }
    .sl-take { flex-direction: column; }
    .sl-values__grid { grid-template-columns: 1fr; }

    .sl-heat__head { display: none; }
    .sl-heat__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; padding: 14px 0; }
    .sl-heat__skill, .sl-heat__trend, .sl-heat__view { grid-column: 1 / -1; text-align: left; }

    .sl-timeline { display: flex; flex-direction: column; gap: 16px; }
    .sl-timeline::before, .sl-timeline::after { display: none; }
    .sl-timeline__item { display: flex; flex-direction: column; gap: 6px; }
    .sl-timeline__dot { display: none; }
    .sl-timeline__year { justify-self: auto; align-self: flex-start !important; color: var(--yellow); }
    .sl-timeline__card { margin: 0; }

    /* skills table: each value carries its column label (no table header on phones) */
    .sl-heat__cell::before, .sl-heat__trend::before, .sl-heat__view::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .06em;
        opacity: .75;
    }
    .sl-heat__cell { padding: 6px 4px 8px; line-height: 1.25; }
    .sl-heat__trend::before, .sl-heat__view::before { color: var(--navy); opacity: .6; }
}

@media (max-width: 899px) {
    .sl-map__body, .sl-ranges__panels, .sl-beyond__cols { grid-template-columns: 1fr; }
    .sl-map__map img { height: auto; }
    .sl-map__stats { grid-template-columns: 1fr 1fr 1fr; }
    .sl-rank { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 8px; }
    .sl-ranges__panel li { flex-direction: column; align-items: stretch; gap: 4px; height: auto; padding: 5px 0; }
    .sl-ranges__name { flex-basis: auto; justify-content: flex-start; font-size: 13px; text-align: left; }
    .sl-ranges__name img { order: -1; }
    .sl-ranges__bar { height: 22px; }
    .sl-ranges__bar span { font-size: 10.5px; padding: 0 2px; }
    .sl-ranges__legend em { margin-left: 0; }
    .sl-hbars__lab { flex-basis: 150px; }
    .sl-hbars li { height: 24px; }
}

@media (max-width: 899px) {
    .sl-analysis__body, .sl-takehome__cols { grid-template-columns: 1fr; }
    .sl-chart { padding: 14px; }
    .sl-analysis__body > *, .sl-chart, .sl-scroll { min-width: 0; } /* the wide chart scrolls inside its card instead of widening the page */
    .sl-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .sl-scroll::-webkit-scrollbar { display: none; }
    .sl-scroll .sl-chart__grid { --u: 13px; min-width: 720px; }
    .sl-chart.is-scrollable .sl-scroll__bar { display: block; position: relative; height: 6px; margin-top: 12px; border-radius: 99px; background: #E1E6F0; cursor: pointer; }
    .sl-scroll__bar span { position: absolute; top: 0; left: 0; height: 100%; border-radius: 99px; background: var(--navy); }
    .sl-chart.is-scrollable .sl-scroll__hint { display: block; margin-top: 6px !important; font-size: 12px; font-weight: 700; color: var(--navy); text-align: right; transition: opacity .2s ease; }
    .sl-chart.is-scrolled-end .sl-scroll__hint { opacity: .35; }
    .sl-chart__colhead { letter-spacing: 0; }

    /* take-home: name above a full-width bar so "€27k deducted" fits */
    .sl-takehome .sl-chart__grid { grid-template-columns: 24px minmax(0, 1fr); row-gap: 3px; }
    .sl-takehome .sl-chart__grid .sl-chart__barhead--right { grid-column: 1 / -1; }
    .sl-takehome .sl-chart__bar { grid-column: 1 / -1; margin-bottom: 8px; }
    .sl-takehome .sl-stack__net, .sl-takehome .sl-stack__ded { padding: 0 6px; font-size: 11.5px; }

    /* the two halves of a chart (side by side on desktop) stacked as one continuous chart: no gap, and the
       "FULL BAR = €100k GROSS" title only once (client, 28 Oct 2026) */
    .sl-takehome__cols { gap: 0; }
    .sl-takehome__cols > .sl-chart__grid + .sl-chart__grid { margin-top: 3px; }
    .sl-takehome__cols > .sl-chart__grid + .sl-chart__grid .sl-chart__barhead--right { display: none; }
    /* salary / day-rate ranges: the two cards joined into one. The pair is the card (background, corners, shadow) and
       the halves are transparent: two white boxes meeting at a fractional pixel left a hairline on iPad Safari */
    .sl-ranges__panels { gap: 0; overflow: hidden; border-radius: calc(var(--u) * .7); background: var(--card); box-shadow: 0 2px 10px rgba(5, 21, 59, .07); }
    .sl-ranges__panel { border-radius: 0; background: none; box-shadow: none; }
    .sl-ranges__panel:first-child { padding-bottom: 0; }
    .sl-ranges__panel + .sl-ranges__panel { padding-top: 0; }

    /* contract vs permanent: no bar track; fixed columns so pills, "vs", % and the column titles line up on every row */
    .sl-analysis { --prem: 130px; }
    .sl-pills__head { letter-spacing: 0; } /* "SALARY-EQUIVALENT" fits its 100px column */
    .sl-analysis .sl-pills, .sl-analysis .sl-pills__head { grid-template-columns: 100px 26px 100px var(--prem) 1fr; column-gap: 8px; }
    .sl-pills__track { display: none; }
    .sl-vpill { padding: 1px 0; line-height: 1.35; }
    .sl-scroll .sl-chart__grid:has(.sl-pills) { min-width: 650px; }
}

@media (max-width: 899px) {
    .sl-index__grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .sl-index__go { display: none; }
    .sl-practice__cols, .sl-glossary__cols, .sl-talk__top, .sl-talk__boxes { grid-template-columns: 1fr; }
    .sl-strategies__grid, .sl-method-s__grid { grid-template-columns: 1fr 1fr; }
    .sl-strategy__photo { height: 120px; }
    .sl-glossary dl { grid-template-columns: 110px 1fr; font-size: 13px; }
    .sl-talk__head { font-size: 32px; }
    .sl-talk__tag { font-size: 18px; }
    .sl-talk__lede { font-size: 16px; }
    .sl-talk__teamhead { font-size: 20px; text-wrap: balance; }
    .sl-talk__team img { width: 90px; height: 90px; }
    .sl-talk__trust, .sl-talk__contact { white-space: normal; }
}

/* phones: readable minimum sizes for text that is sized from --u on desktop */
@media (max-width: 899px) {
    .sl-toc__title { font-size: 15px; }
    .sl-toc__desc { font-size: 13px; }
    .sl-pill { min-width: 46px; height: 24px; font-size: 13px; }
    .sl-stat__num { font-size: 24px; }
    .sl-map__num { font-size: 20px !important; }
    .sl-chart__colhead, .sl-pills__head, .sl-takehome .sl-chart__barhead--right { font-size: 10px; }
    .sl-method { font-size: 12px; }
    .sl-info { font-size: 14px; }
    .sl-ring span { font-size: 14px; }
    .sl-icon__txt { font-size: 18px; }
    .sl__foot { font-size: 12px; }
}

@media (max-width: 480px) {
    .sl-strategies__grid, .sl-method-s__grid, .sl-index__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .sl-stats--4, .sl-stats--3 { grid-template-columns: 1fr; }
}