/**
 * SSC_Trial_Highlights_Shortcode - sekcja wyróżników na stronie /indywidualne/.
 *
 * ── OBRONA PRZED MOTYWEM ELEMENTORA (ta sama co w ssc-plany.css / ssc-cennik.css)
 * Motyw wstrzykuje reguły na selektorach ELEMENTOWYCH (.elementor-kit-NN p / a /
 * h2 / li / blockquote) o specyficzności (0,1,1). Dlatego:
 *   1. KAŻDY selektor jest zagnieżdżony pod korzeniem `.ssc-trialx` → (0,2,x),
 *   2. `!important` wyłącznie na własnościach, które motyw przejmuje -
 *      typografia, kolor, margin, text-transform, letter-spacing,
 *   3. geometria (border, radius, padding, gap, grid, aspect-ratio) BEZ
 *      `!important` - motyw jej nie rusza,
 *   4. ZERO odwołań do `.elementor-kit-NN` - numer kitu zmienia się przy
 *      re-imporcie, obrona ma być samowystarczalna.
 *
 * Namespace `.ssc-trialx*` - zero kolizji z `.ssc-ipc-*` (kalendarz, H14),
 * `.ssc-plany`, `.ssc-cennik` ani z panelem. Styl jest SCOPED.
 *
 * Tokeny: `--ssc-pad-*` z fallbackami na realne wartości powierzchni publicznej
 * (#1E40DD z ssc-individual-public-calendar.css:109, #EAF7FA :110, #E2E8F0 :111,
 * #F8FAFC :168). Arkusz działa też bez tokenów.
 *
 * Degradacja bez JS: cała treść jest w HTML. Animacje i nakładka odtwarzania to
 * wzbogacenie - patrz reguła `.ssc-trialx--nojs` na końcu pliku.
 */

/* ── Korzeń ─────────────────────────────────────────────────────────────── */

