:root {
    --navy: #0d3557;
    --navy-2: #13243e;
    --navy-dark: #091f34;

    --ink: #171b24;

    --orange: #fb4b12;
    --orange-2: #ff7a24;

    --amber: #f6b63f;

    --cream: #fff8ef;

    --white: #ffffff;

    --soft: #f7f9fb;
    --soft-2: #eef3f7;

    --muted: #6f7580;

    --line: rgba(13, 53, 87, 0.12);

    --shadow:
        0 24px 70px
        rgba(17, 31, 50, 0.14);
}


/* =========================================================
   BASE
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    color: var(--ink);

    background: #fff;

    line-height: 1.5;
}


img {
    max-width: 100%;

    display: block;
}


a {
    text-decoration: none;

    color: inherit;
}


button,
input,
select,
textarea {
    font: inherit;
}


button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color:
        transparent;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(251, 75, 18, 0.22);

    outline-offset: 2px;
}


[hidden] {
    display: none !important;
}


.hide {
    display: none !important;
}


.container {
    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin: auto;
}


.eyebrow {
    font-size: 0.78rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    font-weight: 800;

    color: var(--orange);
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
    position: fixed;

    z-index: 40;

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

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.08);
}


.nav-inner {
    height: 76px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}


.brand {
    display: flex;

    align-items: center;

    gap: 12px;
}


.brand img {
    width: 150px;
}


.nav-links {
    display: flex;

    align-items: center;

    gap: 24px;

    font-size: 0.94rem;

    font-weight: 700;
}


.nav-links a {
    transition:
        color 0.2s ease;
}


.nav-links a:hover {
    color: var(--orange);
}


.nav-actions {
    display: flex;

    gap: 10px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding:
        0 20px;

    border-radius: 999px;

    border:
        1px solid
        transparent;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}


.btn:hover:not(:disabled) {
    transform:
        translateY(-1px);
}


.btn-primary {
    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--orange-2)
        );

    color: #fff;

    box-shadow:
        0 10px 26px
        rgba(251, 75, 18, 0.24);
}


.btn-primary:hover:not(:disabled) {
    box-shadow:
        0 15px 34px
        rgba(251, 75, 18, 0.29);
}


.btn-ghost {
    border-color:
        rgba(13, 53, 87, 0.18);

    background: #fff;

    color: var(--navy);
}


.btn-dark {
    background:
        var(--navy);

    color: #fff;
}


.btn-lg {
    min-height: 54px;

    padding:
        0 26px;
}


.btn:disabled {
    cursor: not-allowed;

    opacity: 0.48;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    padding:
        138px 0 82px;

    background:
        linear-gradient(
            120deg,
            #eef4f8 0%,
            #fff8ef 48%,
            #fff 100%
        );

    position: relative;

    overflow: hidden;
}


.hero::before {
    content: "";

    position: absolute;

    right: -14%;

    top: -18%;

    width: 620px;

    height: 620px;

    border:
        110px solid
        rgba(251, 75, 18, 0.08);

    border-radius:
        48% 52% 60% 40%;

    transform:
        rotate(28deg);
}


.hero-grid {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 58px;
}


.hero h1 {
    font-size:
        clamp(
            3rem,
            6.4vw,
            6.2rem
        );

    line-height: 0.92;

    letter-spacing:
        -0.055em;

    margin:
        12px 0 22px;

    color:
        var(--navy);
}


.hero h1 span {
    background:
        linear-gradient(
            90deg,
            #0d3557 5%,
            #fa4b14 56%,
            #f6b63f
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.hero p {
    font-size:
        1.15rem;

    color:
        #4b5562;

    max-width:
        670px;
}


.hero-ctas {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 30px;
}


.hero-card {
    position: relative;
}


.hero-card img {
    border-radius: 30px;

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


.float-card {
    position: absolute;

    left: -28px;

    bottom: -26px;

    background: #fff;

    border-radius: 18px;

    padding:
        18px 20px;

    box-shadow:
        var(--shadow);

    max-width: 260px;
}


.float-card strong {
    display: block;

    color:
        var(--navy);

    font-size:
        1.05rem;
}


.float-card span {
    font-size:
        0.86rem;

    color:
        var(--muted);
}


/* =========================================================
   STATS
========================================================= */

.stats {
    margin-top: -28px;

    position: relative;

    z-index: 3;
}


.stats-grid {
    display: grid;

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

    background: #fff;

    border-radius: 22px;

    box-shadow:
        var(--shadow);

    overflow: hidden;
}


.stat {
    padding:
        27px 28px;

    border-right:
        1px solid
        var(--line);
}


.stat:last-child {
    border: 0;
}


.stat strong {
    font-size: 1.4rem;

    color:
        var(--navy);

    display: block;
}


.stat span {
    font-size:
        0.86rem;

    color:
        var(--muted);
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding:
        96px 0;
}


.section-soft {
    background:
        #f7f9fb;
}


.section-dark {
    background:
        linear-gradient(
            135deg,
            #0c3151,
            #1d1f33
        );

    color: #fff;
}


.section-title {
    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

    margin:
        10px 0 16px;

    color:
        var(--navy);
}


.section-dark .section-title {
    color:
        #fff;
}


.section-lead {
    font-size:
        1.08rem;

    color:
        #5d6470;

    max-width:
        720px;
}


.section-dark .section-lead {
    color:
        #cbd6df;
}


/* =========================================================
   CARDS
========================================================= */

.cards {
    display: grid;

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

    gap: 20px;

    margin-top: 38px;
}


.card {
    background: #fff;

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

    border-radius: 20px;

    padding: 26px;

    transition:
        0.2s ease;
}


.card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(15, 38, 65, 0.09);
}


.card-icon {
    width: 46px;

    height: 46px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ffe2d3,
            #fff1bc
        );

    display: grid;

    place-items: center;

    font-weight: 900;

    color:
        var(--orange);

    margin-bottom:
        18px;
}


.card h3 {
    margin:
        0 0 8px;

    color:
        var(--navy);
}


.card p {
    margin: 0;

    color:
        #6b7280;

    font-size:
        0.95rem;
}


/* =========================================================
   ABOUT IMAGES
========================================================= */

.story-visuals {
    display: grid;

    grid-template-columns:
        1.35fr 0.85fr;

    gap: 20px;

    margin:
        38px 0 10px;
}


.story-image {
    margin: 0;

    position: relative;

    min-height: 310px;

    border-radius: 24px;

    overflow: hidden;

    background:
        #0d3557;

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


.story-image img {
    width: 100%;

    height: 100%;

    min-height: 310px;

    object-fit: cover;
}


.story-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(5, 24, 40, 0.82) 100%
        );

    pointer-events: none;
}


.story-image figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 20px;

    color: #fff;

    display: grid;

    gap: 2px;
}


.story-image figcaption strong {
    font-size:
        1.12rem;
}


.story-image figcaption span {
    font-size:
        0.88rem;

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );
}


/* =========================================================
   K53
========================================================= */

.k53-grid {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 56px;

    align-items: center;
}


.image-stack {
    position: relative;
}


.image-stack img:first-child {
    border-radius: 28px;

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


.image-stack img:last-child {
    position: absolute;

    width: 48%;

    right: -8%;

    bottom: -12%;

    border:
        8px solid #fff;

    border-radius: 20px;

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


.checklist {
    display: grid;

    gap: 12px;

    margin:
        28px 0;
}


.check {
    display: flex;

    gap: 12px;

    align-items:
        flex-start;
}


.check i {
    font-style: normal;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background:
        #fff0df;

    color:
        var(--orange);

    font-weight: 900;

    display: grid;

    place-items: center;

    flex:
        0 0 auto;
}


.sign-topics {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin:
        4px 0 26px;
}


.sign-topic {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 12px 8px 8px;

    background: #fff;

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

    border-radius: 999px;

    font-size:
        0.82rem;

    font-weight: 800;

    color:
        var(--navy);
}


.sign-topic img {
    width: 34px;

    height: 34px;

    object-fit: contain;
}


/* =========================================================
   IMPACT FLOW
========================================================= */

.flow {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 12px;

    margin-top: 38px;
}


.flow-step {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    padding: 22px;

    border-radius: 18px;
}


.flow-step b {
    display: block;

    color:
        #f9be48;

    font-size:
        0.82rem;

    margin-bottom:
        8px;
}


.flow-step strong {
    font-size:
        1rem;
}


/* =========================================================
   PARTNERS
========================================================= */

.cta-band {
    position: relative;

    isolation: isolate;

    background:
        linear-gradient(
            90deg,
            rgba(9, 31, 52, 0.94) 0%,
            rgba(13, 53, 87, 0.88) 42%,
            rgba(251, 75, 18, 0.48) 100%
        ),
        url('../images/sa-partners.png')
        center 52% / cover
        no-repeat;

    min-height: 390px;

    border-radius: 30px;

    padding:
        58px 62px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    overflow: hidden;
}


.cta-band::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            120deg,
            rgba(9, 31, 52, 0.25),
            transparent 65%
        );
}


.cta-copy {
    max-width: 690px;
}


.cta-band h2 {
    margin: 0;

    font-size:
        clamp(
            2rem,
            3.7vw,
            3.05rem
        );

    line-height: 1.02;

    max-width: 700px;
}


