/*
 * ChildCareAgency page legacy styles — extracted from Foundation 5 (c4k.css),
 * app.css, sub_content.css, page-landings.css.
 *
 * Isolation strategy (same as contactus.css / childcare-data-services.css):
 *   1. `@scope (.legacy-content)` — rules scoped to <div class="legacy-content">
 *      wrapper, keeping TopNav/Footer (outside the wrapper) on Tailwind v4
 *      from site-v4.min.css loaded by _Layout_2025.
 *   2. `@layer base / components` — Tailwind v4 declares these layers first;
 *      utilities in @layer utilities win over our components by default.
 *      Rules that must beat utilities are placed unlayered at the bottom.
 *
 * Image url() paths rewritten to absolute (/content/assets/...) because this
 * file lives at /css/pages/ not /content/assets/css/.
 *
 * PHASE 1 — Foundation grid + utilities + hero (.agency_01, .widget_transparent)
 *           + .button modifiers. Benefits section (#providers-benefits) and
 *           pricing table (#providers-plans) are intentionally NOT styled yet
 *           and will be added in phases 2 and 3.
 */

: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;
        }

        /* Foundation headings — using Nunito (body font) per project preference.
           Original c4k.css:5297 sets Poppins but Poppins file has ambiguous
           weight registration (ExtraBold + Bold both at weight `bold`), so
           stick with Nunito for consistency. c4k.css:8793 uppercase kept. */
        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;
        }
    }
}