.ssc-trialx {
    font-family: var(--ssc-pad-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
    --tx-blue: var(--ssc-pad-accent-primary, #1E40DD);
    --tx-tint: #EAF7FA;
    --tx-border: #E2E8F0;
    --tx-inset: #F8FAFC;
    --tx-mute: var(--ssc-pad-text-secondary, #475569);
    --tx-soft: #6B7280;
    --tx-serif: var(--ssc-pad-font-serif, 'Playfair Display', Georgia, serif);
    --tx-rope: #C8202E;
}

.ssc-trialx * {
    box-sizing: border-box;
}

.ssc-trialx .ssc-trialx__wrap {
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 0 24px;
}

.ssc-trialx .ssc-trialx__eyebrow {
    display: block;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .17em !important;
    text-transform: uppercase !important;
    color: var(--tx-blue) !important;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__h2 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(28px, 3.2vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 12px 0 13px !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__h2 em {
    font-style: italic !important;
    color: var(--tx-blue) !important;
}

.ssc-trialx .ssc-trialx__lead {
    font-size: 16.5px !important;
    line-height: 1.65 !important;
    color: var(--tx-mute) !important;
    max-width: 44em;
    margin: 0 !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__ico {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ssc-trialx .ssc-trialx__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--tx-blue);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 15px 24px;
    border-radius: 11px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ssc-trialx .ssc-trialx__cta:hover,
.ssc-trialx .ssc-trialx__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(30, 64, 221, .26);
}

.ssc-trialx .ssc-trialx__cta--light {
    background: #fff;
    color: var(--tx-blue) !important;
}

.ssc-trialx .ssc-trialx__cta--ghost {
    background: transparent;
    color: #fff !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

/* ── Pas liczby (autorytet) ─────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__stat {
    background: var(--tx-blue);
    color: #fff !important;
    padding: 56px 0 0;
    position: relative;
}

.ssc-trialx .ssc-trialx__stat .ssc-trialx__eyebrow {
    color: #BCCBFF !important;
}

.ssc-trialx .ssc-trialx__stat-grid {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 44px;
    align-items: end;
}

.ssc-trialx .ssc-trialx__big {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: clamp(70px, 9.6vw, 126px) !important;
    line-height: .86 !important;
    letter-spacing: -.03em !important;
    margin: 16px 0 0 !important;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ssc-trialx .ssc-trialx__big small {
    font-size: .36em !important;
    font-weight: 500 !important;
}

.ssc-trialx .ssc-trialx__claim {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(24px, 2.6vw, 34px) !important;
    line-height: 1.18 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #fff !important;
    max-width: 20em;
    margin: 14px 0 14px !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__stat-sub {
    font-size: 15.5px !important;
    line-height: 1.66 !important;
    color: #DCE4FF !important;
    max-width: 38em;
    margin: 0 !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__stat-sub b {
    color: #fff !important;
    font-weight: 600 !important;
}

.ssc-trialx .ssc-trialx__badges {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ssc-trialx .ssc-trialx__badge {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff !important;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__badge .ssc-trialx__ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #BCCBFF;
}

.ssc-trialx .ssc-trialx__offer {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #DCE4FF !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__offer .ssc-trialx__ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #BCCBFF;
}

.ssc-trialx .ssc-trialx__markers {
    display: flex;
    gap: 8px;
    margin: 20px 0 34px !important;
    padding: 0 !important;
    list-style: none !important;
}

.ssc-trialx .ssc-trialx__markers i {
    width: 24px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
}

.ssc-trialx .ssc-trialx__markers i:nth-child(-n+2) {
    background: #fff;
}

.ssc-trialx .ssc-trialx__fig {
    align-self: end;
    position: relative;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__fig img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -1px !important;
    filter: drop-shadow(0 18px 34px rgba(8, 20, 70, .36));
}

/* ── Sekcje treściowe ──────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__sec {
    padding: 60px 0 56px;
}

.ssc-trialx .ssc-trialx__sec--tight {
    padding-top: 8px;
}

.ssc-trialx .ssc-trialx__sec--flush {
    padding-top: 0;
}

/* ── Trzy starty ───────────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 32px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ssc-trialx .ssc-trialx__type {
    border: 1px solid var(--tx-border);
    border-radius: 14px;
    padding: 22px 20px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

.ssc-trialx .ssc-trialx__type .ssc-trialx__ico {
    color: var(--tx-blue);
    margin-bottom: 12px;
}

.ssc-trialx .ssc-trialx__type h3 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__type p {
    font-size: 14.5px !important;
    line-height: 1.62 !important;
    color: var(--tx-mute) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Droga (lina torowa + przystanki) ──────────────────────────────────── */

.ssc-trialx .ssc-trialx__road {
    margin: 54px 0 0 !important;
    position: relative;
}

.ssc-trialx .ssc-trialx__rope {
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    height: 8px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg,
        var(--tx-blue) 0 13px, #fff 13px 20px, var(--tx-rope) 20px 33px);
}

.ssc-trialx .ssc-trialx__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ssc-trialx .ssc-trialx__step {
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--tx-blue);
    margin: 29px 0 17px !important;
}

.ssc-trialx .ssc-trialx__step:first-child .ssc-trialx__knob {
    background: var(--tx-blue);
}

.ssc-trialx .ssc-trialx__meta {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--tx-blue) !important;
    background: var(--tx-tint);
    border-radius: 999px;
    padding: 5px 9px;
    margin: 0 0 10px !important;
}

.ssc-trialx .ssc-trialx__step h4 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__step p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--tx-mute) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Panel klienta ─────────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__app {
    background: var(--tx-tint);
    border: 1px solid #CFE3F5;
    border-radius: 20px;
    overflow: hidden;
}

.ssc-trialx .ssc-trialx__app-in {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 38px;
    padding: 38px 0 38px 38px;
    align-items: center;
}

.ssc-trialx .ssc-trialx__app h3 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(25px, 2.7vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
    margin: 12px 0 14px !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__app-lead {
    font-size: 16px !important;
    line-height: 1.66 !important;
    color: var(--tx-mute) !important;
    max-width: 34em;
    margin: 0 !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__app-lead b {
    color: var(--ssc-pad-text-primary, #12161F) !important;
    font-weight: 600 !important;
}

.ssc-trialx .ssc-trialx__feats {
    display: grid;
    gap: 11px;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ssc-trialx .ssc-trialx__feat {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--tx-mute) !important;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__feat .ssc-trialx__ico {
    color: var(--tx-blue);
    margin-top: 1px;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.ssc-trialx .ssc-trialx__feat b {
    color: var(--ssc-pad-text-primary, #12161F) !important;
    font-weight: 600 !important;
}

/* Ekran panelu (odwzorowanie widoku „Postępy") */

.ssc-trialx .ssc-trialx__screen {
    background: #fff;
    border: 1px solid var(--tx-border);
    border-right: 0;
    border-radius: 16px 0 0 16px;
    padding: 20px 20px 22px;
    box-shadow: -12px 16px 34px rgba(16, 32, 80, .12);
}

.ssc-trialx .ssc-trialx__screen-top {
    text-align: center;
    border-bottom: 1px solid var(--tx-border);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.ssc-trialx .ssc-trialx__screen-top span {
    display: block;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--tx-soft) !important;
}

.ssc-trialx .ssc-trialx__screen-top b {
    display: block;
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
    margin-top: 6px !important;
}

.ssc-trialx .ssc-trialx__screen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ssc-trialx .ssc-trialx__sc-card {
    border: 1px solid var(--tx-border);
    border-radius: 12px;
    padding: 14px;
}

.ssc-trialx .ssc-trialx__sc-card h4 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--tx-mute) !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__sc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    padding: 6px 0;
    border-bottom: 1px solid #F1F4F8;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__sc-row:last-of-type {
    border-bottom: 0;
}

.ssc-trialx .ssc-trialx__sc-row i {
    font-style: normal !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
}

.ssc-trialx .ssc-trialx__sc-row em {
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--tx-blue) !important;
    font-variant-numeric: tabular-nums;
}

.ssc-trialx .ssc-trialx__sc-total {
    display: flex;
    justify-content: space-between;
    border-top: 1.5px solid var(--ssc-pad-text-primary, #12161F);
    margin: 9px 0 0 !important;
    padding-top: 9px;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

.ssc-trialx .ssc-trialx__sc-total em {
    font-style: normal !important;
    color: var(--tx-blue) !important;
    font-variant-numeric: tabular-nums;
}

.ssc-trialx .ssc-trialx__radar {
    width: 100%;
    height: auto;
    display: block;
}

.ssc-trialx .ssc-trialx__radar .tx-grid {
    fill: none;
    stroke: var(--tx-border);
    stroke-width: 1;
}

.ssc-trialx .ssc-trialx__radar .tx-axis {
    stroke: #EDF1F6;
    stroke-width: 1;
}

.ssc-trialx .ssc-trialx__radar .tx-lbl {
    font-size: 8px;
    font-weight: 600;
    fill: #64748B;
}

.ssc-trialx .ssc-trialx__radar .tx-fill {
    fill: rgba(30, 64, 221, .16);
    stroke: var(--tx-blue);
    stroke-width: 2;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
}

.ssc-trialx .ssc-trialx__radar .tx-pt {
    fill: var(--tx-blue);
}

.ssc-trialx .ssc-trialx__points {
    background: var(--tx-tint);
    border: 1px solid #CFE3F5;
    border-radius: 12px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0 !important;
}

.ssc-trialx .ssc-trialx__points .ssc-trialx__ico {
    color: var(--tx-blue);
}

.ssc-trialx .ssc-trialx__points b {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-size: 19px !important;
    color: var(--tx-blue) !important;
    font-variant-numeric: tabular-nums;
}

.ssc-trialx .ssc-trialx__points span {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--tx-mute) !important;
}

.ssc-trialx .ssc-trialx__screen-cap {
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--tx-soft) !important;
    text-align: center;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

/* ── Wywiady ───────────────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__tales {
    background: var(--tx-inset);
    border-top: 1px solid var(--tx-border);
    border-bottom: 1px solid var(--tx-border);
    padding: 52px 0;
}

.ssc-trialx .ssc-trialx__tales-head {
    max-width: 46em;
    margin: 0 0 28px !important;
}

.ssc-trialx .ssc-trialx__vgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/*
 * Elementy siatki to <li>; sam kafel jest <a> w srodku. Bez `display:flex` na
 * <li> kafel nie rozciaga sie do wysokosci rzedu i karty przestaja byc rowne -
 * wylapane w smoke tescie na realnym renderze shortcode'a.
 */
.ssc-trialx .ssc-trialx__vgrid > li {
    display: flex;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__vt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left !important;
    padding: 10px;
    border: 1px solid var(--tx-border);
    border-radius: 18px;
    background: #fff;
    margin: 0 !important;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease;
}

.ssc-trialx a.ssc-trialx__vt {
    text-decoration: none !important;
    color: inherit !important;
}

.ssc-trialx button.ssc-trialx__vt {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
}

.ssc-trialx .ssc-trialx__vt:hover,
.ssc-trialx .ssc-trialx__vt:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 32, 80, .14);
}

.ssc-trialx .ssc-trialx__vt:focus-visible {
    outline: 2px solid var(--tx-blue);
    outline-offset: 2px;
}

/* kadr pionowy przycięty do 4:5 - pełne 9:16 otwiera się w nakładce */
.ssc-trialx .ssc-trialx__poster {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--tx-inset);
    overflow: hidden;
    border-radius: 12px;
    flex: 0 0 auto;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: 12px;
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__poster::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(8, 20, 70, 0) 46%, rgba(8, 20, 70, .58) 100%);
}

.ssc-trialx .ssc-trialx__play {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--tx-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(8, 20, 70, .3);
}

.ssc-trialx .ssc-trialx__play .ssc-trialx__ico {
    width: 22px;
    height: 22px;
}

.ssc-trialx .ssc-trialx__time {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 18px;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    text-shadow: 0 1px 6px rgba(8, 20, 70, .7);
}

.ssc-trialx .ssc-trialx__vt-body {
    padding: 16px 8px 6px;
    display: flex;
    flex-direction: column;
}

/* stała wysokość cytatu i metryczki - rzędy trzech kafli równają się co do px */
.ssc-trialx .ssc-trialx__vt-body b {
    display: block;
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 17.5px !important;
    line-height: 1.32 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ssc-pad-text-primary, #12161F) !important;
    min-height: calc(2 * 1.32em);
    margin: 0 !important;
}

.ssc-trialx .ssc-trialx__vt-body em {
    display: block;
    font-style: normal !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--tx-blue) !important;
    min-height: calc(2 * 1.5em);
    margin: 10px 0 0 !important;
}

.ssc-trialx .ssc-trialx__vt-body p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--tx-mute) !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

/* ── Nakładka odtwarzania ──────────────────────────────────────────────── */

.ssc-trialx-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(6, 12, 34, .86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ssc-trialx-lb.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ssc-trialx-lb__frame {
    position: relative;
    width: min(380px, 92vw);
    max-height: 88vh;
    aspect-ratio: 9 / 16;
    background: #0B1220;
    border-radius: 18px;
    overflow: hidden;
}

.ssc-trialx-lb__frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0B1220;
}

.ssc-trialx-lb__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ssc-trialx-lb__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ssc-trialx-lb__close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* ── Zamknięcie ────────────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__close {
    background: var(--tx-blue);
    color: #fff !important;
    padding: 44px 0;
}

.ssc-trialx .ssc-trialx__close-in {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.ssc-trialx .ssc-trialx__quote {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    max-width: 22em;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    quotes: none;
}

.ssc-trialx .ssc-trialx__quote cite {
    display: block;
    font-style: normal !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #BCCBFF !important;
    margin-top: 10px !important;
}

.ssc-trialx .ssc-trialx__close h4 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 29px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__close p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #DCE4FF !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

.ssc-trialx .ssc-trialx__close-act {
    margin-left: auto !important;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Zdjęcia instruktorów (renderowane tylko gdy podane w atrybutach) ──── */

.ssc-trialx .ssc-trialx__shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ssc-trialx .ssc-trialx__shots img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   HARTOWANIE TYPOGRAFII - luka wyłapana w smoke teście pod wrogą kaskadą
   ══════════════════════════════════════════════════════════════════════════
   Motyw celuje wprost w ELEMENTY (`.elementor-kit-NN p / li / a`) i potrafi
   dać tam `font-family` z `!important`. Wartość DZIEDZICZONA z korzenia
   `.ssc-trialx` takiej reguły NIE przebije - reguła bezpośrednia zawsze bije
   dziedziczenie. Dlatego każdy element niosący tekst dostaje rodzinę, kerning
   i `text-transform` WPROST, na specyficzności (0,2,0), która wygrywa z
   (0,1,1) motywu niezależnie od kolejności arkuszy.
   Bez tego bloku akapity sekcji przejmowały font motywu (potwierdzone
   pomiarowo: `lead font = "Comic Sans MS"` w teście z atrapą kitu).       */

.ssc-trialx .ssc-trialx__lead,
.ssc-trialx .ssc-trialx__stat-sub,
.ssc-trialx .ssc-trialx__offer,
.ssc-trialx .ssc-trialx__app-lead,
.ssc-trialx .ssc-trialx__badge,
.ssc-trialx .ssc-trialx__feat,
.ssc-trialx .ssc-trialx__type p,
.ssc-trialx .ssc-trialx__step p,
.ssc-trialx .ssc-trialx__vt-body p,
.ssc-trialx .ssc-trialx__close p,
.ssc-trialx .ssc-trialx__sc-row,
.ssc-trialx .ssc-trialx__sc-row i,
.ssc-trialx .ssc-trialx__sc-total,
.ssc-trialx .ssc-trialx__points span,
.ssc-trialx .ssc-trialx__cta {
    font-family: var(--ssc-pad-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-style: normal !important;
}

/* Elementy celowo pisane kapitalikami - rodzina sans, ale transform zostaje. */
.ssc-trialx .ssc-trialx__eyebrow,
.ssc-trialx .ssc-trialx__meta,
.ssc-trialx .ssc-trialx__time,
.ssc-trialx .ssc-trialx__screen-cap,
.ssc-trialx .ssc-trialx__screen-top span,
.ssc-trialx .ssc-trialx__vt-body em,
.ssc-trialx .ssc-trialx__quote cite {
    font-family: var(--ssc-pad-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    font-style: normal !important;
}

/* Nagłówki i cytaty - serif italic wprost, nie z dziedziczenia. */
.ssc-trialx .ssc-trialx__h2,
.ssc-trialx .ssc-trialx__claim,
.ssc-trialx .ssc-trialx__big,
.ssc-trialx .ssc-trialx__type h3,
.ssc-trialx .ssc-trialx__step h4,
.ssc-trialx .ssc-trialx__app h3,
.ssc-trialx .ssc-trialx__sc-card h4,
.ssc-trialx .ssc-trialx__screen-top b,
.ssc-trialx .ssc-trialx__points b,
.ssc-trialx .ssc-trialx__vt-body b,
.ssc-trialx .ssc-trialx__quote,
.ssc-trialx .ssc-trialx__close h4 {
    font-family: var(--tx-serif) !important;
    font-style: italic !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/*
 * HARTOWANIE KOLORU - luka domknieta 30.07.2026 przy weryfikacji delty kolorow.
 *
 * Blok wyzej hartuje RODZINE, kerning i transform, ale nie kolor - a motyw
 * potrafi dac `color` takze na `h2` i `span`. Wartosc DZIEDZICZONA z rodzica
 * takiej reguly nie przebije, wiec nagłowki sekcji i gole `span`-y wewnatrz
 * akapitow przejmowaly kolor motywu.
 *
 * Zmierzone pod atrapa wrogiego kitu: 10 elementow przejmowanych, w tym
 * WSZYSTKIE TRZY nagłowki sekcji. Ponizsze reguly to domykaja - `inherit`
 * na specyficznosci (0,2,1) bije (0,1,1) motywu niezaleznie od kolejnosci
 * arkuszy, a tekst dostaje kolor swojego rodzica, tak jak zaprojektowano.
 */

.ssc-trialx .ssc-trialx__h2,
.ssc-trialx .ssc-trialx__sc-total {
    color: var(--ssc-pad-text-primary, #12161F) !important;
}

.ssc-trialx .ssc-trialx__big span,
.ssc-trialx .ssc-trialx__offer span,
.ssc-trialx .ssc-trialx__feat span,
.ssc-trialx .ssc-trialx__sc-total span {
    color: inherit !important;
}

/*
 * HARTOWANIE MARGINESÓW - luka domknięta 30.07.2026, przeniesiona 1:1
 * z sekcji grupowej (`ssc-group-highlights.css`), gdzie wyszła w smoke teście
 * pod ostrzejszą atrapą kaskady motywu.
 *
 * Motyw potrafi dać `margin` na gołe elementy (`div`, `span`). Elementy
 * POZYCJONOWANE ABSOLUTNIE, którym ten arkusz nie ustawia marginesu, dają się
 * przez to przesunąć - a `top`/`bottom` już tego nie kompensuje. Zmierzone pod
 * atrapą `div/span { margin: 28px 0 }`:
 *   - LINA TOROWA zjeżdżała 28 px w dół, znaczniki drogi zostawały na miejscu
 *     (odchylenie -28 px na desktopie, -2 px na telefonie),
 *   - PRZYCISK ODTWARZANIA na kaflu wywiadu unosił się z 14 px na 42 px od dołu,
 *   - ETYKIETA CZASU z 18 px na 46 px od dołu.
 *
 * Znacznika drogi tu nie ma celowo: ma już własny `margin ... !important`
 * (`.ssc-trialx__knob`), więc dopisanie go do zerowania zepsułoby układ drogi.
 */
.ssc-trialx .ssc-trialx__rope,
.ssc-trialx .ssc-trialx__markers i,
.ssc-trialx .ssc-trialx__play,
.ssc-trialx .ssc-trialx__time {
    margin: 0 !important;
}

/* Linki w sekcji nie dziedziczą dekoracji ani koloru motywu. */
.ssc-trialx .ssc-trialx__vt,
.ssc-trialx .ssc-trialx__cta {
    text-decoration: none !important;
}

/* ── Ruch ──────────────────────────────────────────────────────────────── */

.ssc-trialx [data-tx-rev] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
                transform .75s cubic-bezier(.22, .61, .36, 1);
}

.ssc-trialx [data-tx-rev].is-in {
    opacity: 1;
    transform: none;
}

.ssc-trialx [data-tx-fade] {
    will-change: opacity, transform;
}

.ssc-trialx .ssc-trialx__radar .tx-fill {
    transform: scale(.05);
    transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}

.ssc-trialx .ssc-trialx__radar.is-go .tx-fill {
    transform: scale(1);
}

/*
 * DEGRADACJA BEZ JS. Klasa `ssc-trialx--nojs` jest w HTML od razu; skrypt
 * zdejmuje ją na starcie. Bez JS wszystko jest widoczne i nieruchome,
 * a kafle wywiadów przestają udawać przyciski (patrz `<noscript>` w renderze).
 */
.ssc-trialx.ssc-trialx--nojs [data-tx-rev] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.ssc-trialx.ssc-trialx--nojs [data-tx-fade] {
    opacity: 1 !important;
    transform: none !important;
}

.ssc-trialx.ssc-trialx--nojs .ssc-trialx__radar .tx-fill {
    transform: scale(1) !important;
    transition: none !important;
}

/*
 * Przycisk odtwarzania ZOSTAJE widoczny bez JS - kafel to <a href="plik wideo">,
 * wiec klik realnie otwiera film. Ukrywanie go byloby klamstwem wobec dzialania.
 */

@media (prefers-reduced-motion: reduce) {
    .ssc-trialx [data-tx-rev] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ssc-trialx [data-tx-fade] {
        opacity: 1 !important;
        transform: none !important;
    }
    .ssc-trialx .ssc-trialx__radar .tx-fill {
        transform: scale(1) !important;
        transition: none !important;
    }
    .ssc-trialx .ssc-trialx__cta,
    .ssc-trialx .ssc-trialx__vt {
        transition: none !important;
    }
}

/* ── Telefon ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .ssc-trialx .ssc-trialx__wrap {
        padding: 0 20px;
    }
    .ssc-trialx .ssc-trialx__h2 {
        font-size: 27px !important;
    }
    .ssc-trialx .ssc-trialx__lead {
        font-size: 15.5px !important;
    }
    .ssc-trialx .ssc-trialx__stat {
        padding: 34px 0 0;
    }
    .ssc-trialx .ssc-trialx__stat-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ssc-trialx .ssc-trialx__big {
        font-size: 72px !important;
    }
    .ssc-trialx .ssc-trialx__claim {
        font-size: 25px !important;
    }
    .ssc-trialx .ssc-trialx__stat-sub {
        font-size: 15px !important;
    }
    .ssc-trialx .ssc-trialx__markers {
        margin-bottom: 18px !important;
    }
    .ssc-trialx .ssc-trialx__fig {
        width: 212px;
        margin: 12px auto 0 !important;
    }
    .ssc-trialx .ssc-trialx__sec {
        padding: 36px 0 32px;
    }
    .ssc-trialx .ssc-trialx__types {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ssc-trialx .ssc-trialx__road {
        margin-top: 32px !important;
    }
    .ssc-trialx .ssc-trialx__rope {
        left: 7px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 8px;
        height: auto;
        background: repeating-linear-gradient(180deg,
            var(--tx-blue) 0 13px, #fff 13px 20px, var(--tx-rope) 20px 33px);
    }
    .ssc-trialx .ssc-trialx__steps {
        grid-template-columns: 1fr;
        gap: 0;
        /* `!important` konieczne: reguła bazowa ma `padding: 0 !important`,
           bez tego znaczniki wyjeżdżały poza obrys (smoke test: -42 px). */
        padding-left: 40px !important;
    }
    .ssc-trialx .ssc-trialx__step {
        position: relative;
        padding-bottom: 24px;
    }
    .ssc-trialx .ssc-trialx__knob {
        position: absolute;
        left: -40px;
        top: 3px;
        margin: 0 !important;
    }
    .ssc-trialx .ssc-trialx__app-in {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 20px 0;
    }
    .ssc-trialx .ssc-trialx__app h3 {
        font-size: 24px !important;
    }
    .ssc-trialx .ssc-trialx__screen {
        margin: 0 -20px !important;
        border-radius: 14px 14px 0 0;
        border-right: 1px solid var(--tx-border);
        box-shadow: none;
    }
    .ssc-trialx .ssc-trialx__screen-grid {
        grid-template-columns: 1fr;
    }
    .ssc-trialx .ssc-trialx__tales {
        padding: 36px 0;
    }
    .ssc-trialx .ssc-trialx__vgrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ssc-trialx .ssc-trialx__vt {
        padding: 8px;
    }
    .ssc-trialx .ssc-trialx__vt-body {
        padding: 14px 6px 4px;
    }
    .ssc-trialx .ssc-trialx__shots {
        grid-template-columns: 1fr;
    }
    .ssc-trialx .ssc-trialx__close {
        padding: 34px 0;
    }
    .ssc-trialx .ssc-trialx__close h4 {
        font-size: 25px !important;
    }
    .ssc-trialx .ssc-trialx__close-in {
        flex-direction: column;
        align-items: flex-start;
    }
    .ssc-trialx .ssc-trialx__close-act {
        margin-left: 0 !important;
        width: 100%;
    }
    .ssc-trialx .ssc-trialx__close-act .ssc-trialx__cta {
        flex: 1;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT KOLORYSTYCZNY „JASNY / PREMIUM" - zatwierdzony 30.07.2026
   ══════════════════════════════════════════════════════════════════════════

   Wszystko powyżej to BAZA sekcji: układ, typografia, ruch, obrona przed
   motywem. Wszystko poniżej to WYŁĄCZNIE decyzja kolorystyczna - można ją
   podmienić albo usunąć bez dotykania czegokolwiek innego. Taki był cel
   wydzielenia: żeby za pół roku było widać, co jest konstrukcją, a co gustem.

   Co zmienia: oba nasycone pasy - „30%" i zamykający - schodzą z markowego
   niebieskiego na jasny błękit `#EAF7FA`, ten sam, którego używa blok
   „centrum dowodzenia". Niebieski zostaje na liczbie, napisach, liniach
   i przyciskach. Powód biznesowy: pełnych niebieskich pasów było na stronie
   za dużo, a sekcja siedzi tuż pod niebieskim hero.

   Paleta: wyłącznie wartości już obecne na stronie. Zero nowych kolorów.
     #EAF7FA  jasny błękit      ssc-individual-public-calendar.css:110
     #1E40DD  niebień marki     ...calendar.css:109
     #CFE3F5  ramka błękitu     baza tego arkusza
     #12161F / #475569          tekst podstawowy / drugorzędny

   Kolejność ma znaczenie: warstwa stoi PO bloku `@media (max-width: 860px)`,
   więc obowiązuje na każdej szerokości. Sprawdzone, że blok telefonu nie
   zawiera reguł kolorystycznych kolidujących z tą warstwą (jedyna to gradient
   liny torowej, której warstwa nie dotyka).

   Kontrast zmierzony (luminancja WCAG, 25 par tekst-tło, desktop i telefon):
   wszystkie pary spełniają AA, najniższa 4,83:1. UWAGA na jedną pozycję niżej:
   podpis pod cytatem MUSI zostać na `#475569`. Wcześniejsze `#6B7280` dawało
   na jasnym błękicie 4,42:1, czyli poniżej progu 4,5 - na ciemnym tle ten sam
   kolor działał, po rozjaśnieniu pasa przestał. Różnica jest niewidoczna
   gołym okiem i mierzalna.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pas „30%" ─────────────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__stat {
    background: #EAF7FA;
    color: #12161F !important;
}

.ssc-trialx .ssc-trialx__stat .ssc-trialx__eyebrow {
    color: #1E40DD !important;
}

.ssc-trialx .ssc-trialx__big {
    color: #1E40DD !important;
}

.ssc-trialx .ssc-trialx__claim {
    color: #12161F !important;
}

.ssc-trialx .ssc-trialx__stat-sub {
    color: #475569 !important;
}

.ssc-trialx .ssc-trialx__stat-sub b {
    color: #12161F !important;
}

/* Odznaki: z półprzezroczystej bieli na białe pastylki z błękitną obwódką. */
.ssc-trialx .ssc-trialx__badge {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #CFE3F5;
    color: #1E40DD !important;
}

.ssc-trialx .ssc-trialx__badge .ssc-trialx__ico {
    color: #1E40DD;
}

.ssc-trialx .ssc-trialx__offer {
    color: #475569 !important;
}

.ssc-trialx .ssc-trialx__offer .ssc-trialx__ico {
    color: #1E40DD;
}

.ssc-trialx .ssc-trialx__markers i {
    background: #CFE3F5;
}

.ssc-trialx .ssc-trialx__markers i:nth-child(-n+2) {
    background: #1E40DD;
}

/* Cień sylwetki liczony był pod ciemne tło - na jasnym musi zelżeć. */
.ssc-trialx .ssc-trialx__fig img {
    filter: drop-shadow(0 18px 34px rgba(16, 32, 80, .18));
}

/* ── Pas zamykający ────────────────────────────────────────────────────── */

.ssc-trialx .ssc-trialx__close {
    background: #EAF7FA;
    color: #12161F !important;
}

.ssc-trialx .ssc-trialx__close .ssc-trialx__eyebrow {
    color: #1E40DD !important;
}

.ssc-trialx .ssc-trialx__quote {
    color: #12161F !important;
}

/* NIE zmieniać na jaśniejszy - patrz uwaga o kontraście w nagłówku warstwy. */
.ssc-trialx .ssc-trialx__quote cite {
    color: #475569 !important;
}

.ssc-trialx .ssc-trialx__close h4 {
    color: #12161F !important;
}

.ssc-trialx .ssc-trialx__close p {
    color: #475569 !important;
}

/* Przyciski: na jasnym tle role się odwracają - główny staje się pełny. */
.ssc-trialx .ssc-trialx__cta--light {
    background: #1E40DD;
    color: #FFFFFF !important;
}

.ssc-trialx .ssc-trialx__cta--ghost {
    color: #1E40DD !important;
    box-shadow: inset 0 0 0 1.5px #1E40DD;
}