.cta-band p {
    margin:
        12px 0 0;

    max-width: 640px;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size:
        1rem;

    line-height: 1.6;
}


.cta-band .btn-dark {
    flex:
        0 0 auto;

    background: #fff;

    color:
        var(--navy);

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.2);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    padding:
        48px 0 26px;

    background:
        #091f34;

    color:
        #dce6ef;
}


.footer-grid {
    display: grid;

    grid-template-columns:
        1.25fr 0.7fr 0.7fr;

    gap: 40px;
}


.footer-logo {
    width: 190px;

    margin-bottom:
        16px;
}


.footer h4 {
    color: #fff;

    margin:
        0 0 12px;
}


.footer a {
    display: block;

    color:
        #c7d3dd;

    margin:
        7px 0;

    font-size:
        0.92rem;
}


.footer small {
    display: block;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    margin-top: 36px;

    padding-top: 20px;

    color:
        #95a8ba;
}


/* =========================================================
   MODALS
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    background:
        rgba(8, 24, 40, 0.72);

    backdrop-filter:
        blur(5px);

    z-index: 100;

    display: none;

    padding:
        30px 20px;

    overflow: auto;
}


.modal.open {
    display: grid;

    align-items: start;

    justify-items: center;
}


.modal-panel {
    width:
        min(
            760px,
            100%
        );

    margin: auto;

    background: #fff;

    border-radius: 26px;

    box-shadow:
        0 30px 100px
        rgba(4, 20, 34, 0.32);

    overflow: auto;

    position: relative;

    max-height:
        calc(100vh - 60px);

    animation:
        modalEnter
        0.24s ease both;
}


.modal-panel-wide {
    width:
        min(
            1040px,
            100%
        );
}


@keyframes modalEnter {

    from {
        opacity: 0;

        transform:
            translateY(14px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.modal-header {
    padding:
        26px 30px 20px;

    border-bottom:
        1px solid
        var(--line);

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;

    position: sticky;

    top: 0;

    z-index: 5;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    backdrop-filter:
        blur(12px);
}


.modal-header h2 {
    margin:
        3px 0 0;

    color:
        var(--navy);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );
}


.close {
    border: 0;

    background:
        #f1f4f6;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    font-size: 1.35rem;

    line-height: 1;

    cursor: pointer;

    flex:
        0 0 auto;

    color:
        var(--navy);

    transition:
        0.2s ease;
}


.close:hover {
    background:
        #ffece4;

    color:
        var(--orange);

    transform:
        rotate(4deg);
}


.form-wrap {
    padding:
        28px 30px 34px;
}


/* =========================================================
   CONSENT GATE
========================================================= */

.consent-intro > p {
    color:
        #586371;

    font-size:
        0.96rem;

    line-height:
        1.65;
}


.consent-summary {
    margin:
        24px 0;

    padding:
        22px 24px;

    border:
        1px solid
        rgba(13, 53, 87, 0.09);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #fffaf4
        );
}


.consent-summary h3 {
    margin:
        0 0 12px;

    color:
        var(--navy);

    font-size:
        1.05rem;
}


.consent-summary ul {
    margin:
        0;

    padding-left:
        20px;

    color:
        #53606d;
}


.consent-summary li {
    margin:
        8px 0;

    line-height:
        1.5;
}


.consent-gate {
    display: flex;

    align-items:
        flex-start;

    gap: 13px;

    padding:
        18px;

    border:
        1px solid
        #f1d6c7;

    border-radius:
        16px;

    background:
        #fff8f3;

    font-size:
        0.92rem;

    line-height:
        1.55;

    cursor: pointer;
}


.consent-gate input {
    width: auto;

    flex:
        0 0 auto;

    margin-top: 4px;

    transform:
        scale(1.1);
}


.consent-gate a {
    color:
        var(--navy);

    font-weight: 800;

    text-decoration:
        underline;
}


/* =========================================================
   FORM PROGRESS
========================================================= */

.step-meta {
    display: flex;

    justify-content:
        space-between;

    gap: 18px;

    align-items: center;

    margin-bottom: 10px;

    font-size:
        0.8rem;

    font-weight: 800;

    color:
        #65717d;
}


.step-meta #stepTitle {
    color:
        var(--navy);
}


.progress {
    height: 7px;

    background:
        #eef1f4;

    border-radius:
        999px;

    overflow: hidden;

    margin-bottom:
        28px;
}


.progress span {
    display: block;

    height: 100%;

    width: 16.666%;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--amber)
        );

    transition:
        width 0.28s ease;
}


/* =========================================================
   FORM STEPS
========================================================= */

.form-step {
    display: none;

    animation:
        stepEnter
        0.2s ease both;
}


.form-step.active {
    display: block;
}