/* ============================================================
   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; }

        /* Small grid (always) */
        @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%; }
        }

        /* Medium grid — min-width 990 */
        @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%; }
        }

        /* Large grid — min-width 1396 */
        @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%; }
        }

        /* ----------------------------------------
           Foundation visibility helpers (c4k.css 5818+).
           Default (desktop): hide-only-mobile visible, show-only-mobile hidden.
           At ≤767px: flip. */
        .show-for-small-only,
        .show-only-mobile { display: none !important; }

        .hide-only-mobile { display: initial; }

        @media only screen and (max-width: 767px) {
            .show-for-small-only,
            .show-only-mobile { display: block !important; }
            .hide-for-small-only,
            .hide-only-mobile { display: none !important; }
        }

        /* ----------------------------------------
           Utility helpers (from app.css) */
        .text-center { text-align: center; }
        .inline-block { display: inline-block !important; }
        .margin0 { margin: 0 !important; }
        .margin_top_0 { margin-top: 0 !important; }
        .margintop40 { margin-top: 40px; }
        .font13 { font-size: 0.837rem; }
        .font_medium { font-weight: 500; }
        .light-blue { color: #73A0DF; }
        .bold { font-weight: bold !important; }

        /* .mobile-block — app.css 6028+ (max-width 767 only) */
        @media only screen and (max-width: 767px) {
            .mobile-block {
                width: 100% !important;
                display: block;
            }
        }

        /* ----------------------------------------
           Hero section (sub_content.css 6-43, 145-165) */
        .agency_01 {
            background: #dde3e4 url("/content/assets/img/agency_bg.jpg") no-repeat center top;
            background-size: cover;
            padding: 0;
        }

        @media only screen and (max-width: 990px) {
            .agency_01 { background-image: none; }
        }

        .widget_transparent {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            margin: 20px auto;
        }

        .widget_transparent p {
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .widget_transparent h3,
        .widget_transparent h1 {
            line-height: 1.1 !important;
            font-size: 1.4rem;
        }

        .widget_transparent .workerContent {
            padding-top: 20px;
        }

        .widget_transparent .searchIcon {
            max-width: 70px;
            max-height: 70px;
        }

        /* .searchIcon base (page-concierge.css 50+).
           The widget_transparent override above caps its max-width. */
        .searchIcon {
            background: #fff;
            border-radius: 100%;
            display: block;
            height: 90px;
            margin: 15px auto;
            padding: 16px;
            width: 90px;
        }

        @media only screen and (max-width: 1030px) {
            .widget_transparent h3,
            .widget_transparent h1 {
                font-size: 1.4rem;
                line-height: 1.2 !important;
            }
        }

        @media only screen and (max-width: 767px) {
            .widget_transparent { padding: 20px; }
            .widget_transparent h3,
            .widget_transparent h1 {
                font-size: 1.3rem;
                text-align: left !important;
            }
            .searchIcon {
                height: 65px;
                margin: 0 auto 9px;
                padding: 15px;
                width: 65px;
            }
        }

        /* ----------------------------------------
           PHASE 2 — Benefits section (page-landings.css 494+).
           3 cards inside #providers-benefits with background image +
           translucent blue overlay (.box-content).
           `data-equalizer` JS is NOT loaded under _Layout_2025, so heights
           come from either (a) AU variant: natural flow, or (b) NZ variant:
           inline `style="height: 149px"` on .box-content.              */

        /* Shared section vertical padding (page-landings.css 67) — both
           #providers-benefits and #providers-plans (Phase 3) use this. */
        #providers-benefits,
        #providers-plans {
            padding: 40px 0;
        }

        /* page-landings.css 76 — keep <h2> line-height inherited inside
           <section>, otherwise base h1-h6 `line-height: 1.4` makes the
           benefits heading too tall. */
        section h2 {
            line-height: inherit;
        }

        #providers-benefits {
            background: #231673;
        }

        #providers-benefits h2 {
            color: #fff;
        }

        #providers-benefits .box.benefits {
            background-size: cover;
            background-position: center;
            padding-top: 120px;
        }

        #providers-benefits .box.benefits .box-content {
            padding: 30px;
            background: rgba(0, 139, 206, 0.7);
            color: #fff;
        }

        #providers-benefits .box.benefits .box-content h4,
        #providers-benefits .box.benefits .box-content h2 {
            color: #fff;
            font-size: 1.5625rem;
            line-height: 1.5625rem;
            margin-bottom: 20px;
        }

        #providers-benefits .box.benefits .box-content p {
            font-size: 0.9375rem;
            line-height: 1.375rem;
            margin-bottom: 0;
        }

        #providers-benefits .box.benefits .button {
            margin-bottom: 0;
        }

        /* NZ variant — .box.benefits.small (sub_content.css 28) */
        .box.benefits.small .box-content {
            padding: 15px !important;
        }

        .box.benefits.small .box-content h4,
        .box.benefits.small .box-content h2 {
            font-size: 1.37rem !important;
            line-height: 1.2rem !important;
            font-weight: 500;
        }

        .box.benefits.small .box-content p {
            font-weight: 400 !important;
            line-height: 1.3 !important;
        }

        /* Benefit card backgrounds — AU (page-landings.css 526+) */
        #ccp-benefit1 { background-image: url("/content/assets/img/ccp-benefit1.jpg"); }
        #ccp-benefit2 { background-image: url("/content/assets/img/ccp-benefit2.jpg"); }
        #ccp-benefit3 { background-image: url("/content/assets/img/ccp-benefit3.jpg"); }

        /* Benefit card backgrounds — NZ (sub_content.css 113+) */
        #ccp-benefit-1 {
            background-image: url("/content/assets/img/reach_more.jpg");
            background-position: center top !important;
        }
        #ccp-benefit-4 {
            background-image: url("/content/assets/img/target_marketing.jpg");
            background-position: center top !important;
        }
        #ccp-benefit-5 {
            background-image: url("/content/assets/img/connect_top.jpg");
            background-position: center top !important;
        }

        /* Responsive — benefits stack on mobile (page-landings.css 3) */
        @media only screen and (max-width: 989px) {
            .box.benefits {
                margin-bottom: 20px;
            }
        }

        /* ----------------------------------------
           PHASE 2 — Clients slider (.whos-using-it).
           Base styles (page-landings.css 683+) + flexisel slider plumbing
           (app.css 1151+). Slider initialised via jquery-flexisel JS
           loaded in PageScriptContent; before init, the <ul id="clientsSlider">
           is hidden via `#clientsSlider li { display: none }` — after flexisel
           wraps each <li> in `.nbs-flexisel-item`, they become `inline-table`. */
        .whos-using-it {
            margin-bottom: 20px;
            margin-top: 30px;
            padding-top: 30px;
        }

        .whos-using-it ul {
            width: 100%;
            margin: 0 auto;
            max-width: 62.5rem;
            padding: 0 20px;
        }

        .whos-using-it ul:before,
        .whos-using-it ul:after {
            content: " ";
            display: table;
        }

        .whos-using-it ul:after { clear: both; }

        .whos-using-it h3,
        .whos-using-it h2 {
            color: #fff;
            margin-bottom: 20px;
            padding-top: 70px;
            position: relative;
        }

        .whos-using-it h3:before,
        .whos-using-it h2:before {
            background: rgba(255, 255, 255, 0.4) url("/content/assets/img/ico-heart.png") no-repeat center center;
            background-size: 50%;
            border-radius: 100%;
            content: '';
            height: 50px;
            left: 50%;
            margin-left: -25px;
            position: absolute;
            top: 0;
            width: 50px;
        }

        .whos-using-it li {
            display: table;
            padding: 5px;
        }

        .whos-using-it li > span,
        .whos-using-it li > a {
            background: rgba(129, 198, 232, 0.1);
            color: #fff;
            display: table-cell;
            font-size: 0.9em;
            height: 100px;
            line-height: 1.1em;
            padding: 10px;
            text-align: center;
            vertical-align: middle;
        }

        /* Flexisel slider internals (app.css 1151+) */
        .whos-using-it .nbs-flexisel-container {
            position: relative;
            max-width: 100%;
        }

        .whos-using-it .nbs-flexisel-ul {
            position: relative;
            width: 999999px;
            max-width: 6290rem;
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
        }

        .whos-using-it .nbs-flexisel-inner {
            overflow: hidden;
            float: left;
            width: 100%;
        }

        .whos-using-it .nbs-flexisel-item {
            float: left;
            margin: 0;
            padding: 0;
            cursor: pointer;
            position: relative;
            line-height: 0;
        }

        .whos-using-it .nbs-flexisel-item a {
            height: 60px;
        }

        .whos-using-it .nbs-flexisel-nav-left,
        .whos-using-it .nbs-flexisel-nav-right {
            width: 22px;
            height: 22px;
            position: absolute;
            cursor: pointer;
            z-index: 100;
            opacity: 0.5;
        }

        .whos-using-it .nbs-flexisel-nav-left {
            left: 10px;
            background: url("/content/assets/img/button-previous.png") no-repeat;
            top: 19px !important;
        }

        .whos-using-it .nbs-flexisel-nav-right {
            right: 5px;
            top: 19px !important;
            background: url("/content/assets/img/button-next.png") no-repeat;
        }

        /* Hide flat <li> before flexisel wraps them in .nbs-flexisel-item
           (app.css 5082). After init, .nbs-flexisel-item li show as
           inline-table blocks. */
        #clientsSlider li {
            display: none;
        }

        #clientsSlider li.nbs-flexisel-item {
            display: inline-table;
        }

        /* ----------------------------------------
           PHASE 3 — Pricing table section (#providers-plans).

           Structure: `<ul class="pricing-table-container small-block-grid-3">`
           wraps 3 `<li class="pricing-table-unit"><ul class="pricing-table
           m_collapsible" id="va-basic|va-premium|va-enterprise" data-equalizer-watch
           style="height: 836px;">` each containing `<li class="title">`,
           `<li class="description">`, multiple `<li class="bullet-item">`,
           and `<li class="price">`. The inline `height: 836px` replaces the
           unloaded `data-equalizer` JS to keep columns equal. */

        #providers-plans {
            background: #fff;
        }

        /* Foundation block-grid (c4k.css 1176+) — `.small-block-grid-3`
           makes `<ul>` children 33.33% wide on mobile+. `<li>` float-left. */
        [class*="block-grid-"] {
            display: block;
            padding: 0;
            margin: 0 -0.625rem;
        }

        [class*="block-grid-"]:before,
        [class*="block-grid-"]:after {
            content: " ";
            display: table;
        }

        [class*="block-grid-"]:after { clear: both; }

        [class*="block-grid-"] > li {
            display: block;
            height: auto;
            float: left;
            padding: 0 0.625rem 1.25rem;
        }

        @media only screen {
            .small-block-grid-3 > li {
                width: 33.33333%;
                list-style: none;
            }
            .small-block-grid-3 > li:nth-of-type(n) { clear: none; }
            .small-block-grid-3 > li:nth-of-type(3n+1) { clear: both; }
        }

        /* Foundation .pricing-table base (c4k.css 3630+) */
        .pricing-table {
            border: solid 1px #ddd;
            margin-left: 0;
            margin-bottom: 1.25rem;
        }

        .pricing-table * {
            list-style: none;
            line-height: 1;
        }

        .pricing-table .title {
            background-color: transparent;
            padding: 0.9375rem 0;
            text-align: center;
            color: #333;
            font-weight: 500;
            font-size: 0.875rem;
            font-family: "Nunito", sans-serif;
        }

        .pricing-table .price {
            background-color: #81c6e8;
            padding: 0.9375rem 1.25rem;
            text-align: center;
            color: #333;
            font-weight: 300;
            font-size: 1.5rem;
            font-family: "Nunito", sans-serif;
        }

        .pricing-table .description {
            background-color: #fff;
            padding: 0.9375rem;
            text-align: center;
            color: #777;
            font-size: 0.75rem;
            font-weight: normal;
            line-height: 1.4;
            border-bottom: dotted 1px #ddd;
        }

        .pricing-table .bullet-item {
            background-color: #fff;
            padding: 0.9375rem;
            text-align: center;
            color: #333;
            font-size: 0.875rem;
            font-weight: normal;
            border-bottom: dotted 1px #ddd;
        }

        /* Pricing-table-unit small element (app.css 1443) */
        .pricing-table-unit small {
            display: inline-block;
        }

        /* #providers-plans overrides (page-landings.css 538+).
           Adds the fancy ribbon + absolute-positioned price bar. */
        #providers-plans .pricing-table {
            border: none;
            position: relative;
            padding-bottom: 165px;
        }

        #providers-plans .pricing-table li {
            background: transparent;
            font-size: 0.9375rem;
            line-height: 1.4;
        }

        /* Ribbon — CSS triangle badge on the Enterprise card.
           Uses ::before (right-facing purple triangle) and ::after
           (bottom-left fold effect via #4f5b61). */
        #providers-plans .pricing-table .ribbon {
            background: #654387;
            color: #fff;
            display: inline-block;
            font-family: "Nunito", sans-serif;
            margin: 0;
            text-transform: uppercase;
            padding-left: 12px;
            padding-right: 0;
            font-size: 0.6875rem;
            font-weight: 500;
            line-height: 26px;
            height: 26px;
            position: absolute;
            left: -10px;
            right: auto;
            top: 20px;
        }

        #providers-plans .pricing-table .ribbon:before,
        #providers-plans .pricing-table .ribbon:after {
            border-style: solid;
            content: '';
            position: absolute;
        }

        #providers-plans .pricing-table .ribbon:before {
            border-width: 13px;
            top: 0;
            border-color: #654387 transparent #654387 #654387;
            left: auto;
            right: -26px;
        }

        #providers-plans .pricing-table .ribbon:after {
            border-color: #4f5b61 #4f5b61 transparent transparent;
            left: 0;
            right: auto;
            border-width: 5px;
            bottom: -10px;
        }

        #providers-plans .pricing-table .ribbon span {
            font-size: 0.6875rem !important;
            font-weight: 500 !important;
        }

        #providers-plans .pricing-table .price {
            position: absolute;
            bottom: 0;
            display: block;
            width: 100%;
        }

        #providers-plans .pricing-table .price .button {
            margin-bottom: 0;
            color: #fff;
        }

        #providers-plans .pricing-table .bullet-item {
            text-align: left;
            padding-left: 40px;
            position: relative;
        }

        /* .bullet-item:before default — FA4 checkmark glyph.
           Overridden inline in ChildCareAgency.cshtml to Unicode ✓ because
           FA6 Kit runs in SVG mode with no webfont registered. */
        #providers-plans .pricing-table .bullet-item:before {
            content: '\f00c';
            font-family: 'FontAwesome';
            margin-left: -25px;
            position: absolute;
        }

        #providers-plans .pricing-table .title {
            color: #fff;
            position: relative;
            padding: 15px;
        }

        #providers-plans .pricing-table .title a {
            display: none;
        }

        #providers-plans .pricing-table .title h6,
        #providers-plans .pricing-table .title h3 {
            color: #fff;
        }

        /* Plan variant: Enterprise (va-enterprise) — purple theme */
        #providers-plans .pricing-table#va-enterprise {
            background-color: #d1b6ec;
        }
        #providers-plans .pricing-table#va-enterprise li { color: #654387; }
        #providers-plans .pricing-table#va-enterprise .description {
            background-color: rgba(120, 80, 161, 0.2);
            border-bottom: none;
        }
        #providers-plans .pricing-table#va-enterprise .bullet-item {
            border-bottom: solid 1px rgba(120, 80, 161, 0.2);
        }
        #providers-plans .pricing-table#va-enterprise .title {
            background-color: #7C43C0;
        }
        #providers-plans .pricing-table#va-enterprise .price h3,
        #providers-plans .pricing-table#va-enterprise .price h5,
        #providers-plans .pricing-table#va-enterprise .price h3 *,
        #providers-plans .pricing-table#va-enterprise .price h5 * {
            color: #654387;
        }

        /* Plan variant: Basic (va-basic) — teal theme */
        #providers-plans .pricing-table#va-basic {
            background-color: #a3dedc;
        }
        #providers-plans .pricing-table#va-basic li,
        #providers-plans .pricing-table#va-basic .price h3 {
            color: #286564;
        }
        #providers-plans .pricing-table#va-basic .title {
            background-color: #45aead !important;
        }
        #providers-plans .pricing-table#va-basic .description {
            background: rgba(69, 174, 173, 0.2);
            border-bottom: none;
        }
        #providers-plans .pricing-table#va-basic .bullet-item {
            border-bottom: solid 1px rgba(69, 174, 173, 0.2);
        }

        /* Plan variant: Premium (va-premium) — blue theme */
        #providers-plans .pricing-table#va-premium {
            background-color: #7fc5e6;
        }
        #providers-plans .pricing-table#va-premium li {
            color: #231673;
        }
        #providers-plans .pricing-table#va-premium .title {
            background-color: #73A0DF !important;
        }
        #providers-plans .pricing-table#va-premium .description {
            background: rgba(0, 139, 206, 0.2);
            border-bottom: none;
        }
        #providers-plans .pricing-table#va-premium .bullet-item {
            border-bottom: solid 1px rgba(0, 139, 206, 0.2);
        }

        /* Pricing-table-unit price h3/h5 shrink at ≥989px (app.css 8679) */
        @media only screen and (min-width: 989px) {
            .pricing-table-unit .price h3 { font-size: 1.65rem; }
            .pricing-table-unit .price h5 { font-size: 0.85rem; }
        }

        /* .m_collapsible — view toggle buttons hidden on desktop
           (sub_content.css 133). Collapsible behaviour activates at ≤767px. */
        .m_collapsible .view_btn {
            display: none !important;
        }

        /* Mobile collapsible pricing-table (sub_content.css 172-199).
           Each pricing-table collapses to 105px showing only .title + the
           DETAILS toggle button; clicking toggle adds `.active` class which
           expands back to natural height. Handler is inline in cshtml. */
        @media only screen and (max-width: 767px) {
            #providers-plans .pricing-table.m_collapsible {
                height: auto !important;
                max-height: 105px;
                overflow: hidden;
            }
            #providers-plans .pricing-table.m_collapsible li {
                display: block !important;
            }
            #providers-plans .pricing-table.m_collapsible.active {
                max-height: 4000px;
                padding-bottom: 0;
            }
            .m_collapsible.pricing-table .view_btn {
                position: static !important;
                display: inline-block !important;
                opacity: unset !important;
            }
            .m_collapsible .show_on_open.view_btn {
                display: none !important;
            }
            .m_collapsible.active .show_on_open.view_btn {
                display: inline-block !important;
                margin-top: 15px;
            }
            .m_collapsible.active .hide_on_open.view_btn {
                display: none !important;
            }
        }

        /* ----------------------------------------
           Global responsive overrides for .row — c4k.css 9096/9107/9193.
           Without these the hard-coded .row { width: 1396px } overflows. */
        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .row {
                max-width: 990px !important;
                width: 990px;
            }
        }

        @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; }
        }

        @media only screen and (max-width: 767px) {
            .row {
                max-width: 100%;
                width: 100%;
            }
        }
    }
}

