/* Lokale skrifttyper. Licenserne ligger sammen med fontfilerne. */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../assets/fonts/bricolage-grotesque-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../assets/fonts/atkinson-hyperlegible-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../assets/fonts/atkinson-hyperlegible-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* Værdier fra Hjem, Hjem - mobil og Figma-komponentbiblioteket. */
:root {
    --color-beige: #eeeae2;
    --color-ochre: #d69647;
    --color-ink: #232f3e;
    --color-olive: #5e674e;
    --color-sage: #c4c8ad;
    --color-stroke: #232f3e33;
    --color-footer-text: rgb(238 234 226 / 84%);
    --color-muted: #929598; /* Lidt lysere end Figma for AA-kontrast. */
    --font-heading: "Bricolage Grotesque", sans-serif;
    --font-body: "Atkinson Hyperlegible", sans-serif;
    --weight-regular: 400;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --text-h1: 96px;
    --text-h2: 48px;
    --text-h3: 32px;
    --text-h4: 24px;
    --text-body: 20px;
    --text-small: 18px;
    --text-button: 16px;
    --text-card-link: 15px;
    --line-h1: 96px;
    --line-h2: 52px;
    --line-h3: 36px;
    --line-h4: 28px;
    --line-body: 26px;
    --line-small: 24px;
    --line-button: 20px;
    --tracking-heading: -0.02em;
    --tracking-eyebrow: 0.015em;
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    --container-max: 1280px;
    --gutter: 80px;
    --radius-card: 30px;
    --radius-button: 30px;
    --header-height: 120px;
    --transition-color: 150ms ease;
}

/* Grundlayout og semantisk typografi. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-beige);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--line-body);
}

main {
    overflow-x: clip;
}

h1, h2, h3, h4, p {
    margin: 0;
}

h1, h2, h3, .brand {
    font-family: var(--font-heading);
    font-optical-sizing: none;
    font-variation-settings: "opsz" 14, "wdth" 100;
    letter-spacing: var(--tracking-heading);
}

h1 {
    font-size: var(--text-h1);
    line-height: var(--line-h1);
    font-weight: var(--weight-extrabold);
}
h2 {
    font-size: var(--text-h2);
    line-height: var(--line-h2);
    font-weight: var(--weight-extrabold);
}
h3 {
    font-size: var(--text-h3);
    line-height: var(--line-h3);
    font-weight: var(--weight-bold);
}
h4 {
    font-size: var(--text-h4);
    line-height: var(--line-h4);
    font-weight: var(--weight-bold);
}

img {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
}
button {
    font: inherit;
}
button, a {
    -webkit-tap-highlight-color: transparent;
}
:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 5px;
}
.site-footer :focus-visible {
    outline-color: var(--color-sage);
}
[hidden] {
    display: none;
}

.container {
    width: calc(100% - var(--gutter) * 2);
    max-width: var(--container-max);
    margin-inline: auto;
}
.skip-link {
    position: fixed;
    z-index: 20;
    top: 8px;
    left: 8px;
    padding: var(--space-sm);
    background: var(--color-beige);
    transform: translateY(-150%);
}
.skip-link:focus {
    transform: none;
}
.eyebrow {
    font-size: var(--text-small);
    line-height: var(--line-small);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-olive);
}
.section-heading {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.section-heading .eyebrow {
    padding-left: 3px;
}
/* Den lille korrektion udligner forskellen på Figma og browserens fontmål. */
.section-heading h2 {
    text-box: trim-both cap alphabetic;
    padding-bottom: 3.32px;
}
.section-heading--light {
    color: var(--color-beige);
}
.section-heading--light .eyebrow {
    color: var(--color-beige);
    opacity: 70%;
}
.icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}
.mobile-label {
    display: none;
}

/* Fælles knapper, links og navigationstilstande. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 49px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-size: var(--text-button);
    line-height: var(--line-button);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
    text-decoration: none;
    text-align: center;
    transition: background-color var(--transition-color), color var(--transition-color);
}
.btn--primary {
    background: var(--color-ochre);
    border: 0;
}
.btn--secondary {
    border-color: var(--color-ink);
    padding-block: 13.5px;
}
.btn:hover {
    background: var(--color-olive);
    color: var(--color-beige);
    border: none;
}
.btn:active {
    background: var(--color-olive);
    color: var(--color-beige);
}
.btn--on-olive:hover,
.btn--on-olive:active {
    background: var(--color-ink);
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--weight-bold);
    text-underline-offset: 2px;
}
.text-link:hover,
.text-link:active {
    text-decoration-color: var(--color-ochre);
}

/* Header og den native, tilgængelige mobildialog. */
[data-component="header"] {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: var(--header-height);
}
.site-header {
    background: var(--color-beige);
}
.site-header.is-scrolled {
    box-shadow: 0 25px 50px -12px rgb(140 136 127 / 40%);
}
.site-header__inner {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.brand {
    font-size: 34px;
    line-height: 40px;
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.32px;
    text-decoration: none;
    white-space: nowrap;
}
.brand--light {
    color: var(--color-beige);
}
.site-navigation {
    display: flex;
    align-items: center;
    gap: 36px;
}
.site-navigation__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 39px;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-ink);
    text-decoration: none;
}
.site-navigation__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--color-ochre);
    opacity: 0;
    pointer-events: none;
}
.site-navigation__link:hover::after,
.site-navigation__link[aria-current="page"]::after,
.site-navigation__link:active::after {
    opacity: 1;
}
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.mobile-menu {
    padding: 0;
    border: 0;
    background: var(--color-beige);
    color: var(--color-ink);
}
.mobile-menu:not([open]) {
    display: none;
}
.mobile-menu::backdrop {
    background: rgb(0 0 0 / 25%);
}
body.menu-open {
    overflow: hidden;
}

/* Forsidens hero. Billedet og begge bølgekanter er eksporteret fra Figma. */
.hero {
    position: relative;
    min-height: 702px;
    overflow: hidden;
}
.hero__background {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgb(238 234 226 / 89%), rgb(238 234 226 / 82%)), url("../assets/images/hero-shelter.jpg") center / cover;
}
.hero__content {
    position: relative;
    padding: 91px 0 150px 1px;
}
.hero .eyebrow {
    color: var(--color-ink);
    opacity: 70%;
}
.hero__heading {
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
    max-width: 960px;
    margin-top: var(--space-md);
    margin-left: -7px;
}
.hero__accent {
    color: var(--color-olive);
}
.hero__description {
    max-width: 728px;
    margin-top: var(--space-md);
}
.hero__actions {
    display: flex;
    gap: 25px;
    margin-top: 34px;
}
.hero__actions .btn--secondary {
    min-width: 164px;
}
.section-edge {
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
}
.section-edge--hero {
    left: 0;
    right: -5px;
    height: 109.674px;
    top: 647px;
    background-image: url("../assets/icons/hero-kant.svg");
    background-size: 100% 100%;
}

/* Introduktion: samme nummererede komponent gentages i alle tre trin. */
.how-it-works {
    margin-top: 3px;
    padding: 77px 0 80px;
}
.how-it-works__layout {
    max-width: 1062px;
    display: grid;
    grid-template-columns: 408px minmax(0, 504px);
    gap: 137px;
    align-items: start;
}
.how-it-works__image {
    width: 408px;
    height: 635px;
    object-fit: cover;
    border-radius: var(--radius-card);
}
.how-it-works__content {
    padding-top: 4px;
}
.how-it-works__content .section-heading {
    max-width: 471px;
}
.steps {
    display: flex;
    flex-direction: column;
    gap: 79px;
    padding: 0;
    margin: 61px 0 0;
    list-style: none;
}
.icon-card {
    display: flex;
    gap: var(--space-md);
    align-items: start;
}
.icon-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 52.5px;
    background: var(--color-sage);
    font-size: 40px;
}
.icon-card__content {
    flex: 1;
    min-width: 0;
}
.icon-card__heading {
    font-family: var(--font-body);
    font-size: var(--text-h4);
    line-height: var(--line-h4);
    letter-spacing: var(--tracking-eyebrow);
    margin-bottom: var(--space-xs);
}

