/*
 * MyoSana public design system.
 *
 * Loaded after every page stylesheet so shared visual decisions live in one
 * place. The Moč in vizija page is the reference: warm paper backgrounds,
 * dark green editorial type, restrained cards and generous spacing.
 */

:root {
    --cream: #fbfaf4;
    --paper: #fffdf8;
    --green: #2d5133;
    --green-dark: #203e28;
    --sage: #dfe3ca;
    --muted: #687168;
    --line: #d9ddcf;
    --myo-hero: #f5f2e8;
    --myo-section: #fbfaf4;
    --myo-section-alt: #f0eee5;
    --myo-card: #fffdf8;
    --myo-card-soft: #f4f1e8;
    --myo-green-strip: #244f3d;
    --myo-copy: #43594b;
    --myo-radius: 12px;
    --myo-section-space: 68px;
}

body {
    background: var(--myo-section);
    color: var(--green-dark);
}

.recaptcha-wrap {
    max-width: 100%;
    margin: 16px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.recaptcha-wrap .g-recaptcha {
    min-height: 78px;
}

body > .site-header,
body > .site-footer {
    background: var(--myo-hero) !important;
}

/* Shared controls. */
main#vsebina .button,
main#vsebina .contact-phone-button {
    min-height: 48px;
    padding: 13px 25px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

main#vsebina .button-small {
    min-height: 46px;
    padding: 12px 21px;
    font-size: 13px;
}

main#vsebina .eyebrow,
main#vsebina .join-kicker {
    margin-bottom: 12px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2em;
}

main#vsebina .section-space {
    padding-block: var(--myo-section-space) !important;
}

/* One background and one hero type scale across every public page. */
main#vsebina:is(
    .vision-page,
    .groups-page,
    .join-page-v2,
    .contact-page,
    .terms-page,
    .membership-page,
    .privacy-page,
    .cookies-page,
    .faq-page,
    .pricing-page
) {
    background: var(--myo-section);
    color: var(--green-dark);
}

main#vsebina :is(
    .hero,
    .vision-page-hero,
    .groups-hero,
    .join-page-v2 .join-hero,
    .contact-hero,
    .terms-hero,
    .membership-hero,
    .privacy-hero,
    .cookies-hero,
    .faq-hero,
    .pricing-hero
) {
    background: var(--myo-hero);
}

/* Soften the join between every split subpage hero and its photograph. */
main#vsebina :is(
    .vision-page-hero .join-hero-photo,
    .groups-hero-photo,
    .join-page-v2 .join-hero-photo,
    .contact-hero-photo,
    .terms-hero-photo,
    .membership-hero-photo,
    .privacy-hero-photo,
    .cookies-hero-photo,
    .faq-hero-photo,
    .pricing-hero-photo
) {
    position: relative;
}

main#vsebina :is(
    .vision-page-hero .join-hero-photo,
    .groups-hero-photo,
    .join-page-v2 .join-hero-photo,
    .contact-hero-photo,
    .terms-hero-photo,
    .membership-hero-photo,
    .privacy-hero-photo,
    .cookies-hero-photo,
    .faq-hero-photo,
    .pricing-hero-photo
)::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: clamp(190px, 14vw, 300px);
    background: linear-gradient(90deg, var(--myo-hero) 0%, rgba(245, 242, 232, .96) 16%, rgba(245, 242, 232, .82) 34%, rgba(245, 242, 232, .58) 55%, rgba(245, 242, 232, .32) 74%, rgba(245, 242, 232, .12) 90%, rgba(245, 242, 232, 0) 100%);
    pointer-events: none;
}

