@charset "UTF-8";
/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust:100%
}

body {
    margin:0
}

main {
    display:block
}

h1 {
    font-size: 2em;
    margin:.67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow:visible
}

pre {
    font-family: monospace, monospace;
    font-size:1em
}

a {
    background-color:transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration:underline dotted
}

b, strong {
    font-weight:bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size:1em
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align:baseline
}

sub {
    bottom:-.25em
}

sup {
    top:-.5em
}

img {
    border-style:none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin:0
}

button, input {
    overflow:visible
}

button, select {
    text-transform:none
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance:button
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
    border-style: none;
    padding:0
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
    outline:1px dotted ButtonText
}

fieldset {
    padding:.35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space:normal
}

progress {
    vertical-align:baseline
}

textarea {
    overflow:auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding:0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height:auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset:-2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance:none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font:inherit
}

details {
    display:block
}

summary {
    display:list-item
}

template {
    display:none
}

[hidden] {
    display:none !important
}

:root {
    color-scheme: light dark;
    --afactory-color--white: #FFFFFF;
    --afactory-color--black: #202020;
    --afactory-color--grey: #E4E4E7;
    --afactory-color--primary: #FF4747;
    --afactory-color--secondary: #FF1C1C;
    --afactory-color--tertiary: #1A1A1A;
    --afactory-color--background: #FAFAFA;
    --afactory-color--tile: #FFFFFF;
    --afactory-color--border: #D2D2D2;
    --afactory-color--heading: #121212;
    --afactory-color--subtitle: #333333;
    --afactory-color--body: #404040;
    --afactory-color--rating: #FFC02B;
    --afactory-property--container: 1420px;
    --afactory-property--container-narrow: 992px;
    --afactory-property--modal: 576px;
    --afactory-property--spacer-xs: 0.25rem;
    --afactory-property--spacer-sm: 0.5rem;
    --afactory-property--spacer-md: 1rem;
    --afactory-property--spacer-lg: 2rem;
    --afactory-property--spacer-xl: 4rem;
    --afactory-property--radius-inner: 0.25rem;
    --afactory-property--radius-outer: 0.5rem;
    --afactory-property--transition-slow: 380ms;
    --afactory-property--transition-fast:180ms
}

