/*=====================================
      DESKTOP AND GENERAL STYLES
======================================= */

/* BASIC */
         * {
            box-sizing: border-box;
         }

         .swa-landing-page-content-detail {
            background: #ffffff;
         }

         li,
         th,
         td {
            font-family: "SouthwestSans-Regular", arial, sans-serif;
         }

         p:not([class^="caption"]) {
            font-size: var(--font-size);
         }

         :root h2 {
            --font-size: 1.75rem;
         }

         :root p,
         :root th,
         :root td,
         :root li,
         :root th {
            --font-size: 1.125rem;
         }

         :root h1 {
            --font-size: 2.5rem;
         }

         :root .hero-content p:first-of-type,
         :root h4 {
            --font-size: 1.25rem;
         }

         :root #rr-disclaimers p {
            --font-size: 0.75rem;
         }

         main,
         .hero-content,
         footer {
            margin: 4rem auto;
         }

         main {
            margin-bottom: 2rem;
         }

         h1,
         h2,
         p,
         h3,
         h4,
         th,
         td,
         #rr-disclaimers p,
         th,
         li {
            color: #111b40;
            font-size: var(--font-size);
         }

         h1,
         h2,
         h3 {
            line-height: 120%;
            font-weight: 700;
            padding: 0 0 1rem;
            margin: 0;
         }

         h2:not(:first-child) {
            margin-top: 4rem;
         }

         p {
            line-height: 140%;
            margin: 1rem 0;
         }

         details p ~ ul {
            margin-left: 3rem;
            margin-bottom: 1rem;
         }         

         sup {
            font-size: 50%;
         }

         sup:not(.disclaimer-num) {
            position: static;
            vertical-align: super;
            line-height: 0;
         }
         
         .rr-bordered-cta {
            width: auto;
            font-size: 1.125rem;
            padding: 12px 20px;
            min-height: 50px;
            border: 2px solid #152360;
            border-radius: 8px;
            background: #ffffff;
            font-weight: 700;
            color: #111b40;
            cursor: pointer;
         }

/* TOP NAV */
        .top-rr-sub-nav {
            background-color:#152360;
         }

         .topnav {
            --topnav-bg: #152360;
            --topnav-fg: #fff;
            --topnav-divider: rgba(255, 255, 255, 0.35);
            --topnav-hover: rgba(255, 255, 255, 0.15);
            --topnav-speed: 0.25s;

            width: 100%;
            background: var(--topnav-bg);
            color: var(--topnav-fg);
         }

         .topnav__links {
            display: flex;
            flex-wrap: wrap; /* wraps gracefully on narrow desktops/tablets */
            padding: 18px 0;
         }

         .swa-landing-page-content-detail .topnav__links a {
            color: #ffffff;
            flex: 1 1 auto;
            padding: 2px 16px;
            color: inherit;
            text-align: center;
            text-decoration: none;
            font-weight: 600;
            -webkit-tap-highlight-color: transparent;
            transition: background-color 0.15s;
         }

         .topnav__links a + a {
            border-left: 1px solid var(--topnav-divider);
         }

         .swa-landing-page-content-detail .topnav__links a:hover {
            background: var(--topnav-hover);
            text-decoration: none;
         }

         .topnav__links a:focus-visible,
         .topnav__toggle:focus-visible {
            outline: none;
            outline-offset: -4px;
            text-decoration: none;
         }


         .topnav__toggle {
            display: none;
         }  
         .topnav.no-anim,
         .topnav.no-anim * {
            transition: none !important;
         }

         @media (prefers-reduced-motion: reduce) {
            .topnav,
            .topnav * {
               transition: none !important;
            }
         }