@keyframes stepEnter {

    from {
        opacity: 0;

        transform:
            translateX(8px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


.form-section-heading {
    margin:
        0 0 18px;
}


.form-section-heading h3 {
    margin:
        0 0 5px;

    color:
        var(--navy);

    font-size:
        1.2rem;
}


.form-section-heading p {
    margin: 0;

    color:
        #6d7580;

    font-size:
        0.88rem;
}


.form-section-heading.secondary {
    margin-top: 28px;

    padding-top: 22px;

    border-top:
        1px solid
        var(--line);
}


/* =========================================================
   FIELDS
========================================================= */

.fields {
    display: grid;

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

    gap:
        17px;
}


.fields.full {
    grid-column:
        1 / -1;

    width: 100%;
}


.field {
    display: grid;

    gap: 7px;

    min-width: 0;
}


.field.full {
    grid-column:
        1 / -1;
}


.field label {
    font-size:
        0.86rem;

    font-weight: 800;

    color:
        #293544;
}


.field input,
.field select,
.field textarea {
    width: 100%;

    min-height: 48px;

    border:
        1px solid
        #d9e0e6;

    border-radius:
        12px;

    padding:
        13px 14px;

    outline: none;

    background: #fff;

    color:
        var(--ink);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


.field textarea {
    min-height: 110px;

    resize: vertical;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color:
        #f66c2a;

    box-shadow:
        0 0 0 3px
        rgba(251, 75, 18, 0.1);
}


.field input::placeholder,
.field textarea::placeholder {
    color:
        #a0a8b1;
}


.hint {
    font-size:
        0.78rem;

    color:
        #7e8792;

    line-height:
        1.45;
}


.optional {
    font-weight: 500;

    color:
        #818a93;
}


/* =========================================================
   CHOICES
========================================================= */

.choice-grid {
    display: grid;

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

    gap:
        9px 12px;

    background:
        #f7f9fb;

    border-radius:
        14px;

    padding: 14px;
}


.choice-grid label,
.radio-row label {
    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    font-size:
        0.88rem;

    color:
        #34414e;

    cursor: pointer;
}


.choice-grid input,
.radio-row input,
.consent input {
    width: auto;

    min-height: 0;

    margin: 0;

    flex:
        0 0 auto;
}


.radio-row {
    display: flex;

    gap: 18px;

    align-items: center;

    min-height: 48px;

    background:
        #f7f9fb;

    border-radius:
        12px;

    padding:
        12px 14px;
}


/* =========================================================
   CONSENT FIELDS
========================================================= */

.consent {
    background:
        #f7f9fb;

    border:
        1px solid
        rgba(13, 53, 87, 0.07);

    border-radius:
        14px;

    padding:
        15px 16px;
}


.consent label {
    display: flex;

    gap: 10px;

    align-items:
        flex-start;

    font-weight: 500;

    font-size:
        0.9rem;

    line-height:
        1.5;

    cursor: pointer;
}


.consent input {
    margin-top: 3px;
}


.consent a {
    color:
        var(--navy);

    font-weight: 700;
}


/* =========================================================
   UNDER 18
========================================================= */

.under18 {
    display: block;

    margin-top: 18px;

    background:
        #fff7e7;

    border:
        1px solid
        #f5d791;

    border-radius:
        14px;

    padding:
        14px 16px;

    color:
        #76520c;

    font-size:
        0.87rem;

    line-height:
        1.5;
}


.under18 strong {
    display: block;

    margin-bottom: 4px;
}


/* =========================================================
   GUARDIANS
========================================================= */

.guardian-box {
    background:
        #f8fafc;

    border:
        1px solid
        #e2e7ec;

    border-radius:
        18px;

    padding: 20px;

    display: block;

    margin-bottom: 26px;
}


.guardian-heading {
    display: flex;

    justify-content:
        space-between;

    gap: 16px;

    align-items:
        flex-start;

    margin-bottom: 8px;
}


.guardian-heading h3 {
    margin:
        3px 0 0;

    color:
        var(--navy);

    font-size:
        1.25rem;
}


.guardian-badge {
    background:
        #fff0e8;

    color:
        #9c3b12;

    border:
        1px solid
        #ffd0ba;

    border-radius:
        999px;

    padding:
        7px 10px;

    font-size:
        0.75rem;

    font-weight: 800;

    white-space:
        nowrap;
}


.guardian-copy {
    margin:
        0 0 16px;

    color:
        #687380;

    font-size:
        0.88rem;

    line-height: 1.55;
}


.guardian-fields {
    margin-top: 4px;
}


.guardian-consent {
    background: #fff;
}


/* =========================================================
   FORM ACTIONS / MESSAGES
========================================================= */

.form-actions {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 12px;

    margin-top: 26px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(13, 53, 87, 0.07);
}


.form-message {
    margin-top: 16px;

    padding:
        13px 15px;

    border-radius:
        12px;

    display: none;

    line-height:
        1.5;
}


.form-message.error {
    display: block;

    background:
        #fff0ee;

    color:
        #a62818;

    border:
        1px solid
        #ffd1c8;
}


.form-message.success {
    display: block;

    background:
        #eaf8ef;

    color:
        #17652c;

    border:
        1px solid
        #c8ead4;
}


/* =========================================================
   REVIEW SCREEN
========================================================= */

.registration-review {
    margin:
        20px 0 26px;
}


.review-grid {
    display: grid;

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

    gap: 15px;
}


.review-card {
    border:
        1px solid
        rgba(13, 53, 87, 0.1);

    border-radius:
        17px;

    overflow: hidden;

    background: #fff;
}


.review-card h4 {
    margin: 0;

    padding:
        13px 16px;

    background:
        linear-gradient(
            90deg,
            #f6f9fb,
            #fff8f2
        );

    color:
        var(--navy);

    font-size:
        0.92rem;

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.08);
}


.review-card-body {
    padding:
        4px 16px;
}


.review-row {
    display: grid;

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

    gap: 12px;

    padding:
        11px 0;

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.07);
}


.review-row:last-child {
    border-bottom: 0;
}


.review-label {
    color:
        #737d88;

    font-size:
        0.78rem;
}


.review-value {
    color:
        #253748;

    font-size:
        0.82rem;

    overflow-wrap:
        anywhere;

    text-align: right;
}


/* =========================================================
   SUCCESS PANEL
========================================================= */

.success-panel {
    text-align: center;

    padding:
        32px 20px 28px;
}


.success-panel img {
    width: 76px;

    margin:
        0 auto 16px;
}


.success-panel h3 {
    font-size:
        2rem;

    color:
        var(--navy);

    margin:
        8px 0;
}


.success-panel p {
    color:
        #687380;

    max-width:
        580px;

    margin:
        12px auto;
}


.participant-code {
    display: inline-block;

    background:
        #f3f5f7;

    border:
        1px solid
        #e5e9ed;

    border-radius:
        10px;

    padding:
        10px 15px;

    font-weight: 900;

    color:
        var(--navy);

    margin:
        10px 0 20px;

    letter-spacing:
        0.04em;
}


/* =========================================================
   RESPONSIVE
========================================================= */

.mobile-menu {
    display: none;
}


@media (max-width: 900px) {

    .nav-links {
        display: none;
    }


    .mobile-menu {
        display:
            inline-flex;
    }


    .hero-grid,
    .k53-grid {
        grid-template-columns:
            1fr;
    }


    .hero-card {
        max-width:
            680px;
    }


    .cards {
        grid-template-columns:
            1fr 1fr;
    }


    .stats-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .stat:nth-child(2) {
        border-right: 0;
    }


    .stat:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--line);
    }


    .flow {
        grid-template-columns:
            1fr 1fr;
    }


    .footer-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .story-visuals {
        grid-template-columns:
            1fr 1fr;
    }


    .cta-band {
        min-height:
            360px;

        padding:
            46px 38px;

        background-position:
            62% center;

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


@media (max-width: 760px) {

    .choice-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .review-grid {
        grid-template-columns:
            1fr;
    }


    .step-meta {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 4px;
    }


    .modal-panel,
    .modal-panel-wide {
        max-height:
            none;
    }
}


@media (max-width: 620px) {

    .container {
        width:
            min(
                calc(100% - 24px),
                1180px
            );
    }


    .nav-inner {
        height: 68px;
    }


    .brand img {
        width: 132px;
    }


    .nav-actions .btn-ghost {
        display: none;
    }


    .nav-actions .btn-primary {
        min-height: 42px;

        padding:
            0 16px;

        font-size:
            0.88rem;
    }


    .hero {
        padding-top:
            112px;
    }


    .hero h1 {
        font-size:
            3.25rem;
    }


    .section {
        padding:
            72px 0;
    }


    .cards,
    .fields,
    .flow,
    .footer-grid {
        grid-template-columns:
            1fr;
    }


    .fields.full {
        grid-template-columns:
            1fr;
    }


    .stats-grid {
        grid-template-columns:
            1fr;
    }


    .stat {
        border-right:
            0 !important;

        border-bottom:
            1px solid
            var(--line) !important;
    }


    .stat:last-child {
        border-bottom:
            0 !important;
    }


    .modal {
        padding:
            10px;
    }


    .modal-panel {
        width: 100%;

        border-radius:
            20px;
    }


    .modal-header {
        padding:
            20px 18px 16px;
    }


    .form-wrap {
        padding:
            22px 18px 26px;
    }


    .form-actions {
        flex-wrap: wrap;
    }


    .form-actions .btn {
        flex:
            1 1 auto;
    }


    .cta-band {
        min-height:
            440px;

        padding:
            34px 24px;

        background-position:
            68% center;
    }


    .cta-band::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: -1;

        background:
            rgba(
                8,
                24,
                40,
                0.22
            );
    }


    .float-card {
        left: 10px;

        right: 10px;

        bottom: -22px;
    }


    .hero-card {
        margin-bottom:
            22px;
    }


    .story-visuals {
        grid-template-columns:
            1fr;
    }


    .story-image,
    .story-image img {
        min-height:
            240px;
    }


    .sign-topics {
        gap: 8px;
    }


    .sign-topic {
        font-size:
            0.78rem;
    }


    .sign-topic img {
        width: 30px;

        height: 30px;
    }


    .guardian-heading {
        flex-direction:
            column;
    }


    .guardian-badge {
        white-space:
            normal;
    }


    .guardian-box {
        padding:
            15px;
    }


    .review-row {
        grid-template-columns:
            1fr;

        gap: 3px;
    }


    .review-value {
        text-align: left;
    }
}


@media (max-width: 480px) {

    .choice-grid {
        grid-template-columns:
            1fr;
    }


    .radio-row {
        gap: 12px;

        flex-wrap: wrap;
    }


    .hero h1 {
        font-size:
            2.75rem;
    }


    .consent-summary {
        padding:
            18px;
    }
}


/* =========================================================
   LEGAL DOCUMENT VIEWER
========================================================= */

.legal-modal {
    z-index: 160;
    background: rgba(5, 20, 34, 0.78);
}


.legal-panel {
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
}


.legal-toolbar {
    position: sticky;
    top: 98px;
    z-index: 4;

    display: flex;
    align-items: center;

    padding: 12px 30px;

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.08);

    background:
        rgba(255, 255, 255, 0.97);

    backdrop-filter:
        blur(12px);
}


.legal-back-button {
    appearance: none;

    border: 0;

    background: transparent;

    color: var(--navy);

    font-weight: 800;

    font-size: 0.88rem;

    cursor: pointer;

    padding: 5px 0;
}


.legal-back-button:hover {
    color: var(--orange);
}


.legal-modal-content {
    padding: 30px 36px 40px;

    color: #374554;

    line-height: 1.7;
}


.legal-modal-content h1 {
    color: var(--navy);

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.55rem
        );

    line-height: 1.12;

    margin:
        0 0 8px;
}


.legal-modal-content h2 {
    color: var(--navy);

    font-size: 1.3rem;

    margin:
        34px 0 10px;

    padding-top: 6px;
}


.legal-modal-content h3 {
    color: var(--navy);

    font-size: 1rem;

    margin:
        22px 0 8px;
}


.legal-modal-content p {
    margin:
        8px 0 14px;
}


.legal-modal-content ul,
.legal-modal-content ol {
    padding-left: 22px;
}


.legal-modal-content li {
    margin:
        7px 0;
}


.legal-modal-content a {
    color: var(--navy);

    font-weight: 700;

    text-decoration: underline;
}


.legal-meta {
    margin:
        0 0 26px;

    color: #7a8490;

    font-size: 0.83rem;
}


.legal-callout {
    margin:
        20px 0;

    padding:
        17px 19px;

    background:
        #fff7ed;

    border:
        1px solid
        #ffd9c3;

    border-left:
        4px solid
        var(--orange);

    border-radius:
        12px;
}


.legal-info-box {
    margin:
        20px 0;

    padding:
        17px 19px;

    background:
        #f4f8fb;

    border:
        1px solid
        #dfe8ef;

    border-radius:
        12px;
}


.legal-document strong {
    color: #273849;
}


.legal-footer-actions {
    position: sticky;

    bottom: 0;

    display: flex;

    justify-content: flex-end;

    padding:
        16px 30px;

    border-top:
        1px solid
        rgba(13, 53, 87, 0.08);

    background:
        rgba(255, 255, 255, 0.97);

    backdrop-filter:
        blur(12px);
}


.legal-loading {
    min-height: 260px;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 12px;

    color: #74808c;
}


.legal-loading-spinner {
    width: 34px;

    height: 34px;

    border-radius: 50%;

    border:
        3px solid
        #e9edf0;

    border-top-color:
        var(--orange);

    animation:
        legalSpin 0.7s linear infinite;
}


@keyframes legalSpin {

    to {
        transform: rotate(360deg);
    }
}


