:root {
    --border-radius: 9px;

    --color-primary: #F69832;
    --color-secondary: #325F74;
    --color-primary-text: #F49542;
    --color-secondary-text: #499EA8;

    --text-color-dark: #5D6D6E;

    --color-detail: #7EB8C4;
    --color-detail-text: #6D96A9;

    --primary-gradient-fg: linear-gradient(#FFB646, #FF9859);
    --primary-gradient-bg: linear-gradient(#FFD4B2, #E17A3C);
    --primary-drop-color: #B44D00;

    --secondary-gradient-bg: linear-gradient(#8CC8CC, #6BAFBA);
    --secondary-drop-color: #507E8D;

    --tertiary-gradient-bg: linear-gradient(#E8FCFC, #CCF6FF);
    --tertiary-drop-color: #97CCE2;

    --font-display: "Outfit";
    --font-body: "Outfit";

    font-weight: 200;

    --header-background-color: #F7FEFFd0;
    --color-overlay: #50443F60;

    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.3rem;

    --soft-shadow: 0 1px 1px 0 #00626540, 0 2px 5px 0 #005C6A30;

    --style-light-1-grad: radial-gradient(circle at top, #FFFFFF, #E7F3F5);
}

#header-swipe .floating-wrapper {
    display: none;
}

#header-swipe .nav-toggle:before, #header-swipe .nav-toggle:after {
    --text-color: var(--color-secondary);
}

main {
    margin-top: calc(var(--header-size) + var(--padding-mega))
}

main:has(.hero-banner:first-child, .mighty-scroll:first-child) {
    margin-top: 0;
}

main > *:has(+ .peek-top) {
    padding-bottom: calc(var(--padding-large) + 50px);
}

body {
    background-color: #B9E1E8;
}

h1 {
    text-transform: uppercase;
    font-weight: 800;
}

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

h3 {
    text-transform: uppercase;
    color: var(--color-secondary);
}

p {
    font-size: 1.2rem;
}

.sup {
    font-size: 1rem;
}

.mega-hero-banner {
    min-height: max(500px, 75vh)
}

.hero-banner h1 {
    text-shadow: 0 2px 0 #00000070;
}

ul.link-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

ul.link-list li a {
    margin-left: 5px;
    font-weight: 600;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--padding-small);
    transition: 100ms;
}

ul.link-list li a:hover {
    text-decoration: none;
    gap: 5px;
}

ul.link-list li a:before {
    content: ">";
    font-family: "icons", sans-serif;
    right: calc(100% + 5px);
    font-size: .8rem;
    color: var(--color-secondary);
    transition: 100ms;
}

ul.link-list li a:hover:before {
    margin-left: .3em;
    color: var(--color-primary);
}

nav a {
    font-weight: 700;
}

nav a:hover {
    text-decoration: none!important;
}

nav a:not(.button-wrapper) {
    position: relative;
    z-index: 1;
}

nav a:not(.button-wrapper):after {
    content: "";
    position: absolute;
    height: 8px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 26%;
    width: 0%;
    transition: 250ms;
    background-color: var(--color-primary);
    z-index: -1;
    border-radius: 2px;
    opacity: .8;
}

nav a:hover:not(.button-wrapper):after {
    width: calc(100% - var(--padding-small));
}

.hero-banner {
    padding-top: calc(var(--header-size) + var(--padding-large));
    padding-bottom: var(--padding-large);
    justify-content: flex-end;
}

#header-swipe .header-top-wrapper, #header-swipe nav {
    backdrop-filter: blur(30px);
}

.hero-banner-content {
    text-align: left;
    align-items: flex-start;
}

.hero-banner-content > * {
    max-width: 700px;
}

.fade-bottom .hero-banner-background-cover {
    background-image: linear-gradient(#00000000 70%, #00000080);
}

.style-light-1 {
    background-image: var(--style-light-1-grad);
}

.style-light-2:not(.full-width) {
    border-radius: var(--border-radius-mega);
    padding: var(--padding-medium);
}

.style-light-2 {
    background: #DCF2F6;
}

.panel-large {
    box-shadow: var(--soft-shadow);
    border-radius: var(--border-radius-large);
}

.style-light-1.panel-large {
    box-shadow: var(--soft-shadow), inset 0 0 10px 0 #ffffff30, inset 0 0 1px 1px #ffffffa0;
}

.itb-content {
    background-image: var(--style-light-1-grad);
    border-radius: var(--border-radius-large);
    box-shadow: var(--soft-shadow);
}

.peek-top {
    margin-top: calc(var(--padding-mega) * -1 - 50px);
    position: relative;
    z-index: 1;
}

.dec-dividers {
    gap: 0;
}

.dec-div-col {
    padding: var(--padding-medium);
}

.dec-div-col .icon {
    width: 110px;
    margin-bottom: -10px;
}

.dec-div-col:not(:first-child) {
    border-top: 1px solid #429EB120;
}

.dec-div-col:not(:last-child) {
    border-bottom: 1px solid white;
}

@media (min-width: 600px) {
    .dec-div-col:not(:first-child) {
        border-top: none;
        border-left: 1px solid #429EB120;
    }

    .dec-div-col:not(:last-child) {
        border-bottom: none;
        border-right: 1px solid white;
    }

    .dec-div-col .icon {
        margin-top: -45px;
    }
}

/*<editor-fold desc="button">*/
.button {
    --button-foreground-color: white;
    --button-drop-color: transparent;
    padding: 1px;
    position: relative;
    background-color: blue;
    border: none;
    text-transform: uppercase;
    transition: 75ms;
    color: var(--button-foreground-color);
    box-shadow: 0 2px 0 0 var(--button-drop-color);
}

.button-wrapper:hover > .button {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 0 0 var(--button-drop-color);
    color: var(--button-foreground-color);
}

.button-wrapper:active > .button {
    transform: translateY(2px);
    filter: brightness(.95);
    box-shadow: 0 0 0 0 var(--button-drop-color);
}

.button > .button-label {
    border-radius: calc(var(--border-radius) - 1px);
    padding: var(--button-padding);
    width: 100%;
    height: 100%;
    flex-grow: 1;
}

/*<editor-fold desc="button-primary">*/
.button-primary {
    --button-drop-color: var(--primary-drop-color);
    background-image: var(--primary-gradient-bg);
}

.button-primary > .button-label {
    background-color: var(--color-primary);
    background-image: var(--primary-gradient-fg);
    text-shadow: 0 2px 1px #C6424280;
}
/*</editor-fold>*/

.button-secondary {
    --button-foreground-color: var(--text-color-light);
    --button-drop-color: var(--secondary-drop-color);
    box-shadow: 0 2px 0 0 var(--secondary-drop-color);
    background-image: var(--secondary-gradient-bg);
}

.button-tertiary {
    --button-foreground-color: var(--color-secondary);
    --button-drop-color: var(--tertiary-drop-color);
    box-shadow: 0 2px 0 0 var(--tertiary-drop-color);
    background-image: var(--tertiary-gradient-bg);
}

/*</editor-fold>*/

.gold-text > span {
    animation: gold-shine;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

#ez-1-columns {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--padding-medium);
}

.product-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.pc-list-header {
    background-color: #429EB125;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.pc-list {
    padding: 0;
    flex-grow: 1;
    line-height: 1.2;
}

.pc-list-item {
    padding: var(--padding-small) var(--padding-medium);
    color: var(--color-detail-text);
    font-size: .9rem;
    border-bottom: 1px solid #429EB120;
    border-top: 1px solid white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    hyphens: auto;
}

.pc-list-item-heading {
    font-size: .7rem;
    font-weight: 600;
    opacity: .6;
}

.pc-list-item-description {
    font-size: .85rem;
}

.pc-heading {
    padding: var(--padding-medium) var(--padding-small);
}

.product-column h3 {
    font-size: 1rem;
}

.pc-hr {
    align-self: center;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.pc-hr-center {
    width: 7px;
    height: 7px;
    background-color: #429EB135;
    transform: rotate(45deg);
}

.pc-hr-side {
    width: 40px;
    height: 1px;
    background-color: #429EB135;
}

.product-column .button-list {
    padding: var(--padding-medium);
}

.pc-price {
    text-transform: uppercase;
    color: var(--color-primary-text);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.text-large {
    font-size: 2rem;
    font-weight: 600;
}

.text-mega {
    font-size: 2.5rem;
}

.text-large .price {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.text-large .price-unit {
    font-size: 1.5rem;
    margin-top: .2em;
}

.footer-prominent {
    font-weight: 600;
}

footer .mini-heading {
    color: var(--text-color-light);
}

[class*="dec-text"] {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
}

.dec-text-large {
    font-size: 1.5rem;
    color: var(--color-secondary-text);
}

.dec-text-mega {
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--color-primary-text);
}

.dec-text-mega.super-mega {
    font-size: 2.5rem;
}

.dec-text-large:has(+ .dec-text-mega) {
    max-width: 400px;
}

/*<editor-fold desc="MIGHTY SCROLL!!!">*/
.mighty-scroll {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mighty-scroll:not(.js .mighty-scroll) {

}

#ms-pages {
    position: sticky;
    top: 0;
    display: grid;
}

.ms-page {
    background-color: #ECF8F8;

    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: var(--header-size) 0 calc(100vh - 100svh + var(--padding-large));

    position: relative;
}

.ms-page:not(.js .ms-page):not(:first-child) {
    height: unset;
    min-height: 60vh;
}

.js .ms-page {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
}

.ms-page.first-show {
    opacity: 1;
}

.ms-page.no-show {
    opacity: 0;
}

.ms-page.show {
    z-index: 100;
    animation: ms-page-fade-in-down 300ms;
    animation-fill-mode: both;
}

.ms-page.show.up {
    animation: ms-page-fade-in-up 300ms;
    animation-fill-mode: both;
}

.ms-page.hide {
    animation: ms-page-fade-out-down 300ms;
    animation-fill-mode: both;
    opacity: 0;
}

.ms-page.hide.up {
    animation: ms-page-fade-out-up 300ms;
    animation-fill-mode: both;
}

.ms-page-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    z-index: 10;
}

.ms-page-text {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
}

.ms-page-text p {
    font-size: 1rem;
    color: #5D6D6E;
}

.ms-page-text,
.ms-page-image {
    will-change: transform;
}

.right .ms-page-content {
    justify-content: flex-end;
}

.ms-page.show .ms-page-content {
    animation: ms-text-fade-in 500ms;
}

.ms-page-image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

.ms-page-image {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

.ms-page-image img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.ms-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #F4F9FAe0;
    z-index: 1;
}

@keyframes ms-page-fade-out-down {
    from {
        opacity: 1;
        transform: none;
    }
    to {

        opacity: 1;
        display: none;
    }
}

@keyframes ms-page-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ms-text-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(150px);
    }
    to {
        opacity: 1;
        transform: none;
     }
}

@keyframes ms-page-fade-out-up {
    from {
        opacity: 1;
        transform: none;
    }
    to {

        opacity: 1;
        display: none;
    }
}

@keyframes ms-page-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ms-text-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(-150px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/*</editor-fold>*/

@keyframes gold-shine {
    0% {
        color: #F8D580;
    }
    5% {
        color: #F6EDD5;
    }
    10% {
        color: #FFE9B5;
    }
    100% {
        color: #F8D580;
    }
}

.d-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: .1rem;
}

.d-space {
    flex-basis: 0em;
}

.d-word:has(+.d-space) {
    margin-right: .2em;
}

.d-word {
    display: flex;
    flex-direction: row;
}

.js .show .d-char {
    animation: d-char-in 600ms;
    /*transform: translateY(10px);*/
    animation-fill-mode: both;
    display: inline-block;
}

.js .show .ms-page-text p, .js .show .ms-page-text ul {
    animation: fade-in 600ms;
    animation-delay: 600ms;
    animation-fill-mode: both;
}

.js .show .ms-page-text ul li {
    animation: fade-in-left 600ms;
    animation-delay: 800ms;
    animation-fill-mode: both;
}

.js .show .ms-page-text ul li:nth-child(2) {
    animation-delay: 900ms;
}

.js .show .ms-page-text ul li:nth-child(3) {
    animation-delay: 1000ms;
}

.js .show .ms-page-text ul li:nth-child(4) {
    animation-delay: 1100ms;
}

.js .show .ms-page-text ul li:nth-child(5) {
    animation-delay: 1200ms;
}

.js .show .ms-page-text .button-list {
    animation: fade-in 600ms;
    animation-delay: 700ms;
    animation-fill-mode: both;
}

.ms-page-icon {
    width: 60px;
}

.ms-page-icon * {
    stroke: #A3C3C8!important;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes d-char-in {
    0% {
        transform: translateY(.4em);
        opacity: 0;
        /*filter: blur(2px) drop-shadow(0 0 0 #00000000);*/
        filter: blur(2px);
        scale: .8;
        /*text-shadow: 0 0 0 #00000000;*/
    }
    50% {
        transform: translateY(-0.1em);
        scale: 1.05;
        /*text-shadow: 0 .1em 3px #00000020;*/
        /*filter: blur(0px) brightness(1.2) drop-shadow(0 .1em 3px #00000020);*/
        filter: blur(0px) brightness(1.2);
    }
    100% {
        transform: none;
        opacity: 1;
        /*text-shadow: 0 0 0 #00000000;*/
    }
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr;
    grid-template-areas:
        "header-empty header-urine header-other header-spitswab"
        "speed-title speed-urine speed-other speed-spitswab"
        "reliability-title reliability-urine reliability-other reliability-spitswab"
        "defensibility-title defensibility-urine defensibility-other defensibility-spitswab";
    align-items: stretch;
}

.compare-grid .logo-small {
    max-width: 150px;
}

.compare-grid .row-title, .compare-grid .header {
    color: var(--color-secondary);
}

.compare-grid .cell,
.compare-grid .row-title,
.compare-grid .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--padding-small) var(--padding-medium);
    text-align: center;
    gap: var(--padding-small);
    font-weight: 300;
    z-index: 10;
}