/* Guidekort: ét fælles layout, med billedets beskæring som en lille variant. */
.guides {
    padding-top: 26px;
    padding-bottom: 104px;
}
.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 57px;
}
.guide-swipe-hint {
    display: none;
}
.guide-card {
    position: relative;
    min-height: 500px;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-card);
}
/* Kun kort med links forstørres ved hover i desktopvisning. */
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .guide-card:is(a[href], :has(a[href])) {
        transition: transform 180ms ease-out;
    }
    .guide-card:is(a[href], :has(a[href])):hover {
        transform: scale(1.02);
    }
}
.guide-card__image {
    height: 238px;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
}
.guide-card__image--walking img {
    object-position: center 134%;
}
.guide-card__image--packing img {
    object-position: center 90%;
}
.guide-card__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 21px;
    padding: 17px 26px 30px;
}
.guide-card__heading {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.guide-card__content > p {
    max-width: 545px;
}
.guide-card__link {
    font-size: var(--text-card-link);
    line-height: 18px;
    min-height: 24px;
}
/* Hele kortets klikflade deler linkets destination uden ekstra tabstop. */
.guide-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
}
.guide-card:has(.guide-card__link:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: 5px;
}
.guide-card__badge {
    position: absolute;
    left: 73.28%;
    top: 220px;
    width: 60px;
    height: 60px;
}
.guide-card__badge-icon {
    position: absolute;
    left: 20px;
    top: 19px;
}
.guides__advice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: var(--space-md);
}

/* Afsluttende invitation og den originale dekorative SVG-kant. */
.first-trip {
    position: relative;
    display: grid;
    grid-template-columns: 48.90625% 1fr;
    background: var(--color-olive);
    color: var(--color-beige);
}
.first-trip__image {
    min-width: 0;
}
.first-trip__image > img {
    width: 100%;
    height: 522px;
    object-fit: cover;
}
.first-trip__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 65px 34px;
    min-width: 0;
}
.first-trip__content .section-heading {
    max-width: 518px;
}
.first-trip :focus-visible {
    outline-color: var(--color-beige);
}
.first-trip__description {
    max-width: 474px;
    margin: var(--space-lg) 0 37px 3px;
}
.section-edge--cta {
    height: 110px;
    width: calc(100% + 61px);
    left: -5px;
    top: -55px;
    background-image: url("../assets/icons/cta-kant.svg");
    background-size: 100% 100%;
    transform: rotate(180deg);
}

/* Fælles footer. Rækkefølgen skifter til mobilvariantens layout. */
.site-footer {
    background: var(--color-ink);
    color: var(--color-footer-text);
}
.site-footer__inner {
    min-height: 301px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.site-footer__copyright {
    color: var(--color-muted);
    line-height: 24px;
}
.site-footer__groups {
    display: grid;
    grid-template-columns: 215px 294px auto;
    gap: 2px;
}
.site-footer__heading {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-beige);
    margin-bottom: 25px;
}
.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-link {
    display: flex;
    align-items: start;
    gap: 10px;
    min-height: 44px;
    font-size: 20px;
    line-height: 24px;
    text-decoration: none;
}
a.footer-link:hover,
a.footer-link:active {
    text-decoration-line: underline;
    text-decoration-color: var(--color-ochre);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Mellemstørrelser bevarer designets layout og giver teksten plads. */
@media (min-width: 701px) and (max-width: 1300px) {
    :root {
        --gutter: 40px;
    }
    .site-navigation {
        gap: 24px;
    }
    .how-it-works__layout {
        grid-template-columns: minmax(0, 408px) minmax(0, 504px);
        gap: 60px;
    }
    .how-it-works__image {
        width: 100%;
    }
    .guide-card__content {
        padding-inline: 22px;
    }
    .guide-card h3 {
        font-size: 28px;
    }
    .guide-card__image--packing img {
        object-position: center 60%;
    }
}

@media (max-width: 1100px) {
    .site-navigation {
        display: none;
    }
    .menu-toggle {
        display: inline-flex;
    }
    .mobile-menu[open] {
        display: block;
        position: fixed;
        inset: 0 0 auto;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
        overflow-y: auto;
    }
    .mobile-menu__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 73px 20px 20px 25px;
    }
    .mobile-menu__top .brand {
        font-variation-settings: "opsz" 96, "wdth" 100;
        letter-spacing: -0.68px;
    }
    .mobile-menu__navigation {
        --mobile-menu-inset: 24px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px var(--mobile-menu-inset) 40px;
        border-top: 1px solid var(--color-stroke);
    }
    .mobile-menu__navigation .site-navigation__link {
        justify-content: space-between;
        gap: var(--space-md);
        min-height: 64px;
        padding: 16px 12px;
    }
    .mobile-menu__navigation .site-navigation__link:not(:last-child) {
        border-bottom: 1px solid var(--color-stroke);
    }
    /* Mobilmenuen bruger en højrepil i stedet for desktopmenuens underline. */
    .mobile-menu__navigation .site-navigation__link::after {
        position: static;
        inset: auto;
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        margin-left: auto;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        background: transparent;
        opacity: 1;
        transform: rotate(-45deg);
    }
    .mobile-menu__navigation .site-navigation__link[aria-current="page"] {
        /* Baggrunden går til kanten; ekstra padding bevarer tekst og pil. */
        margin-inline: calc(-1 * var(--mobile-menu-inset));
        padding-inline: calc(var(--mobile-menu-inset) + 12px);
        background: var(--color-ochre);
        color: var(--color-ink);
    }
    .mobile-menu__navigation .site-navigation__link:focus-visible {
        outline-offset: -3px;
    }
    .hero__heading {
        font-size: clamp(64px, 6.67vw, 96px);
        line-height: 1;
    }
    .guide-grid {
        gap: 24px;
    }
    .guide-card {
        min-height: 530px;
    }
    .guide-card__image {
        height: 210px;
    }
    .guide-card__badge {
        top: 190px;
    }
    .guide-card__content {
        padding-inline: 18px;
    }
    .first-trip__content h2 {
        font-size: 38px;
        line-height: 42px;
    }
    .site-footer__groups {
        grid-template-columns: auto auto auto;
        gap: 32px;
    }
}

/* Den åbne menu flugter med headeren på tablet og mindre desktopskærme. */
@media (min-width: 701px) and (max-width: 1100px) {
    .mobile-menu__top {
        min-height: var(--header-height);
        gap: var(--space-md);
        padding: 0 var(--gutter);
    }
    .mobile-menu__top .brand {
        font-variation-settings: "opsz" 14, "wdth" 100;
        letter-spacing: -0.32px;
    }
    .mobile-menu__navigation {
        --mobile-menu-inset: var(--gutter);
    }
}

@media (max-width: 1000px) {
    .guide-grid {
        grid-template-columns: 1fr;
        max-width: none;
        margin-inline: auto;
    }
    .guide-card {
        min-height: 500px;
    }
    .guide-card__image {
        height: 238px;
    }
    .guide-card__badge {
        top: 220px;
    }
    .site-footer__inner {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding-bottom: 40px;
    }
    .site-footer__brand {
        min-height: 140px;
        align-items: center;
        justify-content: center;
    }
    .site-footer__copyright {
        font-size: 20px;
    }
    .site-footer__groups {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        padding-inline: 24px;
    }
    .site-footer__group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .site-footer__group--external {
        order: -1;
    }
    .site-footer__heading {
        letter-spacing: 0.015em;
        margin-bottom: 14px;
    }
    .site-footer__links {
        align-items: center;
        gap: 14px;
    }
    .footer-link {
        justify-content: center;
    }
}