main#vsebina :is(
    .hero h1,
    .vision-page-hero h1,
    .groups-hero h1,
    .join-page-v2 .join-hero h1,
    .contact-hero h1,
    .terms-hero h1,
    .membership-hero h1,
    .privacy-hero h1,
    .cookies-hero h1,
    .faq-hero h1,
    .pricing-hero h1
) {
    max-width: 650px;
    margin: 0 0 18px;
    color: var(--green-dark);
    font-family: var(--serif);
    font-size: clamp(48px, 4.8vw, 68px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.045em;
}

main#vsebina :is(
    .join-page-v2 .join-hero h2,
    .contact-hero h2,
    .pricing-hero h2
) {
    max-width: 500px;
    margin: -2px 0 14px;
    color: var(--green-dark);
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.02em;
}

main#vsebina :is(
    .hero-description,
    .vision-page-hero .join-hero-copy > p:not(.join-kicker),
    .groups-hero-text,
    .join-page-v2 .join-hero-copy > p:not(.join-kicker),
    .contact-hero-copy > p,
    .terms-hero-copy > p:last-child,
    .membership-hero-copy > p:last-child,
    .privacy-hero-copy > p:not(.eyebrow),
    .cookies-hero-copy > p:not(.eyebrow),
    .faq-hero-copy > p:not(.eyebrow),
    .pricing-hero-copy > p:not(.eyebrow)
) {
    max-width: 510px;
    color: var(--myo-copy);
    font-size: 14px;
    line-height: 1.75;
}

/* Shared editorial section headings. */
main#vsebina :is(
    .section-heading h2,
    .system-heading h2,
    .vision-copy h2,
    .groups-path-heading h2,
    .groups-why-copy h2,
    .groups-audience > .container > header h2,
    .groups-cta h2,
    .join-centered-heading h2,
    .join-training-heading h2
) {
    color: var(--green-dark);
    font-family: var(--serif);
    font-size: clamp(38px, 3.2vw, 48px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.045em;
}

main#vsebina :is(
    .system-heading > p:last-child,
    .vision-copy > p:not(.eyebrow),
    .groups-path-heading > p:last-child,
    .groups-why-copy > p:not(.eyebrow),
    .join-training-heading > p:last-child
) {
    color: var(--myo-copy);
    font-size: 15px;
    line-height: 1.8;
}

/* Reusable surfaces. */
main#vsebina :is(
    .program-card,
    .system-grid,
    .testimonial-card,
    .join-training-card,
    .join-selection-dates article,
    .contact-form-wrap,
    .parking-card,
    .terms-section,
    .membership-intro,
    .membership-rules,
    .privacy-intro,
    .privacy-section,
    .cookies-intro,
    .cookies-table,
    .cookies-management aside,
    .faq-list,
    .faq-closing,
    .pricing-start,
    .pricing-plan article,
    .pricing-later,
    .pricing-later-options article
) {
    border-color: var(--line);
    border-radius: var(--myo-radius);
}

main#vsebina :is(
    .program-card,
    .system-grid,
    .testimonial-card,
    .join-training-card,
    .contact-form-wrap,
    .terms-section,
    .privacy-section,
    .faq-list,
    .pricing-plan article,
    .pricing-later-options article
) {
    background: var(--myo-card);
}

main#vsebina :is(
    .membership-intro,
    .privacy-intro,
    .cookies-intro,
    .cookies-management aside,
    .faq-closing,
    .pricing-start,
    .pricing-later
) {
    background: var(--myo-card-soft);
}

/* Content typography: readable body copy without enlarging decorative labels. */
.contact-detail p,
.terms-section > p,
.membership-intro p,
.membership-rules p,
.privacy-intro p,
.privacy-section p,
.cookies-intro p,
.cookies-copy p,
.cookies-management p,
.cookies-more p,
.faq-list details p,
.faq-closing p {
    color: var(--myo-copy);
    font-size: 14px;
    line-height: 1.75;
}

.contact-columns h2,
.membership-intro h2,
.membership-closing h2,
.privacy-closing h2,
.cookies-intro h2,
.cookies-management h2,
.cookies-more h2,
.faq-closing h2 {
    color: var(--green-dark);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.035em;
}

.terms-section h2,
.privacy-section h2,
.cookies-table h3 {
    color: var(--green-dark);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
}