.compare-grid .header {
    font-weight: 600;
    padding: var(--padding-medium);
}

.compare-grid .row-title {
    font-weight: 600;
}

.compare-grid .bad {
    border-left: 1px solid var(--color-detail);
}

.compare-grid .cell.bad {
    color: #F46147;
}

.compare-grid .cell.good {
    color: #47BC5B;
}

.compare-grid .cell svg {
    width: 32px;
    height: auto;
}

.compare-grid p {
    font-size: 1rem;
}

.highlight-row-speed, .highlight-row-defensibility {
    background-color: #7CCFD230;
    border-radius: var(--border-radius-large);
}

.highlight-row-speed {
    grid-column: 1 / -1;
    grid-row: 2;
}

.highlight-row-defensibility {
    grid-column: 1 / -1;
    grid-row: 4;
}

.highlight-column-spitswab {
    grid-column: 4;
    grid-row: 1 / -1;
}

.compare-grid .good:not(.header) {
    border-top: 1px solid white;
}

.compare-grid .good:not(.row-bottom){
    border-bottom: 1px solid #429EB120;
}

.compare-grid em {
    font-weight: 600;
}

@media (max-width: 899px) {
    .compare-grid .row-title {
        display: none;
    }

    .compare-grid {
        grid-template-columns: 1fr 1fr 1.2fr;
        grid-template-areas:
        "header-urine header-other header-spitswab"
        "speed-urine speed-other speed-spitswab"
        "reliability-urine reliability-other reliability-spitswab"
        "defensibility-urine defensibility-other defensibility-spitswab";
    }

    .highlight-column-spitswab {
        grid-column: 3;
    }

    .compare-grid .bad {
        border-left: unset;
    }
}