/* Tablet: introduktionen stables som på mobil, og guidekort fylder containeren. */
@media (min-width: 701px) and (max-width: 1000px) {
    .how-it-works__layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .how-it-works__image {
        width: 100%;
        height: 262px;
    }
    .how-it-works__content {
        display: contents;
    }
    .how-it-works__content .section-heading {
        order: -1;
        margin-bottom: 32px;
        max-width: 671px;
    }
    .how-it-works .steps {
        gap: 96px;
        margin-top: 80px;
    }
    .how-it-works .icon-card {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .how-it-works .icon-card__content {
        width: 100%;
        text-align: center;
    }
    .guide-grid {
        max-width: none;
    }
    .guide-card__image--walking img {
        object-position: center 70%;
    }
}

/* Mobil: 402 px-referencen, med fleksible højder ved smallere skærme. */
@media (max-width: 700px) {
    :root {
        --text-h1: 48px;
        --text-h2: 32px;
        --text-h3: 24px;
        --text-body: 17px;
        --text-small: 14px;
        --line-h1: 52px;
        --line-h2: 38px;
        --line-h3: 30px;
        --line-small: 20px;
        --tracking-eyebrow: 0;
        --gutter: 24px;
        --header-height: 130px;
        --radius-card: 26.029px;
    }
    .site-header__inner {
        width: auto;
        padding: 73px 20px 13px 25px;
        min-height: var(--header-height);
    }
    .site-header .brand {
        letter-spacing: -0.68px;
        font-variation-settings: "opsz" 96, "wdth" 100;
    }
    .mobile-label {
        display: inline;
    }
    .desktop-label {
        display: none;
    }
    .section-heading {
        gap: 16px;
    }
    .section-heading h2 {
        padding-bottom: 0;
    }
    .hero {
        min-height: 545px;
        padding-bottom: 27px;
    }
    .hero__background {
        bottom: 27px;
        background: linear-gradient(rgb(241 239 235 / 82%), rgb(241 239 235 / 82%)), url("../assets/images/hero-shelter.jpg") center / cover;
    }
    .hero__content {
        width: calc(100% - 40px);
        padding: 36px 0 40px;
    }
    .hero__heading {
        font-size: var(--text-h1);
        line-height: var(--line-h1);
        max-width: 350px;
        margin: 24px 0 0;
        text-box: trim-both cap alphabetic;
    }
    .hero__description {
        margin-top: 24px;
    }
    .hero__actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }
    .hero__actions .btn {
        width: 100%;
    }
    .section-edge--hero {
        width: 493px;
        height: 62px;
        top: auto;
        bottom: 0;
        right: auto;
        background-image: url("../assets/icons/hero-kant-mobil.svg");
    }
    .how-it-works {
        margin: 0;
        padding: 36px 30px 80px;
    }
    .how-it-works__layout {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .how-it-works__image {
        display: block;
        width: 100%;
        height: 262px;
    }
    .how-it-works__content {
        display: contents;
    }
    .how-it-works__content .section-heading {
        order: -1;
        margin-bottom: 32px;
    }
    .steps {
        gap: 96px;
        margin-top: 50px;
    }
    .icon-card {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .icon-card__number {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .icon-card__content {
        width: 100%;
        text-align: center;
    }
    .icon-card__heading {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        line-height: var(--line-h3);
        letter-spacing: var(--tracking-heading);
        margin-bottom: 16px;
    }
    .guides {
        padding-top: 8px;
        padding-bottom: 34px;
    }
    .guide-grid {
        grid-template-columns: 1fr;
        gap: 59px;
        margin-top: 30px;
    }
    .guide-card {
        min-height: 433.824px;
    }
    .guide-card__image {
        height: 206.5px;
    }
    .guide-card__image--walking img {
        object-position: center 70%;
    }
    .guide-card__content {
        gap: 18.221px;
        padding: 14.75px 22.56px 36px;
    }
    .guide-card__content > p {
        max-width: none;
    }
    .guide-card__heading {
        gap: 9.544px;
    }
    .guide-card .eyebrow {
        font-size: 12.147px;
        line-height: 18px;
    }
    .guide-card h3 {
        font-size: var(--text-h3);
    }
    .guide-card__link {
        font-size: 11.29px;
        line-height: 13.551px;
        min-height: 24px;
        gap: 10.412px;
    }
    .guide-card__link .icon {
        transform: scale(0.867647);
        transform-origin: left center;
    }
    .guide-card__badge {
        top: 190.882px;
        transform: scale(0.867647);
        transform-origin: top left;
    }
    .guides__advice {
        display: block;
        margin-top: 60px;
    }
    .guides__advice .text-link {
        display: flex;
        margin-top: 8px;
        text-decoration: none;
    }
    .guides__advice .icon {
        margin-left: auto;
    }
    .first-trip {
        display: flex;
        flex-direction: column;
        background: var(--color-beige);
    }
    .first-trip__image {
        position: relative;
        width: 100%;
        height: 316px;
        overflow: hidden;
    }
    .first-trip__image > img {
        position: absolute;
        top: 42px;
        height: 298px;
    }
    .first-trip__content {
        background: var(--color-olive);
        padding: 48px 24px;
    }
    .first-trip__content h2 {
        font-size: var(--text-h2);
        line-height: var(--line-h2);
    }
    .first-trip__description {
        margin: 24px 0 32px 3px;
    }
    .first-trip__content .btn {
        width: 100%;
    }
    .section-edge--cta {
        width: 502px;
        height: 50px;
        left: -81px;
        top: 24px;
        background-image: url("../assets/icons/cta-kant-mobil.svg");
    }
    .first-trip:not(.packing-cta) > .section-edge--cta {
        width: 100%;
        left: 0;
    }
}

@media (max-width: 370px) {
    .hero__heading {
        font-size: clamp(39px, 12vw, 48px);
    }
    .guides__advice .text-link {
        align-items: start;
    }
    .first-trip__content .btn {
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}


.planning-hero {
    position: relative;
    min-height: 691px;
    overflow: hidden;
}
.planning-hero__background {
    position: absolute;
    inset: 0 0 55px;
    background: linear-gradient(rgb(241 239 235 / 82%), rgb(241 239 235 / 82%)),
        url("../assets/images/planlaeg-turen.jpg") center 23% / 100% auto no-repeat;
}
.planning-hero__content {
    position: relative;
    width: calc(100% - 138px);
    max-width: 1302px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-md);
    padding-top: 173px;
    padding-bottom: 120px;
}
.planning-hero h1 {
    max-width: 886px;
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}
.breadcrumb {
    color: var(--color-ink);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.breadcrumb a,
.breadcrumb > span[aria-hidden] {
    color: var(--color-ink);
}
.breadcrumb a {
    opacity: 0.6;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.planning-hero__edge {
    inset: auto -5px 0 0;
    height: 109.674px;
    background: url("../assets/icons/hero-kant.svg") no-repeat 0 0 / 100% 100%;
}

/* Ét billed-/tekstlayout med en omvendt desktopvariant. Billedet står først i HTML. */
.planning-steps {
    padding-top: 64px;
    padding-bottom: 81px;
}
.planning-steps__list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: calc(100% - 6px);
    margin-left: 4px;
    padding-right: 2px;
}
.planning-step {
    display: grid;
    grid-template-columns: minmax(0, 438fr) minmax(0, 727fr);
    gap: 107px;
    align-items: center;
}
.planning-step__image {
    width: 100%;
    height: 447px;
    object-fit: cover;
    border-radius: var(--radius-card);
}
.planning-step__content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-top: 7px;
    min-width: 0;
}
.planning-step h2 {
    text-box: trim-both cap alphabetic;
}
.planning-step__description p + p {
    margin-top: var(--line-body);
}
.planning-step .text-link {
    display: inline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}
.planning-step .text-link[href^="https://"]:hover {
    /* Kun tekstfarven dæmpes, så understregningen beholder sin fulde farve. */
    color: color-mix(in srgb, var(--color-ink) 60%, transparent);
    text-decoration-color: var(--color-ochre);
}
.planning-step--reversed {
    grid-template-columns: minmax(0, 727fr) minmax(0, 438fr);
}
.planning-step--reversed .planning-step__image {
    grid-column: 2;
    grid-row: 1;
}
.planning-step--reversed .planning-step__content {
    grid-column: 1;
    grid-row: 1;
}

/* Hele næste-trin-sektionen er ét link. De originale SVG'er bruges i begge størrelser. */
.next-step {
    position: relative;
}
.next-step__link {
    display: block;
    position: relative;
    background: var(--color-ochre);
    text-decoration: none;
    transition: background-color var(--transition-color), color var(--transition-color);
}
.next-step__content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 232px;
    padding: 14px 0 14px 108px;
}
.next-step h2 {
    text-box: trim-both cap alphabetic;
}
.next-step__arrow {
    display: block;
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    background: url("../assets/icons/naeste-trin-pil.svg") center no-repeat;
}
.next-step__edge {
    width: calc(100% + 61px);
    height: 110px;
    left: -5px;
    top: -62px;
    background: url("../assets/icons/cta-kant.svg") no-repeat 0 0 / 100% 100%;
    transform: rotate(180deg);
}
.next-step__link:hover,
.next-step__link:active {
    background: var(--color-olive);
    color: var(--color-beige);
}
.next-step__link:hover .next-step__arrow,
.next-step__link:active .next-step__arrow {
    background-image: url("../assets/icons/naeste-trin-pil-lys.svg");
}
.next-step__link:active h2 {
    text-decoration: underline;
    text-underline-offset: 5px;
}
.next-step__link:focus-visible {
    outline-offset: -8px;
}

/* Samme mellemstørrelser som forsiden. */
@media (min-width: 701px) and (max-width: 1300px) {
    .planning-hero__content {
        width: calc(100% - var(--gutter) * 2);
    }
    .planning-hero h1 {
        font-size: clamp(64px, 6.67vw, 96px);
        line-height: 1;
    }
    .planning-hero__background {
        background-size: cover;
    }
    .planning-step {
        gap: 60px;
    }
    .planning-step h2,
    .next-step h2 {
        font-size: clamp(32px, 3.34vw, 48px);
        line-height: 1.083334;
    }
    .next-step__content {
        padding-left: 0;
        justify-content: center;
    }
}

@media (max-width: 1000px) {
    .planning-step,
    .planning-step--reversed {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }
    .planning-step--reversed .planning-step__image,
    .planning-step--reversed .planning-step__content {
        grid-column: auto;
        grid-row: auto;
    }
    .planning-step__image {
        height: 300px;
    }
    .planning-steps__list {
        gap: 84px;
    }
}

@media (max-width: 700px) {
    .planning-hero {
        min-height: 362px;
    }
    .planning-hero__background {
        bottom: 27px;
        background-position: center top;
        /* Som på forsiden dækker billedet hele baggrundens bredde og højde. */
        background-size: cover;
    }
    .planning-hero__content {
        width: calc(100% - 60px);
        margin: 0 30px;
        gap: 37px;
        padding-top: 46px;
        padding-bottom: 60px;
    }
    .planning-hero h1 {
        text-box: trim-both cap alphabetic;
    }
    .planning-hero__edge {
        right: auto;
        width: max(100%, 493px);
        height: 62px;
        background-image: url("../assets/icons/hero-kant-mobil.svg");
    }
    .planning-steps {
        width: calc(100% - 60px);
        padding-top: 48px;
        padding-bottom: 0;
    }
    .planning-steps__list {
        width: 100%;
        margin-left: 0;
        padding-right: 0;
        gap: 0;
    }
    .planning-step {
        padding-bottom: 54px;
    }
    .planning-step:nth-child(2) {
        padding-bottom: 69px;
    }
    .planning-step:nth-child(3) {
        padding-bottom: 72px;
    }
    .planning-step:nth-child(4) {
        padding-bottom: 61px;
    }
    .planning-step:last-child {
        padding-bottom: 48px;
    }
    .planning-step__image {
        width: calc(100% - 3px);
        border-radius: 30px;
    }
    .planning-step:nth-child(4) .planning-step__image {
        justify-self: center;
    }
    .planning-step__content {
        padding-left: 5px;
    }
    .planning-step--weather .planning-step__content {
        gap: 29px;
    }
    .next-step {
        padding-top: 36px;
    }
    .next-step__content {
        width: calc(100% - 40px);
        min-height: 175px;
        gap: 0;
        justify-content: space-between;
        padding: 32px 0 0;
    }
    .next-step h2 {
        font-size: var(--text-h3);
        font-weight: var(--weight-bold);
        line-height: var(--line-h3);
        text-box: normal;
    }
    .next-step__arrow {
        flex-basis: 41px;
        width: 41px;
        height: 41px;
        background: currentColor;
        mask: url("../assets/icons/naeste-trin-pil-mobil.svg") center no-repeat;
    }
    .next-step__link:hover .next-step__arrow,
    .next-step__link:active .next-step__arrow {
        background-image: none;
    }
    .next-step__edge {
        width: max(calc(100% + 81px), 502px);
        height: 74px;
        left: -81px;
        top: -36px;
        background-image: url("../assets/icons/naeste-trin-kant-mobil.svg");
    }
}

@media (prefers-reduced-motion: reduce) {
    .next-step__link {
        transition: none;
    }
}

/* Begynderguide – genbruger tokens, ikon-/guidekort og næste-trin-komponenten. */
.page-beginner {
    --color-sleep-surface: #f6f4f1;

}
.beginner-hero {
    position: relative;
    min-height: 707px;
}
.beginner-hero__background {
    position: absolute;
    inset: 0 0 39px;
    background: linear-gradient(rgb(241 239 235 / 82%), rgb(241 239 235 / 82%)),
        url("../assets/images/vandring-for-begyndere.png") center / cover;
}
.beginner-hero__content {
    position: relative;
    width: calc(100% - 148px);
    max-width: 1292px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 32px;
    padding-top: 168px;
    padding-bottom: 207px;
}
.beginner-hero h1 {
    max-width: 1117px;
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}
.beginner-hero__content > p {
    max-width: 683px;
}
.beginner-hero__edge {
    left: 0;
    bottom: 0;
    width: calc(100% + 5px);
    aspect-ratio: 1445 / 109.674;
    background: url("../assets/icons/hero-kant.svg") 0 0 / 100% auto no-repeat;
}

.beginner-benefits {
    padding-bottom: 69px;
}
.beginner-benefits .section-heading h2 {
    padding-bottom: 0;
}
.beginner-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 66px;
    max-width: 1222px;
    margin: 50px 0 0;
    padding: 10px 0;
    list-style: none;
}
/* En variation af det eksisterende ikon-kort; bruges til både fordele og regler. */
.icon-card--outlined {
    flex-direction: column;
    align-items: start;
    gap: var(--space-md);
}
.icon-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border: 1px solid currentColor;
    border-radius: 52.5px;
}
.icon-card--outlined .icon-card__content {
    padding-left: 5px;
    width: 100%;
    text-align: left;
}
.icon-card--outlined .icon-card__heading {
    font-family: var(--font-body);
    font-size: var(--text-h4);
    line-height: var(--line-h4);
    letter-spacing: 0.015em;
    margin-bottom: var(--space-xs);
}
.beginner-benefits .icon-card__content p {
    color: #000;
}
.icon-card--light {
    color: var(--color-beige);
}

