/*
 * ChildCareCompass page legacy styles — extracted from Foundation 5
 * (c4k.css), app.css, page-quiz.css, vendor/magic.css.
 *
 * Same isolation strategy as other migrated pages: `@scope (.legacy-content)`
 * + `@layer base / components` + unlayered .button. TopNav/Footer (outside
 * the wrapper) stay on Tailwind v4 via site-v4.min.css.
 *
 * PHASE 1 — Foundation grid + minimal utilities + hero (.quiz-background,
 *           .quiz-title) + .button. Orbit slider and quiz-question internals
 *           come in phases 2 and 3.
 *
 * Image url() paths rewritten to absolute (/content/assets/...) because
 * this file lives at /css/pages/ not /content/assets/css/.
 */

:root {
    --c4k-dark-purple: var(--c4k-dark-purple, #231673);
}

/* ============================================================
   BASE LAYER — preflight compat + Foundation element defaults
   ============================================================ */
@layer base {
    @scope (.legacy-content) {
        *,
        ::before,
        ::after {
            border-color: #e5e7eb;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-rotate: 0;
            --tw-skew-x: 0;
            --tw-skew-y: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scroll-snap-strictness: proximity;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ring-shadow: 0 0 #0000;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
        }

        ::before,
        ::after {
            --tw-content: "";
        }

        :scope {
            color: #231673;
            font-family: "Nunito", sans-serif;
            font-weight: 300;
            font-size: 100%;
            line-height: 1;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            word-wrap: break-word;
        }

        /* Headings — Nunito (same as body) per project preference,
           with c4k.css:8793 uppercase override. */
        h1, h2, h3, h4, h5, h6 {
            font-family: "Nunito", sans-serif;
            font-weight: bold;
            color: #231673;
            text-rendering: optimizeLegibility;
            margin-top: 0.2rem;
            margin-bottom: 0.5rem;
            line-height: 1.4;
            text-transform: uppercase;
        }
        h1 { font-size: 2rem; }
        h2 { font-size: 1.625rem; margin-bottom: 30px; }
        h3 { font-size: 1.5625rem; line-height: 32px; }
        h4 { font-size: 1.1875rem; }
        h5 { font-size: 1.125rem; }
        h6 { font-size: 0.875rem; }

        p {
            font-family: inherit;
            font-weight: 300;
            font-size: 1.125rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
        }

        a {
            color: #231673;
            text-decoration: none;
            line-height: inherit;
        }

        img {
            display: inline-block;
            vertical-align: middle;
            max-width: 100%;
            height: auto;
            border: none;
        }

        /* Form element reset — radio/label used in quiz answers */
        form {
            margin: 0 0 1rem;
        }
    }
}

/* ============================================================
   COMPONENTS LAYER — grid, utilities, hero section
   ============================================================ */
@layer components {
    @scope (.legacy-content) {
        /* ----------------------------------------
           Foundation grid (c4k.css 121 + 8784 override) */
        .row {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;
            max-width: 62.5rem;
        }

        .row {
            max-width: 1396px !important;
            width: 1396px;
        }

        .row:before,
        .row:after {
            content: " ";
            display: table;
        }

        .row:after { clear: both; }

        .row .row {
            width: auto;
            margin-left: -0.9375rem;
            margin-right: -0.9375rem;
            max-width: none;
        }

        .row .row:before,
        .row .row:after {
            content: " ";
            display: table;
        }

        .row .row:after { clear: both; }

        .column,
        .columns {
            padding-left: 0.9375rem;
            padding-right: 0.9375rem;
            width: 100%;
            float: left;
            position: relative;
        }

        [class*="column"] + [class*="column"]:last-child { float: right; }
        [class*="column"] + [class*="column"].end { float: left; }

        @media only screen {
            .small-1 { width: 8.33333%; }
            .small-2 { width: 16.66667%; }
            .small-3 { width: 25%; }
            .small-4 { width: 33.33333%; }
            .small-5 { width: 41.66667%; }
            .small-6 { width: 50%; }
            .small-7 { width: 58.33333%; }
            .small-8 { width: 66.66667%; }
            .small-9 { width: 75%; }
            .small-10 { width: 83.33333%; }
            .small-11 { width: 91.66667%; }
            .small-12 { width: 100%; }
        }

        @media only screen and (min-width: 990px) {
            .medium-1 { width: 8.33333%; }
            .medium-2 { width: 16.66667%; }
            .medium-3 { width: 25%; }
            .medium-4 { width: 33.33333%; }
            .medium-5 { width: 41.66667%; }
            .medium-6 { width: 50%; }
            .medium-7 { width: 58.33333%; }
            .medium-8 { width: 66.66667%; }
            .medium-9 { width: 75%; }
            .medium-10 { width: 83.33333%; }
            .medium-11 { width: 91.66667%; }
            .medium-12 { width: 100%; }
        }

        @media only screen and (min-width: 1396px) {
            .large-1 { width: 8.33333%; }
            .large-2 { width: 16.66667%; }
            .large-3 { width: 25%; }
            .large-4 { width: 33.33333%; }
            .large-5 { width: 41.66667%; }
            .large-6 { width: 50%; }
            .large-7 { width: 58.33333%; }
            .large-8 { width: 66.66667%; }
            .large-9 { width: 75%; }
            .large-10 { width: 83.33333%; }
            .large-11 { width: 91.66667%; }
            .large-12 { width: 100%; }
        }

        /* ----------------------------------------
           Hero section (page-quiz.css 65 + 252).
           .quiz-background — full-page background image + padding.
           .quiz-title — centred h1 + p above the slider. */
        .quiz-background {
            background-image: url("/content/assets/img/quiz-bg.jpg");
            background-position: center right;
            background-size: cover;
            padding: 40px 0 80px 0;
        }

        .quiz-title {
            padding: 0 0 20px 0;
            text-align: center;
        }

        .quiz-title h1 {
            max-width: 580px;
            line-height: 1.1;
            margin: 0 auto 20px auto;
        }

        .quiz-title p {
            font-size: 20px;
            font-weight: 400;
        }

        /* ============================================================
           PHASE 2 — Foundation Orbit slider + quiz slider container.
           Orbit is a slideshow plugin (Foundation 5). `.orbit-container`
           wraps `.orbit-slides-container` (the <ul>) which has `.fade` /
           `.swipe-next` / `.swipe-prev` classes toggled by JS to animate
           between slides. Only `.active` slide is visible; others are
           `display: none` in the page-quiz overrides below.
           ============================================================ */

        /* Foundation Orbit base (c4k.css 3175+) */
        .orbit-container {
            overflow: hidden;
            width: 100%;
            position: relative;
            background: none;
        }

        .orbit-container .orbit-slides-container {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
            -webkit-transform: translateZ(0);
        }

        .orbit-container .orbit-slides-container img {
            display: block;
            max-width: 100%;
        }

        /* Fade transition (used by data-options="animation:fade") */
        .orbit-container .orbit-slides-container.fade > * {
            -webkit-transform: translate3d(0, 0, 0);
            opacity: 0.01;
            transition: opacity 0.25s ease-in-out;
        }

        .orbit-container .orbit-slides-container.fade > *.animate-in {
            opacity: 1;
            z-index: 20;
            transition: opacity 500ms ease-in-out;
        }

        .orbit-container .orbit-slides-container.fade > *.animate-out {
            opacity: 0.01;
            z-index: 10;
            transition: opacity 500ms ease-in-out;
        }

        /* Swipe-next transition */
        .orbit-container .orbit-slides-container.swipe-next > * {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }

        .orbit-container .orbit-slides-container.swipe-next > *.animate-in {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            transition-duration: 500ms;
        }

        .orbit-container .orbit-slides-container.swipe-next > *.animate-out {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
            transition-duration: 500ms;
        }

        /* Swipe-prev transition */
        .orbit-container .orbit-slides-container.swipe-prev > * {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }

        .orbit-container .orbit-slides-container.swipe-prev > *.animate-in {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            transition-duration: 500ms;
        }

        .orbit-container .orbit-slides-container.swipe-prev > *.animate-out {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            transition-duration: 500ms;
        }

        .orbit-container .orbit-slides-container > * {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }

        .orbit-container .orbit-slides-container > *.active {
            opacity: 1;
            top: 0;
            left: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        /* Hide timer + slide-number Orbit chrome — not used by quiz */
        .orbit-container .orbit-slide-number,
        .orbit-container .orbit-timer {
            display: none;
        }

        /* Orbit prev/next arrows — base. page-quiz.css overrides with
           custom #4ec4c3 bg + quiz-arrows.png sprite below. */
        .orbit-container .orbit-prev,
        .orbit-container .orbit-next {
            position: absolute;
            top: 45%;
            margin-top: -25px;
            width: 36px;
            height: 60px;
            line-height: 50px;
            color: white;
            text-indent: -9999px !important;
            z-index: 10;
        }

        .orbit-container .orbit-prev { left: 0; }
        .orbit-container .orbit-next { right: 0; }

        /* Bullets (pagination dots) — Foundation base */
        .orbit-bullets-container { text-align: center; }

        .orbit-bullets {
            margin: 0 auto 30px auto;
            overflow: hidden;
            position: relative;
            top: 10px;
            float: none;
            text-align: center;
            display: block;
        }

        .orbit-bullets li {
            display: inline-block;
            width: 0.5625rem;
            height: 0.5625rem;
            background: #73A0DF;
            float: none;
            margin-right: 6px;
            border-radius: 1000px;
        }

        .orbit-bullets li.active { background: #231673; }
        .orbit-bullets li:last-child { margin-right: 0; }

        /* Touch detection — hide arrows+bullets on touch devices unless
           viewport ≥ 990px (c4k.css 3469+). */
        .touch .orbit-container .orbit-prev,
        .touch .orbit-container .orbit-next,
        .touch .orbit-bullets {
            display: none;
        }

        @media only screen and (min-width: 990px) {
            .touch .orbit-container .orbit-prev,
            .touch .orbit-container .orbit-next {
                display: inherit;
            }
            .touch .orbit-bullets { display: block; }
        }

        /* ----------------------------------------
           page-quiz.css Orbit customisation (1-52, 85-142).
           Quiz has its own orbit-bullets styling + larger prev/next arrows. */
        .orbit-bullets-container {
            z-index: 9;
            position: relative;
            top: -25px;
        }

        .orbit-bullets-container li {
            background: #73A0DF;
            border: 5px solid #ebeee8;
            cursor: pointer;
            height: 35px;
            width: 35px;
            display: inline-block;
            float: none;
        }

        .orbit-bullets-container li.active { background: #231673; }

        .orbit-next,
        .orbit-prev { height: 71px !important; }

        .orbit-container .orbit-next {
            background-image: url("/content/assets/img/orbit-next.png");
            right: 15px;
        }

        .orbit-container .orbit-prev {
            background-image: url("/content/assets/img/orbit-prev.png");
            left: 15px;
        }

        .touch .orbit-bullets,
        .orbit-container .orbit-next,
        .orbit-container .orbit-prev {
            display: block !important;
        }

        /* Quiz-specific Orbit tweaks (page-quiz.css 85+) */
        .quiz-outer_container .orbit-container .orbit-prev,
        .quiz-outer_container .orbit-container .orbit-next {
            background: #4ec4c3 url("/content/assets/img/quiz-arrows.png") no-repeat;
            height: 50px !important;
            margin: -46px 0 0;
            top: 50%;
            width: 60px;
            display: none !important;
        }

        .quiz-outer_container .orbit-container .orbit-prev {
            background-position: 16px -120px;
            left: 0;
        }

        .quiz-outer_container .orbit-container .orbit-next {
            background-position: 26px 9px;
            right: 0;
        }

        .quiz-outer_container .orbit-bullets-container {
            background: rgba(78, 196, 195, 0.9);
            border-radius: 100px;
            display: table;
            margin: 0 auto;
            padding: 0 13px;
            top: -10px;
            z-index: 12;
            width: auto;
        }

        .quiz-outer_container .orbit-bullets-container li {
            border-width: 3px;
            height: 20px;
            width: 20px;
        }

        .quiz-outer_container .orbit-bullets {
            margin: 0 auto;
            padding: 10px 0 3px;
            top: 0;
        }

        .quiz-outer_container .orbit-bullets:before {
            background: rgba(255, 255, 255, 0);
            bottom: 0;
            content: '';
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }

        /* Quiz questions slider container (page-quiz.css 138+) */
        .quiz-outer_container .quiz-questions {
            margin: 0 50px;
            overflow: visible;
            z-index: 11;
        }

        .quiz-outer_container .quiz-questions > li {
            display: none;
            background: rgba(255, 255, 255, 0.7);
        }

        .quiz-outer_container .quiz-questions > li[class^="quiz-question"] {
            height: 100%;
        }

        .quiz-outer_container .quiz-questions > li.active {
            display: block;
        }

        /* Intro slide — wider than question slides, hangs off the left
           so .icon-quiz badge sits outside the slider margin. */
        .quiz-outer_container .quiz-questions > li.quiz-intro {
            background: rgba(255, 255, 255, 0.7);
            margin-left: -50px !important;
            width: 901px;
        }

        .quiz-outer_container .quiz-questions > li.quiz-intro p {
            font-size: 1rem;
            margin-bottom: 10px;
            text-align: center;
            font-weight: 400;
        }

        /* `.start-quiz` base display/margin is declared UNLAYERED at the
           bottom of this file (below the `.button` unlayered block) so it
           can beat `.button`'s `display: inline-block` + margin via
           specificity. Layered declaration here would always lose to the
           unlayered `.button`. */

        /* ============================================================
           PHASE 3 — Quiz question internals: icon-quiz, question_inner
           content, radio-as-button, jump-block navigation, responsive.
           ============================================================ */

        /* Magnifying glass icon — sits above the question title, half
           overlapping the top of the slide (negative margin-top).
           (page-quiz.css 73+) */
        .quiz-outer_container .icon-quiz {
            background: rgba(255, 255, 255, 0.7) url("/content/assets/img/ico-mag-glass.png") no-repeat center center;
            background-size: 35px;
            border-radius: 50px;
            display: block;
            margin: -5px auto 10px;
            position: relative;
            height: 60px;
            width: 60px;
            z-index: 13;
        }

        /* Question slide inner wrapper — padding around question text + answers
           (page-quiz.css 175+) */
        .quiz-outer_container .quiz-question_inner {
            padding: 25px;
            position: relative;
            z-index: 2;
        }

        .quiz-outer_container .quiz-question_inner h4 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            margin-top: 10px;
            text-align: center;
        }

        /* Radio-as-button pattern (page-quiz.css 188+).
           Hide native radios, style adjacent labels as blocks; when the
           radio is :checked, the label gets blue fill + white text.
           Works because each <input> is immediately followed by its <label>. */
        .quiz-outer_container .quiz-question_inner ul {
            list-style-type: none;
            margin: 0;
        }

        .quiz-outer_container .quiz-question_inner ul li + li {
            margin-top: 2px;
        }

        .quiz-outer_container .quiz-question_inner ul label {
            transition: all 1s;
            background: rgba(127, 197, 230, 0.4);
            display: block;
            font-size: 1rem;
            font-weight: normal;
            padding: 10px 15px;
        }

        .quiz-outer_container .quiz-question_inner ul label:hover {
            background: rgba(127, 197, 230, 0.8);
        }

        .quiz-outer_container .quiz-question_inner ul input {
            display: none;
        }

        .quiz-outer_container .quiz-question_inner ul input:checked + label {
            background: #73A0DF;
            color: white;
        }

        /* ----------------------------------------
           Jump-block navigation (page-quiz.css 222+).
           Absolute-positioned prev/next arrows on the right of each slide.
           Hidden by default (page-quiz.js toggles visibility per slide). */
        .quiz-outer_container .jump-block {
            bottom: 0;
            left: 0;
            position: absolute;
            top: 0;
            right: -50px;
            z-index: 1;
        }

        .quiz-outer_container .jump-block span {
            background: rgba(255, 255, 255, 0.7);
            bottom: 0;
            height: 50px;
            margin-top: -26px;
            position: absolute;
            top: 50%;
            width: 50px;
        }

        .quiz-outer_container .jump-block .jump-block_prev {
            left: 0;
            display: none;
        }

        .quiz-outer_container .jump-block .jump-block_next {
            right: 0;
            display: none;
        }

        /* ----------------------------------------
           Phase-3 responsive: medium (990-1395) + mobile (767) */
        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .quiz-outer_container .quiz-question_inner h4 {
                font-size: 1rem;
            }
            .quiz-outer_container .icon-quiz {
                display: none;
            }
        }

        @media only screen and (max-width: 767px) {
            .quiz-outer_container {
                padding: 0 0 10px 0;
            }

            /* Jump-block arrows — inset 15px on mobile instead of -50px */
            .quiz-outer_container .jump-block .jump-block_prev { left: 15px; }
            .quiz-outer_container .jump-block .jump-block_next { right: 15px; }

            .quiz-outer_container .jump-block span {
                height: 45px;
                width: 35px;
            }

            .quiz-outer_container .orbit-bullets-container { top: -10px; }

            /* Orbit arrows — smaller hit area on mobile */
            .quiz-outer_container .orbit-container .orbit-prev,
            .quiz-outer_container .orbit-container .orbit-next {
                background-size: 13px;
                height: 45px !important;
                width: 35px;
            }
            .quiz-outer_container .orbit-container .orbit-prev {
                background-position: 8px -67px;
            }
            .quiz-outer_container .orbit-container .orbit-next {
                background-position: 14px 13px;
            }

            .quiz-outer_container .quiz-question_inner h4 {
                font-size: 1.1rem;
            }

            .quiz-outer_container .quiz-question_inner ul label {
                line-height: 18px;
            }

            /* Icon-quiz shifts up on mobile (not hidden — different from 990-1395) */
            .quiz-outer_container .icon-quiz {
                margin-top: -15px;
            }

            .quiz-outer_container .quiz-questions {
                margin: 0 35px;
            }

            /* `.start-quiz` mobile font/padding — unlayered at bottom. */

            .quiz-outer_container .quiz-questions > li.quiz-intro p {
                font-size: 0.9rem;
                line-height: 1rem;
            }
        }

        /* ----------------------------------------
           Magic animation subset (magic.css 11+, 328+, 2780+).
           Only .magictime + .swap + @keyframes swap are used — page-quiz.js
           adds these classes to the active slide via
           `.addClass('magictime swap')` on `before-slide-change`. */
        .magictime {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .swap {
            -webkit-animation-name: swap;
            animation-name: swap;
        }

        /* ----------------------------------------
           Responsive — page-quiz.css 266/294/315 (+ Foundation .row) */
        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .row {
                max-width: 990px !important;
                width: 990px;
            }
        }

        @media only screen and (max-width: 1030px) {
            .quiz-title {
                padding: 0 0 20px 0;
                text-align: left;
                max-width: 500px;
            }
            .quiz-title h1 {
                margin-left: 0;
            }
        }

        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .quiz-outer_container .quiz-questions > li.quiz-intro {
                width: 630px;
            }
        }

        @media only screen and (max-width: 989px) {
            .small-12 { width: 100% !important; }
            .row {
                max-width: 100%;
                width: 100%;
            }
            h2 { font-size: 1.75rem; line-height: 26px; }
            h3 { font-size: 1.5rem; }

            /* page-quiz.css 296+ — background swap on mobile */
            .quiz-background {
                padding: 30px 0;
                background: #bec3c9;
            }
            .quiz-title {
                margin: 0 auto;
                text-align: center;
            }

            /* Quiz-intro goes full-width on mobile (no negative margin) */
            .quiz-outer_container .orbit-bullets-container { top: -10px; }
            .quiz-outer_container .quiz-questions > li.quiz-intro {
                margin-left: 0 !important;
                width: 100%;
            }
        }

        @media only screen and (max-width: 767px) {
            .row {
                max-width: 100%;
                width: 100%;
            }
            .quiz-title {
                padding: 0;
            }
            .quiz-title h1 {
                font-size: 1.6rem;
            }
            .quiz-title p {
                font-size: 18px;
                line-height: 1.2;
            }
        }
    }
}

/* ============================================================
   UNLAYERED — Foundation .button (c4k.css 1744 + 7857).
   Unlayered beats Tailwind v4's <button> reset and keeps control
   over colour/font. `.start-quiz` is styled via inherited .button rule.
   ============================================================ */
@scope (.legacy-content) {
    button,
    .button {
        border: none;
        cursor: pointer;
        font-family: "Nunito", sans-serif;
        font-weight: 700 !important;
        line-height: 1.25rem;
        margin: 0 0 1.25rem;
        position: relative;
        text-decoration: none;
        text-align: center;
        display: inline-block;
        /* Compact padding to match _Layout_2025 / site-v4 .button utility
           (padding: 0.625rem 1rem, line-height: 1.25rem) — used across the
           rest of this page per project preference. */
        padding: 0.625rem 1rem;
        font-size: 1rem;
        background-color: #231673;
        color: #fff;
        transition: background-color 300ms ease-out;
        -webkit-appearance: none;
        text-transform: uppercase;
        border-radius: 4px;
    }

    button:hover,
    button:focus,
    .button:hover,
    .button:focus {
        color: #fff;
    }

    /*
     * Start-quiz button override (page-quiz.css 170).
     * Declared AFTER `.button` so specificity wins without !important.
     * `display: table + margin: 0 auto` centres the button as a block
     * rather than left-aligned inline-block.
     */
    .quiz-outer_container .quiz-questions > li.quiz-intro .start-quiz {
        display: table;
        margin: 0 auto;
    }

    @media (max-width: 767px) {
        .quiz-outer_container .quiz-questions > li.quiz-intro .start-quiz {
            font-size: 0.9rem;
            padding: 12px 20px;
        }
    }
}

/* ============================================================
   GLOBAL rules — live outside @scope because they target elements
   in <head> (not inside .legacy-content) or define @keyframes.
   ============================================================ */

/*
 * Foundation 5 namespace meta (c4k.css:30). Foundation injects
 * <meta class="foundation-data-attribute-namespace"/> into <head>
 * on init, then reads its `font-family` to determine the data-*
 * namespace for plugin selectors (e.g. `[data-orbit]`).
 *
 * Without this rule, the meta inherits Tailwind v4's
 * `html { font-family: Inter, sans-serif }`, so Foundation treats
 * "Inter, sans-serif" as the namespace and generates invalid jQuery
 * selectors like `[data-Inter, sans-serif-orbit]` → Orbit fails to
 * bind and the slider never advances.
 *
 * Setting font-family: false tells Foundation (via /false/i regex
 * in foundation.js:396) to use an empty namespace, which matches
 * `[data-orbit]` correctly.
 */
meta.foundation-data-attribute-namespace {
    font-family: false;
}

/* Foundation MQ meta — needed if any plugin checks media-query state
   (Orbit uses these for touch/breakpoint detection). */
meta.foundation-mq-small { font-family: "/only screen and (max-width: 989px)/"; width: 0; }
meta.foundation-mq-medium { font-family: "/only screen and (min-width: 990px)/"; width: 990px; }
meta.foundation-mq-large { font-family: "/only screen and (min-width: 1396px)/"; width: 1396px; }
meta.foundation-mq-xlarge { font-family: "/only screen and (min-width: 90.063em)/"; width: 90.063em; }
meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width: 120.063em)/"; width: 120.063em; }

/* ============================================================
   GLOBAL @keyframes — must live at top level (not inside @scope).
   Referenced by `.swap { animation-name: swap }` above. Duplicates
   across vendor prefixes kept for older browsers (matches magic.css).
   ============================================================ */
@keyframes swap {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0, 0) translate(-700px, 0);
    }
    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1, 1) translate(0, 0);
    }
}

@-webkit-keyframes swap {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0, 0) translate(-700px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(1, 1) translate(0, 0);
    }
}