/* ==========================================================
   MLNU WEBSITE
   structures.css

   Version: 3.0 — 17 September 2026

   PURPOSE
   ----------------------------------------------------------
   Shared structural authority for all MLNU language pages.

   LOAD ORDER
   ----------------------------------------------------------
   1. variables.css
   2. styles.css
   3. structures.css

   ARCHITECTURE
   ----------------------------------------------------------
   HTML             = content / translations
   variables.css    = design tokens
   styles.css       = generic reusable styling
   structures.css   = page structure / geometry / responsive
                      behaviour

   IMPORTANT
   ----------------------------------------------------------
   No new variable namespace is introduced.
   Existing variable vocabulary is retained.
   No HTML changes are required by this stylesheet.
========================================================== */


/* ==========================================================
   01. GLOBAL STRUCTURAL FOUNDATION
========================================================== */

html {

    width:100%;
    min-width:320px;

    overflow-x:hidden;

    scroll-behavior:smooth;
}


body {

    width:100%;
    min-width:320px;

    margin:0;
    padding:0;

    background:var(--bg-body);
    color:var(--color-text);

    overflow-x:hidden;
}


main {

    width:100%;

    display:block;
}


section {

    width:100%;

    position:relative;
}


img {

    max-width:100%;
}


/* ==========================================================
   02. CONTAINER
========================================================== */

.container {

    width:min(
        var(--container-width),
        100%
    );

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:var(--container-padding);
}


/* ==========================================================
   03. TYPOGRAPHY FOUNDATION
========================================================== */

h1,
h2,
h3,
h4 {

    font-family:var(--font-heading);

    color:var(--color-primary);
}


p,
li,
a,
button {

    font-family:var(--font-body);
}


.section-label {

    display:block;

    color:var(--color-secondary);

    font-family:var(--font-body);

    font-size:var(--section-label-font-size);

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;
}


/* ==========================================================
   04. HEADER
========================================================== */

.header {

    position:fixed;

    top:0;
    left:0;
    right:0;

    width:100%;
    height:var(--header-height);

    background:#ffffff;

    z-index:var(--z-header);

    box-shadow:none;

    transition:
        background var(--transition),
        box-shadow var(--transition);
}


.header-scrolled {

    background:#ffffff;

    box-shadow:
        0 4px 20px rgba(0,0,0,.08);
}


.header > .container {

    height:100%;
}


.navbar {

    position:relative;

    width:100%;
    height:var(--header-height);

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:1.5rem;
}


.logo {

    display:flex;

    align-items:center;

    flex:0 0 auto;
}


.logo img {

    display:block;

    width:auto;
    max-width:none;

    height:58px;

    object-fit:contain;
}


/* ==========================================================
   05. DESKTOP NAVIGATION BASE
========================================================== */

.nav-links {

    display:flex;

    align-items:center;
    justify-content:center;

    gap:1.35rem;

    flex:1 1 auto;

    margin:0;
    padding:0;

    list-style:none;
}


.nav-links > li {

    position:relative;

    width:auto;
}


.nav-links > li > a {

    position:relative;

    display:block;

    width:auto;

    padding:.5rem 0;

    color:var(--color-primary);

    font-size:.95rem;
    font-weight:500;

    line-height:1.3;

    white-space:nowrap;

    border:0;

    transition:
        color var(--transition-fast);
}


.nav-links > li > a::after {

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:2px;

    background:var(--color-secondary);

    transition:
        width var(--transition-fast);
}


.nav-links > li > a:hover {

    color:var(--color-secondary);
}


.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {

    width:100%;
}


.nav-links > li > a.active {

    color:var(--color-secondary);
}


/* ==========================================================
   06. HEADER ACTIONS
========================================================== */

.nav-actions {

    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:.75rem;

    flex:0 0 auto;
}


.nav-actions .btn {

    flex:0 0 auto;
}


/* ==========================================================
   07. MOBILE TOGGLE BASE
========================================================== */