/* Home and programme cards use the same card rhythm as Moč in vizija. */
.program-grid,
.testimonial-grid {
    gap: 18px;
}

.program-card,
.testimonial-card {
    box-shadow: none;
}

.program-body p,
.system-card p {
    color: #566556;
    font-size: 14px;
    line-height: 1.7;
}

.program-body .text-link {
    font-size: 13px;
}

/* Softer feature icons across every page that uses the four-card system block. */
main#vsebina .system-icon .icon {
    stroke-width: 1;
}

/* Keep the five recruitment-step pictograms as light as the site's other icons. */
main#vsebina .step-icon .icon {
    stroke-width: 1.05;
}

.hero-benefit,
.vision-hero-benefit,
.groups-hero-benefits article {
    color: #506050;
    font-size: 11px;
    line-height: 1.5;
}

.hero-benefit strong,
.vision-hero-benefit strong,
.groups-hero-benefits strong {
    color: var(--green-dark);
    font-size: 11.5px;
    line-height: 1.35;
}

/* Group programme page. */
.groups-path,
.groups-audience {
    padding-block: var(--myo-section-space);
    background: var(--myo-section);
}

.groups-why {
    padding-block: 0;
    background: var(--myo-section-alt);
    overflow: hidden;
}

main#vsebina .approach,
main#vsebina .principles,
main#vsebina .groups-cta,
main#vsebina .join-apply-strip,
main#vsebina .pricing-cta,
main#vsebina .join-facts {
    background: var(--myo-section-alt);
    color: var(--green-dark);
    border-color: var(--line);
}

main#vsebina .approach .eyebrow,
main#vsebina .approach-copy > p:not(.eyebrow),
main#vsebina .approach .light-link,
main#vsebina .approach-benefits li,
main#vsebina .groups-cta p,
main#vsebina .join-apply-strip .eyebrow,
main#vsebina .join-apply-strip p,
main#vsebina .pricing-cta p {
    color: var(--myo-copy);
}

main#vsebina .approach .check-ring,
main#vsebina .principle > span {
    color: var(--green);
    border-color: rgba(45, 81, 51, .35);
}

main#vsebina .principle,
main#vsebina .join-fact {
    border-color: var(--line);
}

main#vsebina .principle h2,
main#vsebina .principle p {
    color: var(--green-dark);
}

/* The homepage approach panel intentionally keeps its original green visual. */
main#vsebina .approach {
    background: #637650;
    color: var(--paper);
    border-color: transparent;
}

main#vsebina .approach .eyebrow {
    color: #e0e6cc;
}

main#vsebina .approach-copy > p:not(.eyebrow) {
    color: #f1f1e7;
}

main#vsebina .approach .light-link,
main#vsebina .approach-benefits li {
    color: var(--paper);
}

main#vsebina .approach .light-link {
    min-height: 42px;
    padding: 9px 17px;
    gap: 14px;
    border: 1px solid rgba(255, 253, 248, .75);
    border-radius: 999px;
    line-height: 1.35;
}

main#vsebina .approach .light-link:hover {
    background: rgba(255, 255, 255, .1);
    text-decoration: none;
}

main#vsebina .approach .light-link .icon {
    width: 18px;
    height: 18px;
}

main#vsebina .approach .check-ring {
    color: var(--paper);
    border-color: rgba(222, 231, 207, .6);
}

/* One visual language for editorial check lists on light backgrounds. */
main#vsebina .content-check-ring,
main#vsebina .approach .check-ring {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(45, 81, 51, .58);
    border-radius: 50%;
    color: var(--green);
}

main#vsebina .content-check-ring .icon,
main#vsebina .content-check-ring img,
main#vsebina .approach .check-ring .icon {
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

/* The homepage list sits on dark green, so its established light treatment remains. */
main#vsebina .approach .check-ring {
    color: var(--paper);
    border-color: rgba(238, 242, 231, .68);
}

main#vsebina .groups-why-copy li,
main#vsebina .pricing-start li,
main#vsebina .join-values li {
    align-items: flex-start;
}