.sleep-options {
    background: var(--color-sleep-surface);
    padding-top: 42px;
    padding-bottom: 93px;
}
.sleep-options > .container {
    max-width: 1276px;
}
.sleep-options__intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sleep-options__intro > p {
    max-width: 474px;
    margin-left: 3px;
    color: #000;
}
.sleep-options__grid {
    align-items: start;
    gap: 81px;
    margin-top: 68px;
}
.sleep-options__pair {
    display: contents;
}
.sleep-card {
    min-height: 0;
    background: var(--color-sleep-surface);
    border-radius: 30px;
}
.sleep-card--recommended {
    background: var(--color-ink);
    color: var(--color-beige);
    text-decoration: none;
}
.sleep-card__image {
    height: 233px;
    border-radius: 30px 30px 0 0;
}
/* Beskæringen følger billedfills i Figma. Billedrammen er det eneste klippede område. */
.sleep-card__image img {
    object-position: center;
}
.sleep-card__image--shelter img {
    object-position: center 84%;
}
.sleep-card__image--tent img {
    object-position: center 84%;
}
.sleep-card__image--hammock img {
    width: 111.21%;
    max-width: none;
    margin-left: -5.6%;
    object-position: center 85%;
}
.sleep-card__content {
    gap: 23px;
    padding: 38px 26px 18px;
}
.sleep-options__pair .sleep-card__content {
    padding: 18px 26px 18px;
}