.mobile-toggle {

    display:none;

    flex:0 0 auto;

    padding:.5rem;

    color:var(--color-primary);

    background:transparent;

    border:0;

    font-size:2rem;

    line-height:1;

    cursor:pointer;
}


.mobile-toggle:hover {

    color:var(--color-secondary);
}


/* ==========================================================
   08. STANDARD HERO STRUCTURE
========================================================== */

.hero,
.opportunity-hero {

    width:100%;

    background:var(--bg-body);
}


.opportunity-hero {

    min-height:calc(100vh - var(--header-height));

    padding:
        calc(var(--header-height) + 5rem)
        0
        5rem;
}


.hero-grid {

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(0,.9fr);

    gap:4rem;

    align-items:center;
}


.hero-content {

    min-width:0;

    margin:0;

    text-align:left;
}


.hero-content p {

    max-width:720px;

    margin-left:0;
    margin-right:0;
}


.hero-image {

    width:100%;
    max-width:var(--hero-image-max-width);

    margin-inline:auto;

    display:flex;

    align-items:center;
    justify-content:center;
}


.hero-image img {

    display:block;

    width:100%;
    max-width:var(--hero-image-max-width);

    height:auto;

    object-fit:contain;
}


.hero-buttons {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;
}


/* ==========================================================
   09. GOLD STATEMENT
========================================================== */

.gold-statement {

    width:100%;

    padding:4rem 0;

    background:var(--color-primary);

    color:#ffffff;

    text-align:center;
}


.gold-statement h2 {

    max-width:var(--heading-max-width);

    margin:
        0 auto 1rem;

    color:#ffffff;
}


.gold-statement p {

    max-width:var(--copy-max-width);

    margin-inline:auto;

    color:var(--color-text-light);
}


/* ==========================================================
   10. FEATURE GRID
========================================================== */

.feature-grid {

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:2rem;

    align-items:stretch;
}


.feature-card {

    min-width:0;

    text-align:center;
}


.feature-number {

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:64px;
    height:64px;

    margin-bottom:1.25rem;

    border-radius:50%;

    background:var(--color-secondary);
    color:var(--color-primary);

    font-size:1.2rem;
    font-weight:700;
}


.feature-card h3 {

    margin-bottom:.75rem;

    color:var(--color-primary);
}


/* ==========================================================
   11. PARTNER GRID
========================================================== */

.partner-grid {

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:4rem;

    align-items:center;
}


.partner-content {

    min-width:0;
}


.partner-content h2 {

    margin-bottom:1.25rem;
}


.partner-content p {

    font-size:1.08rem;
}


.partner-card {

    min-width:0;

    padding:2.5rem;

    background:#ffffff;

    border-radius:var(--card-radius);

    box-shadow:var(--shadow-lg);

    color:var(--color-text-on-light);
}


.partner-card h3 {

    margin-bottom:1rem;

    color:var(--color-primary);
}


.partner-card ul {

    margin:0;

    padding-left:1.25rem;
}


.partner-card li {

    margin-bottom:.75rem;

    color:var(--color-text-on-light);
}


.partner-card li:last-child {

    margin-bottom:0;
}


/* ==========================================================
   12. PROCESS / HOW IT WORKS
========================================================== */

.process-grid {

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:2rem;

    margin-top:4rem;

    align-items:start;
}


.process-step {

    min-width:0;

    position:relative;

    text-align:center;
}


.process-step-number {

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:70px;
    height:70px;

    margin-bottom:1rem;

    border-radius:50%;

    background:var(--color-secondary);
    color:var(--color-primary);

    font-weight:700;
}


.process-step h3 {

    margin-bottom:.75rem;

    color:var(--color-primary);
}


/* ==========================================================
   13. MICRO-FRANCHISE
========================================================== */

.micro-franchise {

    width:100%;

    background:var(--bg-alt);
}


.micro-franchise-card {

    width:100%;
    max-width:var(--micro-franchise-max-width);

    margin-inline:auto;

    padding:3rem;

    text-align:center;

    background:#ffffff;

    border-radius:var(--card-radius);

    box-shadow:var(--shadow-md);

    color:var(--color-text-on-light);
}


