/* ==========================================================================
   MegaTel homepage
   Built from Figma "Megatel Rebranded Website"
   desktop frame 408:63439 (1440px)  |  mobile frame 408:63834 (360px)
   Mobile-first. Breakpoints: 768px (mobile -> desktop layout), 1024px, 1280px.
   ========================================================================== */

/* ------------------------------- Tokens --------------------------------- */
:root {
    /* Brand colours (Figma variables) */
    --color-primary: #1d325b;          /* Mega Blue Primary / Mega Dark blue */
    --color-accent: #0080c2;           /* Mega Light blue */
    --color-accent-deep: #1a5eb8;      /* bundle section eyebrow */
    --color-white: #ffffff;            /* Figma "White" returns "#FFFFFF," - corrected */
    --color-black: #000000;

    /* Text */
    --color-text: #1d325b;
    --color-text-muted: #565d6a;       /* Faded */
    --color-text-on-dark: #ffffff;
    --color-lead-on-dark: rgba(255, 255, 255, 0.82);

    /* Lines and surfaces */
    --color-card-border: #a0a5a8;      /* info + step cards */
    --color-bundle-border: #8995a3;    /* Grey/Cool-Grey/500 */
    --color-dot-idle: #e9e9e9;
    --color-surface: #ffffff;

    /* Gradients, read directly off the node fills (the Figma gradient
       variables serialise empty, so these come from the paint definitions) */
    --gradient-brand: linear-gradient(90deg, #21325d 0.45%, #0066ff 96.461%);
    --gradient-brand-diagonal: linear-gradient(142.3deg, #21325d 20.289%, #0066ff 56.498%);
    --gradient-icon: linear-gradient(90deg, #2ba7d8 1.16%, #2b519a 99.93%);
    --gradient-divider: linear-gradient(90deg, #2ba7d8 0%, #1d325b 100%);

    /* Type */
    --font-primary: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-kicker-mobile: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

    /* Layout */
    --content-max-width: 1266px;       /* 1440 - (2 x 87) */
    --banner-max-width: 1310px;        /* 1440 - (2 x 65) */
    --steps-max-width: 1330px;
    --page-gutter: 16px;
    --banner-gutter: 16px;
    --header-height: 64px;

    /* Radii */
    --radius-card: 20px;
    --radius-banner: 7.538px;
    --radius-panel: 30px;
    --radius-app-shape: 27.812px;
    --radius-pill: 100px;

    /* Effects */
    --shadow-bundle: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.25);
    --transition-base: 180ms ease;
}

@media (min-width: 768px) {
    :root {
        --page-gutter: 40px;
        --banner-gutter: 40px;
        --header-height: 108px;
        --radius-banner: 20px;
    }
}

@media (min-width: 1280px) {
    :root {
        --page-gutter: 87px;
        --banner-gutter: 65px;
    }
}

/* ---------------------------- Reset and base ---------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button {
    font: inherit;
    color: inherit;
}

strong {
    font-weight: 700;
}

/* Focus: never removed, only replaced */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.hero-banner :focus-visible,
.steps-section :focus-visible,
.bundle-carousel__controls :focus-visible {
    outline-color: var(--color-white);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--page-gutter);
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 8px 8px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 700;
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: 0;
}

/* ---------------------------- Shared layout ----------------------------- */
.content-wrapper,
.site-header__inner {
    width: 100%;
    max-width: calc(var(--content-max-width) + (2 * var(--page-gutter)));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.content-section {
    padding-block: 20px;
}

/* --------------------------- Shared components -------------------------- */
.section-eyebrow {
    color: var(--color-accent-deep);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: normal;
    text-transform: uppercase;
}

.section-eyebrow--on-dark {
    color: var(--color-text-on-dark);
}

.section-heading {
    font-size: clamp(1.5rem, 0.75rem + 3.33vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
}

.section-heading--on-dark {
    color: var(--color-text-on-dark);
}

.section-lead {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    transition: filter var(--transition-base), transform var(--transition-base);
}

.button--primary {
    width: 100%;
    min-height: 35px;
    padding: 8px 20px;
    background-image: var(--gradient-brand);
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1.5;
}

.button--primary:hover {
    filter: brightness(1.1);
}

.button--primary:active {
    transform: translateY(1px);
}

/* Cards shared by the intro value props and the "how it works" steps */
.feature-card,
.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 57px 27px;
    border: 0.5px solid var(--color-card-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    color: var(--color-text);
    text-align: center;
}

.feature-card {
    justify-content: center;
}

/* Both frames fix the step card height at 291px. */
.step-card {
    min-height: 291px;
}

.feature-card__icon,
.step-card__icon {
    width: 40px;
    height: 40px;
    flex: none;
}

.feature-card__title,
.step-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
}

.feature-card__body,
.step-card__body {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
}

/* ------------------------- Header and navigation -------------------------
   Both Figma frames show the header as the logo alone, with no navigation
   items, so there is no menu and no menu toggle to build. The mobile frame
   uses the white logo on the brand gradient; desktop uses the full-colour
   logo on white. */
.site-header {
    background-image: var(--gradient-brand);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
}

.site-header__logo-link {
    display: block;
    border-radius: 4px;
}

.site-header__logo {
    width: 99.675px;
    height: 25.469px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .site-header {
        background-image: none;
        background-color: var(--color-white);
    }

    .site-header__inner {
        padding-block: 26px 27px;
    }

    .site-header__logo {
        width: 216px;
        height: 55px;
    }
}

/* ------------------------------ Hero section ----------------------------- */
.hero-section {
    width: 100%;
    max-width: calc(var(--banner-max-width) + (2 * var(--banner-gutter)));
    margin-inline: auto;
    padding-inline: var(--banner-gutter);
    /* Mobile frame: 20px stack gap + the 16px section padding above the banner. */
    padding-top: 36px;
}

/* Height comes from aspect-ratio alone. A min-height here would fight the
   ratio and inflate the banner's width instead of its height. */
.hero-banner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 328 / 196;
    border-radius: var(--radius-banner);
    background-color: var(--color-black);
}

/* Decorative glow. The exported SVG already carries the rounded mask. */
.hero-banner__glow {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 75.4%;
    max-width: none;
}

/* Cutout portrait. Figma renders it mirrored, oversized and cropped inside a
   fixed window; object-fit + a deliberately out-of-range object-position
   reproduces that crop without an extra wrapper element. */
.hero-banner__photo {
    position: absolute;
    left: 0;
    top: 5.612%;
    width: 62.195%;
    max-width: none;
    aspect-ratio: 204 / 184;
    height: auto;
    object-fit: cover;
    object-position: 50% -18.6%;
    transform: scaleX(-1);
}

.hero-banner__content {
    position: absolute;
    left: 45.4%;
    top: 27.2%;
    right: 4%;
    z-index: 2;
}

.hero-banner__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-text-on-dark);
}