.sleep-card__content .guide-card__heading {
    gap: 14px;
}
.sleep-card__badge {
    left: 75.2%;
    top: 220px;
}
.sleep-card__symbol {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.sleep-card__recommendation {
    position: absolute;
    left: 26px;
    top: 221px;
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--color-ochre);
    /* Ink erstatter lys tekst på okker for tilstrækkelig kontrast. */
    color: var(--color-ink);
    font-size: 18px;
    line-height: 24px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.015em;
    text-transform: uppercase;
}
.sleep-card--recommended:focus-visible {
    outline-color: var(--color-ink);
}

/* Den originale SVG bruges som maske, så link og ikon har samme farve i alle tilstande. */
.page-beginner :is(.beginner-rules__link, .site-footer__group--external .footer-link) > :is(picture, .icon) {
    display: none;
}
.page-beginner :is(.beginner-rules__link, .site-footer__group--external .footer-link)::after {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-color: currentColor;
    mask: url("../assets/icons/eksternt-link-regler.svg") center / contain no-repeat;
}

.beginner-rules {
    margin-top: 0;
    position: relative;
    background: var(--color-olive);
    color: var(--color-beige);
}
.beginner-rules__layout {
    position: relative;
    left: 9px;
    display: grid;
    grid-template-columns: minmax(0, 518fr) minmax(0, 586fr);
    align-items: center;
    gap: 80px;
    max-width: 1184px;
    min-height: 538px;
    padding-block: 68px 90px;
}
.beginner-rules__intro > p {
    max-width: 474px;
    margin: 28px 0 0 3px;
}
.beginner-rules__link {
    gap: 12px;
    border-color: var(--color-beige);
    color: var(--color-beige);
    margin-top: 41px;
    font-size: var(--text-card-link);
    line-height: 18px;
    text-underline-position: from-font;
}
.beginner-rules :focus-visible {
    outline-color: var(--color-beige);
}
.beginner-rules__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 49px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.beginner-rules__grid .icon-card {
    min-height: 170px;
}
.beginner-rules__grid .icon-card__content > p {
    width: 275px;
}
.beginner-rules__edge {
    --wave-height: calc((100vw + 5px) * 109.674 / 1445);
    /* SVG'ens gennemsigtige yderkant skal altid overlappe nabosektionen. */
    --wave-overlap: calc(var(--wave-height) * -0.1);
    left: 0;
    width: calc(100% + 5px);
    aspect-ratio: 1445 / 109.674;
    background-size: 100% auto;
}
.beginner-rules__edge--top {
    top: min(var(--wave-overlap), calc(51.674px - var(--wave-height)));
    transform: rotate(180deg);
    background-image: url("../assets/icons/regler-kant-top.svg");
}
.beginner-rules__edge--bottom {
    bottom: min(var(--wave-overlap), calc(64px - var(--wave-height)));
    background-image: url("../assets/icons/hero-kant.svg");
}

.beginner-safety {
    padding-block: 88px 75px;
}
.beginner-safety__layout {
    display: grid;
    grid-template-columns: minmax(0, 587fr) minmax(0, 576fr);
    gap: 69px;
    align-items: center;
    max-width: 1232px;
    margin-left: max(var(--gutter), calc((100% - var(--container-max)) / 2));
}
.beginner-safety__image {
    position: relative;
    height: 680px;
    overflow: hidden;
    border-radius: 30px;
}
.beginner-safety__image img {
    position: absolute;
    width: 114.66%;
    max-width: none;
    height: 137.98%;
    left: -4.6%;
    top: -35.76%;
    object-fit: cover;
}
.beginner-safety__intro > p {
    max-width: 474px;
    margin: 40px 0 0 3px;
    color: #000;
}
.beginner-safety__intro {
    min-height: 235px;
}
.beginner-safety__list {
    display: flex;
    flex-direction: column;
    gap: 53px;
    padding: 0;
    margin: 11px 0 0;
    list-style: none;
}
.beginner-safety__list li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.beginner-safety__list p {
    max-width: 494px;
    min-width: 0;
}
.beginner-safety__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-sage);
}
.next-step--beginner .next-step__content {
    padding-left: 108px;
}

/* Telt og hængekøje deler højden på deres længste kort; Shelter står selvstændigt. */
@media (min-width: 1000px) {
    .sleep-options__pair {
        display: grid;
        grid-column: span 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: inherit;
    }
}

/* Begynderguiden følger projektets eksisterende mellemstørrelser. */
@media (min-width: 701px) and (max-width: 1300px) {
    .beginner-hero__content {
        width: calc(100% - var(--gutter) * 2);
    }
    .beginner-hero h1 {
        font-size: clamp(64px, 6.67vw, 96px);
        line-height: 1;
    }
    .beginner-benefits__grid {
        gap: 40px;
    }
    .sleep-options__grid {
        gap: 32px;
    }
    .beginner-rules__layout,
    .beginner-safety__layout {
        gap: 40px;
    }
    .beginner-rules__layout {
        left: 0;
    }
    .beginner-rules__grid {
        gap: 40px 24px;
    }
    .beginner-rules__grid .icon-card__content > p {
        width: auto;
    }
    .beginner-safety__layout {
        margin-inline: auto;
    }
    .beginner-rules h2,
    .beginner-safety h2 {
        font-size: clamp(32px, 3.34vw, 48px);
        line-height: 1.083334;
    }
    .next-step--beginner .next-step__content {
        padding-left: 0;
    }
}

@media (max-width: 1000px) {
    .beginner-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 62px 40px;
    }
    .sleep-options__grid {
        gap: 76px;
    }
    .sleep-options__pair {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }
    .sleep-card {
        max-width: none;
        width: 100%;
        justify-self: center;
    }
    .beginner-rules__layout,
    .beginner-safety__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .beginner-rules__layout {
        padding-block: 80px;
        gap: 48px;
    }
    .beginner-safety__image {
        height: 300px;
    }
    .beginner-safety__image img {
        position: static;
        width: 100%;
        height: 100%;
        object-position: center;
    }
    .beginner-safety__intro {
        min-height: 0;
    }
    .beginner-safety__list {
        margin-top: 40px;
    }
}

@media (max-width: 700px) {
    .page-beginner .section-heading {
        gap: 22px;
    }
    .beginner-hero {
        min-height: 470px;
    }
    .beginner-hero__background {
        bottom: 0;
        background-position: center, 75% center;
    }
    .beginner-hero__content {
        width: calc(100% - 60px);
        gap: 32px;
        padding: 46px 0 60px;
    }
    .beginner-hero h1 {
        text-box: trim-both cap alphabetic;
    }
    .beginner-hero__content > p {
        margin-top: 14px;
    }
    .beginner-hero__edge {
        bottom: -21px;
        width: max(100%, 493px);
        aspect-ratio: 493 / 62;
        background-image: url("../assets/icons/hero-kant-mobil.svg");
    }
    .beginner-benefits {
        padding-top: 50px;
        padding-bottom: 82px;
    }
    .beginner-benefits > .container,
    .sleep-options > .container,
    .beginner-rules__layout,
    .beginner-safety__layout {
        width: calc(100% - 60px);
    }
    .beginner-benefits__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 62px;
        margin-top: 48px;
    }
    .icon-card--outlined {
        align-items: start;
        gap: var(--space-md);
    }
    .icon-card--outlined .icon-card__heading {
        font-size: 20px;
        line-height: var(--line-h4);
    }
    .sleep-options {
        padding-top: 78px;
        padding-bottom: 94px;
    }
    .sleep-options__intro {
        gap: 18px;
    }
    .sleep-options__grid {
        width: calc(100% + 22px);
        margin-left: -12px;
        margin-top: 20px;
    }
    .sleep-card {
        max-width: none;
    }
    .sleep-card__image {
        height: 233px;
    }
    .sleep-card__content {
        padding: 38px 21px 17px 25px;
        gap: 56px;
    }
    .sleep-card h3 {
        font-size: var(--text-h3);
        line-height: var(--line-h3);
    }
    .sleep-card__badge {
        transform: none;
        width: 58.8679px;
    }
    .sleep-card__badge > picture:not(.sleep-card__symbol) > img {
        width: auto;
        height: 60px;
        max-width: none;
    }
    .beginner-rules__layout {
        left: 0;
        min-height: 1113px;
        padding-block: 114px 52px;
        gap: 16px;
    }
    .beginner-rules .eyebrow {
        color: var(--color-sage);
    }
    .beginner-rules__intro > p {
        margin-top: 40px;
    }
    .beginner-rules__link {
        min-height: 44px;
        margin-top: 16px;
        padding: 9px 10px;
        font-size: 14px;
    }
    .beginner-rules__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .beginner-rules__grid .icon-card {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        min-height: 166px;
    }
    .beginner-rules__grid .icon-card__heading {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        line-height: var(--line-h3);
        letter-spacing: var(--tracking-heading);
    }
    .beginner-rules__grid .icon-card__content > p {
        width: auto;
    }
    .beginner-rules__edge {
        width: max(100%, 502px);
    }
    .beginner-rules__edge--bottom {
        bottom: calc(55px - max(82px, 100vw * 82 / 502));
        aspect-ratio: 502 / 82;
        background-image: url("../assets/icons/regler-kant-bund-mobil.svg");
    }
    .beginner-safety {
        padding-block: 60px 11px;
    }
    .beginner-safety__layout {
        gap: 22px;
        margin-inline: auto;
    }
    .beginner-safety__image {
        height: 220px;
    }
    .beginner-safety__intro {
        padding-bottom: 48px;
    }
    .beginner-safety__list {
        gap: 32px;
        margin-top: 0;
    }
    .beginner-safety__list li {
        align-items: start;
        gap: 12px;
    }
    .next-step--beginner .next-step__content {
        padding-left: 12.5px;
        padding-right: 12.5px;
    }
}

