/* ========================================
    🔤 FONTS
======================================== */

/* Tiempos Fine */
@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-Light.woff2') format('woff2'),
        url('../fonts/TiemposFine-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-LightItalic.woff2') format('woff2'),
        url('../fonts/TiemposFine-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-Regular.woff2') format('woff2'),
        url('../fonts/TiemposFine-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-RegularItalic.woff2') format('woff2'),
        url('../fonts/TiemposFine-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-Semibold.woff2') format('woff2'),
        url('../fonts/TiemposFine-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-SemiboldItalic.woff2') format('woff2'),
        url('../fonts/TiemposFine-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-Bold.woff2') format('woff2'),
        url('../fonts/TiemposFine-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos Fine';
    src: url('../fonts/TiemposFine-BoldItalic.woff2') format('woff2'),
        url('../fonts/TiemposFine-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Fakt */
@font-face {
    font-family: 'Fakt';
    src: url('../fonts/Fakt-Normal.woff2') format('woff2'),
        url('../fonts/Fakt-Normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fakt';
    src: url('../fonts/Fakt-NormalItalic.woff2') format('woff2'),
        url('../fonts/Fakt-NormalItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fakt';
    src: url('../fonts/Fakt-Medium.woff2') format('woff2'),
        url('../fonts/Fakt-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fakt';
    src: url('../fonts/Fakt-MediumItalic.woff2') format('woff2'),
        url('../fonts/Fakt-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fakt';
    src: url('../fonts/Fakt-Bold.woff2') format('woff2'),
        url('../fonts/Fakt-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fakt';
    src: url('../fonts/Fakt-BoldItalic.woff2') format('woff2'),
        url('../fonts/Fakt-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ========================================
    🎨 SETTINGS
======================================== */

:root {
    /* Brand colors (RGB) */
    --brand-primary: 0, 0, 0;
    --brand-secondary: 255, 213, 0;

    /* Links */
    --link-color: 0, 128, 255;
    --link-color-hover: 0, 103, 220;
    --link-decoration: none;
    --link-decoration-hover: underline;

    /* Template colors */
    --neutral-950: #000000;
    --neutral-900: #171717;
    --neutral-800: #262626;
    --neutral-700: #404040;
    --neutral-600: #525252;
    --neutral-500: #737373;
    --neutral-400: #a3a3a3;
    --neutral-300: #d4d4d4;
    --neutral-200: #e5e5e5;
    --neutral-100: #f5f5f5; 
    --neutral-50: #fafafa;
    --neutral-25: #fcfcfc;

    /* Typography */
    --font-size: 1rem;
    --line-height: 1.2;
    --font-family: 'Fakt', sans-serif;
    --font-weight-black: 900;
    --font-weight-extrabold: 800;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --font-weight-thin: 300;

    /* Form fields */
    --field-border-radius: 0;
    --field-height: 2.75rem;
}


/* ========================================
    🔄 RESET
======================================== */

body, html {
    height: 100%;
}
*, *:before, *:after {
    box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
figure {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
}
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}


/* ========================================
    🅰️ TYPOGRAPHY
======================================== */

/* Default */
body {
    background-color: var(--neutral-100);
    color: var(--neutral-950);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Tiempos Fine', serif;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: 1rem;
}
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
}
h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
    text-align: center;
}
h1 + p {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 1.5rem auto;
    font-size: 18px;
}
h2 {
    font-size: 1.375rem;
}
h3 {
    font-size: calc(var(--font-size) + 2px);
}
legend {
    font-size: 1.125rem;
    margin: 0rem auto 0.875rem auto;
    font-weight: var(--font-weight-semibold);
}

/* Paragraph */
p {
    line-height: var(--line-height);
    margin-bottom: 1rem;
}

/* Links */
a {
    border-radius: var(--field-border-radius);
    color: inherit;
    text-decoration: none;
}
a:active, a:hover {
    color: rgba(var(--brand-secondary), 1);
    text-decoration: underline;
}
a:focus-visible {
    outline: 1px solid rgba(var(--brand-primary), 1);
    outline-offset: 2px;
}

p a {
    color: rgba(var(--brand-primary), 1);
}


/* ========================================
    🧪 UTILITIES
======================================== */

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  
/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-7 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-7 { margin-bottom: 2rem !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-7 { margin-left: 2rem !important; margin-right: 2rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-7 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.25rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-7 { padding-top: 2rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.25rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-7 { padding-bottom: 2rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-7 { padding-left: 2rem !important; padding-right: 2rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-7 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Typography */
.text-large   { font-size: calc(var(--font-size) + 2px) !important; }
.text-larger  { font-size: calc(var(--font-size) + 4px) !important; }
.text-small   { font-size: calc(var(--font-size) - 2px) !important; }
.text-smaller { font-size: calc(var(--font-size) - 4px) !important; }


.fw-thin   { font-weight: var(--font-weight-thin) !important; }
.fw-normal   { font-weight: var(--font-weight-normal) !important; }
.fw-medium   { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }
.fw-extrabold { font-weight: var(--font-weight-extrabold) !important; }
.fw-black { font-weight: var(--font-weight-black) !important; }

.text-left      { text-align: left !important; }
.text-center    { text-align: center !important; }
.text-right     { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }

.text-underline { text-decoration: underline !important; }
.strikethrough  { text-decoration: line-through !important; }

.text-no-wrap { white-space: nowrap !important; }

.ls-tightest { letter-spacing: -0.05em !important; }
.ls-tighter  { letter-spacing: -0.025em !important; }
.ls-tight    { letter-spacing: -0.0125em !important; }
.ls-normal   { letter-spacing: 0 !important; }
.ls-wide     { letter-spacing: 0.025em !important; }
.ls-wider    { letter-spacing: 0.05em !important; }
.ls-widest   { letter-spacing: 0.1em !important; }

.text-primary { color: var(--primary-color, #007bff) !important; }
.text-neutral-950 {color: var(--neutral-950) !important }
.text-neutral-900 {color: var(--neutral-900) !important }
.text-neutral-800 {color: var(--neutral-800) !important }
.text-neutral-700 {color: var(--neutral-700) !important }
.text-neutral-600 {color: var(--neutral-600) !important }
.text-neutral-500 {color: var(--neutral-500) !important }
.text-neutral-400 {color: var(--neutral-400) !important }
.text-neutral-300 {color: var(--neutral-300) !important }
.text-neutral-200 {color: var(--neutral-200) !important }
.text-neutral-100 {color: var(--neutral-100) !important }
.text-neutral-50  {color: var(--neutral-50) !important }
.text-white {color: #ffffff !important }
.text-muted { opacity: .7 !important; }

/* Layout & Display */
.hidden, .d-none { display: none !important; }
.show, .d-block  { display: block !important; }
.d-inline        { display: inline !important; }
.d-inline-block  { display: inline-block !important; }
.d-flex          { display: flex !important; }
.d-grid          { display: grid !important; }

.w-100  { width: 100% !important; }
.w-auto { width: auto !important; }

.h-100  { height: 100% !important; }
.h-auto { height: auto !important; }

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }

/* Flexbox */
.flex-row    { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start  { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end    { justify-content: flex-end !important; }

.items-start  { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end    { align-items: flex-end !important; }

.self-start  { justify-self: flex-start !important; }
.self-center { justify-self: center !important; }
.self-end    { justify-self: flex-end !important; }

.align-self-start  { align-self: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-self-end    { align-self: flex-end !important; }

/* Border Radius */
.border-none { border-radius: 0 !important; }
.border-sm   { border-radius: 0.125rem !important; }
.border      { border-radius: 0.25rem !important; }
.border-md   { border-radius: 0.375rem !important; }
.border-lg   { border-radius: 0.5rem !important; }
.border-xl   { border-radius: 0.75rem !important; }
.border-2xl  { border-radius: 1rem !important; }
.border-full { border-radius: 9999px !important; }

/* Filters */
.invert { filter: brightness(0) invert(1); }


/* ========================================
    ✨ ANIMATIONS
======================================== */

@keyframes dots {
    0%   { 
        content: ''; 
    }
    25%  { 
        content: '.'; 
    }
    50%  { 
        content: '..'; 
    }
    75%  { 
        content: '...'; 
    }
    100% { 
        content: ''; 
    }
}

@keyframes pulse {
    0% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.4;
    }
    100% { 
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes floatUp {
    0% {
        opacity: .5;
        transform: translate3d(0,50%,0) translateX(-50%);
    }
    to {
        opacity: 1;
        transform:translateZ(0) translateX(-50%)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash {
    0%, 100%, to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes bounce {
    20% {
        background-position:0%   0%, 50%  50%,100%  50%
    }
    40% {
        background-position:0% 100%, 50%   0%,100%  50%
    }
    60% {
        background-position:0%  50%, 50% 100%,100%   0%
    }
    80% {
        background-position:0%  50%, 50%  50%,100% 100%
    }
}


/* ========================================
    🔧 LAYOUT
======================================== */

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
}
.container {
    margin: 0 auto;
    max-width: 58rem;
    padding: 0 1.5rem;
    width: 100%;
}
main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}
section {
    flex: 1;
    opacity: 0;
    transition: opacity .3s linear;
}
section.active {
    opacity: 1;
}
section.loading .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
section.loading span::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    border: 0.3125rem solid rgba(var(--brand-primary), 1);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

@media (min-width: 768px) {
    main {
        padding: 5rem 0;
    }
}


/* ========================================
    🟦 Buttons
======================================== */

/* Default */
button, a.button {
    align-items: center;
    cursor: pointer;
    background-color: rgba(var(--brand-primary), 1);
    border: 0;
    border-radius: var(--field-border-radius);
    color: #fff;
    display: flex;
    font-family: inherit;
    font-size: calc(var(--font-size) -2px);
    font-weight: var(--font-weight-normal);
    height: var(--field-height);
    justify-content: center;
    padding: 0;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
    width: 100%;
}
button:hover, a.button:hover {
    background-color: rgba(var(--brand-secondary), 1);
    color: var(--neutral-950);
    text-decoration: none;
}
button:focus-visible, a.button:focus-visible {
    background-color: rgba(var(--brand-primary), 1);
    outline: 1px solid rgba(var(--brand-primary), 1);
    outline-offset: 2px;
}
button:disabled, button.processing {
    background-color: rgba(var(--brand-secondary), .6);
    cursor: not-allowed;
}
button:focus-visible, a.button:focus-visible {
    transition: none;
}
button.processing span:not(.sr-only), button.calculating span:not(.sr-only) {
    display: none;
}
button.processing::before {
    content: '';
    animation: rotate 1s infinite linear;
    border: 4px solid rgba(0, 0, 0, .25);
    border-right-color: rgba(0, 0, 0, .75);
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
}
button.calculating {
    background-color: var(--neutral-300);
    cursor: not-allowed;
    color: var(--neutral-600);
}
button.calculating::before {
    content: 'Calculating your total';
}
button.calculating::after {
    content: '';
    color: inherit;
    animation: dots 2s steps(4, end) infinite;
    text-align: left;
    width: 1rem;
}

/* Outline */
button.outline, a.button.outline {
    background-color: transparent;
    border: 1px solid var(--neutral-800);
    color: var(--neutral-800);
}
button.outline:hover, a.button.outline:hover {
    border-color: rgba(var(--brand-primary), 1);
    color: rgba(var(--brand-primary), 1);
}
button.outline:disabled, button.outline.processing, button.outline.calculating {
    border-color: var(--neutral-400);
    color: var(--neutral-400);
}
button.outline:disabled:hover, button.outline.processing:hover, button.outline.calculating:hover {
    background-color: transparent;
}
button.outline.processing {
    border-color: rgba(var(--brand-primary), 1);
}
button.outline.processing::before {
    border: 4px solid rgba(var(--brand-primary), .35);
    border-right-color: rgba(var(--brand-secondary), 1);
}

/* Ghost */
button.ghost, a.button.ghost {
    background-color: transparent;
    border: 0.063rem solid transparent;
    color: rgba(var(--link-color), 1);
    width: auto;
    height: auto;
}
button.ghost:hover, a.button.ghost:hover {
    color: rgba(var(--link-color-hover), 1);
}
button.ghost:focus-visible, a.button.ghost:focus-visible {
    border-color: rgba(var(--brand-primary), 1);
    outline: 1px solid transparent;
    outline-offset: 2px;
}
button.ghost:disabled, a.button.ghost:disabled {
    color: rgba(var(--link-color), .6);
}

/* Icons */
button.icon, a.button.icon {
    background-color: var(--neutral-500);
    background-repeat: no-repeat;
    border: none;
    width: 1rem;
    height: 1rem;
}
button.icon:hover, a.button.icon:hover {
    background-color: var(--neutral-950);
}
button.icon:focus-visible, a.button.icon:focus-visible {
    background-color: var(--neutral-950);
}
button.icon.info {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M165,0C74.019,0,0,74.02,0,165.001C0,255.982,74.019,330,165,330s165-74.018,165-164.999C330,74.02,255.981,0,165,0zM165,300c-74.44,0-135-60.56-135-134.999C30,90.562,90.56,30,165,30s135,60.562,135,135.001C300,239.44,239.439,300,165,300z'%3E%3C/path%3E%3Cpath d='M164.998,70c-11.026,0-19.996,8.976-19.996,20.009c0,11.023,8.97,19.991,19.996,19.991c11.026,0,19.996-8.968,19.996-19.991C184.994,78.976,176.024,70,164.998,70z'%3E%3C/path%3E%3Cpath d='M165,140c-8.284,0-15,6.716-15,15v90c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-90C180,146.716,173.284,140,165,140z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M165,0C74.019,0,0,74.02,0,165.001C0,255.982,74.019,330,165,330s165-74.018,165-164.999C330,74.02,255.981,0,165,0zM165,300c-74.44,0-135-60.56-135-134.999C30,90.562,90.56,30,165,30s135,60.562,135,135.001C300,239.44,239.439,300,165,300z'%3E%3C/path%3E%3Cpath d='M164.998,70c-11.026,0-19.996,8.976-19.996,20.009c0,11.023,8.97,19.991,19.996,19.991c11.026,0,19.996-8.968,19.996-19.991C184.994,78.976,176.024,70,164.998,70z'%3E%3C/path%3E%3Cpath d='M165,140c-8.284,0-15,6.716-15,15v90c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-90C180,146.716,173.284,140,165,140z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
button.icon.close {
    -webkit-mask: url("data:image/svg+xml,%3Csvg role='img' width='21' height='21' viewBox='0 0 21 21' fill='%23717171' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.78785 6.13144C6.6138 6.13144 6.44688 6.20058 6.32381 6.32365C6.20074 6.44672 6.1316 6.61364 6.1316 6.78769C6.1316 6.96174 6.20074 7.12866 6.32381 7.25173L9.57208 10.5L6.32381 13.7483C6.20074 13.8713 6.1316 14.0383 6.1316 14.2123C6.1316 14.3864 6.20074 14.5533 6.32381 14.6763C6.44688 14.7994 6.6138 14.8686 6.78785 14.8686C6.9619 14.8686 7.12882 14.7994 7.25189 14.6763L10.5002 11.4281L13.7484 14.6763C13.8715 14.7994 14.0384 14.8686 14.2125 14.8686C14.3865 14.8686 14.5534 14.7994 14.6765 14.6763C14.7996 14.5533 14.8687 14.3864 14.8687 14.2123C14.8687 14.0383 14.7996 13.8713 14.6765 13.7483L11.4282 10.5L14.6765 7.25173C14.7996 7.12866 14.8687 6.96174 14.8687 6.78769C14.8687 6.61364 14.7996 6.44672 14.6765 6.32365C14.5534 6.20058 14.3865 6.13144 14.2125 6.13144C14.0384 6.13144 13.8715 6.20058 13.7484 6.32365L10.5002 9.57192L7.25189 6.32365C7.12882 6.20058 6.9619 6.13144 6.78785 6.13144Z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg role='img' width='21' height='21' viewBox='0 0 21 21' fill='%23717171' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.78785 6.13144C6.6138 6.13144 6.44688 6.20058 6.32381 6.32365C6.20074 6.44672 6.1316 6.61364 6.1316 6.78769C6.1316 6.96174 6.20074 7.12866 6.32381 7.25173L9.57208 10.5L6.32381 13.7483C6.20074 13.8713 6.1316 14.0383 6.1316 14.2123C6.1316 14.3864 6.20074 14.5533 6.32381 14.6763C6.44688 14.7994 6.6138 14.8686 6.78785 14.8686C6.9619 14.8686 7.12882 14.7994 7.25189 14.6763L10.5002 11.4281L13.7484 14.6763C13.8715 14.7994 14.0384 14.8686 14.2125 14.8686C14.3865 14.8686 14.5534 14.7994 14.6765 14.6763C14.7996 14.5533 14.8687 14.3864 14.8687 14.2123C14.8687 14.0383 14.7996 13.8713 14.6765 13.7483L11.4282 10.5L14.6765 7.25173C14.7996 7.12866 14.8687 6.96174 14.8687 6.78769C14.8687 6.61364 14.7996 6.44672 14.6765 6.32365C14.5534 6.20058 14.3865 6.13144 14.2125 6.13144C14.0384 6.13144 13.8715 6.20058 13.7484 6.32365L10.5002 9.57192L7.25189 6.32365C7.12882 6.20058 6.9619 6.13144 6.78785 6.13144Z'/%3E%3C/svg%3E") no-repeat center;
}

/* Collapse */
button.collapse {
    background-color: transparent;
    border: 0.063rem solid transparent;
    color: var(--neutral-950);
    gap: 0.5rem;
    height: auto;
    width: auto;
}
button.collapse:focus-visible {
    border-color: rgba(var(--brand-primary), 1);
    outline: 1px solid transparent;
    outline-offset: 2px;
}
button.collapse::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23212529' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1867 5.10005L8.93699 11.3468L2.78249 5.10005C2.70862 5.03461 2.62258 4.98435 2.52929 4.95215C2.436 4.91995 2.33728 4.90645 2.23877 4.9124C2.14026 4.91835 2.04389 4.94366 1.95515 4.98685C1.86642 5.03005 1.78706 5.09031 1.72161 5.16418C1.65617 5.23805 1.60591 5.32408 1.57371 5.41737C1.54151 5.51067 1.52801 5.60939 1.53396 5.7079C1.54599 5.90685 1.63655 6.09288 1.78574 6.22505L8.46824 12.9376C8.50355 12.9629 8.54123 12.9847 8.58074 13.0028C8.65584 13.0656 8.74989 13.1012 8.84774 13.1041C8.89404 13.1148 8.94125 13.121 8.98874 13.1228C9.03623 13.1182 9.08319 13.1092 9.12899 13.0958C9.17605 13.0887 9.22227 13.0769 9.26699 13.0606C9.31207 13.0368 9.35455 13.0084 9.39374 12.9758C9.43002 12.9559 9.46463 12.933 9.49724 12.9076L16.2472 6.15755C16.3748 6.01449 16.4427 5.82803 16.4371 5.63646C16.4314 5.44489 16.3527 5.26274 16.217 5.12742C16.0812 4.99209 15.8989 4.91385 15.7073 4.90876C15.5157 4.90367 15.3294 4.97212 15.1867 5.10005Z' /%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    display: block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    transition: all .25s linear;
}
button.collapse[aria-expanded='true']::after {
    transform: scaleY(-1);
}


/* ========================================
    📜 HEADER
======================================== */

header {
    background-color: #FFF;
    border-bottom: 0.0625rem solid var(--neutral-200);
    padding: 1.125rem 0;
}
header a {
    line-height: 0;
}
header nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    padding: 0 1rem;
}
header nav > a img {
    max-height: 2.8125rem;
}


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

footer {
    background-color: #fff;
    border-top: 0.0625rem solid var(--neutral-200);
    font-size: calc(var(--font-size) - 2px);
    padding: 1.5rem 0;
    width: 100%;
}
footer .container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: space-between;
}
footer nav ul {
    display: flex;
    column-gap: 1rem;
    flex-direction: column;
    row-gap: 0.125rem;
}
footer nav ul li a:hover {
    color: inherit;
}
footer p {
    margin-bottom: 0;
}

@media (min-width: 480px) {
    footer nav ul {
        flex-direction: row;
    }
}
@media (min-width: 1024px) {
    footer .container {
        flex-direction: row;
    }
}


/* ========================================
    🛬 LANDING 
======================================== */

/* Location */
.landing__location {
    margin: 0 auto 3rem auto;
    max-width: 18.75rem;
    width: 100%;
}
.landing__location:has(fieldset > div > ul > li:nth-child(3)) {
    max-width: 28rem;
}
.landing__location div {
    background-color: var(--neutral-200);
    border-radius: var(--field-border-radius);
    width: 100%;
    padding: 2px;
}
.landing__location div ul {
    display: flex;
    position: relative;
}
.landing__location div ul::before {
    content: '';
    background-color: rgba(var(--brand-primary), 1);
    border: 1px solid transparent;
    border-radius: var(--field-border-radius);
    position: absolute;
    transition: top 0.25s ease, left 0.25s ease, transform 0.25s ease;
}
.landing__location div ul:has(input:focus-visible)::before {
    transition: none;
}
.landing__location div ul li {
    flex: 1;
}
.landing__location div ul li label {
    border-radius: var(--field-border-radius);
    color: var(--neutral-600);
    width: 100%;
    padding: calc(((var(--field-height) - (var(--font-size) * var(--line-height)))  / 2) - 0.125rem) 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    line-height: var(--line-height);
    margin: 0;
    position: relative;
}
.landing__location div ul li input:checked + label {
    color: #fff;
}
.landing__location div ul li label:hover {
    color: var(--neutral-700);
}
.landing__location div ul li input:focus-visible ~ label {
    outline: 1px solid rgba(var(--brand-primary), 1);
    outline-offset: 2px;
}
.landing__location div ul li input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.landing__location div ul:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) {
    flex-direction: row;
}
.landing__location div ul:has(> li:nth-child(2)):not(:has(> li:nth-child(3)))::before {
    height: 100%;
    width: 50%;
    left: 0%;
}
.landing__location div ul:has(> li:nth-child(2) input:checked):not(:has(> li:nth-child(3)))::before {
    left: 100%;
    transform: translate(-100%, 0);
}
.landing__location div ul:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) {
    flex-direction: column;
}
.landing__location div ul:has(> li:nth-child(3)):not(:has(> li:nth-child(4)))::before {
    height: 33.33%;
    left: 0;
    width: 100%;
    top: 0%;
}
.landing__location div ul:has(> li:nth-child(2) input:checked):has(> li:nth-child(3)):not(:has(> li:nth-child(4)))::before {
    top: 50%;
    transform: translate(0, -50%);
}
.landing__location div ul:has(> li:nth-child(3) input:checked):has(> li:nth-child(3)):not(:has(> li:nth-child(4)))::before {
    top: 100%;
    transform: translate(0, -100%);
}
@media (min-width: 420px) {
    .landing__location div ul:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) {
        flex-direction: row;
    }
    .landing__location div ul:has(> li:nth-child(3)):not(:has(> li:nth-child(4)))::before {
        height: 100%;
        width: 33.33%;
        top: 0;
    }
    .landing__location div ul:has(> li:nth-child(2) input:checked):has(> li:nth-child(3)):not(:has(> li:nth-child(4)))::before {
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
    }
    .landing__location div ul:has(> li:nth-child(3) input:checked):has(> li:nth-child(3)):not(:has(> li:nth-child(4)))::before {
        left: 100%;
        top: 0;
        transform: translate(-100%, 0);
    }
}

/* Offers */
.landing__offers.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    height: 20rem;
}
.landing__offers.loading::before {
    content: '';
    width: 3rem;
    height: 3rem;
    border: 0.3125rem solid rgba(var(--brand-primary), 1);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}
.landing__offers.loading::after {
    content: 'One moment while we load the current offers...';
}
.landing__offers legend {
    opacity: 0;
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.landing__offers > ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.landing__offers > ul > li {
    display: flex;
    flex: 1;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.landing__offers > ul > li:nth-child(1) {
    animation-delay: 0s;
}
.landing__offers > ul > li:nth-child(2) {
    animation-delay: 0.4s;
}
.landing__offers > ul > li:nth-child(3) {
    animation-delay: 0.8s;
}
.landing__offers .landing__offers-card {
    display: flex;
    flex-direction: column;
}
.landing__offers .landing__offers-card .card-head {
    text-transform: uppercase;
    padding: 0 0.625rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    border-radius: 0;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing__offers .landing__offers-card .card-head:empty {
    height: auto;
}
.landing__offers li:last-of-type .landing__offers-card .card-head {
    background: rgba(var(--brand-secondary), 1);
}
.landing__offers .landing__offers-card .card-body {
    background-color: #fff;
    border: 1px solid var(--neutral-300);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
    padding: 2rem 1.5rem;
}
.landing__offers li:last-of-type .landing__offers-card .card-body {
    border-color: rgba(var(--brand-secondary), 1);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-secondary), 1);
}
.landing__offers li:last-of-type button {
    background-color: rgba(var(--brand-secondary), 1);
    color: var(--neutral-950);
}
.landing__offers .landing__offers-card h3 {
    margin-bottom: 0.5rem;
    text-align: center;
}
.landing__offers .landing__offers-card h3 + p {
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: 1.5rem;
}
.landing__offers .landing__offers-card h3 + p span[data-base-price] {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}
.landing__offers .landing__offers-card h3 + p span[data-base-price].flash {
    animation-name: flash;
    animation-duration: 1s;
}
.landing__offers .landing__offers-card h3 + p span.frequency {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
}
.landing__offers .landing__offers-card figure {
    border-bottom: 1px solid var(--neutral-200);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
.landing__offers .landing__offers-card figure img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
}
ul[data-benefits] {
    color: var(--neutral-700);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
ul[data-benefits] li {
    font-size: calc(var(--font-size) - 2px);
    padding: 0 0 0 1.25rem;
    position: relative;
}
ul[data-benefits] li::before {
    content: '';
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    height: 0.75rem;
    position: absolute;
    width: 0.75rem;
    top: 0.1875rem;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 100 100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m97.084938 7.6805987c-25.2616424 21.6229997-46.1987419 52.5397573-61.7509002 86.01434-.4157295.9147034-1.7047958.8944016-2.1206512 0-9.3770046-20.833168-19.1698647-36.1354523-30.2309799-44.1403999-.9771414-.7065887-.3534205-2.2456474.8317125-2.099968 12.0175714 1.5177422 25.1577148 9.3145714 30.4596596 17.3195152 14.5332624-25.3242073 34.8258306-44.140398 61.4806005-58.9858427 1.2266235-.6860294 2.3909454.9773955 1.3305587 1.8923554z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
}
.landing__offers .landing__offers-card p.copy {
    color: var(--neutral-700);
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
}
.landing__offers .landing__offers-card input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.landing__offers .landing__offers-card input:focus-visible + label {
    outline: 1px solid rgba(var(--brand-primary), 1);
    outline-offset: 2px;
}
.landing__offers .landing__offers-card label {
    background-color: rgba(var(--brand-primary), 1);
    border: 0;
    border-radius: 1rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    height: 2.625rem;
    text-align: center;
    margin: 0 auto;
    text-transform: uppercase;
    transition-duration: 150ms;
    transition-property: border-color, background-color;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    width: 100%;
}
.landing__offers .landing__offers-card label span {
    display: none;
}
.landing__offers .landing__offers-card input:checked + label {
    background-color: var(--brand-hover);
}
.landing__offers .landing__offers-card input:checked + label span {
    display: inline;
}
.landing__offers .landing__offers-card label:hover {
    background-color: var(--brand-hover);
}
@media (min-width: 768px) {
    .landing__offers > ul {
        flex-direction: row;
    }
    .landing__offers .landing__offers-card .card-head:empty {
        height: 2rem;
    }
}

/* Lookup error */
.lookup-error {
    background: var(--neutral-50);
    color: var(--neutral-800);
    padding: 1rem;
    max-width: 38rem;
    margin: 0 auto;
}
.lookup-error p {
    margin: 0;
}


/* ========================================
    📝 CHECKOUT
======================================== */

/* Layout */
.checkout .container {
    max-width: 42.5rem;
}
form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
}
.firstLastName {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.firstLastName > div {
    flex: 1;
}
.cityStatePostal {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.cityStatePostal > div:first-of-type {
    flex: 0 0 auto;
    width: 100%;
}
.cityStatePostal > div:nth-of-type(2) {
    flex: 0 0 auto;
    width: 56%;
}
.cityStatePostal > div:last-of-type {
    flex: 1 0 0%;
}
.cityStatePostal[data-state="hide"] > div:first-of-type {
    width: 60%;
}
.cityStatePostal[data-state="hide"] > div:nth-of-type(2) {
    display: none;
}
.form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 460px) {
    .firstLastName {
        flex-direction: row;
    }
}
@media (min-width: 768px) {
    .firstLastName {
        flex-direction: column;
    }
}
@media (min-width: 1024px) {
    .firstLastName {
        flex-direction: row;
    }
    .cityStatePostal > div:first-of-type {
        flex: 0 0 auto;
        width: 40%;
    }
    .cityStatePostal > div:nth-of-type(2) {
        flex: 0 0 auto;
        width: 32%;
    }
}

/* Fields */
label {
    display: block;
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: inherit;
    line-height: 0.875; /* To match payment capture */
    margin-bottom: 0.3125rem; /* To match payment capture */
    transform: translate3d( 0, 0, 0); /* To fix anti-alias issue */
    width: 100%;
}
input[type=text], input[type=email], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0.063rem solid var(--neutral-200);
    border-radius: var(--field-border-radius);
    font-family: var(--font-family);
    font-size: inherit;
    line-height: 1.5;
    padding: calc(((var(--field-height) - (var(--font-size) * 1.5))  / 2) - 0.063rem) 0.75rem;
    transition-duration: 150ms;
    transition-property: border-color;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    width: 100%;
}
input[type=text]:disabled, input[type=email]:disabled, textarea:disabled, select:disabled {
    background-color: var(--neutral-25);
    cursor: not-allowed;
}
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}
input[type='text']:focus-visible, input[type='email']:focus-visible, textarea:focus-visible, select:focus-visible {
    border-color: rgba(var(--brand-primary), 1);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Checkboxes & Radios */
.selection-control {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.selection-control label {
    color: var(--neutral-950);
    cursor: pointer;
    letter-spacing: normal;
    line-height: 1.2;
    margin-bottom: 0;
}
.selection-control label a {
    color: rgba(var(--brand-primary), 1);
}
input[type='checkbox'], input[type='radio'] {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #fff;
    border: 1px solid var(--neutral-500);
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type='radio'] {
    border-radius: 999px;
}
input[type='checkbox']:checked, input[type='radio']:checked {
    background-color: rgba(var(--brand-primary), 1);
    border-color: rgba(var(--brand-primary), 1);
}
input[type='checkbox']:focus-visible, input[type='radio']:focus-visible {
    outline: 1px solid rgba(var(--brand-primary), 1);
    outline-offset: 2px;
}
input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
input[type='radio']:checked {
    background: radial-gradient(rgba(var(--brand-primary), 1) 0%, rgba(var(--brand-primary), 1) 40%, transparent 50%, transparent);
}

/* Selection */
.checkout__selection {
    background-color: var(--neutral-25);
    padding: 1rem 1.5rem;
    border: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
}
.checkout__selection button.collapse {
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: left;
}

.checkout__selection > div {
    display: flex;
    flex: 1;
    gap: 2rem;
    justify-content: space-between;
    width: 100%;
}
.checkout__selection figure {
    margin: 0 auto;
}
.checkout__selection figure img {
    height: 5rem;
}
.checkout__selection > div > div p {
    color: var(--neutral-800);
    font-size: calc(var(--font-size) - 2px);
    font-weight: var(--font-weight-normal);
    margin: 0.125rem 0 1rem 0;
}
.checkout__selection > div > p {
    font-weight: var(--font-weight-medium);
    line-height: 1;
    margin: 0;
}

@media (min-width: 500px) {
    .checkout__selection {
        flex-direction: row;
    }
}

/* Review table */
.checkout__review-table {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
.checkout__review-table > div {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    position: relative;
}
.checkout__review-table > div > span {
    display: flex;
    column-gap: 0.5rem;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}
.checkout__review-table > div:last-of-type {
    border-top: 1px solid var(--neutral-200);
    font-weight: var(--font-weight-bold);
    padding-top: 1rem;
}
.checkout__review-table .calculating::after {
    content: '';
    color: inherit;
    animation: dots 2s steps(4, end) infinite;
    text-align: left;
    width: 1rem;
}
.checkout__review-table .skeleton {
    background: var(--neutral-200);
    border-radius: 0.25rem;
    animation: pulse 1.5s infinite ease-in-out;
    min-width: 2.5rem;
}

/* Discount */
.discount-lookup__form {
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.6875rem 0.875rem, rgba(0, 0, 0, 0.12) 0px 0.25rem 1.25rem;
    opacity: 1;
    padding: 0.5rem;
    position: absolute;
    width: 17rem;
    height: auto;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    top: 0;
    right: 0;
}
.discount-lookup__form > div {
    position: relative;
}
.discount-lookup__tag {
    background-color: var(--neutral-200);
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    gap: 0.25rem;
    color: var(--neutral-500);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
}
.discount-lookup__tag .tagicon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23a3a3a3'%3E%3Cpath d='M21.3 10.8401C21.69 10.8401 22 10.5301 22 10.1401V9.21011C22 5.11011 20.75 3.86011 16.65 3.86011H7.35C3.25 3.86011 2 5.11011 2 9.21011V9.68011C2 10.0701 2.31 10.3801 2.7 10.3801C3.6 10.3801 4.33 11.1101 4.33 12.0101C4.33 12.9101 3.6 13.6301 2.7 13.6301C2.31 13.6301 2 13.9401 2 14.3301V14.8001C2 18.9001 3.25 20.1501 7.35 20.1501H16.65C20.75 20.1501 22 18.9001 22 14.8001C22 14.4101 21.69 14.1001 21.3 14.1001C20.4 14.1001 19.67 13.3701 19.67 12.4701C19.67 11.5701 20.4 10.8401 21.3 10.8401ZM9 8.88011C9.55 8.88011 10 9.33011 10 9.88011C10 10.4301 9.56 10.8801 9 10.8801C8.45 10.8801 8 10.4301 8 9.88011C8 9.33011 8.44 8.88011 9 8.88011ZM15 15.8801C14.44 15.8801 13.99 15.4301 13.99 14.8801C13.99 14.3301 14.44 13.8801 14.99 13.8801C15.54 13.8801 15.99 14.3301 15.99 14.8801C15.99 15.4301 15.56 15.8801 15 15.8801ZM15.9 9.48011L9.17 16.2101C9.02 16.3601 8.83 16.4301 8.64 16.4301C8.45 16.4301 8.26 16.3601 8.11 16.2101C7.82 15.9201 7.82 15.4401 8.11 15.1501L14.84 8.42011C15.13 8.13011 15.61 8.13011 15.9 8.42011C16.19 8.71011 16.19 9.19011 15.9 9.48011Z'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23a3a3a3'%3E%3Cpath d='M21.3 10.8401C21.69 10.8401 22 10.5301 22 10.1401V9.21011C22 5.11011 20.75 3.86011 16.65 3.86011H7.35C3.25 3.86011 2 5.11011 2 9.21011V9.68011C2 10.0701 2.31 10.3801 2.7 10.3801C3.6 10.3801 4.33 11.1101 4.33 12.0101C4.33 12.9101 3.6 13.6301 2.7 13.6301C2.31 13.6301 2 13.9401 2 14.3301V14.8001C2 18.9001 3.25 20.1501 7.35 20.1501H16.65C20.75 20.1501 22 18.9001 22 14.8001C22 14.4101 21.69 14.1001 21.3 14.1001C20.4 14.1001 19.67 13.3701 19.67 12.4701C19.67 11.5701 20.4 10.8401 21.3 10.8401ZM9 8.88011C9.55 8.88011 10 9.33011 10 9.88011C10 10.4301 9.56 10.8801 9 10.8801C8.45 10.8801 8 10.4301 8 9.88011C8 9.33011 8.44 8.88011 9 8.88011ZM15 15.8801C14.44 15.8801 13.99 15.4301 13.99 14.8801C13.99 14.3301 14.44 13.8801 14.99 13.8801C15.54 13.8801 15.99 14.3301 15.99 14.8801C15.99 15.4301 15.56 15.8801 15 15.8801ZM15.9 9.48011L9.17 16.2101C9.02 16.3601 8.83 16.4301 8.64 16.4301C8.45 16.4301 8.26 16.3601 8.11 16.2101C7.82 15.9201 7.82 15.4401 8.11 15.1501L14.84 8.42011C15.13 8.13011 15.61 8.13011 15.9 8.42011C16.19 8.71011 16.19 9.19011 15.9 9.48011Z'%3E%3C/path%3E%3C/svg%3E");
    background-color: var(--neutral-400);
    height: 1.125rem;
    width: 1.125rem;
}
.discount-lookup__tag button.icon {
    height: 1.25rem;
    width: 1.25rem;
}
.discount-lookup__form label {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.3 10.8401C21.69 10.8401 22 10.5301 22 10.1401V9.21011C22 5.11011 20.75 3.86011 16.65 3.86011H7.35C3.25 3.86011 2 5.11011 2 9.21011V9.68011C2 10.0701 2.31 10.3801 2.7 10.3801C3.6 10.3801 4.33 11.1101 4.33 12.0101C4.33 12.9101 3.6 13.6301 2.7 13.6301C2.31 13.6301 2 13.9401 2 14.3301V14.8001C2 18.9001 3.25 20.1501 7.35 20.1501H16.65C20.75 20.1501 22 18.9001 22 14.8001C22 14.4101 21.69 14.1001 21.3 14.1001C20.4 14.1001 19.67 13.3701 19.67 12.4701C19.67 11.5701 20.4 10.8401 21.3 10.8401ZM9 8.88011C9.55 8.88011 10 9.33011 10 9.88011C10 10.4301 9.56 10.8801 9 10.8801C8.45 10.8801 8 10.4301 8 9.88011C8 9.33011 8.44 8.88011 9 8.88011ZM15 15.8801C14.44 15.8801 13.99 15.4301 13.99 14.8801C13.99 14.3301 14.44 13.8801 14.99 13.8801C15.54 13.8801 15.99 14.3301 15.99 14.8801C15.99 15.4301 15.56 15.8801 15 15.8801ZM15.9 9.48011L9.17 16.2101C9.02 16.3601 8.83 16.4301 8.64 16.4301C8.45 16.4301 8.26 16.3601 8.11 16.2101C7.82 15.9201 7.82 15.4401 8.11 15.1501L14.84 8.42011C15.13 8.13011 15.61 8.13011 15.9 8.42011C16.19 8.71011 16.19 9.19011 15.9 9.48011Z' /%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.3 10.8401C21.69 10.8401 22 10.5301 22 10.1401V9.21011C22 5.11011 20.75 3.86011 16.65 3.86011H7.35C3.25 3.86011 2 5.11011 2 9.21011V9.68011C2 10.0701 2.31 10.3801 2.7 10.3801C3.6 10.3801 4.33 11.1101 4.33 12.0101C4.33 12.9101 3.6 13.6301 2.7 13.6301C2.31 13.6301 2 13.9401 2 14.3301V14.8001C2 18.9001 3.25 20.1501 7.35 20.1501H16.65C20.75 20.1501 22 18.9001 22 14.8001C22 14.4101 21.69 14.1001 21.3 14.1001C20.4 14.1001 19.67 13.3701 19.67 12.4701C19.67 11.5701 20.4 10.8401 21.3 10.8401ZM9 8.88011C9.55 8.88011 10 9.33011 10 9.88011C10 10.4301 9.56 10.8801 9 10.8801C8.45 10.8801 8 10.4301 8 9.88011C8 9.33011 8.44 8.88011 9 8.88011ZM15 15.8801C14.44 15.8801 13.99 15.4301 13.99 14.8801C13.99 14.3301 14.44 13.8801 14.99 13.8801C15.54 13.8801 15.99 14.3301 15.99 14.8801C15.99 15.4301 15.56 15.8801 15 15.8801ZM15.9 9.48011L9.17 16.2101C9.02 16.3601 8.83 16.4301 8.64 16.4301C8.45 16.4301 8.26 16.3601 8.11 16.2101C7.82 15.9201 7.82 15.4401 8.11 15.1501L14.84 8.42011C15.13 8.13011 15.61 8.13011 15.9 8.42011C16.19 8.71011 16.19 9.19011 15.9 9.48011Z' /%3E%3C/svg%3E");
    background-color: var(--neutral-300);
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    top: calc((var(--field-height) - 1.5rem) / 2);
    left: 0.75rem;
    margin: 0;
    transition-duration: 150ms;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}
.discount-lookup__form input[type=text] {
    padding-left: 2.75rem;
}
.discount-lookup__form input[type=text]:focus {
    border-color: var(--neutral-200);
}
.discount-lookup__form button {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    height: calc(var(--field-height) - 0.375rem);
    letter-spacing: 0.1em;
    width: 70px;
    position: absolute;
    text-transform: uppercase;
    top: 0.1875rem;
    right: 0.1875rem;
}
.discount-lookup__form div.error {
    width: 100%;
}


/* ========================================
    💰 DONATIONS
======================================== */

/* Layout */
.donation .container, .donation .confirmation .container {
    max-width: 38rem;
}

/* Type */
.donation-type {
    max-width: 18rem;
    margin: 0 auto;
}
.donation-type div {
    background-color: #fff;
    width: 100%;
    border: 0.0625rem solid var(--neutral-200);
    padding: 0.125rem;
}
.donation-type div ul {
    display: flex;
    position: relative;
}
.donation-type div ul::before {
    content: '';
    background-color: rgba(var(--brand-secondary), 1);
    border: 1px solid transparent;
    border-radius: var(--field-border-radius);
    height: 100%;
    width: 50%;
    left: 0%;
    position: absolute;
    transition: top 0.25s ease, left 0.25s ease, transform 0.25s ease;
}
.donation-type div ul:has(input:focus-visible)::before {
    transition: none;
}
.donation-type div ul li {
    flex: 1;
}
.donation-type div ul li label {
    border-radius: var(--field-border-radius);
    color: var(--neutral-500);
    width: 100%;
    padding: calc(((var(--field-height) - (var(--font-size) * var(--line-height)))  / 2) - 0.1875rem) 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height);
    margin: 0;
    position: relative;
}
.donation-type div ul li input:checked + label {
    color: var(--neutral-950);
}
.donation-type div ul li label:hover {
    color: var(--neutral-700);
}
.donation-type div ul li input:focus-visible ~ label {
    outline: 1px solid rgba(var(--brand-primary), 1);
    outline-offset: 2px;
}
.donation-type div ul li input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.donation-type div ul:has(> li:nth-child(2) input:checked)::before {
    left: 100%;
    transform: translate(-100%, 0);
}

/* Amount */
.donation-amount ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.donation-amount li {
    flex: 1 1 calc(33.333% - 0.5rem);
    position: relative;
}
.donation-amount input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.donation-amount input[type="radio"]:hover + label {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
}
.donation-amount input[type="radio"]:checked + label {
    background: rgba(var(--brand-secondary), 1);
    border-color: rgba(var(--brand-secondary), 1);
}
.donation-amount input[type="radio"]:focus-visible + label {
    border-color: rgba(var(--brand-primary), 1);
}
/*.donation-amount input[type="radio"]:checked:hover + label {
    background: var(--neutral-950);
    border-color: var(--neutral-950);
    color: #fff;
}*/
.donation-amount input[type="radio"] + label {
    background: #fff;
    cursor: pointer;
    height: var(--field-height);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: 0.0625rem solid var(--neutral-200);
    font-weight: var(--font-weight-medium);
    padding: 0 0.75rem;
}
.donation-amount__other input[type="radio"]:checked + label + input, .donation-amount__other input[type="radio"]:checked + label + input + label {
    display: flex;
}
.donation-amount__custom {
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.6875rem 0.875rem, rgba(0, 0, 0, 0.12) 0px 0.25rem 1.25rem;
    opacity: 1;
    padding: 0.5rem;
    position: absolute;
    width: 8rem;
    height: auto;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    top: calc(var(--field-height) + 0.25rem);
    right: 0;
}
.donation-amount__custom::after {
    border-left: 0.375rem solid transparent;
    border-right: 0.375rem solid transparent;
    border-bottom: 0.5625rem solid #fff;
    bottom: -0.5625rem;
    content: "";
    height: 0px;
    position: absolute;
    right: 1.375rem;
    width: 0px;
    top: -0.5625rem;
    z-index: 1000;
}
.donation-amount__custom > div {
    position: relative;
}
.donation-amount__custom input[type="text"] {
    padding-left: 1.5rem;
    font-weight: var(--font-weight-medium);
}
.donation-amount__custom input[type="text"] + label {
    position: absolute;
    top: 50%;
    left: calc(0.75rem + 0.0625rem);
    margin: 0;
    align-items: center;
    font-weight: var(--font-weight-medium);
    transform: translateY(-50%);
    width: auto;
}


/* ========================================
    🧩 COMPONENTS
======================================== */

/* Tooltips */
.tooltip {
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.6875rem 0.875rem, rgba(0, 0, 0, 0.12) 0px 0.25rem 1.25rem;
    color: var(--neutral-950);
    font-size: 0.75rem;
    opacity: 1;
    padding: 0.75rem;
    position: absolute;
    transition: visibility 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
    visibility: visible;
    width: 100%;
    max-width: 280px;
    height: auto;
    z-index: 1000;
    --move-tooltip: calc(-100% - (1.25rem + (0.5624rem * 2)));
    transform: translateY(var(--move-tooltip));
}
.tooltip::after {
    border-left: 0.375rem solid transparent;
    border-right: 0.375rem solid transparent;
    border-top: 0.5625rem solid #fff;
    bottom: -0.5625rem;
    content: "";
    height: 0px;
    position: absolute;
    right: 1.375rem;
    width: 0px;
}

/* Collapse */
.collapsible {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}


/* ========================================
    ⚠️ ERRORS
======================================== */

#errors {
    background-color: var(--neutral-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    color: #fff;
    bottom: 60px;
    left: 50%;
    width: 100%;
    max-width: 640px;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    animation-name: floatUp;
    animation-duration: .75s;
    animation-fill-mode: both;
    z-index: 999;
}
#errors svg {
    fill: #fff;
    width: 0.875rem;
}
#errors button {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 329.26933 329' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-size: 0.875rem 0.875rem;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid transparent;
    padding: 0.25rem;
    margin-right: -0.5rem;
    height: 2rem;
    width: 2rem;
}
#errors button:hover {
    background-color: rgba(255, 255, 255, .1);
}
#errors button:focus-visible {
    outline: 1px solid #fff;
    outline-offset: 0;
}
div.error {
    color: rgb(220, 53, 69);
    font-size: 0.8125rem;
    line-height: 1.2; /* To match payment capture */
    padding-top: 0.5rem; /* To match payment capture */
    transform: translate3d( 0, 0, 0); /* To fix anti-alias issue */
}
.validated input[aria-describedby]:invalid, .validated select[aria-describedby]:invalid, .validated textarea[aria-describedby]:invalid, .validated input:valid.invalid {
    border-color: rgb(220, 53, 69);
    -moz-box-shadow: none;
}
.validated input:invalid:focus-visible, .validated select:invalid:focus-visible, .validated textarea:invalid:focus-visible {
    border-color: rgba(var(--brand-primary), 1);
    -moz-box-shadow: none;
}
.validated input:invalid + div.error, .validated select:invalid + div.error, .validated textarea:invalid + div.error, .validated input:valid.invalid + div.error {
    display: block;
}
.validated input:valid + div.error, .validated select:valid + div.error, .validated textarea:valid + div.error, .contains-tooltip:has(input:valid) + div.error, .contains-tooltip:has(select:valid) + div.error {
    display: none;
}
.validated:has(fieldset[aria-invalid="false"]) .error {
    display: none;
}
.validated .err-out:has(input:invalid) {
    border-color: rgb(220, 53, 69);
}
.validated .err-out:has(input[aria-invalid="false"]) + .error {
    display: none;
}


/* ========================================
    🎉 CONFIRMATION 
======================================== */

.confirmation .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 42.5rem;
}
.confirmation hr {
    border: none;
    border-top: 1px solid var(--neutral-200);
    width: 100%;
}
.confirmation .details {
    display: flex;
    column-gap: 5rem;
    row-gap: 2rem;
    flex-wrap: wrap;
}
.confirmation dl {
    background: var(--neutral-200);
    padding: 1.5rem;
    border-radius: var(--field-border-radius);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.confirmation dl div {
    display: flex;
    justify-content: space-between;
}
.confirmation dl div:last-of-type {
    border-top: 1px solid var(--neutral-300);
    font-weight: var(--font-weight-bold);
    padding-top: 1rem;
}
.confirmation dl div dt {
    display: flex;
    gap: 0.5rem;
}