.legal-load-error {
    padding: 30px;

    border-radius: 16px;

    background: #fff4f1;

    color: #922e1d;
}


@media (max-width: 620px) {

    .legal-modal-content {
        padding:
            24px 20px 32px;
    }


    .legal-toolbar {
        top: 82px;

        padding:
            10px 20px;
    }


    .legal-footer-actions {
        padding:
            14px 20px;
    }
}

/* =========================================================
   GROUP COMPANY ADVERTISING
========================================================= */

.group-ad-section {
    --group-ad-duration: 7000ms;
    padding: 72px 0 78px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fb 100%
        );
    border-bottom: 1px solid var(--line);
}

.group-ad-showcase {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(251, 75, 18, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 120%,
            rgba(246, 182, 63, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071421 0%,
            #0b1f31 58%,
            #0d2941 100%
        );
    box-shadow:
        0 28px 70px
        rgba(9, 31, 52, 0.18);
}

.group-ad-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 0 38%,
            rgba(255, 255, 255, 0.035) 46%,
            transparent 54% 100%
        );
    transform: translateX(-70%);
    animation: groupAdAmbientSweep 9s ease-in-out infinite;
}

@keyframes groupAdAmbientSweep {
    0%, 58% {
        transform: translateX(-80%);
    }
    82%, 100% {
        transform: translateX(80%);
    }
}

.group-ad-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.group-ad-heading .eyebrow {
    color: #ff7748;
}

.group-ad-title {
    margin: 7px 0 0;
    color: #ffffff;
    font-size: clamp(1.75rem, 3.5vw, 2.65rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.group-ad-sponsored {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.group-ad-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow:
        0 0 0 5px
        rgba(251, 75, 18, 0.12);
    animation: groupAdPulse 2.2s ease-in-out infinite;
}

@keyframes groupAdPulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.72;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* ---------------------------------------------------------
   Moving logo rail
--------------------------------------------------------- */

.group-brand-window {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin: 0 -34px 24px;
    padding: 8px 0 12px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 5%,
            #000 95%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 5%,
            #000 95%,
            transparent
        );
}

.group-brand-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation:
        groupBrandMarquee
        34s
        linear
        infinite;
}

.group-brand-window:hover .group-brand-track,
.group-brand-window:focus-within .group-brand-track {
    animation-play-state: paused;
}

.group-brand-set {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
}

@keyframes groupBrandMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.group-brand-card {
    position: relative;
    flex: 0 0 auto;
    width: 176px;
    height: 62px;
    padding: 0;
    overflow: hidden;
    border:
        1px solid
        rgba(255, 255, 255, 0.11);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
    opacity: 0.62;
    filter: saturate(0.72);
    transform: translateY(0);
    transition:
        opacity 0.25s ease,
        filter 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.group-brand-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition:
        transform 0.35s ease;
}

.group-brand-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.group-brand-card:hover,
.group-brand-card.active {
    opacity: 1;
    filter: saturate(1);
    transform: translateY(-2px);
    border-color:
        rgba(251, 75, 18, 0.7);
    box-shadow:
        0 10px 26px
        rgba(0, 0, 0, 0.24),
        0 0 0 1px
        rgba(251, 75, 18, 0.08);
}

.group-brand-card:hover img,
.group-brand-card.active img {
    transform: scale(1.035);
}

.group-brand-card:focus-visible {
    outline:
        3px solid
        rgba(251, 75, 18, 0.5);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   Main advertisement stage
--------------------------------------------------------- */

.group-ad-stage {
    position: relative;
    z-index: 2;
}

.group-ad-shell {
    position: relative;
    overflow: hidden;
    border:
        1px solid
        rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    background: #05080b;
    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.34);
    transform: translateZ(0);
}

.group-ad-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.035);
}

.group-ad-link {
    position: relative;
    z-index: 1;
    display: block;
    background: #05080b;
}

.group-ad-link picture,
.group-ad-link img {
    display: block;
    width: 100%;
}

.group-ad-link picture {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition:
        opacity 0.24s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.24s ease;
}

.group-ad-shell.is-changing .group-ad-link picture {
    opacity: 0;
    transform:
        translateX(18px)
        scale(0.992);
    filter: blur(2px);
}

.group-ad-link img {
    aspect-ratio: 4 / 1;
    object-fit: cover;
    transition:
        transform 0.65s ease;
}

.group-ad-shell:hover .group-ad-link img {
    transform: scale(1.008);
}

.group-ad-link:focus-visible {
    outline:
        4px solid
        rgba(251, 75, 18, 0.34);
    outline-offset: -4px;
}

.group-ad-corner-label {
    position: absolute;
    z-index: 4;
    top: 14px;
    left: 14px;
    padding: 7px 9px;
    border:
        1px solid
        rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background:
        rgba(6, 20, 33, 0.64);
    color:
        rgba(255, 255, 255, 0.74);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.group-ad-shine {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            110deg,
            transparent 0 46%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 54% 100%
        );
    transform: translateX(-120%);
    transition:
        transform 0.9s ease;
}

.group-ad-shell:hover .group-ad-shine {
    transform: translateX(120%);
}

.group-ad-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border:
        1px solid
        rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background:
        rgba(5, 18, 30, 0.72);
    color: #ffffff;
    cursor: pointer;
    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(10px);
    opacity: 0.72;
    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}

.group-ad-shell:hover .group-ad-arrow,
.group-ad-arrow:focus-visible {
    opacity: 1;
}

.group-ad-arrow:hover {
    background:
        rgba(251, 75, 18, 0.94);
    border-color:
        rgba(251, 75, 18, 0.94);
    transform:
        translateY(-50%)
        scale(1.05);
}

.group-ad-arrow span {
    display: block;
    margin-top: -2px;
    font-size: 2rem;
    line-height: 1;
}

.group-ad-arrow-prev {
    left: 14px;
}

.group-ad-arrow-next {
    right: 14px;
}

/* ---------------------------------------------------------
   Meta + progress
--------------------------------------------------------- */

.group-ad-meta {
    display: grid;
    grid-template-columns:
        minmax(180px, auto)
        minmax(160px, 1fr)
        auto;
    align-items: center;
    gap: 20px;
    padding: 17px 4px 0;
}

.group-ad-company-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.group-ad-number {
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    border-radius: 10px;
    background:
        rgba(255, 255, 255, 0.08);
    color: #ff835a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.group-ad-company-line strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-ad-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.11);
}

.group-ad-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--amber)
        );
    box-shadow:
        0 0 16px
        rgba(251, 75, 18, 0.36);
}

.group-ad-progress span.is-running {
    animation:
        groupAdProgress
        var(--group-ad-duration)
        linear
        forwards;
}

.group-ad-showcase.is-paused .group-ad-progress span {
    animation-play-state: paused;
}