@media (max-width: 599px) {
    :root {
        --font-size-h1: 2.3rem;
        --fixed-width: calc(100vw - calc(var(--padding-medium)* 2));
    }

    p {
        font-size: 1rem;
    }

    .dec-text-large {
        font-size: 1.2rem;
    }

    .itb-content-wrapper {
        padding: 0 var(--padding-medium) var(--padding-medium);
    }

    .compare-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "header-urine header-other"
        "speed-urine speed-other"
        "reliability-urine reliability-other"
        "defensibility-urine defensibility-other"
        "header-spitswab header-spitswab"
        "speed-spitswab speed-spitswab"
        "reliability-spitswab reliability-spitswab"
        "defensibility-spitswab defensibility-spitswab";
    }

    .divide-columns-mobile {
        grid-row: 1 / 5;
        grid-column: 1/2;
        background: transparent;
        border-radius: 0;
        border-right: 1px solid var(--color-detail);
    }

    .highlight-column-spitswab {
        grid-column: 1 / -1;
        grid-row: 5 / -1;
        margin-top: var(--padding-medium);
    }

    .header.good {
        margin-top: var(--padding-medium);
    }

    .good p {
        max-width: 300px;
    }
}

@media (max-width: 449px) {
    .fixed-width-medium:has(.compare-grid) {
        width: 100%;
        border-radius: 0;
    }
}