/* HERO */
         .hero {
            background-image: url("/swa-resources/images/responsive/rapid-rewards-responsive/rr3-0-milestone-awards-hero-d.webp");
            background-position: bottom right;
            background-size: 100%;
            background-repeat: no-repeat;
            padding: 0;
            height: 420px;
         }

         .hero-gradient {
            background: linear-gradient(to right, #111b40, rgba(21, 35, 96, 0));
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 3% 0;
         }

         h1,
         .hero p:not([class^="caption"]) {
            color: #ffffff;
         }

         .hero p {
            margin-bottom: 1rem;
            font-size: 1.2rem;
         }
         
         .hero p:last-child {
            font-size: 1rem;
         }

         .timestamp {
            font-weight: 700;
         }

         .timestamp span {
            font-size: 50%;
            vertical-align: 0.1rem;
         }

/* SIDE NAV */
        #sub-nav-first-section {
            padding-bottom: 8rem;
            border-bottom: 1px #C8D4E0 solid;
            margin-bottom: 0;
         }

         .subnav-heading.p:not([class^="caption"]):has(+ ul), .subnav-heading.p:not([class^="caption"]):has(+ ul) {
            margin-bottom: 1rem;
         }

         .swa-landing-page-content-detail ul.subnav-list {
            border-left: 1px solid #ccc;
            -webkit-padding-start: 0;
            margin-top: 1rem;
         }
  
         .swa-landing-page-content-detail li.subnav-item {
            padding: 4%;
            list-style-type: none;
            font-size: .9rem;
         }
         
         .subnav-item.active {
            background-color: #EEF6FF;
            border-left: solid 2px #152360;
         }

         @media (min-width: 992px) {
            #sub-nav-first-section .sub-nav {
               flex-wrap: nowrap;
               gap: 20px 20px;
            }
            #sub-nav-first-section .sub-nav>div {
               flex-grow: 0;
               flex-shrink: 0;
               flex-direction: column;
            }
         }

/* TABLE */
         tr:first-of-type th {
            border-radius: 8px 8px 0 0;
         }
         tr:last-of-type td:first-of-type {
            border-radius: 0 0 0 8px;
         }
         tr:last-of-type td:last-of-type {
            border-radius: 0 0 8px 0;
            background-color: #f6f9fc;
         }
         th {
            text-align: center;
         }
         th,
         td:first-of-type {
            background-color: #152360;
            color: #ffffff;
         }
         th,
         td {
            padding: 18px 24px;
            border: 1px solid #ffffff;
         }
         td:first-of-type {
            width: 40%;
            font-weight: bold;
         }