@keyframes groupAdProgress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.group-ad-count {
    color:
        rgba(255, 255, 255, 0.58);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
   Responsive advertising area
--------------------------------------------------------- */

@media (max-width: 900px) {
    .group-ad-showcase {
        padding: 28px;
        border-radius: 26px;
    }

    .group-brand-window {
        margin-left: -28px;
        margin-right: -28px;
    }

    .group-ad-meta {
        grid-template-columns:
            minmax(170px, auto)
            1fr
            auto;
        gap: 15px;
    }
}

@media (max-width: 620px) {
    .group-ad-section {
        padding: 54px 0 60px;
    }

    .group-ad-showcase {
        padding: 22px 16px 18px;
        border-radius: 22px;
    }

    .group-ad-heading {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }

    .group-ad-title {
        font-size: 1.75rem;
    }

    .group-ad-sponsored {
        min-height: 32px;
        padding: 0 10px;
        font-size: 0.66rem;
    }

    .group-brand-window {
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: 18px;
        padding: 8px 0 10px;
    }

    .group-brand-set {
        gap: 9px;
        padding-left: 9px;
    }

    .group-brand-card {
        width: 142px;
        height: 52px;
        border-radius: 13px;
    }

    .group-ad-shell {
        border-radius: 17px;
    }

    .group-ad-link img {
        aspect-ratio: 6 / 5;
        object-fit: cover;
    }

    .group-ad-corner-label {
        top: 10px;
        left: 10px;
        padding: 6px 8px;
        font-size: 0.56rem;
    }

    .group-ad-arrow {
        width: 40px;
        height: 40px;
        opacity: 0.9;
    }

    .group-ad-arrow-prev {
        left: 9px;
    }

    .group-ad-arrow-next {
        right: 9px;
    }

    .group-ad-meta {
        grid-template-columns: 1fr auto;
        gap: 12px 14px;
        padding-top: 14px;
    }

    .group-ad-company-line {
        grid-column: 1;
    }

    .group-ad-count {
        grid-column: 2;
        grid-row: 1;
    }

    .group-ad-progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .group-ad-company-line strong {
        font-size: 0.84rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .group-brand-track,
    .group-ad-showcase::before,
    .group-ad-live-dot,
    .group-ad-progress span.is-running {
        animation: none !important;
    }

    .group-ad-link picture,
    .group-ad-link img,
    .group-brand-card,
    .group-brand-card img,
    .group-ad-shine {
        transition: none !important;
    }
}


/* =========================================================
   GROUP ADVERTISING V3 — INTEGRATED MIKSCUBED LAYOUT
   Multiple placements, light visual language, subtle motion.
========================================================= */

/* ---------------------------------------------------------
   1. Slim brand ribbon below the value cards
--------------------------------------------------------- */

.group-logo-ribbon {
    padding: 46px 0 12px;
    background: #ffffff;
}

.group-logo-ribbon-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 16px 18px 16px 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(120deg, #ffffff 0%, #fbfcfd 58%, #fff9f3 100%);
    box-shadow:
        0 14px 40px rgba(13, 53, 87, 0.07);
    overflow: hidden;
}

.group-logo-ribbon-copy {
    display: grid;
    gap: 2px;
    min-width: 158px;
}

.group-logo-ribbon-copy .eyebrow {
    font-size: 0.64rem;
}

.group-logo-ribbon-copy strong {
    color: var(--navy);
    font-size: 0.98rem;
    white-space: nowrap;
}

.group-logo-ribbon-window {
    overflow: hidden;
    min-width: 0;
    padding: 3px 0;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.group-logo-ribbon-track {
    display: flex;
    width: max-content;
    animation: groupLogoRibbonMove 30s linear infinite;
    will-change: transform;
}

.group-logo-ribbon-window:hover .group-logo-ribbon-track,
.group-logo-ribbon-window:focus-within .group-logo-ribbon-track {
    animation-play-state: paused;
}

.group-logo-ribbon-set {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
}

@keyframes groupLogoRibbonMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.group-logo-chip {
    width: 138px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(13, 53, 87, 0.1);
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.72;
    transform: translateY(0);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.group-logo-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.group-logo-chip:hover,
.group-logo-chip.active {
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(251, 75, 18, 0.34);
    box-shadow: 0 9px 22px rgba(13, 53, 87, 0.11);
}

.group-logo-chip:hover img,
.group-logo-chip.active img {
    transform: scale(1.025);
}

.group-logo-chip:focus-visible {
    outline: 3px solid rgba(251, 75, 18, 0.2);
    outline-offset: 2px;
}

.group-logo-ribbon-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease;
}

.group-logo-ribbon-link span {
    color: var(--orange);
    font-size: 1rem;
}

.group-logo-ribbon-link:hover {
    color: var(--orange);
    transform: translateX(2px);
}

/* ---------------------------------------------------------
   2. Featured advert — embedded in the normal content flow
--------------------------------------------------------- */

.group-feature-section {
    padding-top: 78px;
    padding-bottom: 88px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.group-feature-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.group-feature-head .section-title {
    max-width: 760px;
    margin-bottom: 0;
}

.group-feature-sponsored {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(13, 53, 87, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: #69737f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(13, 53, 87, 0.05);
}

.group-feature-sponsored span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 5px rgba(251, 75, 18, 0.1);
}

.group-feature-card {
    --group-ad-duration: 7000ms;
    position: relative;
    border: 1px solid rgba(13, 53, 87, 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(13, 53, 87, 0.1);
    overflow: hidden;
}

.group-feature-media {
    position: relative;
    overflow: hidden;
    background: #eef3f7;
}

.group-feature-link,
.group-feature-link picture,
.group-feature-link img {
    display: block;
    width: 100%;
}

.group-feature-link picture {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition:
        opacity 0.22s ease,
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.22s ease;
}

.group-feature-media.is-changing .group-feature-link picture {
    opacity: 0;
    transform: translateX(20px) scale(0.99);
    filter: blur(2px);
}

.group-feature-link img {
    aspect-ratio: 4 / 1;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.group-feature-media:hover .group-feature-link img {
    transform: scale(1.006);
}

.group-feature-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: var(--navy);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(9, 31, 52, 0.18);
    backdrop-filter: blur(10px);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.group-feature-arrow:hover {
    background: var(--orange);
    color: #ffffff;
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 12px 30px rgba(251, 75, 18, 0.22);
}

.group-feature-arrow span {
    margin-top: -2px;
    font-size: 2rem;
    line-height: 1;
}

.group-feature-arrow-prev { left: 16px; }
.group-feature-arrow-next { right: 16px; }

.group-feature-info {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 20px;
    padding: 19px 22px 17px;
}

.group-feature-company {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.group-feature-number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #fff3eb;
    color: var(--orange);
    font-size: 0.74rem;
    font-weight: 900;
}

.group-feature-company > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.group-feature-kicker {
    color: #8a939d;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.group-feature-company strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 0.96rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-feature-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.group-feature-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #ccd5dc;
    cursor: pointer;
    transition: width 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.group-feature-dots button:hover {
    transform: scale(1.22);
}

.group-feature-dots button.active {
    width: 24px;
    background: linear-gradient(90deg, var(--orange), var(--amber));
}

.group-feature-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.group-feature-count {
    color: #8a939d;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.group-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--navy);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.group-feature-cta:hover {
    background: var(--orange);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(251, 75, 18, 0.2);
}

.group-feature-progress {
    height: 4px;
    background: #edf1f4;
    overflow: hidden;
}

.group-feature-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--orange), var(--amber));
}

.group-feature-progress span.is-running {
    animation: groupFeatureProgress var(--group-ad-duration) linear forwards;
}

.group-feature-card.is-paused .group-feature-progress span {
    animation-play-state: paused;
}

@keyframes groupFeatureProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* ---------------------------------------------------------
   3. Two lighter card placements lower down the homepage
--------------------------------------------------------- */

.group-picks-section {
    overflow: hidden;
    background: #ffffff;
}

.group-picks-head {
    max-width: 640px;
    margin-bottom: 30px;
}

.group-picks-head .section-title {
    margin-bottom: 0;
}

.group-picks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
    padding-bottom: 32px;
}

.group-pick-card {
    overflow: hidden;
    border: 1px solid rgba(13, 53, 87, 0.1);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 52px rgba(13, 53, 87, 0.09);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease;
}

.group-pick-card-offset {
    margin-top: 48px;
}

.group-pick-card:hover {
    transform: translateY(-5px);
    border-color: rgba(251, 75, 18, 0.22);
    box-shadow: 0 25px 62px rgba(13, 53, 87, 0.13);
}

.group-pick-card.is-changing .group-pick-media img {
    opacity: 0;
    transform: translateX(18px) scale(0.99);
}

.group-pick-media {
    display: block;
    overflow: hidden;
    background: #f1f4f6;
}

.group-pick-media img {
    display: block;
    width: 100%;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition:
        opacity 0.22s ease,
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.group-pick-card:hover .group-pick-media img {
    transform: scale(1.012);
}

.group-pick-body {
    padding: 18px 20px 20px;
}

.group-pick-body > span {
    display: block;
    margin-bottom: 5px;
    color: var(--orange);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.group-pick-body > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.group-pick-body strong {
    color: var(--navy);
    font-size: 1.04rem;
}

.group-pick-body a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease;
}

.group-pick-body a:hover {
    color: var(--orange);
    transform: translateX(2px);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 900px) {
    .group-logo-ribbon-shell {
        grid-template-columns: 1fr auto;
    }

    .group-logo-ribbon-copy {
        display: none;
    }

    .group-feature-info {
        grid-template-columns: 1fr auto;
    }

    .group-feature-dots {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .group-feature-actions {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 720px) {
    .group-picks-grid {
        grid-template-columns: 1fr;
    }

    .group-pick-card-offset {
        margin-top: 0;
    }
}

@media (max-width: 620px) {
    .group-logo-ribbon {
        padding: 34px 0 4px;
    }

    .group-logo-ribbon-shell {
        display: block;
        padding: 12px 0;
        border-radius: 18px;
    }

    .group-logo-ribbon-window {
        padding: 0;
    }

    .group-logo-ribbon-set {
        gap: 8px;
        padding-right: 8px;
    }

    .group-logo-chip {
        width: 118px;
        height: 44px;
        border-radius: 12px;
    }

    .group-logo-ribbon-link {
        display: none;
    }

    .group-feature-section {
        padding-top: 62px;
        padding-bottom: 66px;
    }

    .group-feature-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .group-feature-head .section-title {
        font-size: 2rem;
    }

    .group-feature-card {
        border-radius: 20px;
    }

    .group-feature-link img {
        aspect-ratio: 6 / 5;
    }

    .group-feature-arrow {
        width: 40px;
        height: 40px;
    }

    .group-feature-arrow-prev { left: 9px; }
    .group-feature-arrow-next { right: 9px; }

    .group-feature-info {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 17px 16px 15px;
    }

    .group-feature-company,
    .group-feature-dots,
    .group-feature-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .group-feature-actions {
        justify-content: space-between;
    }

    .group-feature-dots {
        order: 3;
        justify-content: flex-start;
    }

    .group-picks-section {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .group-picks-grid {
        gap: 20px;
    }

    .group-pick-card {
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .group-logo-ribbon-track,
    .group-feature-progress span.is-running {
        animation: none !important;
    }

    .group-logo-chip,
    .group-logo-chip img,
    .group-feature-link picture,
    .group-feature-link img,
    .group-feature-arrow,
    .group-feature-cta,
    .group-pick-card,
    .group-pick-media img {
        transition: none !important;
    }
}

/* =========================================================
   GROUP ADVERTISING — V4 EXPANDED HOMEPAGE NETWORK
   Adds a full-width top ticker, a mid-page orbit strip and
   a footer network row while preserving the existing V3 ads.
========================================================= */

/* ---------------------------------------------------------
   1. Full-width ribbon immediately below navigation
   Larger, clearer pill treatment that matches MiksCubed
--------------------------------------------------------- */

.top-group-ribbon {
    margin-top: 76px;
    width: 100%;
    position: relative;
    z-index: 8;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #fffaf4 46%,
            #f5f8fb 100%
        );
    border-top: 1px solid rgba(13, 53, 87, 0.05);
    border-bottom: 1px solid rgba(13, 53, 87, 0.08);
    box-shadow: 0 9px 28px rgba(17, 31, 50, 0.05);
}

.top-group-ribbon::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(251, 75, 18, 0.05),
            transparent 21%
        ),
        radial-gradient(
            circle at 82% 50%,
            rgba(13, 53, 87, 0.04),
            transparent 23%
        );
}

.top-group-ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(251, 75, 18, 0.55),
            rgba(246, 182, 63, 0.55),
            transparent
        );
    opacity: 0.82;
}

.top-group-ribbon-inner {
    min-height: 94px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 12px max(20px, calc((100vw - 1260px) / 2));
}

.top-group-ribbon-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    color: var(--navy);
    font-size: 0.86rem;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    font-weight: 900;
}

.top-group-ribbon-label span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 7px rgba(251, 75, 18, 0.10);
}

.top-group-ribbon-window {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 3%,
            #000 97%,
            transparent
        );
    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 3%,
            #000 97%,
            transparent
        );
}