/* Pakkeliste – nye komponenter og små variationer af den fælles CTA. */
.page-packing {

    --color-checklist: #28374a;
    --color-children-surface: #d4d7c6;
}
.packing-hero {
    position: relative;
    min-height: 691px;
}
.packing-hero__background {
    position: absolute;
    inset: 0 0 49px;
    background: linear-gradient(rgb(241 239 235 / 82%), rgb(241 239 235 / 82%)),
        url("../assets/images/pak-udstyret.png") center 32.7044% / 100% auto no-repeat;
}
.packing-hero__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 25px;
    padding-block: 158px 120px;
}
.packing-hero h1 {
    max-width: 1046px;
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}
.packing-hero__content > p {
    max-width: 553.494px;
}
.packing-hero__edge {
    inset: auto -5px 0 0;
    height: 109.674px;
    background: url("../assets/icons/hero-kant.svg") 0 0 / 100% 100% no-repeat;
}

.packing-list {
    padding-top: 53px;
    padding-bottom: 240px;
}
.packing-list__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: 13px;
    margin-bottom: 30px;
}
.packing-list__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 46px;
    padding: 10px 0;
    background: transparent;
    border: 0;
    color: var(--color-ink);
    font-size: 14px;
    line-height: var(--line-body);
    font-weight: var(--weight-bold);
    text-align: left;
    cursor: pointer;
}
.packing-list__action > span:last-child {
    text-decoration: underline;
    text-underline-position: from-font;
}
.packing-list__action > img,
.packing-list__reset-icon {
    flex: 0 0 24px;
}
.packing-list__action--reset {
    /* En lille kontrastkorrektion fra Figma (65%) gør den lille tekst AA-læsbar. */
    color: rgb(35 47 62 / 70%);
}
.packing-list__reset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transform: rotate(-90deg) scaleY(-1);
}
.packing-list__action:hover,
.packing-list__action:active {
    color: var(--color-ochre);
}
.packing-list__columns {
    display: grid;
    grid-template-columns: minmax(0, 623fr) minmax(0, 620fr);
    align-items: start;
    gap: 37px;
}
.packing-list__secondary {
    min-width: 0;
}
.packing-list__group {
    min-width: 0;
    padding: 43px 29px;
    border: 1px solid var(--color-ink);
    border-radius: 30px;
}
.packing-list__group > h2 {
    text-box: trim-both cap alphabetic;
}
.packing-list__categories {
    margin-top: 68px;
}
.checklist__category > h3 {
    margin-left: 5px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: var(--line-body);
    letter-spacing: 0;
    color: var(--color-olive);
}
.checklist__category + .checklist__category {
    margin-top: 70px;
}
.checklist__category:nth-child(3) {
    margin-top: 37px;
}
.checklist__category:nth-child(4) {
    margin-top: 52px;
}
.checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.checklist__category > .checklist {
    padding-left: 32px;
    margin-top: 27px;
}
.checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding-block: 10px;
    color: var(--color-checklist);
    cursor: pointer;
}
.checklist__item > input {
    appearance: none;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 2px solid var(--color-checklist);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}
.checklist__item > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.checklist__item > input:checked {
    border: 0;
    background: url("../assets/icons/afkrydsning.svg") center / 30px 30px no-repeat;
}
.checklist__item > input:checked + span {
    color: var(--color-ink);
    font-weight: var(--weight-bold);
}
.packing-list__group--optional {
    min-height: 734px;
    margin-top: -4px;
    border-color: var(--color-olive);
    border-style: dashed;
    /* Figma-konturens 9/9-stipling og hjørner bevares med en original SVG. */
    border-image: url("../assets/icons/pakkeliste-stiplet-kant.svg") 31 / 31px / 1px stretch;
}
.packing-list__group--optional > h2 {
    color: rgb(35 47 62 / 81%);
}
.packing-list__group--optional > .checklist {
    padding-left: 10px;
    margin-top: 39px;
}

/* Native details bevarer checkbox-tilstand og flytter resten af siden ved åbning. */
.packing-accordion {
    width: min(100%, 842px);
    margin-top: 32px;
    padding: 23px 16px 23px 29px;
    border: 1px solid var(--color-ink);
    border-radius: 30px;
    background: var(--color-children-surface);
}
.packing-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    list-style: none;
    cursor: pointer;
}
.packing-accordion__trigger::-webkit-details-marker {
    display: none;
}
.packing-accordion__trigger > h2 {
    font-family: var(--font-body);
    font-size: var(--text-h2);
    line-height: var(--line-h2);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
}
.packing-accordion__icon {
    display: flex;
    align-items: center;
    flex: 0 0 54px;
    min-height: 54px;
}
.packing-accordion__minus,
.packing-accordion[open] .packing-accordion__plus {
    display: none;
}
.packing-accordion[open] .packing-accordion__minus {
    display: block;
}
.packing-accordion[open] .packing-accordion__icon {
    min-height: 24px;
}
.packing-accordion__panel {
    margin-top: 44px;
    padding-inline: 10px;
}
.packing-cta .first-trip__content {
    justify-content: start;
    padding-top: 107px;
    padding-bottom: 55px;
}
.packing-cta .eyebrow {
    color: var(--color-sage);
}
.packing-cta .first-trip__description {
    margin-bottom: 32px;
}
.packing-cta .section-edge--cta {
    top: -38px;
}