:root[data-theme=dark] {
    --afactory-color--background: #121212;
    --afactory-color--tile: #1C1C1C;
    --afactory-color--border: #282828;
    --afactory-color--heading: #FFFFFF;
    --afactory-color--subtitle: #CCCCCC;
    --afactory-color--body:#BFBFBF
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color:var(--afactory-color--border, #D2D2D2)var(--afactory-color--tile, #FFFFFF)
}

html[data-theme=light] .theme .theme__dark, html[data-theme=dark] .theme .theme__light {
    display: none;
    visibility:hidden
}

html[data-theme=light] .card.card--review .card__image {
    background-color:var(--afactory-color--grey, #E4E4E7)
}

html[data-theme=dark] .card .card__icon {
    fill:var(--afactory-color--white, #FFFFFF)
}

html:not([data-theme]) .theme .theme__dark {
    display: none;
    visibility:hidden
}

.theme {
    cursor: pointer;
    padding: unset;
    border:unset
}

.theme__light, .theme__dark {
    fill: var(--afactory-color--primary-contrast, var(--afactory-color--white, #FFFFFF));
    max-width: unset;
    width: calc(var(--afactory-property--spacer-md, 1rem) + var(--afactory-property--spacer-xs, .25rem));
    max-height: unset;
    height:calc(var(--afactory-property--spacer-md, 1rem) + var(--afactory-property--spacer-xs, .25rem))
}

@media only screen and (max-width: 767px) {
    .theme__light, .theme__dark {
        width: calc(var(--afactory-property--spacer-lg, 2rem) - var(--afactory-property--spacer-sm, .5rem));
        height:calc(var(--afactory-property--spacer-lg, 2rem) - var(--afactory-property--spacer-sm, .5rem))
    }
}

body {
    font-size: 16px;
    font-family: var(--afactory-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    color: var(--afactory-color--body, #404040);
    background-color: var(--afactory-color--background, #FAFAFA);
    line-height:1.4
}

body.transition, body.transition * {
    transition: all var(--afactory-property--transition-fast, 180ms);
    transition-property:background, border, color
}

body.scroll-lock {
    overflow: hidden;
    width: 100vw;
    height:100vh
}

@media only screen and (max-width: 767px) {
    body {
        padding-bottom:5rem
    }
}




* :before, * :after {
    box-sizing:inherit
}

.logo {
    width: 100%;
    max-width:22rem
}

.logo svg {
    fill:var(--afactory-color--primary-contrast, var(--afactory-color--white, #FFFFFF))
}

a {
    text-decoration:none
}

img {
    max-width:100%
}

svg {
    fill:currentColor
}

svg.icon {
    min-width: 1rem;
    width: 1rem;
    max-width: 1rem;
    min-height: 1rem;
    height: 1rem;
    max-height:1rem
}

svg.icon--large {
    min-width: 1.5rem;
    width: 1.5rem;
    max-width: 1.5rem;
    min-height: 1.5rem;
    height: 1.5rem;
    max-height:1.5rem
}

h1, h2, h3, h4, h5, h6, .h1, .inline-newsletter__title, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    line-height:1.25
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .h1 + p, .inline-newsletter__title + p, .h2 + p, .h3 + p, .h4 + p, .h5 + p, .h6 + p {
    margin-top:var(--afactory-property--spacer-sm, .5rem)
}

p a {
    font-weight: 700;
    text-decoration:underline
}

p + .columns {
    margin-top:calc(var(--afactory-property--spacer-md, 1rem) * 2)
}

@media only screen and (min-width: 768px) {
    h1, .h1, .inline-newsletter__title {
        font-size:36px
    }
}

@media only screen and (max-width: 767px) {
    h1, .h1, .inline-newsletter__title {
        font-size:34px
    }
}

@media only screen and (min-width: 768px) {
    h2, .h2 {
        font-size:32px
    }
}

@media only screen and (max-width: 767px) {
    h2, .h2 {
        font-size:30px
    }
}

@media only screen and (min-width: 768px) {
    h3, .h3 {
        font-size:28px
    }
}

@media only screen and (max-width: 767px) {
    h3, .h3 {
        font-size:26px
    }
}

@media only screen and (min-width: 768px) {
    h4, .h4 {
        font-size:24px
    }
}

@media only screen and (max-width: 767px) {
    h4, .h4 {
        font-size:22px
    }
}

@media only screen and (min-width: 768px) {
    h5, .h5 {
        font-size:22px
    }
}

@media only screen and (max-width: 767px) {
    h5, .h5 {
        font-size:20px
    }
}

@media only screen and (min-width: 768px) {
    h6, .h6 {
        font-size:20px
    }
}

@media only screen and (max-width: 767px) {
    h6, .h6 {
        font-size:18px
    }
}

article.content {
    overflow:hidden
}

.content {
    display: grid;
    grid-gap: var(--afactory-property--spacer-lg, 2rem);
    gap:var(--afactory-property--spacer-lg, 2rem)
}




.featured {
    background-color: var(--afactory-color--primary, #FF4747);
    z-index: 1;
    color: var(--afactory-color--white, #FFFFFF);
    display: flex;
    flex-direction: column;
    grid-gap: var(--afactory-property--spacer-md, 1rem);
    gap: var(--afactory-property--spacer-md, 1rem);
    justify-content: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: flex-end;
    border-radius: var(--afactory-property--radius-inner, .25rem);
    max-height:80vh
}

@media not all and (min-resolution: 0.001dpcm) {
    .featured > * :not(:last-of-type) {
        margin-bottom:var(--afactory-property--spacer-md, 1rem)
    }
}

@media only screen and (min-width: 1200px) {
    .featured {
        aspect-ratio:16/9
    }
}

@media only screen and (min-width: 992px) {
    .featured {
        padding:var(--afactory-property--spacer-xl, 4rem)
    }
}

@media only screen and (max-width: 991px) {
    .featured {
        padding:5vw
    }
}

@media only screen and (max-width: 767px) {
    .featured {
        padding-top:calc(2 * var(--afactory-property--spacer-xl, 4rem))
    }
}

.featured * {
    color:inherit
}

.featured:after {
    content: '';
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, transparent 100%);
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index:-1
}

@media only screen and (max-width: 991px) {
    .featured:after {
        width: 100%;
        background:linear-gradient(45deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .35) 100%)
    }
}

.featured__background {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    inset: 0;
    transition:transform var(--afactory-property--transition-slow, 380ms)
}

.featured__background img, .featured__background source {
    width: 100%;
    height: 100%;
    object-fit:cover
}

.featured:hover .featured__background {
    transform:scale(1.05)
}

.featured__content {
    display: flex;
    flex-direction: column;
    grid-gap: var(--afactory-property--spacer-md, 1rem);
    gap: var(--afactory-property--spacer-md, 1rem);
    align-items:flex-start
}

@media not all and (min-resolution: 0.001dpcm) {
    .featured__content > * :not(:last-of-type) {
        margin-bottom:var(--afactory-property--spacer-md, 1rem)
    }
}

@media only screen and (min-width: 992px) {
    .featured__content {
        max-width:60%
    }
}

.featured__summary {
    margin-top: unset !important;
    opacity:.8
}

.featured__category {
    padding: calc(1.5 * var(--afactory-property--spacer-xs, .25rem));
    background-color: var(--afactory-color--primary, #FF4747);
    color: var(--afactory-color--primary-contrast, var(--afactory-color--white, #FFFFFF));
    border-radius: var(--afactory-property--radius-inner, .25rem);
    font-size: calc(.75 * var(--afactory-property--spacer-md, 1rem));
    text-transform:uppercase
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-gap: var(--afactory-property--spacer-md, 1rem);
    gap: var(--afactory-property--spacer-md, 1rem);
    align-content:flex-start
}

@media not all and (min-resolution: 0.001dpcm) {
    .card > * :not(:last-of-type) {
        margin-bottom:var(--afactory-property--spacer-md, 1rem)
    }
}

@media only screen and (max-width: 767px) {
    .card[data-card-format=row] {
        display: grid;
        grid-gap: var(--afactory-property--spacer-md, 1rem);
        gap: var(--afactory-property--spacer-md, 1rem);
        grid-template-columns:1fr 2fr
    }
}

.card:focus-within a, .card:hover a {
    color:var(--afactory-color--primary, #FF4747)
}

.card a {
    color: inherit;
    text-decoration:none
}

.card:hover picture {
    transform:scale(1.045)
}

.card__image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--afactory-property--radius-inner, .25rem);
    overflow: hidden;
    display: flex;
    position: relative;
    background-color:var(--afactory-color--tile, #FFFFFF)
}

.card__image picture {
    object-fit: cover;
    width: 101%;
    height: 101%;
    transition:transform var(--afactory-property--transition-slow, 380ms)
}

.card__image picture img {
    object-fit: inherit;
    width: inherit;
    height:inherit
}

.card__image--fallback {
    background-size: contain;
    background-position: 50%;
    background-color:var(--afactory-color--primary, #FF4747)
}

.card__content {
    display: flex;
    flex-direction: column;
    grid-gap: var(--afactory-property--spacer-sm, .5rem);
    gap: var(--afactory-property--spacer-sm, .5rem);
    flex-grow:1
}

@media not all and (min-resolution: 0.001dpcm) {
    .card__content > * :not(:last-of-type) {
        margin-bottom:var(--afactory-property--spacer-sm, .5rem)
    }
}

.card__content h3 {
    color:var(--afactory-color--heading, #121212)
}

.card__content p {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    flex-grow: 1;
    color:var(--afactory-color--subtitle, #333333)
}

@supports (margin-inline: var(--afactory-property--spacer-xs, 0.25rem)) {
    .card__bullet {
        margin-inline:var(--afactory-property--spacer-xs, .25rem)
    }
}

@supports not (margin-inline: var(--afactory-property--spacer-xs, 0.25rem)) {
    .card__bullet {
        margin-left: var(--afactory-property--spacer-xs, .25rem);
        margin-right:var(--afactory-property--spacer-xs, .25rem)
    }
}

.card__category {
    position: absolute;
    top: var(--afactory-property--spacer-sm, .5rem);
    left: var(--afactory-property--spacer-sm, .5rem);
    padding: calc(1.5 * var(--afactory-property--spacer-xs, .25rem));
    background-color: var(--afactory-color--primary, #FF4747);
    color: var(--afactory-color--primary-contrast, var(--afactory-color--white, #FFFFFF));
    border-radius: var(--afactory-property--radius-inner, .25rem);
    font-size: calc(.75 * var(--afactory-property--spacer-md, 1rem));
    text-transform:uppercase
}

.card__icon {
    width: var(--afactory-property--spacer-lg, 2rem);
    height: var(--afactory-property--spacer-lg, 2rem);
    fill:var(--afactory-color--black, #202020)
}

.card--tool {
    padding: var(--afactory-property--spacer-lg, 2rem);
    border-radius: var(--afactory-property--radius-inner, .25rem);
    background-color: var(--afactory-color--tile, #FFFFFF);
    border:1px solid var(--afactory-color--border, #D2D2D2)
}

.card--tool:hover .card__row > p {
    color:var(--afactory-color--primary, #FF4747)
}

.card__row {
    display: flex;
    flex-direction: row;
    grid-gap: var(--afactory-property--spacer-sm, .5rem);
    gap: var(--afactory-property--spacer-sm, .5rem);
    align-items: center;
    justify-content:flex-start
}

@media not all and (min-resolution: 0.001dpcm) {
    .card__row > * :not(:last-of-type) {
        margin-right:var(--afactory-property--spacer-sm, .5rem)
    }
}

.card__row p {
    font-weight:700
}

@media only screen and (max-width: 767px) {
    .card__author {
        display: none;
        visibility:hidden
    }
}

.card--review .card__image {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center
}

@media only screen and (max-width: 767px) {
    .card--review .card__image {
        padding:var(--afactory-property--spacer-lg, 2rem)
    }
}

.card--review .card__image svg, .card--review .card__image img {
    max-width: 75%;
    max-height: 50%;
    height:100%
}

.card--state .card__image {
    background-color: var(--background, var(--afactory-color--tile, #FFFFFF));
    padding: var(--afactory-property--spacer-xl, 4rem);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center
}

@media only screen and (max-width: 767px) {
    .card--state .card__image {
        padding:var(--afactory-property--spacer-lg, 2rem)
    }
}

.card--state .card__image img, .card--state .card__image svg {
    object-fit: cover;
    width: 100%;
    height:100%
}

.card--state .card__image svg {
    fill:var(--afactory-color--white, #FFFFFF)
}

.sidebar .card--tool .card__content {
    padding:unset
}

.sidebar {
    display: grid;
    grid-gap: var(--afactory-property--spacer-md, 1rem);
    gap: var(--afactory-property--spacer-md, 1rem);
    align-content:flex-start
}

.sidebar__item {
    display: grid;
    grid-gap: var(--afactory-property--spacer-md, 1rem);
    gap:var(--afactory-property--spacer-md, 1rem)
}

.sidebar__item:not(.sidebar__item--inline) {
    border-radius: var(--afactory-property--radius-inner, .25rem);
    border: 1px solid var(--afactory-color--border, #D2D2D2);
    background-color:var(--afactory-color--tile, #FFFFFF)
}

.sidebar__item--tools .card {
    padding: unset;
    border-radius: unset;
    border: unset;
    background:unset
}

.sidebar__title {
    padding-top: var(--afactory-property--spacer-lg, 2rem);
    padding-left: var(--afactory-property--spacer-lg, 2rem);
    padding-right:var(--afactory-property--spacer-lg, 2rem)
}

.sidebar__title--offers {
    padding:unset
}

.sidebar__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding:unset
}

.sidebar__list li {
    transition:var(--afactory-property--transition-slow, 380ms)
}

.sidebar__list li > article, .sidebar__list li > small {
    display: grid;
    padding:var(--afactory-property--spacer-md, 1rem)var(--afactory-property--spacer-lg, 2rem) !important
}

.sidebar__list li article.card.card--tool a {
    background:0 0
}

.sidebar__list li a:not(.offer):hover {
    background-color:var(--afactory-color--border, #D2D2D2)
}

.sidebar__list--spaced {
    display: grid;
    grid-gap: var(--afactory-property--spacer-sm, .5rem);
    gap:var(--afactory-property--spacer-sm, .5rem)
}

[data-block=offers]:has(.sidebar__list.sidebar__list--spaced:empty) {
    display: none;
    visibility:hidden
}

.button, button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: 10rem;
    border-width: 2px;
    border-style: solid;
    color: var(--afactory-color--primary-contrast, var(--afactory-color--white, #FFFFFF));
    border-color: var(--afactory-color--primary, #FF4747);
    background-color:var(--afactory-color--primary, #FF4747)
}

.button--inline, button--inline {
    padding: unset;
    border-radius: unset;
    border-width: unset;
    border-style: unset;
    color: currentColor;
    background-color:unset
}

.button--ghost, button--ghost {
    color: var(--afactory-color--body, #404040);
    border-color: var(--afactory-color--border, #D2D2D2);
    background-color:transparent
}

.button--white, button--white {
    color: var(--afactory-color--tertiary, #1A1A1A);
    border-color: var(--afactory-color--white, #FFFFFF);
    background-color: var(--afactory-color--white, #FFFFFF);
    outline-color:var(--afactory-color--white, #FFFFFF)
}

.button--grey, button--grey {
    color: var(--afactory-color--tile, #FFFFFF);
    border-color: var(--afactory-color--subtitle, #333333);
    background-color: var(--afactory-color--subtitle, #333333);
    outline-color:var(--afactory-color--subtitle, #333333)
}

.button--input, button--input {
    color: var(--afactory-color--heading, #121212);
    border-color: var(--afactory-color--border, #D2D2D2);
    background-color: var(--afactory-color--tile, #FFFFFF);
    outline-color:var(--afactory-color--primary, #FF4747)
}

.button:focus, button:focus {
    outline: 2px solid var(--afactory-color--primary, #FF4747);
    outline-offset:var(--afactory-property--spacer-xs, .25rem)
}

.button svg, button svg {
    width: 1rem;
    max-width: 1rem;
    height: 1rem;
    max-height:1rem
}

.button span + svg, button span + svg {
    margin-left:var(--afactory-property--spacer-sm, .5rem)
}

.button svg + span, button svg + span {
    margin-right:var(--afactory-property--spacer-sm, .5rem)
}

.button[disabled], button[disabled] {
    cursor: not-allowed;
    opacity:.5
}



/* Prose ... keep this since this is needed to style the articles until we get the tailwind implemented for the F/E seperately from the backend  */

.prose h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 1.25rem;
}

ul {
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 1.25rem;
}

li {
    list-style-type: disc;
    margin-bottom: 1rem;
    line-height: 1.5;
    margin-left: 2rem;
}