/* TIMELINE */
        .timeline th,
         .timeline td,
         .timeline tr:last-of-type td:last-of-type {
            background-color: transparent;
            color: #111b40;
            font-weight: normal;
            text-align: center;
            padding: 0;
            width: 18%;
         }
         
         .timeline td:first-of-type {
            background-color: transparent;
         }

         .timeline th div {
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
         }

         .timeline th {
            text-align: left;
         }

         .timeline th:first-child,
         .timeline td:first-child {
            width: 11%;
         }

         .timeline th:last-child,
         .timeline td:last-child,
         .timeline tr:last-of-type td:last-of-type {
            width: 14%;
            padding-left: 3%;
         }

         .timeline td p:not([class^="caption"]) {
            font-weight: 500;
            border-radius: 4px;
            padding: 2px 8px;
            margin: 0;
            width: auto;
            display: inline;
         }

         .timeline td p:not([class^="caption"]), .timeline td, .timeline th {
            font-size:.9rem;
         }

         .reward-image td {
            position: relative;
            z-index: 1;
            border: 0 transparent solid;
         }

         .reward-image td:first-child {
            text-align: left;
         }

         .reward-image td::before {
            background-image: linear-gradient(to right, #304cb2, #6279c6);
            background-repeat: no-repeat;
            background-position: center center;
            height: 1rem;
            content: "";
            position: absolute;
            top: calc(50% - 0.65rem);
            left: 25px;
            width: 100%;
            z-index: -1;
         }

         .reward-image td:nth-child(2)::before {
            background-image: linear-gradient(to right, #6279c6, #eef6ff);
            left: 24px;
         }

         .reward-image td:nth-child(3)::before {
            background-image: linear-gradient(to right, #eef6ff, #e5cfa3);
            left:23px
         }

         .reward-image td:nth-child(4)::before {
            background-image: linear-gradient(to right, #e5cfa3, #decaa2);
            left:22px
         }

         .reward-image td:nth-child(5)::before {
            background-image: linear-gradient(to right, #decaa2, #b4ac9f);
            left:21px
         }

         .reward-image td:nth-child(6)::before {
            background-image: linear-gradient(
               to right,
               #b4ac9f 50%,
               transparent 51%
            );
            left:20px;
         }

         .milestone-reward p:not([class^="caption"])  {
            color: #ffffff;
            background-color: #152360;
         }

         .silver p {
            color: #111b40;
            background-color: #a2b1c0;
         }

         .gold p {
            color: #111b40;
            background-color: #bc9862;
         }

         .platinum p {
            color: #111b40;
            background-color: #b4ac9f;
         }

         .timeline {
            border-spacing: 0;
         }

         .timeline img {
            width: 50px;
         }

         .timeline-bold th,
         .timeline-bold td,
         .timeline tr:last-of-type td:last-of-type {
            font-weight: 700;
         }     

         .reward-image td {
            padding-bottom: 6px;
         }
         
         @media (min-width: 769px) {
            .reward-name::after {
               content: "|";
               font-weight: 500;
               border-radius: 4px;
               padding: 0;
               font-size: 1.3rem;
               line-height: 1.5rem;
               margin: 0;
               display: block;
            }
            .reward-name:nth-child(3)::after {
               color: #a2b1c0;
            }
            .reward-name:nth-child(4)::after {
               color: #bc9862;
            }
            .reward-name:nth-child(6)::after {
               color: #b4ac9f;
            }

            .hide-on-desktop-table,
            .hide-on-tablet-table {
               display: none !important;
            }
         }


/* FAQ */
         #milestone-rewards-faqs {
            padding-bottom: 0;
         }
         summary {
            list-style: none;
            cursor: pointer;
            background-color: #f6f9fc;
            padding: 1rem 1.2rem;
            display: grid;
            grid-template-columns: 1fr 3rem;
            justify-content: center;
            align-items: center;
            width: 100%;
         }

         summary::-webkit-details-marker {
            display: none;
         }

         details {
            width: 100%;
            margin: 20px 0;
         }

         summary h4 {
            font-weight: 700;
            font-size: 1.25rem;
            color: #304cb2;
            margin-bottom: 0;
         }
         
         .faq-content { 
            overflow: hidden; 
         }

         details p {
            padding: 1rem 1.2rem;
         }

         p:has(+ ul),
         details p:has(+ ul),
         p:not([class^="caption"]):has(+ ul) {
            padding-bottom: 0;
            margin-bottom: 0;
         }
         
         .marker {
            justify-self: end;
            transform: rotate(-90deg);
         }

         .marker img {
            width: 12px;
         }

         /* Change the arrow icon when the <details> box is open */
         details[open]:not(.closing) .marker {
            transform: rotate(90deg);
         }

/* FOOTER */
         #rr-disclaimers h4 {
            font-weight: 700;
            color: #111b40;
            font-size: 1.25rem;
         }
         #rr-disclaimers .card-disclaimer h4 {
            text-transform: uppercase;
            margin: 2rem 0 0;
            font-size: .75rem;
         }

         .card-disclaimer p {
            margin: 8px 0 16px;
         }

         .card-disclaimer p:last-of-type {
            margin: 2rem 0;
         }


/*=====================================
            MOBILE STYLES
======================================= */

/* TOP NAV */
         @media (max-width: 1180px) {
            .topnav__toggle {
               display: flex;
               align-items: center;
               justify-content: space-between;
               width: 100%;
               min-height: 48px;
               padding: 0 16px;
               background: transparent;
               border: none;
               color: inherit;
               cursor: pointer;
               -webkit-tap-highlight-color: transparent;
            }

            .topnav__toggle:focus {
               outline: none;
            }

            /* hamburger -> X */
            .topnav__icon {
               position: relative;
               width: 24px;
               height: 18px;
            }
            .topnav__icon span {
               position: absolute;
               left: 0;
               width: 100%;
               height: 2px;
               background: currentColor;
               border-radius: 2px;
               transition: transform var(--topnav-speed), top var(--topnav-speed), opacity 0.15s;
            }

            .topnav__icon span:nth-child(1) { 
               top: 0; 
            }

            .topnav__icon span:nth-child(2) { 
               top: 8px; 
            }
            
            .topnav__icon span:nth-child(3) { 
               top: 16px; 
            }

            .topnav.is-open .topnav__icon span:nth-child(1) { 
               top: 8px; transform: rotate(45deg); 
            }

            .topnav.is-open .topnav__icon span:nth-child(2) { 
               opacity: 0; 
            }

            .topnav.is-open .topnav__icon span:nth-child(3) { 
               top: 8px; transform: rotate(-45deg); 
            }

            /* vertical list */
            .topnav__links {
               flex-direction: column;
               flex-wrap: nowrap;
               padding: 0 16px 8px;
            }

            .swa-landing-page-content-detail .topnav__links a {
               min-height: 48px;
               display: flex;
               align-items: center;
               padding: 2px 0 2px 6px;
               border-top: 1px solid var(--topnav-divider);
            }

            .topnav__links a + a {
               border-left: 0;
            }

            /* the bar is the positioning anchor for the overlay */
            .topnav {
               position: relative;
            }

            .topnav .topnav__panel {
               position: absolute;
               top: 100%;
               left: 0;
               right: 0;
               z-index: 1000;
               max-height: 70vh;
               overflow-y: auto;
               background: var(--topnav-bg);
               box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
               border-radius: 8px;

               /* closed */
               opacity: 0;
               transform: translateY(-8px);
               visibility: hidden; /* removes hidden links from tab order */
               pointer-events: none;
               transition: opacity var(--topnav-speed) ease,
                           transform var(--topnav-speed) ease,
                           visibility 0s linear var(--topnav-speed);
            }

            .topnav.is-open .topnav__toggle {
               justify-content: flex-end;
               
            }

            .topnav.is-open .topnav__label {
               display: none;
            }

            .topnav.is-open .topnav__panel {
               opacity: 1;
               transform: translateY(0);
               visibility: visible;
               pointer-events: auto;
               transition: opacity var(--topnav-speed) ease,
                           transform var(--topnav-speed) ease,
                           visibility 0s;
            }

            .topnav.no-anim,
            .topnav.no-anim * {
               transition: none !important;
            }
         }


         @media (max-width: 768px) {   

/* BASIC */
            main,
            .hero-content,
            footer {
               margin: 1rem auto;
               padding: 0 1rem;
            }

            button.rr-bordered-cta {
               width: 100%;
            }     

/* HERO */
            .hero {
               background-image: url("/swa-resources/images/responsive/rapid-rewards-responsive/rr3-0-milestone-awards-hero-m.webp");
               height: 600px;
            }
            
            .hero-gradient {
               background: linear-gradient(
                  to bottom,
                  #111b40,
                  rgba(21, 35, 96, 0)
               );
               justify-content: flex-start;
               padding: 24px;
            }

/* SIDE NAV */  
          .sub-nav-panels h2:first-child {
                padding-top: 4rem;
            }

/* TABLE */            
            th,
            td,
            td:first-of-type {
               display: block;
               width: 100%;
            }

            td:first-of-type {
               background-color: #f6f9fc;
               color: #111b40;
               text-align: center;
            }

            tr:last-of-type td:first-of-type {
               border-radius: 0;
            }

            tr:last-of-type td:last-of-type {
               border-radius: 0 0 8px 8px;
               background-color: #ffffff;
            }

/* TIMELINE */ 
            .timeline {
               width: 100%;
            }

            .timeline tbody {
               display: grid;
               grid-template-columns: 50px auto 4rem 1rem 4rem;
               padding-right: 20px;
            }

            .timeline th,
            .timeline td {
               height: 80px;
               display: flex;
               align-items: center;
               text-align: center;
            }

            .timeline .timeline-bold td,
            .timeline .timeline-bold th,
            .timeline tr:nth-child(5) th,
            .timeline th:first-child,
            .timeline tr:last-of-type td:last-of-type {
               justify-content: center;
            }

            .timeline th,
            .timeline td,
            .timeline th:first-child,
            .timeline td:last-child,
            .timeline tr:last-of-type td:last-of-type {
               width: auto;
            }

            .timeline td:last-child,
            .timeline tr:last-of-type td:last-of-type {
               padding: 0;
            }

            .timeline td {
               text-align: center;
            }

            .timeline td.reward-name p {
               margin: 0 2.5rem 0 0.5rem;
            }

            .reward-name::before {
               content: "|";
               transform: rotate(90deg);
               font-weight: 500;
               border-radius: 4px;
               padding: 0;
               font-size: 1.3rem;
               line-height: 1.5rem;
               margin: 0 0 0 0.7rem;
               display: block;
            }

            .reward-name:nth-child(3)::before {
               color: #a2b1c0;
            }

            .reward-name:nth-child(4)::before {
               color: #bc9862;
            }

            .reward-name:nth-child(6)::before {
               color: #b4ac9f;
            }

            .reward-image td::before {
               transform: rotate(90deg);
               height: 10px;
               top: 55px;
               left: -15px!important;
               width: 80px;
            }

            .hide-on-mobile-table {
               display: none;
            }

            .hide-on-desktop-table,
            .hide-on-tablet-table {
               display: table-row;
            }
         }
                  
         @media (max-width: 500px) {
            .hero {
               height: 500px;
            }
         }