.hero-banner__kicker {
    font-family: var(--font-kicker-mobile);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

.hero-banner__headline {
    font-size: clamp(1.4375rem, 0.5rem + 4.2vw, 3.1875rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

/* The mobile frame's banner carries no body copy. */
.hero-banner__lead {
    display: none;
}

@media (min-width: 768px) {
    .hero-section {
        padding-top: 1px;
    }

    /* Between 768 and 1023 the banner is given extra height so the desktop
       copy block fits; from 1024 up it uses the frame's 1310:390 ratio. */
    .hero-banner {
        aspect-ratio: 1310 / 470;
    }

    .hero-banner__glow {
        height: 100%;
    }

    /* Sized from the banner height so the portrait always fills it, exactly
       as it does in the frame, whatever the banner's ratio. */
    .hero-banner__photo {
        left: 4.89%;
        top: 50%;
        width: auto;
        height: 99.74%;
        aspect-ratio: 540 / 389;
        object-position: 50% 22.05%;
        transform: translateY(-50%) scaleX(-1);
    }

    /* Tablet: the copy block is centred in the banner, because the frame's
       24.87% top offset leaves too little room before the banner clips. */
    .hero-banner__content {
        left: 50%;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .hero-banner__kicker {
        font-family: var(--font-primary);
        font-size: 1rem;
        font-weight: 600;
        line-height: normal;
    }

    .hero-banner__headline {
        font-weight: 800;
    }

    .hero-banner__lead {
        display: block;
        max-width: 383px;
        color: var(--color-lead-on-dark);
        font-size: clamp(1rem, 0.25rem + 1.15vw, 1.5rem);
        font-weight: 500;
        line-height: normal;
    }
}

@media (min-width: 1024px) {
    .hero-banner {
        aspect-ratio: 1310 / 390;
    }

    /* Back to the frame's exact copy position. */
    .hero-banner__content {
        top: 24.87%;
        transform: none;
    }
}

/* ---------------------------- Intro section ------------------------------ */
.intro-section__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intro-section__text {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.intro-section__body {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 38px;
    padding-block: 16px;
}

@media (min-width: 768px) {
    .intro-section {
        padding-block: 40px 20px;
    }

    .intro-section__text {
        gap: 14px;
    }

    .intro-section__body {
        font-size: 1rem;
        font-weight: 500;
    }

    /* Tablet: copy on top, the two value props side by side beneath it. */
    .feature-list {
        flex-direction: row;
        gap: 38px;
        padding-block: 0;
    }

    .feature-card {
        flex: 1 1 0;
        min-height: 291px;
    }
}

/* The frame's side-by-side arrangement needs 530 + 38 + 538 = 1106px of
   content width, which only exists from 1280px up. */
@media (min-width: 1280px) {
    .intro-section__inner {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 38px;
    }

    .intro-section__text {
        flex: 0 0 530px;
    }

    .feature-list {
        flex: 0 0 auto;
    }

    .feature-card {
        flex: 0 0 250px;
        width: 250px;
    }
}

/* ---------------------------- Bundle section ----------------------------- */
.bundle-section > .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* The mobile frame omits the "YOUR DATA" eyebrow. */
.bundle-section .section-eyebrow {
    display: none;
}

.bundle-carousel {
    position: relative;
    width: 100%;
    max-width: calc(var(--content-max-width) + (2 * var(--page-gutter)));
    margin-inline: auto;
    margin-top: 20px;
    padding-left: var(--page-gutter);
    min-height: 374px;
}

/* Black panel behind the cards. In Figma this is a plain rounded rectangle
   that bleeds off the right edge, so it is drawn in CSS rather than shipped
   as an image. */
.bundle-carousel__panel {
    position: absolute;
    top: 0;
    left: 29.9%;
    right: 0;
    height: 100%;
    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
    background-color: var(--color-black);
}

.bundle-list {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 17px;
    padding-block: 41px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.bundle-list::-webkit-scrollbar {
    display: none;
}

.bundle-card {
    flex: 0 0 auto;
    width: 283px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 25px 40px;
    border: 0.5px solid var(--color-bundle-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-bundle);
    scroll-snap-align: start;
}

.bundle-card__size {
    color: var(--color-accent);
    font-size: 2.875rem;
    font-weight: 800;
    line-height: normal;
}

.bundle-card__price {
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
}

.bundle-card__validity {
    font-size: 0.625rem;
    font-weight: 400;
    line-height: normal;
}

.bundle-card__usage {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
}

.bundle-card__action {
    margin-top: 8px;
}

/* Desktop uses the arrow controls; mobile uses the dot indicator. */
.bundle-carousel__controls {
    display: none;
}

.carousel-dots {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.carousel-dots__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-dot-idle);
    transition: background-color var(--transition-base);
}

.carousel-dots__dot.is-active {
    background-image: var(--gradient-icon);
}

.carousel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-base);
}

.carousel-button:hover:not(:disabled) {
    opacity: 1;
}

.carousel-button:disabled {
    opacity: 0.25;
    cursor: default;
}

.carousel-button img {
    width: 32px;
    height: 32px;
}

@media (min-width: 768px) {
    .bundle-section {
        padding-block: 20px;
    }

    .bundle-section > .content-wrapper {
        gap: 14px;
    }

    .bundle-section .section-eyebrow {
        display: block;
    }

    .section-lead {
        font-size: 1rem;
        font-weight: 500;
    }

    .bundle-carousel {
        margin-top: 33px;
        min-height: 492px;
        padding-bottom: 28px;
    }

    .bundle-carousel__panel {
        top: 6px;
        left: 42.19%;
        height: 486px;
    }

    .bundle-list {
        padding-block: 96px 20px;
    }

    .bundle-card__action {
        display: none;
    }

    .bundle-carousel__controls {
        position: absolute;
        top: 432px;
        left: 50.59%;
        z-index: 2;
        display: flex;
        gap: 10px;
    }

    .carousel-dots {
        display: none;
    }
}

/* -------------------------- How it works section ------------------------- */
.steps-section {
    background-image: var(--gradient-brand-diagonal);
    overflow: hidden;
    padding-block: 40px;
}

.steps-section > .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.steps-list {
    display: grid;
    gap: 20px;
    width: 100%;
    margin-top: 26px;
}

@media (min-width: 600px) {
    .steps-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .steps-section {
        background-image: var(--gradient-brand);
    }

    /* The desktop frame sets this one heading to Bold 700 where every other
       section heading is ExtraBold 800 - preserved as designed. */
    .steps-section .section-heading {
        font-weight: 700;
    }
}

@media (min-width: 900px) {
    .steps-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    /* The desktop frame gives this row a 1330px track (a 55px gutter rather
       than the page's 87px), which is what makes the five cards 250px wide. */
    .steps-section > .content-wrapper {
        max-width: calc(var(--steps-max-width) + (2 * 55px));
        padding-inline: 55px;
    }

    .steps-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: var(--steps-max-width);
        margin-inline: auto;
    }

    .step-card {
        min-height: 291px;
    }
}

/* --------------------------- Download section ---------------------------- */
.download-section {
    padding-block: 40px;
}

.download-section__inner {
    display: grid;
    gap: 16px;
    padding-inline: var(--page-gutter);
}

/* The mobile frame drops the photograph entirely. */
.download-section__media {
    display: none;
}

.download-section__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.download-section__lead {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefit-list__item {
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
}

.benefit-list__icon {
    width: 25px;
    height: 25px;
    flex: none;
}

.download-section__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.download-section__cta-label {
    color: var(--color-black);
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
}

.app-badge-list {
    display: flex;
    flex-direction: column;
    gap: 35.5px;
}

.app-badge-list__link {
    display: block;
    width: 100%;
    max-width: 322px;
    border-radius: 8px;
}

.app-badge-list__link img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    /* 502fr / 808fr keeps the frame's exact column ratio at every width: at
       1440px the free space is precisely 502 + 808, and below that both
       columns shrink together instead of overflowing. */
    .download-section__inner {
        grid-template-columns: minmax(0, 502fr) minmax(0, 808fr);
        gap: clamp(40px, 6.4vw, 92px);
        align-items: center;
        padding-left: 0;
        padding-right: var(--page-gutter);
    }

    /* Gradient shape that bleeds off the left edge of the viewport. */
    .download-section__media {
        position: relative;
        display: block;
        aspect-ratio: 502 / 362;
        border-radius: 0 var(--radius-app-shape) var(--radius-app-shape) 0;
        background-image: var(--gradient-brand);
    }

    /* Percentages of the shape so the portrait scales with it and keeps the
       designed overhang above the top edge. */
    .download-section__photo {
        position: absolute;
        left: 20.08%;
        top: -7.68%;
        width: 66.76%;
        height: 107.94%;
        max-width: none;
        object-fit: cover;
        object-position: 50% 2.8%;
        transform: scaleX(-1);
    }

    .download-section__content {
        min-width: 0;
    }

    .download-section__lead {
        max-width: 618px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

    .benefit-list__item {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

    .app-badge-list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 19.4px;
    }

    .app-badge-list__link {
        width: auto;
        max-width: none;
    }

    .app-badge-list__link img {
        width: 176px;
        height: auto;
    }
}

@media (min-width: 1440px) {
    /* The desktop frame runs the copy column to 808px, leaving a 38px margin
       on the right rather than the page's 87px gutter. With the 92px gap this
       makes the two tracks resolve to exactly 502px and 808px. */
    .download-section__inner {
        gap: 92px;
        padding-right: 38px;
    }
}

/* ---------------------- Interior page header (legal) ---------------------
   Not in the Figma frames: the privacy policy page is an extension of the
   design system, reusing the brand gradient, heading scale and eyebrow
   treatment already established by the "How MegaTel works" section. */
.page-header {
    background-image: var(--gradient-brand-diagonal);
    padding-block: 32px;
}

@media (min-width: 768px) {
    .page-header {
        background-image: var(--gradient-brand);
        padding-block: 48px;
    }
}

.breadcrumb {
    margin-bottom: 12px;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: 500;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.55);
}

.breadcrumb__item a {
    border-radius: 3px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb__item[aria-current="page"] {
    color: var(--color-white);
    font-weight: 700;
}

/* ------------------------------ Legal content ---------------------------- */
.legal-section {
    padding-block: 32px 48px;
}

.legal-list {
    /* ~75 characters keeps long policy text comfortably readable */
    max-width: 74ch;
    list-style: decimal;
    padding-left: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.65;
}

.legal-list > li::marker {
    color: var(--color-accent);
    font-weight: 700;
}

.legal-list p + p,
.legal-list__sub + p {
    margin-top: 0.75rem;
}

.legal-list__sub {
    list-style: lower-alpha;
    padding-left: 1.5rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legal-list a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.legal-list a:hover {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .legal-section {
        padding-block: 48px 64px;
    }

    .legal-list {
        font-size: 1rem;
        gap: 1.5rem;
    }
}

/* -------------------------------- Footer -------------------------------- */
.site-footer {
    background-color: var(--color-white);
    padding-block: 16px;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "logo   social"
        "copy   social"
        "legal  social";
    align-items: center;
    gap: 6px 16px;
    padding-top: 28px;
    position: relative;
}

/* Gradient hairline divider (#2BA7D8 -> #1D325B in the design). */
.site-footer__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--page-gutter);
    right: var(--page-gutter);
    height: 1px;
    background-image: var(--gradient-divider);
}

.site-footer__logo {
    grid-area: logo;
    width: 111px;
    height: 28.2px;
    object-fit: contain;
}

.site-footer__copyright {
    grid-area: copy;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}

.site-footer__meta {
    display: contents;
}

.site-footer__legal-link {
    grid-area: legal;
    justify-self: start;
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 3px;
}

.site-footer__legal-link:hover {
    text-decoration: underline;
}

.social-list {
    grid-area: social;
    align-self: start;
    display: flex;
    gap: 7px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Gradient ring: the design strokes these buttons #2BA7D8 -> #2B519A. */
    background-image: linear-gradient(var(--color-white), var(--color-white)), var(--gradient-icon);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border: 1px solid transparent;
    transition: filter var(--transition-base);
}

.social-link:hover {
    filter: brightness(0.94);
}

@media (min-width: 768px) {
    .site-footer {
        padding-block: 0 61px;
    }

    .site-footer__inner {
        grid-template-columns: none;
        grid-template-areas: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding-top: 43px;
    }

    .site-footer__meta {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .site-footer__logo {
        width: 126px;
        height: 32px;
    }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bundle-list {
        scroll-behavior: auto;
    }
}