.micro-franchise-card h2 {

    margin-bottom:1.25rem;
}


.micro-franchise-card p {

    max-width:var(--copy-max-width);

    margin-left:auto;
    margin-right:auto;
}


/* ==========================================================
   14. INDEPENDENCE
========================================================== */

.independence-grid {

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:2rem;

    margin-top:3rem;

    align-items:stretch;
}


.independence-card {

    min-width:0;

    padding:2rem;

    background:#ffffff;

    border-radius:var(--card-radius);

    box-shadow:var(--shadow-md);

    color:var(--color-text-on-light);
}


.independence-card h3 {

    margin-bottom:1rem;

    color:var(--color-primary);
}


.independence-card ul {

    margin:0;

    padding-left:1.25rem;
}


.independence-card li {

    margin-bottom:.65rem;

    color:var(--color-text-on-light);
}


.independence-card li:last-child {

    margin-bottom:0;
}


/* ==========================================================
   15. INFORMATION SESSION
========================================================== */

.information-session {

    width:100%;

    background:var(--color-primary);

    color:#ffffff;
}


.information-session h2 {

    color:#ffffff;
}


.information-session p {

    color:var(--color-text-light);
}


.session-card {

    width:100%;
    max-width:var(--session-max-width);

    margin-inline:auto;

    text-align:center;
}


.profile-instructions {

    width:100%;

    margin:2rem 0;

    padding:2rem;

    background:rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:var(--card-radius);
}


.profile-instructions h3 {

    margin-bottom:1rem;

    color:#ffffff;
}


.profile-instructions p {

    margin-bottom:.75rem;
}


.email-address {

    color:var(--color-secondary);

    font-size:1.25rem;

    font-weight:700;

    word-break:break-word;
}


/* ==========================================================
   16. DISCLOSURE
========================================================== */

.disclosure-box {

    width:100%;

    margin-top:2rem;

    padding:1.5rem;

    background:var(--disclosure-background);

    border:
        1px solid
        var(--disclosure-border);

    border-radius:var(--radius-md);

    color:var(--color-text-light);
}


.disclosure-box h3 {

    margin-bottom:.75rem;

    color:var(--color-secondary);
}


.disclosure-box p {

    color:var(--color-text-light);
}


/* ==========================================================
   17. SECTION STRUCTURE
========================================================== */

.section {

    width:100%;

    padding:var(--space-11) 0;
}


.section-alt {

    background:var(--bg-alt);
}


.section-header {

    width:100%;
    max-width:800px;

    margin:
        0 auto 3rem;

    text-align:center;
}


.section-header h2 {

    margin-bottom:1rem;

    color:var(--color-primary);
}


.section-header p {

    max-width:700px;

    margin-inline:auto;
}


/* ==========================================================
   18. REVIEW TICKER
========================================================== */

.review-ticker {

    width:100%;

    padding:3rem 0;

    overflow:hidden;
}


.review-ticker-track {

    width:max-content;
    max-width:none;

    display:flex;

    align-items:flex-start;

    flex-wrap:nowrap;

    gap:var(--review-gap);

    animation:
        review-scroll 55s linear infinite;

    will-change:transform;
}


.review-ticker-track img {

    display:block;

    width:var(--review-width);
    min-width:var(--review-width);
    max-width:var(--review-width);

    height:var(--review-height);
    max-height:var(--review-height);

    flex:
        0 0 var(--review-width);

    object-fit:contain;

    border-radius:var(--radius-md);
}


@keyframes review-scroll {

    from {

        transform:translateX(0);

    }

    to {

        transform:translateX(-50%);

    }

}


/* ==========================================================
   19. FOOTER STRUCTURE
========================================================== */

.footer {

    width:100%;

    padding:
        4rem
        0
        2rem;

    background:var(--color-primary);

    color:#ffffff;
}


.footer-content {

    display:block;

    width:100%;
    max-width:var(--container-width);

    margin-inline:auto;

    text-align:center;
}