main#vsebina .strength-audience-copy li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

main#vsebina .strength-audience-copy li::before {
    content: "✓";
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-grid;
    place-items: center;
    margin: -1px 0 0;
    border: 1px solid rgba(45, 81, 51, .58);
    border-radius: 50%;
    color: var(--green);
    font: 700 12px/1 var(--sans);
}

main#vsebina :is(
    .groups-cta-button,
    .join-apply-strip .button,
    .pricing-cta .button
) {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.groups-step-label,
.groups-audience-grid h3 {
    font-size: 12px;
    line-height: 1.45;
}

.groups-step > p:last-child,
.groups-audience-grid p,
.groups-why-copy li,
.groups-cta p {
    font-size: 13px;
    line-height: 1.7;
}

.groups-audience-grid article {
    border-color: var(--line);
}

/* Keep the desktop process heading readable and every step on one shared baseline. */
@media (min-width: 1101px) {
    .groups-path-inner {
        grid-template-columns: minmax(310px, 340px) minmax(0, 1fr);
        gap: 36px;
        align-items: stretch;
    }

    .groups-path-heading {
        display: flex;
        min-width: 0;
        padding-right: 28px;
        flex-direction: column;
        justify-content: center;
    }

    .groups-path-heading h2 {
        max-width: 330px;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .groups-step-grid {
        align-self: stretch;
    }

    .groups-step {
        display: grid;
        min-height: 260px;
        padding: 30px 16px 0;
        grid-template-rows: 34px 40px 54px auto;
        align-content: start;
        justify-items: center;
        row-gap: 10px;
    }

    .groups-step-number,
    .groups-step-label,
    .groups-step-icon,
    .groups-step > p:last-child {
        margin: 0;
    }

    .groups-step-label {
        min-height: 0;
        align-self: center;
    }
}

/* Join page: remove its separate yellow language and use the site palette. */
.join-page-v2 {
    --join-ink: var(--green-dark);
    --join-green: var(--green);
    --join-yellow: var(--sage);
}

.join-path,
.join-values {
    background: var(--myo-section);
    border-color: var(--line);
}

/* Keep the expectations/offering block clean, without decorative background leaves. */
main#vsebina .join-values {
    background: var(--myo-section);
}

main#vsebina .join-values .join-leaf {
    display: none;
}

main#vsebina .join-values-grid > div + div {
    border-left: 0;
}

main#vsebina .join-values .eyebrow {
    margin-bottom: 24px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .06em;
}

main#vsebina .join-values ul {
    gap: 14px;
}

main#vsebina .join-values li {
    font-size: 17px;
    line-height: 1.6;
}

main#vsebina .join-facts {
    background: var(--myo-section-alt);
    border-color: var(--line);
}

/* The recruitment facts strip follows the Moč in vizija principles strip. */
main#vsebina .join-facts-grid {
    min-height: 164px;
}

main#vsebina .join-fact {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 20px;
    padding: 30px 46px;
}

main#vsebina .join-fact-icon {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(45, 81, 51, .35);
    border-radius: 50%;
}

main#vsebina .join-fact-icon .icon {
    width: 31px;
    height: 31px;
    stroke-width: 1.4;
}

main#vsebina .join-fact p {
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 1.4;
}

main#vsebina .join-fact strong {
    margin-bottom: 5px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

main#vsebina .join-fact span:not(.join-fact-icon) {
    margin-top: 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

main#vsebina .join-fact-icon,
main#vsebina .join-fact p,
main#vsebina .join-fact strong,
main#vsebina .join-fact span:not(.join-fact-icon) {
    color: var(--green-dark);
}

.join-training {
    background: var(--myo-section-alt);
}

.step-icon,
.training-icon,
.join-selection-dates article,
.join-training-benefits article,
.join-values li .icon {
    background: var(--sage);
    border-color: #cfd6b8;
}

.join-step p,
.join-training-card > p,
.join-training-benefits p,
.join-values li {
    color: var(--myo-copy);
    font-size: 14px;
    line-height: 1.7;
}

