.record {
    background-color: #f1eae1;
}

.record__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-5), 6vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-4), 4vw, 2rem);
}

.record__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-4), 4vw, 2rem);
}

.record__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 32px;
    border-radius: 12px;
    background-color: #F9F3EA;
}

.record__eyebrow {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 14px;
}

.record__heading {
    margin: 0;
    color: var(--color-grey-1);
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
    font-weight: 400;
}

.record__description {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size:18px;
    line-height: 26px;
}

.record__description p {
    margin: 0;
}

.record__button {
    margin-top: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-3);
    border-radius: 8px;
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.record__button:hover,
.record__button:focus-visible {
    opacity: 0.85;
}

.record__image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
}

.record__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.record__steps {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* No cursor: grab here — nothing in the theme implements drag-to-scroll for
       these rows, so it advertised an interaction that does not exist. */
    scrollbar-width: none;
    /* Container width, no outward bleed: a partial card is cut on the container's
       gutter line instead of inside the gutter itself. */
    width: 100%;
}

.record__steps::-webkit-scrollbar {
    display: none;
}

.record__step {
    flex: 0 0 82%;
    scroll-snap-align: start;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 20px;
    border-radius: 12px;
    background-color: var(--color-grey-1);
}

.record__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
    margin-bottom: var(--space-4);
}

.record__step-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.record__step-icon svg path {
    stroke: var(--color-orange-dark);
}

.record__step-heading {
    margin: 0;
    color: var(--color-cream);
    font-size: 30px;
    line-height: 32px;
    letter-spacing: -2%;
    font-weight: 400;
}

.record__step-text {
    color: var(--color-cream);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
}

.record__step-text p {
    margin: 0;
}

.record__trust {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: clamp(var(--space-4), 4vw, 1.5rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* No cursor: grab here — nothing in the theme implements drag-to-scroll for
       these rows, so it advertised an interaction that does not exist. */
    scrollbar-width: none;
    /* Container width, no outward bleed: a partial card is cut on the container's
       gutter line instead of inside the gutter itself. */
    width: 100%;
}

.record__trust::-webkit-scrollbar {
    display: none;
}

.record__trust-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.record__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.record__trust-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.record__trust-icon svg path {
    stroke: var(--color-orange-dark);
}

.record__trust-icon svg path[fill] {
    fill: var(--color-orange-dark);
}

.record__trust-text {
    display: flex;
    flex-direction: column;
}

.record__trust-heading {
    color: var(--color-grey-1);
    font-family: var(--font-family-heading);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -2%;
}

.record__trust-description {
    color: var(--color-grey-2);
    font-family: var(--font-family-base);
    font-size: 16px;
}

.record__trust-item:not(:first-of-type) {
    padding-inline-start: clamp(var(--space-5), 5vw, 4rem);
    border-left: 1px solid #9B9C8F;
}

@media (max-width: 599px) {
    .record__button {
        width: 100%;
    }
}

@media (max-width: 899px) {

    .record__intro {
        padding: 20px 16px;
    }

    .record__eyebrow {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0%;
    }

    .record__heading {
        font-size: 40px;
        line-height: 36px;
        letter-spacing: -2%;
    }

    .record__description {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    .record__image {
        aspect-ratio: 1;
    }

    .record__steps {
        gap: var(--space-3);
    }

    .record__step-heading {
        font-size: 22px;
        line-height: 20px;
        letter-spacing: -2%;
    }

    .record__step-text {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    .record__trust-icon {
        width: 32px;
        height: 32px;
    }

    .record__trust-icon svg{
        /* Was `16x` — not a valid length, so the declaration was dropped and the
           glyph stayed at its 18px desktop size inside a 32px circle. */
        width: 16px;
        height: 16px;
    }

    .record__trust-heading {
        font-size: 18px;
        line-height: 18px;
        letter-spacing: -2%;
    }

    .record__trust-description {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0%;
    }
}

@media (min-width: 900px) {
    .record__top {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .record__intro {
        justify-content: center;
    }

    .record__image {
        aspect-ratio: auto;
    }

    .record__steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-inline-end: 0;
        padding-inline-end: 0;
    }

    .record__step {
        flex: initial;
    }

    .record__trust {
        justify-content: center;
        cursor: auto;
        margin-inline-end: 0;
        padding-inline-end: 0;
        gap: clamp(var(--space-5), 5vw, 4rem);
    }

    .record__trust-item:first-child {
        padding-inline-start: 0;
        border-left: none;
    }
}

/* The trust row is three nowrap items separated by a gap and inner padding that
   both ramp with the viewport. Its natural width is ~1004px, so it only really
   fits from about 1200px up. The desktop rule above used to drop the clip at
   900px, which let the surplus escape and carried the whole page past the
   screen edge — measured at 1024px (iPad landscape) the document was 21px wider
   than the viewport. Below 1200px the row therefore keeps the same contained
   horizontal scroll it uses on mobile; above it, it goes static. */
@media (min-width: 1200px) {
    .record__trust {
        overflow-x: visible;
        scroll-snap-type: none;
    }
}