.footer-logo {

    display:block;

    width:auto;
    max-width:180px;

    margin:
        0 auto 1.5rem;
}


.footer-links {

    display:flex;

    flex-direction:row;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:1.5rem;

    margin:2rem 0;
}


.footer-buttons {

    display:flex;

    flex-direction:row;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-bottom:2rem;
}


/* ==========================================================
   20. LANGUAGE SELECTOR
========================================================== */

.nav-language-item {

    position:relative;

    display:flex;

    align-items:center;

    width:auto;

    flex:0 0 auto;
}


.nav-language-item .mlnu-language-selector {

    position:relative;

    display:inline-flex;

    align-items:center;

    width:auto;
}


.mlnu-language-button {

    appearance:none;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:auto;

    margin:0;

    padding:.75rem .5rem;

    background:transparent;

    border:0;

    color:var(--color-primary);

    font-family:var(--font-body);

    font-size:.95rem;

    line-height:1.2;

    white-space:nowrap;

    cursor:pointer;
}


.mlnu-language-button:hover {

    color:var(--color-secondary);
}


.mlnu-language-button:focus-visible {

    outline:
        2px solid
        var(--color-secondary);

    outline-offset:3px;

    border-radius:6px;
}


.mlnu-language-dropdown {

    position:absolute;

    top:calc(100% + 8px);
    right:0;

    width:max-content;
    min-width:170px;
    max-width:260px;

    padding:.5rem;

    display:none;

    background:#ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-lg);

    z-index:var(--z-dropdown);
}


.mlnu-language-selector.is-open
.mlnu-language-dropdown {

    display:block;
}


.mlnu-language-option {

    display:block;

    width:100%;

    margin:0;

    padding:.75rem 1rem;

    background:transparent;

    border:0;

    border-radius:6px;

    color:var(--color-primary);

    font-family:var(--font-body);

    font-size:.95rem;

    font-weight:500;

    line-height:1.3;

    text-align:left;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;
}


.mlnu-language-option:hover {

    background:var(--bg-alt);

    color:var(--color-primary);
}


.mlnu-language-option.current-language {

    color:var(--color-secondary);

    font-weight:700;
}


/* ==========================================================
   21. DESKTOP STRUCTURAL AUTHORITY
========================================================== */

@media (min-width:901px) {

    html,
    body {

        background:var(--bg-body);
    }


    body {

        color:var(--color-text);
    }


    .header {

        background:#ffffff;
    }


    .navbar {

        display:flex;

        flex-direction:row;

        align-items:center;
        justify-content:space-between;
    }


    .nav-links {

        display:flex;

        flex-direction:row;

        align-items:center;
        justify-content:center;

        width:auto;

        position:static;

        flex:1 1 auto;

        background:transparent;

        border:0;

        box-shadow:none;
    }


    .nav-links > li {

        width:auto;
    }


    .nav-links > li > a {

        display:block;

        text-align:left;

        border:0;
    }


    .nav-actions {

        display:flex;

        position:static;

        width:auto;

        flex-direction:row;

        align-items:center;
        justify-content:flex-end;

        padding:0;

        background:transparent;

        box-shadow:none;
    }


    .mobile-toggle {

        display:none !important;
    }


    .opportunity-hero {

        min-height:calc(100vh - var(--header-height));

        padding:
            calc(var(--header-height) + 5rem)
            0
            5rem;
    }


    .hero-grid {

        grid-template-columns:
            minmax(0,1.1fr)
            minmax(0,.9fr);

        gap:4rem;

        text-align:left;
    }


    .hero-content {

        margin:0;

        text-align:left;
    }


    .hero-content p {

        margin-left:0;
        margin-right:0;
    }


    .hero-image {

        margin-inline:auto;
    }


    .feature-grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:2rem;
    }


    .partner-grid {

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:4rem;
    }


    .process-grid {

        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:2rem;
    }


    .independence-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:2rem;
    }


    .micro-franchise-card {

        width:100%;
        max-width:var(--micro-franchise-max-width);
    }


    .session-card {

        width:100%;
        max-width:var(--session-max-width);
    }


    .review-ticker {

        width:100%;

        overflow:hidden;
    }


    .review-ticker-track {

        width:max-content;
        max-width:none;

        flex-wrap:nowrap;
    }


    .review-ticker-track img {

        width:var(--review-width);
        min-width:var(--review-width);
        max-width:var(--review-width);

        height:var(--review-height);
        max-height:var(--review-height);

        flex:
            0 0 var(--review-width);
    }


    .nav-language-item {

        display:flex;

        width:auto;
    }


    .nav-language-item .mlnu-language-selector {

        display:inline-flex;

        width:auto;
    }


    .nav-language-item .mlnu-language-button {

        display:inline-flex;

        width:auto;

        padding:.75rem .5rem;

        text-align:center;

        border:0;
    }


    .nav-language-item .mlnu-language-dropdown {

        position:absolute;

        top:calc(100% + 8px);
        right:0;

        width:max-content;
        min-width:170px;

        padding:.5rem;

        background:#ffffff;

        border:
            1px solid
            var(--color-border);

        border-radius:var(--radius-md);

        box-shadow:var(--shadow-lg);
    }


    .nav-language-item .mlnu-language-option {

        width:100%;

        padding:.75rem 1rem;

        text-align:left;

        border:0;
    }

}