.join-values li .icon,
.join-values .uploaded-value-list-icon {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Legal, information and contact pages. */
.contact-main,
.terms-content,
.membership-content,
.privacy-content,
.cookies-content,
.faq-content,
.pricing-content {
    background: var(--myo-section);
}

.contact-form-wrap,
.terms-section,
.privacy-section {
    padding: 30px;
}

.membership-rules li {
    border-color: var(--line);
}

.membership-closing,
.privacy-closing {
    border-radius: var(--myo-radius);
    background: var(--sage);
}

.faq-list summary {
    padding: 21px 25px;
    color: var(--green-dark);
    font-size: 16px;
    line-height: 1.5;
}

.faq-list details > div {
    padding: 0 25px 25px;
}

/* Pricing was the smallest page typographically; bring it onto the same scale. */
.pricing-start h2,
.pricing-heading h2 {
    color: var(--green-dark);
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.pricing-start h3,
.pricing-later-label h3 {
    font-size: 18px;
}

.pricing-start p,
.pricing-heading p,
.pricing-plan > header p,
.pricing-later-label p,
.pricing-notice,
.pricing-cta p {
    font-size: 13px;
    line-height: 1.65;
}

.pricing-start li,
.pricing-plan article small,
.pricing-plan article span,
.pricing-plan article em,
.pricing-plan article b,
.pricing-later-options small,
.pricing-later-options span,
.pricing-later-options b,
.pricing-benefits strong {
    font-size: 12px;
    line-height: 1.5;
}

main#vsebina .pricing-plan > header {
    background: var(--sage);
    color: var(--green-dark);
    border: 1px solid var(--line);
    border-bottom: 0;
}

.pricing-cta {
    padding: 25px 30px;
    border-radius: var(--myo-radius);
}

.pricing-cta h2 {
    font-size: 24px;
}

body > .site-footer .footer-bottom {
    background: var(--myo-hero);
    color: var(--green-dark);
    border-top: 1px solid var(--line);
    box-shadow: 0 0 0 100vmax var(--myo-hero);
}

body > .site-footer .footer-bottom a {
    color: var(--green-dark);
}

body > .site-footer .footer-credit {
    display: inline-flex;
    align-items: center;
}

body > .site-footer .footer-credit img {
    width: 112px;
    height: auto;
    max-height: 25px;
    object-fit: contain;
    filter: grayscale(1) brightness(.45);
    opacity: .68;
}

@media (max-width: 850px) {
    main#vsebina .groups-hero-photo::before {
        display: none;
    }
}

@media (max-width: 1024px) {
    :root {
        --myo-section-space: 58px;
    }

    .contact-form-wrap,
    .terms-section,
    .privacy-section {
        padding: 25px;
    }

    main#vsebina .join-fact {
        padding-inline: 26px;
    }
}