/* Brug samme mellemstørrelser og mobilgrænse som resten af NaturKlar. */
@media (min-width: 701px) {
    .packing-cta .first-trip__image {
        position: relative;
        min-height: 522px;
    }
    .packing-cta .first-trip__image > img {
        position: absolute;
        inset: 0;
        height: 100%;
    }
}
@media (min-width: 1001px) {
    .packing-accordion {
        width: 100%;
    }
}
@media (min-width: 701px) and (max-width: 1300px) {
    .packing-hero h1 {
        font-size: clamp(64px, 6.67vw, 96px);
        line-height: 1;
    }
    .packing-hero__background {
        background-size: cover;
    }
    .packing-list__group > h2,
    .packing-accordion__trigger > h2 {
        font-size: clamp(32px, 3.34vw, 48px);
        line-height: 1.083334;
    }
    .packing-list__group {
        padding-inline: 24px;
    }
    .packing-accordion {
        padding-left: 24px;
    }
    .checklist__category > .checklist {
        padding-left: 10px;
    }
}
@media (max-width: 1000px) {
    .packing-list__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .packing-list__group--optional {
        min-height: 0;
        margin-top: 0;
    }
    .packing-accordion {
        margin-top: 32px;
        margin-left: 0;
    }
    .packing-list {
        padding-bottom: 80px;
    }
}
@media (max-width: 700px) {
    .packing-hero {
        min-height: 422px;
    }
    .packing-hero__background {
        bottom: 0;
        background-position: center top;
        background-size: auto, 179.1% auto;
    }
    .packing-hero__content {
        width: calc(100% - 48px);
        margin-left: 30px;
        gap: 24px;
        padding-block: 46px 67px;
    }
    .packing-hero h1 {
        text-box: trim-both cap alphabetic;
    }
    .packing-hero__edge {
        bottom: -24px;
        right: auto;
        width: max(100%, 493px);
        height: 62px;
        background-image: url("../assets/icons/hero-kant-mobil.svg");
    }
    .packing-list {
        width: calc(100% - 40px);
        padding-top: 40px;
        padding-bottom: 48px;
    }
    .packing-list__toolbar {
        justify-content: space-between;
        gap: 8px;
        margin-left: 0;
        margin-bottom: 28px;
    }
    .packing-list__action {
        font-size: 12px;
    }
    .packing-list__group {
        padding: 28px 20px;
    }
    .packing-list__group > h2 {
        font-size: var(--text-h3);
        line-height: var(--line-h3);
        font-weight: var(--weight-bold);
        text-box: normal;
    }
    .packing-list__categories {
        margin-top: 28px;
    }
    .checklist__category > h3 {
        margin-left: 0;
    }
    .checklist__category + .checklist__category {
        margin-top: 28px;
    }
    .checklist__category > .checklist {
        padding-left: 0;
        margin-top: 12px;
    }
    .packing-list__group--optional > .checklist {
        padding-left: 0;
        margin-top: 24px;
    }
    .packing-list__group--optional {
        padding: 27px 19px;
        border-image-source: url("../assets/icons/pakkeliste-stiplet-kant-mobil.svg");
    }
    .packing-accordion__trigger > h2 {
        font-size: var(--text-h3);
        line-height: var(--line-h3);
        letter-spacing: 0.015em;
    }
    .packing-accordion {
        padding-left: 19px;
    }
    .packing-accordion__panel {
        margin-top: 28px;
        padding-inline: 0;
    }
    .packing-cta .first-trip__content {
        padding: 50px 24px 40px;
    }
    .packing-cta .section-heading {
        gap: 32px;
    }
    .packing-cta .section-heading h2 {
        padding-bottom: 0;
    }
    .packing-cta .section-heading .eyebrow {
        padding-left: 0;
    }
    .packing-cta .first-trip__description {
        margin: 32px 0 28px;
    }
    .packing-cta .btn {
        width: auto;
    }
    .packing-cta .section-edge--cta {
        width: max(calc(100% + 81px), 502px);
        top: 24px;
    }
}
@media (forced-colors: active) {
    .checklist__item > input {
        appearance: auto;
    }
}

/* Et navngivet A4-layout begrænser printreglerne til pakkelistesiden. */
@page naturklar-packing {
    size: A4;
    margin: 12mm;
}
@media print {
    .page-packing {
        page: naturklar-packing;
        background: white;
        color: black;
        font-size: 11pt;
        line-height: 15pt;
    }
    .page-packing :is([data-component], .skip-link, .packing-hero, .packing-list__toolbar, .packing-cta, noscript) {
        display: none;
    }
    .page-packing main {
        overflow: visible;
    }
    .page-packing .packing-list {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .page-packing .packing-list__columns {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 8mm;
    }
    .page-packing .packing-list__group {
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-image: none;
    }
    .page-packing .packing-list__group > h2 {
        font-size: 17pt;
        line-height: 20pt;
        color: black;
        text-box: normal;
        break-after: avoid;
    }
    .page-packing .packing-list__categories {
        margin-top: 5mm;
    }
    .page-packing .checklist__category {
        break-inside: avoid;
    }
    .page-packing .checklist__category + .checklist__category {
        margin-top: 4mm;
    }
    .page-packing .checklist__category > h3 {
        margin: 0;
        color: black;
        font-size: 12pt;
        line-height: 16pt;
        break-after: avoid;
    }
    .page-packing .checklist {
        gap: 1mm;
        padding: 0;
        margin-top: 2mm;
    }
    .page-packing .checklist__item {
        gap: 2mm;
        min-height: 7mm;
        padding-block: 1mm;
        color: black;
        break-inside: avoid;
    }
    .page-packing .checklist__item > input {
        flex-basis: 5mm;
        width: 5mm;
        height: 5mm;
        border-width: 1pt;
        border-radius: 1.3mm;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .page-packing .checklist__item > input:checked {
        border: 0;
        background-size: 5mm 5mm;
    }
    .page-packing .packing-accordion {
        width: auto;
        padding: 0;
        margin: 6mm 0 0;
        background: white;
        border: 0;
    }
    .page-packing .packing-accordion:not([open]) {
        display: none;
    }
    .page-packing .packing-accordion__trigger > h2 {
        font-size: 16pt;
        line-height: 20pt;
    }
    .page-packing .packing-accordion__icon {
        display: none;
    }
    .page-packing .packing-accordion__trigger {
        break-after: avoid;
    }
}

/* Gode råd – kun denne side udvider hero, ikon-kort og native accordion. */
.page-advice {
    --color-faq-surface: #f1efeb;

}
.page-advice .section-heading .eyebrow {
    color: var(--color-ink);
    opacity: 0.6;
}
.page-advice .advice-hero {
    /* Samme mål og indre afstande som pakkelistens hero. */
    min-height: 691px;
    padding: 0;
    overflow: visible;
}
.page-advice .advice-hero .hero__background {
    inset: 0 0 49px;
    background: linear-gradient(rgb(241 239 235 / 82%), rgb(241 239 235 / 82%)),
        url("../assets/images/baal-gode-raad.jpg") center / cover;
}
.page-advice .advice-hero .hero__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 25px;
    padding: 158px 0 120px;
}
.page-advice .advice-hero .hero__heading {
    max-width: 1046px;
    margin: 0;
    text-box: normal;
}
.page-advice .advice-hero .hero__description {
    max-width: 553.494px;
    margin: 0;
}
.page-advice .advice-hero__edge {
    left: 0;
    bottom: 0;
    width: calc(100% + 5px);
    height: 109.674px;
    background: url("../assets/icons/hero-kant.svg") 0 0 / 100% 100% no-repeat;
}
.page-advice .advice-mistakes {
    padding: 72px 0 94px;
}
.page-advice .advice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 48px;
}
.page-advice .advice-card {
    min-width: 0;
    min-height: 254px;
    justify-content: center;
    padding: 22px 30px;
    border: 1px solid var(--color-stroke);
    border-radius: 30px;
}
.page-advice .advice-card .icon-card__content {
    flex: none;
    padding: 0;
}
.page-advice .advice-card .icon-card__heading {
    font-weight: var(--weight-bold);
    margin-bottom: 18px;
}
.page-advice .advice-faq {
    background: var(--color-faq-surface);
    padding: 156px 0 271px;
    scroll-margin-top: var(--header-height);
}
.page-advice .advice-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 560fr) minmax(0, 622fr);
    grid-template-areas: "heading ." "list image";
    gap: 42px 96px;
    padding-left: 2px;
    align-items: start;
}
.page-advice .advice-faq__heading {
    grid-area: heading;
    color: #000;
}
.page-advice .advice-faq__heading h2 {
    padding: 0;
}
.page-advice .advice-faq__image {
    grid-area: image;
    position: relative;
    aspect-ratio: 622 / 587;
    margin-top: 45px;
    border-radius: 30px;
    overflow: hidden;
}
.page-advice .advice-faq__image img {
    position: absolute;
    width: 100%;
    height: auto;
    top: -44.03%;
}
.page-advice .faq-list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}
.page-advice .faq-item {
    width: 100%;
    margin: 0;
    padding: 23px 15px;
    background: var(--color-faq-surface);
}
.page-advice .faq-item__trigger {
    max-width: 492px;
    gap: 39px;
}
.page-advice .faq-item__trigger h3 {
    min-width: 0;
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--text-h4);
    line-height: var(--line-body);
    letter-spacing: 0;
}
.page-advice .faq-item .packing-accordion__icon {
    flex: 0 0 24px;
    min-height: 24px;
}
.page-advice .faq-item__panel {
    max-width: 444px;
    margin-top: var(--space-md);
    padding: 0;
}
.page-advice .faq-item__panel p + p {
    margin-top: var(--space-md);
}
.page-advice .faq-item__panel ul {
    margin: var(--space-md) 0 0;
    padding-left: var(--space-md);
}
.page-advice .faq-item__panel li + li {
    margin-top: var(--space-sm);
}
.page-advice .advice-next-steps {
    position: relative;
    background: var(--color-sage);
    padding: 75px 0 80px;
}
.page-advice .advice-next-steps__edge {
    width: calc(100% + 61px);
    height: 110px;
    left: -5px;
    top: -46px;
    transform: rotate(180deg);
    background: url("../assets/icons/naeste-skridt-kant.svg") 0 0 / 100% 100% no-repeat;
}
.page-advice .advice-next-steps > .container {
    position: relative;
}
.page-advice .advice-next-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.page-advice .advice-next-steps .icon-card__content {
    max-width: 280px;
}
.page-advice .advice-next-steps .icon-card__content p {
    color: #000;
}

