/* ==================================== */


/* Fri 21 Nov 2025 */


/* ==================================== */

.spoon-page {
    padding-top: 2rem;
}

.spoon-page section {
    padding: 2rem 0
}

.spoon-page .intro h2 {
    font-size: var(--text-title-m-size);
    font-weight: var(--text-title-m-weight);
    line-height: var(--text-title-m-line-height);
    letter-spacing: var(--text-title-m-letter-spacing);
}

.spoon-page .intro h1,
.spoon-page .intro h2 {
    margin-bottom: 1rem;
}

.spoon-page .spoon {
    height: 544px;
}

.spoon-page .col-md-8 {
    padding-top: 1rem;
}

.spoon-page img {
    width: 100%;
}

.spoon-intorduction {
    margin-top: 2rem;
}

.element {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.spoon-intorduction .element .tag-container {
    padding: 0
}

.spoon-page .tab-buttons {
    display: flex;
    gap: 0 1.5rem;
}

.spoon-page .tab-buttons a.button-ghost {
    position: relative;
}

.spoon-page .tab-buttons a.button-ghost:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.75rem;
    transform: translate(50%, -50%);
    width: 24px;
    height: 24px;
    background-color: var(--color-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

.contact-me h2 {
    margin-bottom: 0;
    display: contents;
}

.bigfix,
.remote-control {
    background-size: cover;
    background-position: center;
}

section.hero-image.bigfix {
    background-image: url(../assets/images/saas/hero.png);
}

.spoon-page section.challange p:nth-of-type(2) {
    margin-top: 1em;
}

.spoon-page section .col-xs-12.col-md-6:nth-of-type(2) {
    padding-top: 1.2rem
}

.spoon-page section.sticky h2 {
    position: sticky;
    top: 5.875rem;
}

.spoon-page section.design .pallette {
    padding: 1rem;
}

.spoon-page section.design .pallette b {
    display: block;
}

.spoon-page .full-container {
    background-color: var(--color-main-high);
}

.spoon-page .full-container.no-color {
    background-color: unset;
}

.spoon-page section.design b {
    margin-top: 0.5rem;
}

.spoon-page section.design .color-primary-bg,
.spoon-page section.design .color-primary-default,
.spoon-page section.design .color-primary-hover,
.spoon-page section.design .color-primary-pressed,
.spoon-page section.design .color-secondary-default,
.spoon-page section.design .color-secondary-hover,
.spoon-page section.design .color-secondary-pressed {
    height: 5rem;
    width: 5rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.spoon-page section.design .color-primary-bg {
    background: #E5F1FF;
}

.spoon-page section.design .color-primary-default {
    background: #0057C7;
}

.spoon-page section.design .color-primary-hover {
    background: #004094;
}

.spoon-page section.design .color-primary-pressed {
    background: #002A61;
}

.spoon-page section.design .color-secondary-default {
    background: #262626;
}

.spoon-page section.design .color-secondary-hover {
    background: #121212;
}

.spoon-page section.design .color-secondary-pressed {
    background: #000000;
}

.spoon-page section.design .color-secondary-default+.color-token p,
.spoon-page section.design .color-secondary-hover+.color-token p,
.spoon-page section.design .color-secondary-pressed+.color-token p {
    margin-bottom: 0;
}

.spacing-tokens {
    height: 53.563rem;
    background-image: url(../assets/images/saas/spaces.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.image-typo-connect-secure {
    height: 53.563rem;
    background-image: url(../assets/images/connect-secure-typo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

ol {
    padding-left: 1.2rem;
}

.related-spoons h2 {
    margin-bottom: 3rem;
}

.spoon-page div.primary {
    background-color: var(--color-neutral);
    height: 400px;
    border-radius: 0;
}

.spoon-page .secondary {
    background-color: var(--color-primary);
    height: 400px;
    border-radius: 0;
}

.role-tool-scope {
    margin-top: 3rem;
}

.role-tool-scope {
    margin-top: 3rem;
}

.sticky-col {
    position: sticky;
    top: 5rem;
    align-self: start;
}

.color-main {
    background-color: var(--color-main-pressed);
}

.notification-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.notification-system svg path {
    fill: var(--color-neutral);
}

figure img {
    display: block;
    margin: 0 auto;
}

@media (max-width: 75rem) {
    .role-tool-scope>div {
        margin-bottom: 1rem;
    }
    section.hero-image.connect-secure {
        background-size: contain;
        background-repeat: no-repeat;
    }
    .spacing-tokens {
        background-size: contain;
        height: 12.563rem;
    }
}

@media (max-width: 800px) {
    .spoon-page .spoon {
        height: 400px;
    }
    .spoon-page .col-md-8 {
        padding-top: unset;
    }
}