@media (max-width: 700px) {
    :root {
        --myo-section-space: 50px;
    }

    main#vsebina :is(
        .hero h1,
        .vision-page-hero h1,
        .groups-hero h1,
        .join-page-v2 .join-hero h1,
        .contact-hero h1,
        .terms-hero h1,
        .membership-hero h1,
        .privacy-hero h1,
        .cookies-hero h1,
        .faq-hero h1,
        .pricing-hero h1
    ) {
        font-size: clamp(42px, 11.5vw, 48px);
        line-height: 1.08;
    }

    main#vsebina :is(
        .section-heading h2,
        .system-heading h2,
        .vision-copy h2,
        .groups-path-heading h2,
        .groups-why-copy h2,
        .groups-audience > .container > header h2,
        .groups-cta h2,
        .join-centered-heading h2,
        .join-training-heading h2
    ) {
        font-size: 34px;
    }

    main#vsebina :is(
        .hero-description,
        .vision-page-hero .join-hero-copy > p:not(.join-kicker),
        .groups-hero-text,
        .join-page-v2 .join-hero-copy > p:not(.join-kicker),
        .contact-hero-copy > p,
        .terms-hero-copy > p:last-child,
        .membership-hero-copy > p:last-child,
        .privacy-hero-copy > p:not(.eyebrow),
        .cookies-hero-copy > p:not(.eyebrow),
        .faq-hero-copy > p:not(.eyebrow),
        .pricing-hero-copy > p:not(.eyebrow)
    ) {
        font-size: 14px;
    }

    main#vsebina .button,
    main#vsebina .contact-phone-button {
        min-height: 46px;
        padding: 12px 21px;
    }

    main#vsebina :is(
        .hero-copy,
        .vision-page-hero .join-hero-copy,
        .groups-hero-copy,
        .join-page-v2 .join-hero-copy,
        .contact-hero-copy,
        .terms-hero-copy,
        .membership-hero-copy,
        .privacy-hero-copy,
        .cookies-hero-copy,
        .faq-hero-copy,
        .pricing-hero-copy
    ) {
        padding-top: 43px !important;
        padding-bottom: 38px !important;
    }

    main#vsebina :is(
        .hero-visual,
        .vision-page-hero .join-hero-photo,
        .groups-hero-photo,
        .join-page-v2 .join-hero-photo,
        .contact-hero-photo,
        .terms-hero-photo,
        .membership-hero-photo,
        .privacy-hero-photo,
        .cookies-hero-photo,
        .faq-hero-photo,
        .pricing-hero-photo
    ) {
        height: 430px !important;
        min-height: 430px !important;
    }

    main#vsebina :is(
        .vision-page-hero .join-hero-photo,
        .groups-hero-photo,
        .join-page-v2 .join-hero-photo,
        .contact-hero-photo,
        .terms-hero-photo,
        .membership-hero-photo,
        .privacy-hero-photo,
        .cookies-hero-photo,
        .faq-hero-photo,
        .pricing-hero-photo
    )::before {
        display: none;
    }

    main#vsebina .join-fact,
    main#vsebina .join-fact:first-child,
    main#vsebina .join-fact:last-child {
        min-height: 128px;
        padding: 20px 12px;
    }

    .groups-path,
    .groups-why,
    .groups-audience {
        padding-block: var(--myo-section-space);
    }

    .groups-why {
        padding-block: 0;
    }

    .contact-form-wrap,
    .terms-section,
    .privacy-section {
        padding: 22px;
    }

    .program-body p,
    .system-card p,
    .join-step p,
    .join-training-card > p,
    .join-values li {
        font-size: 13px;
    }

    .faq-list summary {
        padding: 19px 20px;
        font-size: 15px;
    }

    .faq-list details > div {
        padding: 0 20px 22px;
    }

    main#vsebina .join-values-grid > div + div {
        padding-top: 0;
        border-top: 0;
    }

    main#vsebina .join-values .eyebrow {
        font-size: 19px;
    }

    main#vsebina .join-values li {
        font-size: 16px;
    }
}

/* Podatki o delovnem mestu: štiri kartice na namizju, dve na manjših zaslonih. */
@media (min-width: 851px) {
    main#vsebina .join-facts-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    main#vsebina .join-fact,
    main#vsebina .join-fact:nth-child(2n) {
        min-width: 0;
        padding: 28px 24px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }

    main#vsebina .join-fact:last-child {
        border-right: 0;
    }
}

@media (max-width: 850px) {
    main#vsebina .join-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    main#vsebina .join-fact,
    main#vsebina .join-fact:first-child,
    main#vsebina .join-fact:last-child {
        min-width: 0;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    main#vsebina .join-fact:nth-child(2n) {
        border-right: 0;
    }

    main#vsebina .join-fact:nth-child(n + 3) {
        border-bottom: 0;
    }
}

/* Večja in bolj berljiva skupna noga strani. */
body > .site-footer{
    padding-top:72px;
}

body > .site-footer .footer-grid{
    grid-template-columns:1.35fr .85fr .9fr 1.25fr;
    gap:64px;
    padding-bottom:58px;
    align-items:start;
}