/* ==========================================================
   22. LARGE DESKTOP
========================================================== */

@media (min-width:1200px) {

    .hero-grid {

        gap:5rem;
    }


    .hero-image {

        max-width:var(--hero-image-max-width);
    }


    .opportunity-hero .hero-image {

        max-width:var(--hero-image-max-width);
    }


    .section-header {

        max-width:800px;
    }


    .micro-franchise-card {

        max-width:var(--micro-franchise-max-width);
    }


    .session-card {

        max-width:var(--session-max-width);
    }


    .review-ticker-track img {

        width:var(--review-width);
        max-width:var(--review-width);
        min-width:var(--review-width);

        height:var(--review-height);
        max-height:var(--review-height);
    }

}


/* ==========================================================
   23. TABLET / SMALL DESKTOP
========================================================== */

@media (min-width:901px) and (max-width:1100px) {

    .hero-grid {

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:2.5rem;

        text-align:left;
    }


    .hero-content {

        margin:0;

        text-align:left;
    }


    .hero-content p {

        margin-left:0;
        margin-right:0;
    }


    .feature-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .process-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        row-gap:3rem;
    }


    .partner-grid {

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:2.5rem;
    }


    .independence-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .nav-links {

        gap:.9rem;
    }


    .nav-links > li > a,
    .mlnu-language-button {

        font-size:.85rem;
    }


    .nav-actions {

        gap:.5rem;
    }


    .nav-actions .btn {

        padding:
            0 1rem;

        font-size:.85rem;
    }

}


/* ==========================================================
   24. MOBILE
========================================================== */