.top-group-ribbon-track {
    width: max-content;
    display: flex;
    align-items: center;
    animation: topGroupRibbonMove 34s linear infinite;
    will-change: transform;
}

.top-group-ribbon-window:hover .top-group-ribbon-track,
.top-group-ribbon-window:focus-within .top-group-ribbon-track {
    animation-play-state: paused;
}

.top-group-ribbon-set {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 14px;
}

.top-group-logo {
    width: 184px;
    height: 62px;
    padding: 5px;
    border: 1px solid rgba(13, 53, 87, 0.10);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            rgba(247, 249, 251, 0.99)
        );
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 7px 20px rgba(17, 31, 50, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease;
}

.top-group-logo img {
    width: 100%;
    height: 100%;
    max-width: 164px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 999px;
    display: block;
    transition:
        transform 0.24s ease,
        filter 0.24s ease;
}

.top-group-logo:hover,
.top-group-logo.active {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(251, 75, 18, 0.28);
    background: #fff;
    box-shadow:
        0 12px 28px rgba(17, 31, 50, 0.10),
        0 0 0 4px rgba(251, 75, 18, 0.045);
}

.top-group-logo:hover img,
.top-group-logo.active img {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.02);
}

.top-group-ribbon-action {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(13, 53, 87, 0.08);
    font-size: 0.88rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 5px 16px rgba(17, 31, 50, 0.04);
    transition:
        color 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.top-group-ribbon-action:hover {
    color: var(--orange);
    transform: translateX(2px);
    border-color: rgba(251, 75, 18, 0.22);
    box-shadow: 0 8px 18px rgba(17, 31, 50, 0.07);
}

@keyframes topGroupRibbonMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* The ribbon is part of the page flow. Keep the hero close enough
   that the top of the website still feels connected. */
.hero {
    padding-top: 78px;
}

/* ---------------------------------------------------------
   2. Mid-page brand constellation
   Deliberately different from the moving top ribbon
--------------------------------------------------------- */

.group-orbit-strip {
    padding: 8px 0 28px;
    background:
        linear-gradient(
            180deg,
            #f7f9fb 0%,
            #ffffff 100%
        );
}

.group-orbit-shell {
    min-height: 148px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 24px;
    padding: 28px 28px 26px;
    border: 1px solid rgba(13, 53, 87, 0.09);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(251, 75, 18, 0.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(13, 53, 87, 0.06),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffaf5 52%,
            #f5f9fc 100%
        );
    box-shadow: 0 20px 50px rgba(15, 38, 65, 0.075);
    overflow: hidden;
    position: relative;
}

.group-orbit-shell::before {
    content: "";
    position: absolute;
    width: 245px;
    height: 245px;
    right: -82px;
    top: -126px;
    border-radius: 50%;
    border: 35px solid rgba(251, 75, 18, 0.045);
    pointer-events: none;
}

.group-orbit-shell::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    left: -72px;
    bottom: -116px;
    border-radius: 50%;
    border: 28px solid rgba(13, 53, 87, 0.045);
    pointer-events: none;
}

.group-orbit-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.group-orbit-copy .eyebrow {
    margin-bottom: 7px;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
}

.group-orbit-copy strong {
    display: block;
    color: var(--navy);
    font-size: 1.16rem;
    line-height: 1.2;
    margin-bottom: 8px;
}

.group-orbit-copy::after {
    content: "Explore the wider group";
    display: block;
    max-width: 190px;
    color: rgba(13, 53, 87, 0.66);
    font-size: 0.88rem;
    line-height: 1.45;
}

.group-orbit-logos {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 11px 12px;
    min-width: 0;
}

.group-orbit-logos a {
    position: relative;
    min-width: 116px;
    height: 64px;
    display: grid;
    place-items: center;
    padding: 9px 14px;
    border: 1px solid rgba(13, 53, 87, 0.075);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(17, 31, 50, 0.055);
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease;
}

/* Different silhouettes make this feel like a constellation,
   not another repeated pill row. */
.group-orbit-logos a:nth-child(1),
.group-orbit-logos a:nth-child(5) {
    border-radius: 50%;
    min-width: 64px;
    width: 64px;
    padding: 8px;
}

.group-orbit-logos a:nth-child(2),
.group-orbit-logos a:nth-child(6) {
    border-radius: 999px;
    min-width: 128px;
}

.group-orbit-logos a:nth-child(3),
.group-orbit-logos a:nth-child(7) {
    border-radius: 20px 20px 8px 20px;
}

.group-orbit-logos a:nth-child(4) {
    border-radius: 18px 8px 18px 8px;
}

.group-orbit-logos a:nth-child(1) { transform: translateY(-8px) rotate(-2deg); }
.group-orbit-logos a:nth-child(2) { transform: translateY(5px) rotate(1deg); }
.group-orbit-logos a:nth-child(3) { transform: translateY(-5px) rotate(-1deg); }
.group-orbit-logos a:nth-child(4) { transform: translateY(8px) rotate(1.5deg); }
.group-orbit-logos a:nth-child(5) { transform: translateY(-4px) rotate(-1deg); }
.group-orbit-logos a:nth-child(6) { transform: translateY(6px) rotate(1deg); }
.group-orbit-logos a:nth-child(7) { transform: translateY(-7px) rotate(-1deg); }

.group-orbit-logos a::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1px solid transparent;
    transition: border-color 0.24s ease;
    pointer-events: none;
}

.group-orbit-logos a:hover {
    transform: translateY(-7px) scale(1.045) rotate(0deg) !important;
    background: #fff;
    border-color: rgba(251, 75, 18, 0.24);
    box-shadow: 0 16px 30px rgba(17, 31, 50, 0.11);
}

.group-orbit-logos a:hover::after {
    border-color: rgba(246, 182, 63, 0.22);
}

.group-orbit-logos img {
    max-width: 90px;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.group-orbit-logos a:nth-child(1) img,
.group-orbit-logos a:nth-child(5) img {
    max-width: 48px;
    max-height: 36px;
}

.group-orbit-arrow {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            135deg,
            var(--navy),
            #17476e
        );
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 10px 24px rgba(13, 53, 87, 0.18);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.group-orbit-arrow:hover {
    transform: translateX(4px) scale(1.03);
    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-2)
        );
    box-shadow: 0 14px 28px rgba(251, 75, 18, 0.22);
}

/* ---------------------------------------------------------
   3. Footer network row
--------------------------------------------------------- */

.footer-group-network {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 0 0 28px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-group-network-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    white-space: nowrap;
}

.footer-group-network-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 6px rgba(251, 75, 18, 0.12);
}