/* ============================================================
   UNLAYERED — Foundation .button + modifiers + .block utility.
   Declared in source order: base → modifiers → .block. Specificity
   (0,2,0 for `.button.expand` vs 0,1,0 for `.button`) + later-declared
   resolve conflicts in favour of modifiers.
   ============================================================ */
@scope (.legacy-content) {
    /* Base button (c4k.css 1744 + 7857) */
    button,
    .button {
        border: none;
        cursor: pointer;
        font-family: "Nunito", sans-serif;
        font-weight: 700 !important;
        line-height: normal;
        margin: 0 0 1.25rem;
        position: relative;
        text-decoration: none;
        text-align: center;
        display: inline-block;
        padding: 1.0625rem 2rem 1rem 2rem;
        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;
    }

    /* Size modifier (c4k.css 1824) */
    button.large,
    .button.large {
        padding: 1.125rem 2.25rem 1.1875rem 2.25rem;
        font-size: 1.25rem;
    }

    /* Full-width modifier (c4k.css 1848) */
    button.expand,
    .button.expand {
        padding-right: 0;
        padding-left: 0;
        width: 100%;
    }

    /* Color modifiers (c4k.css 1782 + 7862 + 7866 + 7870) */
    .button.purple { background-color: #7C43C0; }
    .button.green { background-color: #4ec4c3; }
    button.secondary,
    .button.secondary,
    .button.blue { background-color: #73A0DF; }

    /* .block utility — unlayered so `<a class="button block ...">` wins
       over base `.button { display: inline-block }`. Same spec (0,1,0),
       later-declared wins. */
    .block { display: block; }
}