@media (max-width:900px) {

    .header {

        height:var(--header-height);

        background:#ffffff;
    }


    .navbar {

        height:var(--header-height);

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:1rem;
    }


    .logo img {

        width:auto;
        max-width:none;

        height:48px;
    }


    .mobile-toggle {

        display:block !important;

        margin-left:auto;

        color:var(--color-primary);

        background:transparent;
    }


    .nav-links {

        position:absolute;

        top:100%;
        left:0;
        right:0;

        width:100%;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        margin:0;

        padding:
            1rem
            1.5rem
            1.5rem;

        background:#ffffff;

        box-shadow:var(--shadow-md);

        border-top:
            1px solid
            var(--color-border);

        z-index:var(--z-dropdown);
		
	    max-height:calc(100vh - var(--header-height));

		overflow-y:auto;

		-webkit-overflow-scrolling:touch;
    }


    .nav-links.nav-open {

        display:flex;
    }


    .nav-links > li {

        width:100%;
    }


    .nav-links > li > a {

        display:block;

        width:100%;

        padding:1rem;

        text-align:center;

        border-bottom:
            1px solid
            var(--color-border);
    }


    .nav-links > li > a::after {

        display:none;
    }


    .nav-actions {

        display:none;
    }


    /* ------------------------------------------------------
       Mobile language selector
    ------------------------------------------------------ */

    .nav-language-item {

        display:block;

        width:100%;
    }


    .nav-language-item .mlnu-language-selector {

        display:block;

        width:100%;

        padding:.25rem 0;
    }


    .nav-language-item .mlnu-language-button {

        display:block;

        width:100%;

        padding:1rem;

        text-align:center;

        font-size:1rem;

        border-bottom:
            1px solid
            var(--color-border);
    }


    .nav-language-item .mlnu-language-dropdown {

        position:static;

        width:100%;
        min-width:0;
        max-width:none;

        margin-top:0;

        padding:0;

        background:#ffffff;

        border:0;

        border-radius:0;

        box-shadow:none;
    }


    .nav-language-item .mlnu-language-option {

        display:block;

        width:100%;

        padding:.85rem 1rem;

        text-align:center;

        border-bottom:
            1px solid
            var(--color-border);
    }


    /* ------------------------------------------------------
       Mobile hero
    ------------------------------------------------------ */

    .opportunity-hero {

        min-height:auto;

        padding:
            calc(var(--header-height) + 3rem)
            0
            4rem;
    }


    .hero-grid {

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;
    }


    .hero-content {

        margin-inline:auto;

        text-align:center;
    }


    .hero-content p {

        margin-inline:auto;
    }


    .hero-image {

        width:100%;
        max-width:600px;

        margin-inline:auto;
    }


    .hero-image img {

        width:100%;
        max-width:600px;
    }


    .hero-buttons {

        justify-content:center;
    }


    /* ------------------------------------------------------
       Mobile grids
    ------------------------------------------------------ */

    .feature-grid {

        grid-template-columns:1fr;
    }


    .process-grid {

        grid-template-columns:1fr;
    }


    .partner-grid {

        grid-template-columns:1fr;

        gap:2rem;
    }


    .independence-grid {

        grid-template-columns:1fr;
    }


    /* ------------------------------------------------------
       Mobile content cards
    ------------------------------------------------------ */

    .micro-franchise-card {

        padding:
            2rem
            1.5rem;
    }


    .review-ticker {

        padding:2.5rem 0;
    }


    .review-ticker-track {

        gap:var(--review-gap);

        animation-duration:55s;
    }


    .review-ticker-track img {

        width:var(--review-width-mobile);
        max-width:var(--review-width-mobile);
        min-width:var(--review-width-mobile);

        height:var(--review-height-mobile);
        max-height:var(--review-height-mobile);

        flex:
            0 0 var(--review-width-mobile);
    }


    /* ------------------------------------------------------
       Mobile footer
    ------------------------------------------------------ */

    .footer {

        padding:
            3rem
            0
            1.5rem;
    }


    .footer-links {

        flex-direction:column;

        gap:1rem;
    }


    .footer-buttons {

        flex-direction:column;

        gap:.75rem;
    }

}


/* ==========================================================
   25. SMALL MOBILE
========================================================== */

@media (max-width:480px) {

    .container {

        padding-inline:1rem;
    }


    .hero-buttons {

        flex-direction:column;

        align-items:stretch;
    }


    .hero-buttons .btn {

        width:100%;
    }


    .review-ticker > .btn {

        width:auto;

        max-width:calc(100% - 2rem);
    }


    .profile-instructions {

        padding:1.5rem;
    }


    .disclosure-box {

        padding:1.25rem;
    }

}


/* ==========================================================
   26. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    html {

        scroll-behavior:auto;
    }


    .review-ticker-track {

        animation:none;

        transform:none;
    }


    .btn,
    .card,
    img {

        transition:none;
    }

}


/* ==========================================================
   END OF STRUCTURES.CSS
========================================================== */