.footer-group-network-logos {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.footer-group-network-logos a {
    min-height: 56px;
    display: grid;
    place-items: center;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.footer-group-network-logos a:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(246, 182, 63, 0.35);
}

.footer-group-network-logos img {
    max-width: 90px;
    max-height: 34px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------
   Responsive refinements
--------------------------------------------------------- */

@media (max-width: 1180px) {
    .top-group-ribbon-inner {
        grid-template-columns: auto minmax(0, 1fr);
        padding-left: 18px;
        padding-right: 18px;
    }

    .top-group-ribbon-action {
        display: none;
    }

    .group-orbit-shell {
        grid-template-columns: 1fr auto;
    }

    .group-orbit-copy {
        grid-column: 1 / -1;
    }

    .group-orbit-copy::after {
        max-width: none;
    }

    .group-orbit-logos {
        justify-content: flex-start;
    }

    .footer-group-network {
        grid-template-columns: 1fr;
    }

    .footer-group-network-logos {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 860px) {
    .top-group-ribbon-inner {
        min-height: 88px;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 0 9px 16px;
    }

    .top-group-ribbon-label {
        padding-right: 16px;
    }

    .top-group-ribbon-window {
        width: 100%;
    }

    .top-group-logo {
        width: 168px;
        height: 58px;
    }

    .top-group-logo img {
        max-width: 150px;
        max-height: 46px;
    }

    .group-orbit-shell {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .group-orbit-logos {
        justify-content: flex-start;
    }

    .group-orbit-arrow {
        display: none;
    }
}

@media (max-width: 620px) {
    .top-group-ribbon {
        margin-top: 68px;
    }

    .top-group-ribbon-inner {
        min-height: 68px;
        padding: 8px 0 8px 10px;
        gap: 0;
    }

    .top-group-ribbon-label {
        display: none;
    }

    .top-group-logo {
        width: 152px;
        height: 54px;
        padding: 4px;
    }

    .top-group-logo img {
        max-width: 138px;
        max-height: 44px;
    }

    .hero {
        padding-top: 62px;
    }

    .group-orbit-strip {
        padding: 0 0 14px;
    }

    .group-orbit-shell {
        min-height: 0;
        padding: 22px 18px 24px;
        border-radius: 22px;
    }

    .group-orbit-copy strong {
        font-size: 1.05rem;
    }

    .group-orbit-logos {
        gap: 9px;
    }

    .group-orbit-logos a,
    .group-orbit-logos a:nth-child(1),
    .group-orbit-logos a:nth-child(2),
    .group-orbit-logos a:nth-child(3),
    .group-orbit-logos a:nth-child(4),
    .group-orbit-logos a:nth-child(5),
    .group-orbit-logos a:nth-child(6),
    .group-orbit-logos a:nth-child(7) {
        min-width: 98px;
        width: auto;
        height: 56px;
        padding: 8px 11px;
        border-radius: 16px;
        transform: none;
    }

    .group-orbit-logos img,
    .group-orbit-logos a:nth-child(1) img,
    .group-orbit-logos a:nth-child(5) img {
        max-width: 76px;
        max-height: 32px;
    }

    .footer-group-network {
        gap: 16px;
        margin-bottom: 28px;
    }

    .footer-group-network-logos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-group-ribbon-track {
        animation: none;
        transform: none;
    }
}

/* =========================================================
   V6 — GROUP LOGO ALIGNMENT & CENTERING
   Keeps every company mark visually centred and prevents
   wide/tall logos from being cropped inside their containers.
========================================================= */

/* Shared centring rules */
.top-group-logo,
.group-logo-chip,
.group-brand-card,
.group-orbit-logos a,
.footer-group-network-logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Prevent image baselines, stretching and accidental cropping */
.top-group-logo img,
.group-logo-chip img,
.group-brand-card img,
.group-orbit-logos img,
.footer-group-network-logos img {
    display: block;
    margin: auto;
    object-fit: contain;
    object-position: center center;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Top navigation ribbon
--------------------------------------------------------- */

.top-group-logo {
    width: 184px;
    height: 62px;
    padding: 8px 16px;
}

.top-group-logo img {
    width: auto;
    height: auto;
    max-width: 148px;
    max-height: 40px;
    border-radius: 0;
}

/* ---------------------------------------------------------
   Secondary light logo ribbon
--------------------------------------------------------- */

.group-logo-chip {
    width: 148px;
    height: 54px;
    padding: 8px 14px;
}

.group-logo-chip img {
    width: auto;
    height: auto;
    max-width: 118px;
    max-height: 34px;
    object-fit: contain;
    object-position: center;
}

/* ---------------------------------------------------------
   Featured advert logo rail
   Previously filled the full card with object-fit: cover.
   These now behave like true centred logo tiles.
--------------------------------------------------------- */

.group-brand-card {
    width: 176px;
    height: 64px;
    padding: 9px 16px;
}

.group-brand-card img {
    width: auto;
    height: auto;
    max-width: 142px;
    max-height: 42px;
    object-fit: contain;
    object-position: center;
}

.group-brand-card:hover img,
.group-brand-card.active img {
    transform: scale(1.04);
}

/* ---------------------------------------------------------
   Mid-page constellation / orbit
--------------------------------------------------------- */

.group-orbit-logos a {
    padding: 10px 14px;
}

.group-orbit-logos img {
    width: auto;
    height: auto;
    max-width: 92px;
    max-height: 38px;
    object-fit: contain;
    object-position: center;
}

/* Circular logo holders need slightly more breathing room. */
.group-orbit-logos a:nth-child(1) img,
.group-orbit-logos a:nth-child(5) img {
    max-width: 44px;
    max-height: 34px;
}

/* ---------------------------------------------------------
   Footer group network
--------------------------------------------------------- */

.footer-group-network-logos a {
    min-height: 60px;
    padding: 10px 12px;
}

.footer-group-network-logos img {
    width: auto;
    height: auto;
    max-width: 92px;
    max-height: 34px;
    object-fit: contain;
    object-position: center;
}

/* ---------------------------------------------------------
   Mobile sizing
--------------------------------------------------------- */

@media (max-width: 768px) {
    .top-group-logo {
        width: 158px;
        height: 56px;
        padding: 8px 14px;
    }

    .top-group-logo img {
        max-width: 126px;
        max-height: 36px;
    }

    .group-logo-chip {
        width: 132px;
        height: 50px;
        padding: 8px 12px;
    }

    .group-logo-chip img {
        max-width: 104px;
        max-height: 31px;
    }

    .group-brand-card {
        width: 152px;
        height: 58px;
        padding: 8px 13px;
    }

    .group-brand-card img {
        max-width: 122px;
        max-height: 38px;
    }

    .footer-group-network-logos img {
        max-width: 84px;
        max-height: 31px;
    }
}

@media (max-width: 520px) {
    .top-group-logo {
        width: 148px;
        height: 54px;
    }

    .top-group-logo img {
        max-width: 118px;
        max-height: 34px;
    }

    .group-orbit-logos a {
        min-height: 58px;
    }
}

/* =========================================================
   V7 — PILL-SHAPED LOGO TREATMENT
   Makes the actual logo image area follow the same pill
   language as the surrounding group-company controls.
========================================================= */

/* Shared pill holders */
.top-group-logo,
.group-logo-chip,
.group-brand-card,
.group-orbit-logos a,
.footer-group-network-logos a {
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Shared logo image behaviour */
.top-group-logo img,
.group-logo-chip img,
.group-brand-card img,
.group-orbit-logos img,
.footer-group-network-logos img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center center;
    box-sizing: border-box;
    border-radius: 999px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   TOP GROUP RIBBON
--------------------------------------------------------- */

.top-group-logo {
    width: 190px;
    height: 68px;
    padding: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.98)
        );
    border: 1px solid rgba(13, 53, 87, 0.10);
    box-shadow:
        0 8px 20px rgba(17, 31, 50, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.top-group-logo img {
    max-width: 100%;
    max-height: 100%;
    padding: 10px 20px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fb 100%
        );
    border-radius: 999px;
}

.top-group-logo:hover,
.top-group-logo.active {
    transform: translateY(-3px);
    border-color: rgba(251, 75, 18, 0.28);
    box-shadow:
        0 12px 26px rgba(17, 31, 50, 0.10),
        0 0 0 4px rgba(251, 75, 18, 0.05);
}

/* ---------------------------------------------------------
   SECONDARY LOGO RIBBON / CHIPS
--------------------------------------------------------- */

.group-logo-chip {
    width: 160px;
    height: 60px;
    padding: 0;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(13, 53, 87, 0.10);
    box-shadow: 0 8px 18px rgba(17, 31, 50, 0.06);
}

.group-logo-chip img {
    max-width: 100%;
    max-height: 100%;
    padding: 8px 18px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
    border-radius: 999px;
}

/* ---------------------------------------------------------
   FEATURED AD LOGO SELECTOR
--------------------------------------------------------- */

.group-brand-card {
    width: 182px;
    height: 68px;
    padding: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px rgba(17, 31, 50, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.group-brand-card img {
    max-width: 100%;
    max-height: 100%;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
}

.group-brand-card:hover,
.group-brand-card.active {
    transform: translateY(-3px);
    border-color: rgba(251, 75, 18, 0.32);
    box-shadow: 0 12px 26px rgba(17, 31, 50, 0.12);
    background: rgba(255, 255, 255, 0.20);
}

.group-brand-card:hover img,
.group-brand-card.active img {
    background: #ffffff;
    transform: scale(1.02);
}

/* ---------------------------------------------------------
   MID-PAGE ORBIT / CONSTELLATION
--------------------------------------------------------- */

.group-orbit-logos a {
    min-width: 124px;
    min-height: 64px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(13, 53, 87, 0.10);
    box-shadow: 0 8px 20px rgba(17, 31, 50, 0.06);
}

.group-orbit-logos img {
    max-width: 100%;
    max-height: 100%;
    padding: 10px 16px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.98)
        );
    border-radius: 999px;
}

/* Keep the floating/staggered layout but prevent image distortion */
.group-orbit-logos a:nth-child(1) img,
.group-orbit-logos a:nth-child(5) img {
    max-width: 100%;
    max-height: 100%;
}

/* ---------------------------------------------------------
   FOOTER GROUP NETWORK
--------------------------------------------------------- */

.footer-group-network-logos a {
    min-width: 136px;
    min-height: 60px;
    padding: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.footer-group-network-logos img {
    max-width: 100%;
    max-height: 100%;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .top-group-logo {
        width: 170px;
        height: 62px;
    }

    .top-group-logo img {
        padding: 9px 16px;
    }

    .group-logo-chip {
        width: 148px;
        height: 56px;
    }

    .group-logo-chip img {
        padding: 8px 14px;
    }

    .group-brand-card {
        width: 160px;
        height: 62px;
    }

    .group-brand-card img {
        padding: 8px 14px;
    }

    .group-orbit-logos a {
        min-width: 110px;
        min-height: 58px;
    }

    .group-orbit-logos img {
        padding: 8px 12px;
    }

    .footer-group-network-logos a {
        min-width: 120px;
        min-height: 56px;
    }

    .footer-group-network-logos img {
        padding: 8px 13px;
    }
}

@media (max-width: 520px) {

    .top-group-logo {
        width: 152px;
        height: 56px;
    }

    .top-group-logo img {
        padding: 8px 14px;
    }

    .group-logo-chip {
        width: 136px;
        height: 52px;
    }

    .group-brand-card {
        width: 148px;
        height: 56px;
    }

    .group-orbit-logos a {
        min-width: 104px;
        min-height: 56px;
    }
}

/* =========================================================
   V8 — PUBLISHER-STYLE GROUP ADVERTISING
   Inspired by the placement rhythm of major publishing sites:
   a persistent brand ticker, leaderboard display units, native
   sponsored content, a desktop rail and in-feed ad cards.
========================================================= */

/* ---------------------------------------------------------
   Shared advertisement labels
--------------------------------------------------------- */
.publisher-ad-label,
.publisher-rail-label {
    margin: 0 0 9px;
    color: #8c98a4;
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Leaderboard immediately after stats
--------------------------------------------------------- */
.publisher-leaderboard-section {
    padding: 34px 0 42px;
    background: #f6f8fa;
    border-top: 1px solid rgba(13, 53, 87, 0.05);
    border-bottom: 1px solid rgba(13, 53, 87, 0.06);
}

.publisher-leaderboard {
    overflow: hidden;
    border: 1px solid rgba(13, 53, 87, 0.09);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(20, 39, 65, 0.08);
}

.publisher-leaderboard .group-feature-media {
    border-radius: 0;
    background: #0e2030;
}

.publisher-leaderboard .group-feature-link,
.publisher-leaderboard .group-feature-link picture,
.publisher-leaderboard .group-feature-link img {
    display: block;
    width: 100%;
}

.publisher-leaderboard .group-feature-link img {
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: cover;
}

.publisher-leaderboard-meta {
    min-height: 74px;
    padding: 13px 18px;
    background: #fff;
}

.publisher-leaderboard .group-feature-progress {
    height: 3px;
    background: rgba(13, 53, 87, 0.08);
}

/* ---------------------------------------------------------
   Native sponsored editorial card
--------------------------------------------------------- */
.publisher-native-section {
    padding: 30px 0 64px;
    background: #fff;
}

.publisher-native-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
    min-height: 380px;
    overflow: hidden;
    border: 1px solid rgba(13, 53, 87, 0.09);
    border-radius: 26px;
    background:
        radial-gradient(circle at 5% 0%, rgba(251, 75, 18, 0.08), transparent 28%),
        linear-gradient(135deg, #fffaf4 0%, #ffffff 56%, #f5f8fb 100%);
    box-shadow: 0 22px 54px rgba(20, 39, 65, 0.08);
}

.publisher-native-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 52px;
}

.publisher-native-label {
    margin-bottom: 20px;
    color: var(--orange);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.publisher-native-brand {
    width: 154px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    padding: 9px 16px;
    overflow: hidden;
    border: 1px solid rgba(13, 53, 87, 0.09);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(17, 31, 50, 0.05);
}

.publisher-native-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 999px;
}

.publisher-native-copy h2 {
    max-width: 620px;
    margin: 0 0 14px;
    color: var(--navy);
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    line-height: 1.05;
}

.publisher-native-copy p {
    max-width: 610px;
    margin: 0 0 26px;
    color: #5e6d79;
    font-size: 1rem;
    line-height: 1.7;
}

.publisher-native-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 19px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    transition: transform 0.22s ease, background 0.22s ease;
}

.publisher-native-cta:hover {
    transform: translateY(-2px);
    background: var(--orange);
}

.publisher-native-media {
    display: block;
    min-height: 100%;
    overflow: hidden;
    background: #101c28;
}

.publisher-native-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

.publisher-native-card:hover .publisher-native-media img {
    transform: scale(1.025);
}

/* ---------------------------------------------------------
   K53 content + desktop advertising rail
--------------------------------------------------------- */
@media (min-width: 1180px) {
    #k53 .k53-grid {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr) 250px;
        align-items: start;
        gap: 34px;
    }
}

.publisher-rail-ad {
    position: relative;
    align-self: start;
    overflow: hidden;
    border: 1px solid rgba(13, 53, 87, 0.09);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 15px 36px rgba(20, 39, 65, 0.09);
}

.publisher-rail-label {
    margin: 0;
    padding: 11px 10px 9px;
    border-bottom: 1px solid rgba(13, 53, 87, 0.06);
    background: #f8fafb;
}

.publisher-rail-ad > a {
    display: block;
    overflow: hidden;
}

.publisher-rail-ad > a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    transition: transform 0.42s cubic-bezier(.2,.7,.2,1);
}

.publisher-rail-ad:hover > a img {
    transform: scale(1.025);
}

.publisher-rail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-top: 1px solid rgba(13, 53, 87, 0.06);
}

.publisher-rail-meta img {
    width: 72px;
    height: 32px;
    padding: 4px 8px;
    object-fit: contain;
    border-radius: 999px;
    background: #f7f8fa;
}

.publisher-rail-meta span {
    color: #6d7a86;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------
   Mid-page display ad break
--------------------------------------------------------- */
.publisher-ad-break {
    padding: 30px 0 38px;
    background: #f7f9fb;
}

.publisher-ad-break-link {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(13, 53, 87, 0.08);
    border-radius: 16px;
    background: #101c28;
    box-shadow: 0 14px 36px rgba(20, 39, 65, 0.07);
}

.publisher-ad-break-link picture,
.publisher-ad-break-link img {
    display: block;
    width: 100%;
}

.publisher-ad-break-link img {
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}

.publisher-ad-break-link:hover img {
    transform: scale(1.01);
}

/* ---------------------------------------------------------
   Sponsored in-feed cards
--------------------------------------------------------- */
.group-picks-section {
    background: #fff;
}

.group-picks-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(13, 53, 87, 0.10);
}

.group-picks-head .section-title {
    margin-bottom: 0;
}

.group-picks-grid {
    align-items: stretch;
}

.group-pick-card,
.group-pick-card-offset {
    transform: none;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(13, 53, 87, 0.09);
    background: #fff;
    box-shadow: 0 14px 34px rgba(20, 39, 65, 0.07);
}

.group-pick-media {
    aspect-ratio: 6 / 5;
    background: #111e2a;
}

.group-pick-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-pick-body {
    padding: 17px 18px 18px;
}

.group-pick-body > span {
    color: #8b98a4;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Keep the top group ribbon as the persistent network layer
--------------------------------------------------------- */
.top-group-ribbon {
    position: relative;
}

.top-group-logo {
    min-width: 190px;
}

/* ---------------------------------------------------------
   Responsive publisher placements
--------------------------------------------------------- */
@media (max-width: 1179px) {
    .publisher-rail-ad {
        grid-column: 1 / -1;
        width: min(760px, 100%);
        margin: 24px auto 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .publisher-rail-label {
        grid-column: 1 / -1;
    }

    .publisher-rail-meta {
        border-top: 0;
        border-left: 1px solid rgba(13, 53, 87, 0.06);
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .publisher-native-card {
        grid-template-columns: 1fr;
    }

    .publisher-native-copy {
        padding: 34px 28px;
    }

    .publisher-native-media {
        min-height: 0;
    }

    .publisher-native-media img {
        min-height: 0;
        aspect-ratio: 6 / 5;
    }
}

@media (max-width: 620px) {
    .publisher-leaderboard-section,
    .publisher-ad-break {
        padding-left: 0;
        padding-right: 0;
    }

    .publisher-leaderboard-section .container,
    .publisher-ad-break .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .publisher-leaderboard,
    .publisher-ad-break-link {
        border-radius: 14px;
    }

    .publisher-leaderboard .group-feature-link img,
    .publisher-ad-break-link img {
        aspect-ratio: 6 / 5;
    }

    .publisher-leaderboard-meta {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .publisher-native-section {
        padding: 20px 0 40px;
    }

    .publisher-native-card {
        border-radius: 20px;
    }

    .publisher-native-copy {
        padding: 28px 22px 30px;
    }

    .publisher-native-brand {
        width: 142px;
        height: 54px;
    }

    .publisher-rail-ad {
        display: block;
        width: 100%;
    }

    .publisher-rail-meta {
        border-left: 0;
        border-top: 1px solid rgba(13, 53, 87, 0.06);
        flex-direction: row;
        justify-content: flex-start;
    }

    .group-picks-head {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .publisher-native-media img,
    .publisher-ad-break-link img,
    .publisher-rail-ad > a img {
        transition: none;
    }
}