@media (min-width: 450px) {
    .pc-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .dec-text-mega {
        font-size: 3rem;
    }

    .dec-text-mega.super-mega {
        font-size: 4rem;
    }
}

@media (min-width: 600px) {
    .product-column .button-list {
        align-self: center;
    }
}

@media (min-width: 650px) {
    #ez-1-columns {
        grid-template-columns: repeat(3 , 1fr);
    }

    .chungus {
        grid-column: span 3;
    }

    .chungus .pc-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .pc-list {
        display: unset;

    }
}

@media (min-width: 800px) {
    .ms-page {
        padding-bottom: 15vh;
    }

    .ms-page-text {
        max-width: 600px;
    }

    .right .ms-overlay {
        background: linear-gradient(90deg, #F4F9FA00 20%, #F4F9FA 60%);
    }

    .ms-overlay {
        background: linear-gradient(90deg, #F4F9FA 40%, #F4F9FA00 80%);
    }

    .ms-page-text p {
        font-size: 1.3rem;
    }
}

@media (min-width: 1000px) {
    #header-swipe .header-top-wrapper, #header-swipe nav {
        backdrop-filter: none;
    }

    #header-swipe {
        backdrop-filter: blur(30px);
    }

    #header-swipe nav {
        gap: var(--padding-large);
    }

    #ez-1-columns {
        grid-template-columns: 1fr 1fr 1fr 1.5fr;
    }

    .chungus {
        grid-column: span 1;
    }
}