/* Samme mellemstørrelser som på de eksisterende sider. */
@media (min-width: 701px) and (max-width: 1300px) {
    .page-advice .advice-hero .hero__heading {
        font-size: clamp(64px, 6.67vw, 96px);
        line-height: 1;
    }
    .page-advice .advice-grid {
        gap: 24px;
    }
    .page-advice .advice-faq__layout {
        column-gap: 48px;
    }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .page-advice .advice-next-steps__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
    .page-advice .advice-faq {
        padding-block: 100px 150px;
    }
    .page-advice .advice-faq__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "heading" "image" "list";
    }
    .page-advice .advice-faq__image {
        width: min(100%, 622px);
        margin: 0;
    }
    .page-advice .faq-item__trigger,
    .page-advice .faq-item__panel {
        max-width: none;
    }
}
@media (max-width: 701px) {
    .page-advice .advice-next-steps__edge {
        width: 100%;
        height: 55.3871px;
        left: 0;
        top: -5.3871px;
        background-image: url("../assets/icons/naeste-skridt-kant-mobil.svg");
        /* Beskær SVG'ens skrå afslutninger uden at udvide selve elementet. */
        background-size: calc(100% + 12px) 100%;
        background-position: center;
    }
}
@media (max-width: 700px) {
    .page-advice .advice-hero {
        min-height: 422px;
    }
    .page-advice .advice-hero .hero__background {
        bottom: 0;
        background-size: auto, 100% auto;
        background-position: center, center 41.11%;
    }
    .page-advice .advice-hero .hero__content {
        width: calc(100% - 48px);
        margin-left: 30px;
        gap: var(--space-md);
        padding: 46px 0 67px;
    }
    .page-advice .advice-hero .hero__heading {
        max-width: none;
        text-box: trim-both cap alphabetic;
    }
    .page-advice .advice-hero__edge {
        width: max(100%, 493px);
        height: 62px;
        bottom: -24px;
        background-image: url("../assets/icons/hero-kant-mobil.svg");
    }
    .page-advice .advice-mistakes {
        padding: 50px 0 41px;
    }
    .page-advice :is(.advice-grid, .advice-faq__layout, .advice-next-steps > .container) {
        width: calc(100% - 60px);
    }
    .page-advice .advice-card {
        min-height: 0;
        padding: 29px;
    }
    .page-advice .advice-card .icon-card__number {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
        font-size: 40px;
    }
    .page-advice :is(.advice-card, .advice-next-steps) .icon-card__heading {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        line-height: var(--line-h3);
        letter-spacing: var(--tracking-heading);
    }
    .page-advice .advice-faq {
        padding: 40px 0 76px;
    }
    .page-advice .advice-faq__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "heading" "image" "list";
        gap: 23px;
        padding: 0;
    }
    /* Denne H2 er fortsat 48/52 i mobil-Figma. */
    .page-advice .advice-faq__heading h2 {
        font-size: 48px;
        line-height: 52px;
        min-height: 126px;
    }
    .page-advice .advice-faq__image {
        aspect-ratio: 342 / 308;
        margin: 0;
    }
    .page-advice .advice-faq__image img {
        top: -46.18%;
    }
    .page-advice .faq-item__trigger {
        max-width: none;
        gap: 24px;
    }
    .page-advice .faq-item__trigger h3 {
        font-size: var(--text-body);
    }
    .page-advice .advice-next-steps {
        padding: 81px 0 80px;
    }
    .page-advice .advice-next-steps .section-heading {
        gap: 22px;
    }
    .page-advice .advice-next-steps__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        margin-top: 72px;
    }
    .page-advice .advice-next-steps .icon-card__content {
        max-width: none;
    }
}

/* Guide-, overnatnings- og begynderfejlskort kan swipes på mobil og tablet. */
@media (max-width: 1000px) {
    .page-advice .advice-mistakes .advice-grid {
        padding: 8px;
        grid-template-columns: none;
        grid-auto-flow: column;
        /* 16 px mellemrum og mindst 24 px af næste kort viser swipe-muligheden. */
        grid-auto-columns: min(360px, calc(100% - 40px));
        gap: 16px;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 8px;
        scrollbar-width: thin;
    }
    .page-advice .advice-mistakes .advice-card {
        scroll-snap-align: start;
    }
    .page-advice .advice-mistakes .advice-grid:focus-visible {
        outline-offset: 2px;
    }
    .guide-grid.guide-grid--swipe {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 8px;
        grid-template-columns: none;
        grid-auto-flow: column;
        /* Efter mellemrummet er mindst 24 px af næste kort synligt. */
        grid-auto-columns: min(360px, calc(100% - 40px));
        gap: 16px;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 8px;
        scrollbar-width: thin;
    }
    .guide-grid--swipe .sleep-options__pair {
        display: contents;
    }
    .guide-grid--swipe .guide-card {
        width: auto;
        min-width: 0;
        max-width: none;
        scroll-snap-align: start;
    }
    .guide-grid--swipe:focus-visible {
        outline-offset: 2px;
    }
    .guide-swipe-hint {
        display: block;
        margin-top: var(--space-sm);
        font-size: 14px;
        line-height: 20px;
    }
}

/* Fælles mobillayout for trin, fordele, regler og næste skridt. Farverne bevares. */
@media (max-width: 701px) {
    .sleep-options {
        padding-bottom: var(--space-lg);
    }
    .beginner-rules__layout {
        min-height: 0;
        padding-top: var(--space-xl);
        gap: 32px;
    }
    .beginner-rules__edge--top {
        width: max(100%, 502px);
        /* SVG-konturen starter ved y=40.5337; hele formen skal ligge over grønt. */
        top: calc(max(502px, 100vw) * -40.5337 / 502);
        aspect-ratio: 502 / 148;
        transform: none;
        background-image: url("../assets/icons/regler-kant-top-mobil.svg");
    }
    :is(.how-it-works .steps, .beginner-benefits__grid, .beginner-rules__grid, .page-advice .advice-next-steps__grid) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
    :is(.how-it-works .steps, .beginner-benefits__grid, .beginner-rules__grid, .page-advice .advice-next-steps__grid) .icon-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        min-height: 0;
        text-align: left;
    }
    :is(.how-it-works .steps, .beginner-benefits__grid, .beginner-rules__grid, .page-advice .advice-next-steps__grid) :is(.icon-card__number, .icon-card__icon) {
        width: 45px;
        height: 45px;
        flex: 0 0 45px;
        border-radius: 50%;
        font-size: 24px;
    }
    :is(.how-it-works .steps, .beginner-benefits__grid, .beginner-rules__grid, .page-advice .advice-next-steps__grid) .icon-card__content {
        width: auto;
        max-width: none;
        padding: 0;
        text-align: left;
    }
    :is(.how-it-works .steps, .beginner-benefits__grid, .beginner-rules__grid, .page-advice .advice-next-steps__grid) .icon-card__heading {
        font-family: var(--font-heading);
        font-size: 24px;
        line-height: 30px;
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-heading);
        margin-bottom: var(--space-xs);
    }
    :is(.how-it-works .steps, .beginner-benefits__grid, .beginner-rules__grid, .page-advice .advice-next-steps__grid) .icon-card__content > p {
        width: auto;
        font-family: var(--font-body);
        font-size: 17px;
        line-height: var(--line-body);
        font-weight: var(--weight-regular);
    }
}