body > .site-footer .footer-brand{
    min-height:72px;
    margin-bottom:22px;
    gap:13px;
}

body > .site-footer .footer-brand .custom-logo{
    width:220px;
    max-width:100%;
    max-height:80px;
}

body > .site-footer .footer-brand .brand-mark{
    width:29px;
    height:66px;
}

body > .site-footer .footer-brand .brand-name{
    font-size:36px;
}

body > .site-footer .footer-about > p{
    max-width:310px;
    margin-bottom:23px;
    font-size:13px;
    line-height:1.75;
}

body > .site-footer .footer-grid h2{
    margin:5px 0 23px;
    font-size:15px;
    line-height:1.35;
}

body > .site-footer :is(.footer-menu a,.footer-info > a,.footer-contact > p,.footer-contact > a){
    font-size:13px;
    line-height:1.8;
}

body > .site-footer .footer-menu a,
body > .site-footer .footer-info > a{
    padding-block:4px;
}

body > .site-footer .footer-contact > p,
body > .site-footer .footer-contact-line{
    gap:12px;
    margin-bottom:13px;
}

body > .site-footer .footer-contact .icon{
    width:20px;
    height:20px;
}

body > .site-footer .footer-contact-line strong{
    font-size:16px;
}

body > .site-footer .footer-socials{
    gap:14px;
    margin-top:22px;
}

body > .site-footer .footer-socials a{
    width:36px;
    height:36px;
}

body > .site-footer .footer-socials .icon{
    width:19px;
    height:19px;
}

body > .site-footer .footer-watermark img{
    width:96px;
    height:220px;
}

body > .site-footer .footer-bottom{
    padding-block:20px;
    font-size:11.5px;
    justify-content:space-between;
    text-align:left;
}

body > .site-footer .footer-bottom > span:first-child{
    margin-right:auto;
}

body > .site-footer .footer-bottom > div{
    position:static;
    display:flex;
    align-items:center;
    gap:11px;
    margin-left:auto;
}

body > .site-footer .footer-credit-label{
    font-weight:600;
    white-space:nowrap;
}

body > .site-footer .footer-credit img{
    width:140px;
    max-height:31px;
}

@media (max-width: 1024px){
    body > .site-footer{padding-top:60px}
    body > .site-footer .footer-grid{
        grid-template-columns:1.1fr 1fr;
        gap:46px 58px;
        padding-bottom:48px;
    }
}

@media (max-width: 700px){
    body > .site-footer{padding-top:50px}
    body > .site-footer .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:36px 25px;
        padding-bottom:38px;
    }
    body > .site-footer .footer-brand{min-height:0;margin-bottom:18px}
    body > .site-footer .footer-brand .custom-logo{width:195px;max-height:70px}
    body > .site-footer .footer-brand .brand-name{font-size:32px}
    body > .site-footer .footer-about > p{max-width:340px;font-size:13px}
    body > .site-footer .footer-grid h2{margin-bottom:17px;font-size:14px}
    body > .site-footer :is(.footer-menu a,.footer-info > a,.footer-contact > p,.footer-contact > a){font-size:13px}
    body > .site-footer .footer-watermark img{width:82px;height:190px}
    body > .site-footer .footer-bottom{align-items:flex-start;gap:13px;padding-block:18px;font-size:11px;text-align:left}
    body > .site-footer .footer-bottom > span:first-child{margin-right:0}
    body > .site-footer .footer-bottom > div{margin-left:0}
    body > .site-footer .footer-credit img{width:125px}
}

/* Keep full-bleed mobile media and compact card grids inside the viewport. */
@media (max-width: 700px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    body > .site-header,
    main#vsebina,
    body > .site-footer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    .container {
        max-width: calc(100% - 40px);
    }

    .pain-page .system-grid,
    .pain-page .system-card,
    .pain-page .system-card > * {
        min-width: 0;
        max-width: 100%;
    }
}