:root {
    --brand-orange: #f67d32;
    --brand-orange-50: #fffaf7;
    --brand-orange-dark: #e06a20;
    --brand-orange-100: #fef2eb;
    --brand-grad-red: #ee2a2c;
    --brand-grad-amber: #f99f34;
    --brand-peach: #f6d8ba;
    --brand-peach-line: #efd1b3;
    --brand-ink: #18181b;
    --brand-gray: #323232;
    --brand-tan: #cc9776;
    --brand-slate: #52525c;
    --brand-charcoal: #1f2124;
    --brand-charcoal-2: #2d2f32;
    --brand-white: #ffffff;
    --brand-zinc-50: #fafafa;
    --brand-zinc-100: #f4f4f5;
    --brand-cream: #f8f2e9;
    --brand-cream-hi: #f9f2e8;
    --brand-sand: #ede2d6;
    --brand-peach-glass: #fbefe3;
    --brand-sand-line: #e1d6ca;
    --brand-peach-hi: #f8e1cd;
    --brand-black: #121212;
    --brand-ember: rgb(255 111 35 / 25%);
    --brand-ember-soft: rgb(255 111 35 / 15%);
    --brand-ember-faint: rgb(255 111 35 / 2%);
    --brand-gray-line: #797979;
    --brand-graphite: #2e2e2e;
    --brand-mist: #bbccd6;
    --brand-glow-rgb: 191 169 146;
    --brand-glow-panel: #e0c3a6;
    --brand-glow-art: #d4b596;
    --brand-midnight: #141a1f;
    --brand-midnight-hi: #1e252b;
    --brand-steel-line: #36434e;
    --brand-gray-200: #d4d4d4;
    --brand-gray-400: #a1a1aa;
    --brand-elementor: #ed01ee;
    --brand-red: #ff674f;
    --brand-green: #00b25b;
    --brand-green-tick: #44bc1f;
    --brand-green-plan: #00c240;
    --brand-orange-200: #fcd7bf;
    --brand-orange-300: #f9a876;
    --c-bg: var(--brand-peach);
    --c-surface: var(--brand-white);
    --c-surface-dark: var(--brand-charcoal);
    --c-surface-dark-2: var(--brand-charcoal-2);
    --c-surface-band: var(--brand-ink);
    --c-bg-alt: var(--brand-cream);
    --c-surface-card: var(--brand-sand);
    --c-surface-inset: var(--brand-cream-hi);
    --c-surface-tip: var(--brand-peach-hi);
    --c-surface-card-hover: rgb(246 125 50 / 15%);
    --c-bg-sand: var(--brand-sand);
    --c-bg-dark: var(--brand-black);
    --c-bg-light: var(--brand-white);
    --c-surface-tile: var(--brand-cream);
    --c-surface-warm: var(--brand-orange-50);
    --c-glow-ember: var(--brand-ember);
    --c-glow-ember-soft: var(--brand-ember-soft);
    --c-tab-wash-from: var(--brand-ember);
    --c-tab-wash-to: var(--brand-ember-faint);
    --c-surface-on-dark: rgb(255 255 255 / 7.68%);
    --c-surface-on-dark-hi: var(--brand-graphite);
    --c-floor-far: var(--brand-black);
    --c-floor-near: var(--brand-mist);
    --c-text: var(--brand-ink);
    --c-text-muted: var(--brand-slate);
    --c-text-nav: var(--brand-gray);
    --c-text-invert: var(--brand-white);
    --c-text-on-dark: var(--brand-zinc-50);
    --c-text-on-dark-2: var(--brand-zinc-100);
    --c-primary: var(--brand-orange);
    --c-primary-hover: var(--brand-orange-dark);
    --c-on-primary: var(--brand-orange-50);
    --c-accent: var(--brand-orange);
    --c-border: rgb(24 24 27 / 10%);
    --c-border-warm: var(--brand-sand-line);
    --c-border-soft: var(--brand-orange-100);
    --c-border-pill: rgb(255 255 255 / 62%);
    --c-border-card: rgb(255 255 255 / 14%);
    --c-plan-accent: var(--brand-green-plan);
    --c-tick: var(--brand-green-tick);
    --c-border-plan-cta: var(--brand-orange-300);
    --c-rule-warm: var(--brand-orange-200);
    --c-border-media: rgb(82 82 92 / 20%);
    --c-grid-line: var(--brand-peach-line);
    --c-card-glow: rgb(var(--brand-glow-rgb) / 70%);
    --c-art-glow: var(--brand-glow-art);
    --c-panel-glow: var(--brand-glow-panel);
    --c-glass: rgb(255 255 255 / 12%);
    --c-glass-menu: rgb(255 255 255 / 60%);
    --c-surface-menu: var(--brand-peach-glass);
    --c-glass-strong: rgb(255 255 255 / 23%);
    --c-btn-ghost-bg: rgb(255 255 255 / 94%);
    --c-glass-pill: rgb(255 255 255 / 62%);
    --c-glass-tag: rgb(255 255 255 / 8%);
    --c-glass-panel: rgb(255 255 255 / 35%);
    --c-glass-pill-border: 1px solid var(--c-glass-pill);
    --c-glass-fill-from: rgb(255 255 255 / 5%);
    --c-glass-fill-to: rgb(255 255 255 / 12%);
    --c-glass-edge-from: rgb(255 255 255 / 50%);
    --c-glass-edge-to: rgb(255 255 255 / 20%);
    --c-glass-shade: rgb(0 0 0 / 8%);
    --c-glass-border-bg: linear-gradient(135deg, var(--c-glass-edge-from), var(--c-glass-edge-to));
    --c-glass-fx-lit: rgb(255 255 255 / 80%);
    --c-glass-fx-mid: rgb(255 255 255 / 14%);
    --c-glass-fx-echo: rgb(255 255 255 / 30%);
    --glass-fx-frost: 6px;
    --glass-fx2-gap: 16px;
    --glass-fx2-fade: 26px;
    --c-scrim: rgb(0 0 0 / 70%);
    --c-backdrop: rgb(0 0 0 / 88%);
    --c-border-video: var(--brand-gray-line);
    --c-bg-footer: var(--brand-midnight);
    --c-surface-footer: var(--brand-midnight-hi);
    --c-border-footer: var(--brand-steel-line);
    --c-text-footer: var(--brand-gray-200);
    --c-text-footer-dim: var(--brand-gray-400);
    --c-border-on-dark: rgb(255 255 255 / 8%);
    --c-border-ember: rgb(246 125 50 / 22%);
    --c-wash-ember: rgb(246 125 50 / 9%);
    --c-btn-ghost-bd: var(--brand-white);
    --c-btn-shine: rgb(255 255 255 / 35%);
    --ff-display: "PP Fragment", "Instrument Serif", Georgia, "Times New Roman", serif;
    --ff-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-heading: var(--ff-display);
    --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-xs: clamp(.75rem, .71rem + .2vw, .875rem);
    --fs-sm: clamp(.875rem, .835rem + .2vw, 1rem);
    --fs-base: clamp(1rem, .96rem + .2vw, 1.125rem);
    --fs-lead: clamp(1rem, .92rem + .4vw, 1.25rem);
    --fs-badge: clamp(.875rem, .835rem + .2vw, 1rem);
    --fs-lg: clamp(1.125rem, 1.045rem + .4vw, 1.375rem);
    --fs-xl: clamp(1.25rem, 1.17rem + .4vw, 1.5rem);
    --fs-faq-label: clamp(1.125rem, 1.005rem + .6vw, 1.5rem);
    --fs-h3: clamp(1.5rem, 1.34rem + .8vw, 2rem);
    --fs-h2: clamp(2rem, 1.68rem + 1.6vw, 3rem);
    --fs-h1: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
    --fs-logo: clamp(1.125rem, 1.085rem + .2vw, 1.25rem);
    --lh-tight: 1.125;
    --lh-ui: 1.611;
    --lh-badge: 1.5;
    --lh-stat: 1.4545;
    --lh-h2: 1.2292;
    --lh-h3: 1.3333;
    --lh-copy: 1.5;
    --lh-link: 1.4444;
    --lh-tag: 1.7143;
    --lh-snug: 1.25;
    --lh-body: 1.6;
    --lh-loose: 1.75;
    --ls-tight: -.005em;
    --ls-wide: .18em;
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: clamp(2.5rem, 2.02rem + 2.4vw, 4rem);
    --sp-8: clamp(3.5rem, 2.7rem + 4vw, 6rem);
    --section-y: clamp(3.5rem, 2.22rem + 6.4vw, 7.5rem);
    --section-y-lg: clamp(4rem, 2.4rem + 8vw, 9rem);
    --glow-blur: clamp(2rem, -.36rem + 11.8vw, 150px);
    --container-max: 1320px;
    --stat-measure: 215px;
    --tab-pad-x: clamp(1rem, .68rem + 1.6vw, 2rem);
    --tab-icon: 24px;
    --cta-gap: 2.5rem;
    --wordmark-size: 12.07cqw;
    --gutter: clamp(1rem, .84rem + .8vw, 1.5rem);
    --header-pad: clamp(.75rem, .67rem + .4vw, 1rem);
    --header-h: calc(var(--control-h) + var(--header-pad) * 2);
    --hero-top: clamp(2.5rem, 1.48rem + 5.1vw, 5.6875rem);
    --grid-cell: clamp(3.5rem, 2.47rem + 5.15vw, 6.71875rem);
    --grid-line-w: 1px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-card: 16px;
    --radius-xs: 4px;
    --radius-media: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgb(24 24 27 / 6%);
    --shadow-md: 0 8px 24px rgb(24 24 27 / 8%);
    --shadow-lg: 0 24px 56px rgb(24 24 27 / 14%);
    --shadow-card: 0 18px 48px rgb(24 24 27 / 22%);
    --shadow-tip: 0 4px 12.3px rgb(199 199 199 / 25%);
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur: .24s;
    --dur-med: .4s;
    --dur-slow: .6s;
    --control-h: 48px;
    --control-h-sm: 39px;
    --control-h-lg: 49px
}

@media(min-width:1024px)and (max-width:1366px) {
    :root {
        --section-y: 7.5rem;
        --section-y-lg: 7.5rem
    }
}

@media(min-width:881px)and (max-width:1023.98px) {
    :root {
        --section-y: 6.25rem;
        --section-y-lg: 6.25rem
    }
}

@media(min-width:769px)and (max-width:880.98px) {
    :root {
        --section-y: 5.625rem;
        --section-y-lg: 5.625rem
    }
}

@media(max-width:768.98px) {
    :root {
        --section-y: 3.75rem;
        --section-y-lg: 3.75rem
    }
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

*,
*:before,
*:after {
    box-sizing: border-box
}

* {
    margin: 0
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4))
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

body {
    min-height: 100svh;
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden
}

.page-template-v4-frontpage-template {

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
        height: auto
    }
}

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

.page-template-v4-frontpage-template {

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li,
    a {
        overflow-wrap: break-word
    }
}

h1,
h2,
h3,
h4 {
    font-family: var(--ff-heading);
    line-height: var(--lh-tight);
    font-weight: 700
}

@media(max-width:1023.98px) {

    h1[class],
    h2[class],
    h3[class],
    h4[class] {
        text-wrap: pretty
    }
}

p {
    text-wrap: pretty
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: 2px
}

.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.glass {
    border-width: 1px;
    border-style: solid;
    border-color: var(--brand-white);
    background: linear-gradient(180deg, var(--c-glass-fill-from), var(--c-glass-fill-to)) padding-box, linear-gradient(135deg, var(--c-glass-edge-from), var(--c-glass-edge-to)) border-box !important
}

.glass-border {
    position: relative;
    box-shadow: inset 0 0 0 100vmax var(--c-glass-shade)
}

.glass-border:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--glass-border-width, 1px);
    border-radius: inherit;
    background: var(--c-glass-border-bg);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.glass-effect,
.glass-effect-2 {
    position: relative
}

@media(min-width:1024px) {
    @supports (backdrop-filter: blur(1px)) {

        .glass-effect,
        .glass-effect-2 {
            backdrop-filter: blur(var(--glass-fx-frost))
        }
    }
}

.glass-effect:after,
.glass-effect-2:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--glass-fx-width, 1.2px);
    border-radius: inherit;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.glass-effect:after {
    background: linear-gradient(45deg, var(--c-glass-fx-lit) 0%, var(--c-glass-fx-mid) 46%, var(--c-glass-fx-echo) 100%)
}

.glass-effect-2:after {
    background: var(--c-glass-fx-lit);
    mask: radial-gradient(circle at 100% 0, #0000 var(--glass-fx2-gap), #000 calc(var(--glass-fx2-gap) + var(--glass-fx2-fade))), radial-gradient(circle at 0 100%, #0000 var(--glass-fx2-gap), #000 calc(var(--glass-fx2-gap) + var(--glass-fx2-fade))), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: source-in, source-in, xor, source-over;
    mask-composite: intersect, intersect, exclude, add
}

.general__header {
    grid-template-columns: minmax(0, 712fr) minmax(0, 489fr);
    column-gap: 9.02%
}

.container {
    --_pad: var(--gutter);
    width: 100%;
    max-width: calc(var(--container-max) + var(--_pad) * 2);
    margin-inline: auto;
    padding-inline: var(--_pad)
}

@media(min-width:1320px) {
    .container {
        --_pad: max(8px, min(var(--gutter), calc((100% - var(--container-max)) / 2)))
    }
}

.section {
    padding-block: var(--section-y)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h-lg);
    padding: 10px clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
    border: 1px solid transparent;
    border-radius: 46px;
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease)
}

@media(hover:hover)and (prefers-reduced-motion:no-preference) {
    .btn {
        position: relative;
        z-index: 0;
        overflow: hidden
    }

    .btn:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -60%;
        left: -5em;
        width: 2.5em;
        height: 220%;
        background: var(--c-btn-shine);
        transform: rotate(35deg);
        transition: left .55s cubic-bezier(.19, 1, .22, 1);
        pointer-events: none
    }

    .btn:hover {
        transform: scale(1.06)
    }

    .btn:hover:after {
        left: 120%
    }
}

.btn:active {
    transform: translateY(1px)
}

.btn--primary {
    background: var(--c-primary);
    color: var(--brand-white)
}

.btn--primary:hover {
    background: var(--c-primary-hover)
}

.btn--ghost {
    background: var(--c-btn-ghost-bg);
    border-color: var(--c-btn-ghost-bd);
    color: var(--c-text)
}

.btn--ghost:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--brand-white)
}

.btn--sm {
    min-height: var(--control-h-sm);
    padding: 5px clamp(.875rem, .675rem + 1vw, 1.5rem);
    border-radius: 32px;
    font-weight: var(--fw-medium);
    flex-shrink: 0
}

@media(pointer:coarse) {
    .btn--sm {
        min-height: 44px
    }
}

.btn--sm.btn--primary {
    color: var(--c-on-primary)
}

.btn--block {
    width: 100%
}

.lightbox {
    width: min(1100px, calc(100vw - var(--gutter) * 2), calc((100vh - 96px) * 16 / 9));
    max-width: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: none
}

.lightbox[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2)
}

.lightbox::backdrop {
    background: var(--c-backdrop)
}

.lightbox__panel {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--brand-black)
}

.lightbox__panel>iframe,
.lightbox__panel>video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0
}

.lightbox__close {
    position: relative;
    justify-self: end;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--c-glass);
    color: var(--c-text-invert);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease)
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
    background: var(--c-primary)
}

.lightbox__close:before,
.lightbox__close:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 2px;
    background: currentcolor
}

.lightbox__close:before {
    transform: rotate(45deg)
}

.lightbox__close:after {
    transform: rotate(-45deg)
}

body.is-lightbox-open {
    overflow: hidden
}

.skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease)
}

.skip-link:focus {
    transform: translateY(0)
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    padding-block: var(--header-pad);
    background: transparent;
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)
}

.header.is-stuck {
    background: var(--c-bg);
    box-shadow: var(--shadow-sm)
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--control-h)
}

@media(min-width:1024px) {
    .header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: var(--sp-5)
    }
}

.header__logo {
    display: block;
    flex: 0 1 auto;
    min-width: 0
}

.header__logo img {
    width: clamp(6rem, 5.06rem + 4.7vw, 8.9375rem);
    max-width: 100%;
    height: auto;
    aspect-ratio: 143 / 40
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2)
}

@media(min-width:1024px) {
    .header__actions {
        justify-self: end;
        gap: 10px
    }
}

.header__account {
    display: none;
    border: var(--c-glass-pill-border)
}

@media(min-width:1024px) {
    .header__account {
        display: grid;
        place-items: center;
        width: var(--control-h-sm);
        height: var(--control-h-sm);
        flex-shrink: 0;
        border-radius: 50%;
        transition: transform var(--dur) var(--ease)
    }

    .header__account:hover {
        transform: scale(1.06)
    }

    .header__account svg {
        width: 100%;
        height: 100%;
        display: block
    }
}

.avatar__disc {
    fill: var(--c-glass)
}

.avatar__head,
.avatar__body {
    fill: var(--brand-tan)
}

.nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 45;
    width: min(20rem, 82vw);
    padding: calc(var(--header-h) + var(--sp-4)) var(--sp-5) var(--sp-6);
    background: var(--brand-orange-50);
    border-left: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    transform: translate(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    interpolate-size: allow-keywords
}

.nav[data-open=true] {
    transform: translate(0)
}

.nav__list {
    display: flex;
    flex-direction: column
}

@media(min-width:1024px) {
    .nav__item--drawer-only {
        display: none
    }
}

.nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-nav);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease)
}

.nav__link:hover {
    color: var(--c-primary);
    background: #18181b0a
}

.nav__link.is-active,
.nav__link[aria-current=page],
.nav__link[aria-current=location] {
    color: var(--c-primary)
}

.nav__item {
    border-bottom: 1px solid var(--c-border)
}

.nav__item:last-child {
    border-bottom: 0
}

.nav__item--has-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center
}

.nav__disclosure {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 48px;
    margin-right: calc(var(--sp-2) * -1);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--c-text-nav);
    transition: color var(--dur) var(--ease)
}

.nav__disclosure:hover {
    color: var(--c-primary)
}

.nav__item--has-sub:hover>.nav__link,
.nav__item--has-sub:hover>.nav__disclosure {
    color: var(--c-primary)
}

.nav__item--has-sub:has(>[aria-expanded=true])>.nav__link,
.nav__item--has-sub:has(>[aria-expanded=true])>.nav__disclosure {
    color: var(--c-primary)
}

.nav__chev {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur) var(--ease)
}

.nav__disclosure[aria-expanded=true] .nav__chev {
    transform: translateY(2px) rotate(-135deg)
}

.nav__sub {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    transition: height var(--dur) var(--ease)
}

.nav__disclosure[aria-expanded=true]~.nav__sub {
    height: auto
}

.nav__sub>li:last-child {
    padding-bottom: var(--sp-2)
}

.nav__sub-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--sp-4) var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    color: var(--c-text-muted);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease)
}

.nav__sub-link:hover {
    color: var(--c-primary);
    background: #18181b0a
}

.nav__sub-link.is-active,
.nav__sub-link[aria-current=page],
.nav__sub-link[aria-current=location] {
    color: var(--c-primary)
}

@media(min-width:1024px) {
    .nav {
        --_gap: clamp(1.25rem, .85rem + 2vw, 2.5rem);
        --_half: calc(var(--_gap) / 2);
        position: static;
        z-index: auto;
        width: auto;
        padding-block: 0;
        padding-inline: calc(var(--sp-5) - var(--_half));
        height: var(--control-h);
        display: flex;
        align-items: center;
        background: var(--c-glass);
        border-radius: var(--radius-pill);
        box-shadow: none;
        transform: none;
        overflow: visible
    }

    .nav__list {
        flex-direction: row;
        align-items: center
    }

    .nav__link {
        min-height: var(--control-h);
        padding-inline: var(--_half);
        border-radius: 0;
        white-space: nowrap;
        font-size: var(--fs-base);
        line-height: 29px
    }

    .nav__item--has-sub>.nav__link {
        padding-inline-end: 0
    }

    .nav__link:hover {
        background: none
    }
}

@media(min-width:1024px) {
    .nav__item {
        border-bottom: 0
    }

    .nav__item--has-sub {
        position: relative;
        display: flex;
        align-items: center
    }

    .nav__disclosure {
        width: auto;
        min-height: var(--control-h);
        margin-right: 0;
        padding-inline: 6px var(--_half)
    }

    .nav__sub {
        position: absolute;
        top: calc(100% + 5px);
        left: calc(var(--_half) - var(--sp-4));
        z-index: 1;
        width: max-content;
        max-width: min(20rem, 70vw);
        height: auto;
        gap: 11px;
        max-height: calc(100dvh - var(--header-h) - var(--sp-5));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--c-surface-menu);
        border-radius: var(--radius-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur)
    }

    .nav__item--has-sub:hover>.nav__sub,
    .nav__item--has-sub:focus-within>.nav__sub,
    .nav__disclosure[aria-expanded=true]~.nav__sub {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .nav__sub>li:last-child {
        padding-bottom: 0
    }

    .nav__sub-link {
        min-height: 0;
        padding-inline: 0;
        border-radius: 0;
        white-space: nowrap;
        font-size: var(--fs-base);
        font-weight: var(--fw-medium);
        line-height: var(--lh-ui);
        color: var(--c-text-nav)
    }

    .nav__item--has-sub:after {
        content: "";
        position: absolute;
        inset: 100% 0 auto;
        height: 5px
    }

    @supports (backdrop-filter: blur(1px)) {
        .nav__sub {
            background: var(--brand-white);
        }
    }

    ul.nav__sub {
        padding: 11px 39px 11px var(--sp-4)
    }

    .nav__sub-link:hover {
        background: none
    }
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #18181b73;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur)
}

@supports (backdrop-filter: blur(1px)) {
    .nav-backdrop {
        backdrop-filter: blur(4px)
    }
}

.nav-backdrop[data-open=true] {
    opacity: 1;
    visibility: visible
}

@media(min-width:1024px) {
    .nav-backdrop {
        display: none
    }
}

.nav-toggle {
    position: relative;
    z-index: 47;
    display: grid;
    place-items: center;
    align-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-right: calc(var(--sp-2) * -1);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--c-text)
}

@media(min-width:1024px) {
    .nav-toggle {
        display: none
    }
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease)
}

.nav-toggle__bar+.nav-toggle__bar {
    margin-top: 5px
}

.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(2) {
    opacity: 0
}

.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

body.is-nav-open {
    overflow: hidden
}

.hero {
    margin-top: calc(var(--header-h) * -1);
    padding-top: calc(var(--header-h) + var(--hero-top));
    padding-bottom: var(--section-y);
    overflow-x: clip;
    background-color: var(--c-bg);
    background-image: url(../img/header-bg@1x.png);
    background-image: image-set(url(../img/header-bg@1x.webp) type("image/webp") 1x, url(../img/header-bg.webp) type("image/webp") 2x);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

@media(max-width:767.98px) {
    .hero {
        background-image: url(../img/header-bg@1x.png);
        background-image: image-set(url(../img/header-bg@1x.webp) type("image/webp") 1x)
    }
}

.hero__grid {
    display: grid;
    row-gap: var(--sp-7);
    align-items: start
}

@media(min-width:1024px) {
    .hero__grid {
        grid-template-columns: minmax(0, 564fr) minmax(0, 648fr);
        column-gap: 8.1818%;
        align-items: stretch
    }
}

.hero__copy {
    max-width: 564px
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-4);
    border-radius: 100px;
    background: var(--c-glass-strong);
    font-size: var(--fs-badge);
    font-weight: var(--fw-medium);
    line-height: var(--lh-badge);
    color: var(--c-text)
}

.hero__badge img {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px
}

.hero__title {
    margin-top: clamp(1.25rem, 1.01rem + 1.2vw, 2rem);
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--c-text);
    text-wrap: normal
}

.hero__lead {
    margin-top: clamp(.75rem, .67rem + .4vw, 1rem);
    max-width: 538px;
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--c-text-muted)
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: clamp(1.75rem, 1.51rem + 1.2vw, 2.5rem)
}

.hero__features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: clamp(.75rem, .65rem + .5vw, 1.0625rem);
    column-gap: var(--sp-5);
    margin-top: clamp(2rem, 1.76rem + 1.2vw, 2.75rem);
    padding: 0;
    list-style: none
}

.feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.feature__icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain
}

.feature__score {
    color: var(--c-primary)
}

.feature--websites {
    font-weight: var(--fw-regular)
}

.hero__media {
    position: relative;
    background: none;
    container-type: inline-size;
    --_u-base: max(.741px, .09643cqw);
    --_u: var(--_u-base);
    --_grow: 1.1;
    --_art-h: 94%;
    --_bleed-pct: 2.5;
    --_bleed: calc(var(--_bleed-pct) * 1vw);
    --_frame: 1920px;
    --_reach: calc((var(--_frame) - var(--container-max)) / 2 + var(--_frame) * var(--_bleed-pct) / 100);
    margin-right: calc(-1*min(max(var(--gutter), (100vw - var(--container-max)) / 2) + var(--_bleed), var(--_reach)))
}

.hero__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1422 / 914;
    border-radius: calc(15.3145 * var(--_u)) 0 0 calc(15.3145 * var(--_u));
    box-shadow: 0 0 calc(31.8915 * var(--_u)) calc(15.9458 * var(--_u)) var(--c-art-glow)
}

@media(min-width:1920px) {
    .hero__art {
        border-radius: calc(15.3145 * var(--_u))
    }
}

@media(min-width:1024px) {
    .hero__art {
        position: absolute;
        inset: 0 0 auto;
        width: 100%;
        height: var(--_art-h);
        aspect-ratio: auto;
        object-fit: cover;
        object-position: left center
    }
}

.hero__card,
.hero__panel {
    display: none
}

@media(min-width:768px) {
    .hero__card {
        --_u: calc(var(--_u-base) * var(--_grow));
        position: absolute;
        display: flex;
        align-items: center;
        background: var(--c-surface-dark);
        color: var(--c-text-invert);
        font-weight: var(--fw-regular)
    }

    .hero__card img {
        display: block;
        flex-shrink: 0
    }

    .hero__card--widgets {
        top: 0;
        left: 58cqw;
        transform: translate(-50%, -50%);
        flex-direction: column;
        justify-content: center;
        gap: calc(6.23 * var(--_u));
        width: calc(110 * var(--_u));
        height: calc(110 * var(--_u));
        border-radius: var(--radius-pill);
        font-size: calc(13.4952 * var(--_u));
        line-height: 1.334;
        text-align: center;
        box-shadow: 0 calc(-8 * var(--_u)) calc(30.9 * var(--_u)) calc(8 * var(--_u)) var(--c-card-glow)
    }

    .hero__card--widgets img {
        width: calc(18 * var(--_u));
        height: calc(18 * var(--_u))
    }

    .hero__card--widgets span {
        width: calc(87.2 * var(--_u))
    }

    .hero__card--templates {
        top: 81%;
        left: 0;
        transform: translateY(-50%);
        gap: calc(8.73 * var(--_u));
        height: calc(48 * var(--_u));
        padding-inline: calc(13.09 * var(--_u));
        border-radius: calc(8.73 * var(--_u));
        font-size: calc(14.1818 * var(--_u));
        line-height: 1.692;
        white-space: nowrap;
        box-shadow: -3px 0 51.9px 3px var(--c-card-glow)
    }

    .hero__card--templates img {
        width: calc(26.18 * var(--_u));
        height: calc(26.18 * var(--_u))
    }

    .hero__panel {
        display: block;
        position: absolute;
        top: 82.63%;
        left: 54.1cqw;
        left: 59cqw;
        width: calc(269 * var(--_u));
        aspect-ratio: 538 / 405;
        background-image: url(../img/card-panel.png);
        background-size: 100% 100%;
        border-radius: calc(7.82222 * var(--_u));
        box-shadow: 0 calc(13 * var(--_u)) calc(30.1 * var(--_u)) var(--c-panel-glow)
    }

    .hero__count {
        color: var(--c-primary)
    }
}

@media(min-width:1024px) {
    .hero__card--templates {
        left: -12cqw
    }
}

.hero-banner {
    padding-block: var(--sp-5);
    background: var(--c-surface-band)
}

.hero-banner__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--sp-6) var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none
}

@media(min-width:1100px) {
    .hero-banner__list {
        grid-template-columns: repeat(5, max-content);
        justify-content: space-between
    }
}

.stat {
    display: flex;
    flex-direction: column
}

.stat__value {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-stat);
    color: var(--c-text-on-dark)
}

.stat__label {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
    color: var(--c-text-on-dark-2)
}

.toolkit {
    padding-block: var(--section-y-lg);
    background: var(--c-bg-alt)
}

.toolkit__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.toolkit__eyebrow img {
    display: block;
    flex-shrink: 0
}

.toolkit__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .toolkit__header {
        align-items: end;
        grid-template-columns: minmax(0, 712fr) minmax(0, 489fr);
        column-gap: 9.02%
    }
}

.toolkit__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text)
}

.toolkit__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.toolkit__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--c-glass-pill);
    border: 2px solid var(--c-border-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-text)
}

.pill img {
    display: block;
    flex-shrink: 0
}

.toolkit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-5);
    margin: clamp(2.5rem, 1.604rem + 4.48vw, 5.3rem) 0 0;
    padding: 0;
    list-style: none
}

.toolkit-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    border-radius: var(--radius-card);
    background: var(--c-surface-card)
}

.toolkit-card__eyebrow {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.toolkit-card__title {
    margin: var(--sp-4) 0 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text)
}

.toolkit-card__text {
    margin: var(--sp-2) 0 0;
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-text-muted)
}

.included {
    margin-top: auto;
    padding-top: var(--sp-6)
}

.included__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--c-surface-inset);
    text-align: center
}

.included__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.included__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin-top: var(--sp-3)
}

.included__icon img {
    display: block
}

.included__list {
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-stat);
    color: var(--c-text)
}

.suite {
    padding-block: var(--section-y-lg);
    background: var(--c-bg-dark)
}

.suite__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.suite__eyebrow img {
    display: block;
    flex-shrink: 0
}

.suite__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .suite__header {
        grid-template-columns: minmax(0, 672fr) minmax(0, 529fr);
        column-gap: 9.015%;
        align-items: end;
        column-gap: 9.02%;
        column-gap: 12.5%
    }
}

.suite__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text-on-dark)
}

.suite__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-on-dark)
}

.suite__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    gap: var(--sp-6) var(--sp-5);
    margin: var(--sp-7) 0 0;
    padding: 0;
    list-style: none
}

.suite__grid:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 5.6%;
    left: 50%;
    width: 64.4%;
    height: 103%;
    margin-left: -33.49%;
    border-radius: 50%;
    background: var(--c-glow-ember);
    filter: blur(var(--glow-blur));
    pointer-events: none
}

@media(min-width:768px) {
    .suite__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .suite-card--widgets,
    .suite-card--templates {
        grid-column: 1 / -1
    }
}

@media(min-width:1024px) {
    .suite__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 1fr
    }

    .suite-card--widgets {
        grid-column: 1 / 3;
        grid-row: 1 / 3
    }

    .suite-card--templates {
        grid-column: 3 / 5
    }
}

.suite-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--c-border-card);
    border-radius: var(--radius-card);
    background: var(--c-surface-on-dark)
}

.suite-card:after {
    padding: .2px !important
}

.suite-card__body {
    z-index: 3;
    padding: var(--sp-5)
}

.suite-card.glass-border:after {
    z-index: 2
}

.suite-card__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text-on-dark)
}

.suite-card__value {
    display: block;
    color: var(--c-accent)
}

.suite-card--widgets .suite-card__value {
    display: inline
}

.suite-card__text {
    margin: var(--sp-2) 0 0;
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-text-on-dark-2)
}

.suite-card__art,
.suite-card__shot {
    z-index: 2;
    justify-self: center;
    width: auto;
    max-width: 65%;
    margin-bottom: var(--sp-5);
    pointer-events: none
}

.suite-card__art {
    max-width: 47%
}

.suite-card--widgets {
    background-color: transparent;
    background-image: linear-gradient(var(--c-surface-on-dark), var(--c-surface-on-dark)), url(../img/suite-widgets-bg.png);
    background-position: center;
    background-size: auto, cover;
    background-repeat: no-repeat
}

@media(min-width:768px) {

    .suite-card--widgets .suite-card__body,
    .suite-card--widgets .suite-card__art {
        grid-area: 1 / 1
    }

    .suite-card--widgets .suite-card__body {
        max-width: 69%
    }

    .suite-card--widgets .suite-card__tags {
        max-width: 20em
    }

    .suite-card--widgets .suite-card__art {
        align-self: center;
        justify-self: end;
        width: auto;
        max-width: 78.31%;
        margin-bottom: 0
    }
}

@media(min-width:1024px) {
    .suite-card--widgets {
        position: relative
    }

    .suite-card--widgets .suite-card__art {
        position: absolute;
        grid-area: auto;
        top: 50%;
        width: 78.31%;
        max-width: none;
        transform: translateY(-50%);
        right: 6%;
        width: 45%
    }
}

.suite-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: var(--sp-6) 0 0;
    padding: 0;
    list-style: none
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--c-glass-tag);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tag);
    text-transform: capitalize;
    color: var(--c-text-on-dark)
}

@media(min-width:768px) {
    .suite-card--templates {
        grid-template-columns: minmax(0, 338fr) minmax(0, 310fr);
        align-items: center
    }

    .suite-card--templates .suite-card__shot {
        justify-self: start;
        width: 96.13%;
        max-width: none;
        margin-bottom: 0
    }
}

.compare {
    padding-block: 0 var(--section-y-lg);
    background: var(--c-bg-dark)
}

@media(min-width:1024px) {
    .compare>.container {
        padding-inline: 36px
    }
}

.compare__head {
    text-align: center
}

.compare__eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.compare__eyebrow img {
    display: block;
    flex-shrink: 0
}

.compare__title {
    max-width: 16.4em;
    margin: var(--sp-4) auto 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text-on-dark)
}

.compare__lead {
    max-width: 40.5em;
    margin: 1.2rem auto 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-on-dark-2)
}

.compare__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin: var(--sp-7) 0 0;
    padding: 0;
    list-style: none
}

@media(min-width:768px) {
    .compare__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.compare__grid {
    position: relative
}

.compare__grid:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 64%;
    aspect-ratio: 850 / 371;
    transform: translate(-52.01%, -50%);
    border-radius: 50%;
    background: var(--c-glow-ember-soft);
    filter: blur(var(--glow-blur));
    pointer-events: none
}

.compare-card {
    position: relative;
    z-index: 1;
    padding: var(--sp-5);
    border: 1px solid var(--c-border-on-dark);
    border-radius: var(--radius-card);
    background: var(--c-surface-on-dark)
}

.compare-card:after {
    padding: .4px !important
}

.compare-card--ours {
    border-color: var(--c-border-ember);
    background-image: linear-gradient(105deg, var(--c-wash-ember), transparent 58%)
}

.compare-card__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text-on-dark-2)
}

.compare-card--ours .compare-card__title {
    color: var(--c-accent)
}

.compare-card__list {
    display: grid;
    gap: var(--sp-4);
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none
}

.compare-item {
    display: flex;
    align-items: start;
    gap: 10px;
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-text-on-dark-2)
}

.compare-item img {
    display: block;
    flex-shrink: 0;
    margin-top: 1px
}

.widgets {
    padding-block: var(--section-y-lg);
    background: var(--c-bg-alt)
}

.widgets__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.widgets__eyebrow img {
    display: block;
    flex-shrink: 0
}

.widgets__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .widgets__header {
        grid-template-columns: minmax(0, 722fr) minmax(0, 468fr);
        column-gap: 9.85%;
        align-items: start
    }
}

.widgets__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text)
}

.widgets__lead {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.widgets__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(.75rem, .59rem + .8vw, 1.25rem);
    row-gap: clamp(.75rem, .59rem + .8vw, .875rem);
    margin: clamp(2.5rem, 1.86rem + 3.2vw, 4.5rem) 0 0;
    padding: 0;
    list-style: none
}

@media(min-width:480px) {
    .widgets__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(min-width:640px) {
    .widgets__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(min-width:820px) {
    .widgets__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .widgets__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
}

@media(min-width:1280px) {
    .widgets__grid {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }
}

.widget-card {
    position: relative;
    container-type: inline-size;
    display: grid;
    border: 1px solid var(--c-border-warm);
    border-radius: var(--radius-card);
    transition: background-color var(--dur) var(--ease)
}

.widget-card__meta {
    grid-area: 1 / 1;
    align-self: start;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px
}

.widget-card__meta img {
    display: block;
    flex-shrink: 0
}

.widget-card__body {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px var(--sp-2);
    text-align: center
}

.widget-card__icon {
    flex: none;
    width: 36px;
    height: 36px;
    background-color: var(--c-text-muted);
    -webkit-mask: var(--widget-icon) center / auto no-repeat;
    mask: var(--widget-icon) center / auto no-repeat;
    transition: background-color var(--dur) var(--ease)
}

.widget-card__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-copy);
    color: var(--c-text-muted)
}

@media(hover:hover) {
    .widget-card:hover {
        z-index: 2;
        background-color: var(--c-surface-card-hover)
    }

    .widget-card:hover .widget-card__icon {
        background-color: var(--c-accent)
    }
}

.widget-card__tip {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%)
}

@media(hover:hover)and (min-width:1024px) {
    .widget-card__tip {
        --_tip-x: -50%;
        left: var(--_tip-left, 50%);
        right: var(--_tip-right, auto);
        bottom: calc(100% + 12.74px);
        z-index: 2;
        width: 282px;
        height: auto;
        margin: 0;
        padding: var(--sp-4);
        overflow: visible;
        clip-path: none;
        border: 1px solid var(--c-border-warm);
        border-radius: var(--radius-md);
        background: var(--c-surface-tip);
        filter: drop-shadow(var(--shadow-tip));
        font-size: var(--fs-sm);
        line-height: var(--lh-copy);
        color: var(--c-text-muted);
        text-align: center;
        opacity: 0;
        transform: translate(var(--_tip-x), 4px);
        pointer-events: none;
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease)
    }

    .widget-card__tip:after {
        --_tail: 18.02px;
        content: "";
        position: absolute;
        left: var(--_arrow-x, 50%);
        top: calc(100% + 1px - (var(--_tail) / 2));
        width: var(--_tail);
        height: var(--_tail);
        transform: translate(-50%) rotate(45deg);
        border-right: 1px solid var(--c-border-warm);
        border-bottom: 1px solid var(--c-border-warm);
        background: var(--c-surface-tip)
    }

    .widget-card:hover .widget-card__tip {
        opacity: 1;
        transform: translate(var(--_tip-x))
    }
}

@media(hover:hover)and (min-width:1024px)and (max-width:1279.98px) {
    .widget-card:nth-child(6n+1) .widget-card__tip {
        --_tip-x: 0;
        --_tip-left: 0;
        --_arrow-x: 50cqi
    }

    .widget-card:nth-child(6n) .widget-card__tip {
        --_tip-x: 0;
        --_tip-left: auto;
        --_tip-right: 0;
        --_arrow-x: calc(100% - 50cqi)
    }
}

@media(hover:hover)and (min-width:1280px) {
    .widget-card:nth-child(7n+1) .widget-card__tip {
        --_tip-x: 0;
        --_tip-left: 0;
        --_arrow-x: 50cqi
    }

    .widget-card:nth-child(7n) .widget-card__tip {
        --_tip-x: 0;
        --_tip-left: auto;
        --_tip-right: 0;
        --_arrow-x: calc(100% - 50cqi)
    }
}

.finished {
    padding-block: var(--section-y-lg);
    background: var(--c-bg-sand)
}

.finished__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.finished__eyebrow img {
    display: block;
    flex-shrink: 0
}

.finished__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .finished__header {
        grid-template-columns: minmax(0, 650fr) minmax(0, 537fr);
        column-gap: 10.08%;
        align-items: end;
        grid-template-columns: minmax(0, 712fr) minmax(0, 489fr);
        column-gap: 9.02%
    }
}

.finished__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text)
}

.finished__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

ul.finished__counts {
    display: grid;
    gap: var(--sp-5);
    gap: var(--sp-7) var(--sp-5);
    margin: clamp(1.5rem, 1.1rem + 2vw, 2.75rem) 0 0;
    padding: var(--sp-6) clamp(1.25rem, .85rem + 2vw, 2.5rem);
    border-radius: var(--radius-card);
    background: var(--c-glass-panel);
    list-style: none;
    --c-glass-shade: transparent
}

ul.finished__counts:after {
    background-color: var(--brand-white)
}

@media(min-width:768px) {
    .finished__counts {
        grid-template-columns: minmax(0, 640fr) minmax(0, 560fr);
        column-gap: 3.23%
    }
}

.count__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text)
}

.count__number {
    color: var(--c-accent)
}

.count__text {
    margin: var(--sp-2) 0 0;
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-text-muted)
}

.finished__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin: clamp(2rem, 1.52rem + 2.4vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none
}

@media(min-width:480px) {
    .finished__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:750px) {
    .finished__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(min-width:1140px) {
    .finished__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.site-card {
    display: flex;
    flex-direction: column
}

.site-card__media {
    display: grid;
    overflow: clip;
    border: 1px solid var(--c-border-media);
    border: 1px solid rgba(82, 82, 92, .1);
    border-radius: var(--radius-media)
}

.site-card__shot {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 312 / 335;
    object-fit: cover;
    object-position: top
}

.site-card__actions {
    grid-area: 1 / 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 6px;
    padding: var(--sp-3);
    background: var(--c-scrim);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease)
}

.site-card:hover .site-card__actions,
.site-card__actions:focus-within {
    opacity: 1
}

@media(prefers-reduced-motion:no-preference) {
    .site-card__actions .site-btn {
        transform: translateY(8px);
        transition: background-color var(--dur) var(--ease), transform var(--dur-med) var(--ease) 60ms
    }

    .site-card:hover .site-btn,
    .site-card__actions:focus-within .site-btn {
        transform: none
    }
}

/* Light / Dark / No Animation — one row of outline pills. Dark is left out
   on sites that have no dark build, so a card has two or three. */
.site-btn {
    padding: 6px 16px;
    border: 1px solid var(--c-btn-ghost-bd);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: var(--c-text-invert);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease)
}

.site-btn:hover,
.site-btn:focus-visible {
    border-color: var(--c-primary);
    background: var(--c-primary)
}

.site-card__label {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    text-align: center;
    color: var(--c-text-muted)
}

.interaction {
    padding-block: var(--section-y-lg);
    overflow-x: clip;
    background-color: var(--c-bg);
    background-image: repeating-linear-gradient(to right, var(--c-grid-line) 0 var(--grid-line-w), transparent var(--grid-line-w) var(--grid-cell)), repeating-linear-gradient(to bottom, var(--c-grid-line) 0 var(--grid-line-w), transparent var(--grid-line-w) var(--grid-cell))
}

.interaction__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.interaction__eyebrow img {
    display: block;
    flex-shrink: 0
}

.interaction__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .interaction__header {
        grid-template-columns: minmax(0, 680fr) minmax(0, 506fr);
        column-gap: 10.15%;
        align-items: end
    }
}

.interaction__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text)
}

.interaction__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.interaction__body {
    display: grid;
    --_sel: 0;
    margin-top: clamp(2.5rem, 1.7rem + 4vw, 5rem)
}

.interaction__tabs {
    display: contents
}

.tab {
    order: calc(var(--_i) * 2)
}

.interaction__stage {
    order: calc(var(--_sel) * 2 + 1);
    margin-block: var(--sp-5);
    padding-inline: 10.5% 3.5%;
    padding-bottom: 4%
}

@media(min-width:1024px) {
    .interaction__body {
        grid-template-columns: minmax(0, 496fr) minmax(0, 815fr);
        column-gap: .68%;
        align-items: center
    }

    .interaction__body {
        row-gap: var(--sp-7)
    }

    .interaction__tabs {
        display: grid
    }

    .tab,
    .interaction__stage {
        order: 0
    }

    .interaction__stage {
        margin-block: 0;
        padding: 0
    }
}

.tab {
    display: grid;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer
}

.tab__wash,
.tab__label {
    grid-area: 1 / 1
}

.tab__wash {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: linear-gradient(90deg, var(--c-tab-wash-from) 0%, var(--c-tab-wash-to) 100%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease)
}

.tab__label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-inline: var(--tab-pad-x);
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text);
    padding-block: var(--sp-5)
}

.tab__icon {
    flex: none;
    display: block;
    width: var(--tab-icon);
    height: var(--tab-icon);
    object-fit: contain
}

.tab:hover .tab__wash,
.tab:focus-visible .tab__wash,
.tab[aria-selected=true] .tab__wash {
    opacity: 1
}

.interaction__panel {
    position: relative;
    container-type: inline-size;
    --_u: .1227cqw;
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-med) var(--ease), translate var(--dur-med) var(--ease)
}

@starting-style {
    .interaction__panel {
        opacity: 0;
        translate: 0 var(--sp-3)
    }
}

.interaction__panel[hidden] {
    display: none
}

.interaction__shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px
}

.interaction__editor,
.interaction__cursor {
    pointer-events: none
}

.interaction__editor {
    display: block;
    position: absolute;
    bottom: -7%;
    left: -12.15cqw;
    width: calc(284 * var(--_u));
    height: auto;
    margin: 0
}

.interaction__cursor {
    display: grid;
    place-items: center;
    position: absolute;
    top: 7.22%;
    left: 100%;
    width: calc(65 * var(--_u));
    height: calc(69 * var(--_u));
    border-radius: calc(8 * var(--_u));
    background: var(--c-surface-dark);
    transform: translate(-50%)
}

.interaction__cursor img {
    display: block;
    width: calc(48 * var(--_u));
    height: calc(48 * var(--_u))
}

.earn {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--c-bg-dark)
}

.earn__floor,
.earn__inner {
    grid-area: 1 / 1
}

.earn__inner {
    z-index: 1;
    padding-block: var(--section-y-lg)
}

.earn__floor {
    align-self: end;
    width: 100%;
    aspect-ratio: 1911 / 375;
    background: linear-gradient(180deg, var(--c-floor-far) 0%, var(--c-floor-near) 100%);
    -webkit-mask: url(../img/earn-floor.png) center / 100% 100% no-repeat;
    mask: url(../img/earn-floor.png) center / 100% 100% no-repeat;
    pointer-events: none
}

.earn__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.earn__eyebrow img {
    display: block;
    flex-shrink: 0
}

.earn__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .earn__header {
        grid-template-columns: minmax(0, 645fr) minmax(0, 489fr);
        column-gap: 14.09%;
        align-items: end
    }
}

.earn__title {
    max-width: 520px;
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text-invert);
    text-wrap: wrap
}

.earn__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-on-dark)
}

.earn__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin: var(--sp-7) 0 0;
    padding: 0;
    list-style: none
}

@media(min-width:640px) {
    .earn__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .earn__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.earn-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.5rem, 1.34rem + .8vw, 2rem);
    border-radius: var(--radius-card);
    background: var(--c-surface-on-dark-hi)
}

.earn-card__icon {
    display: block;
    flex: none;
    width: 64px;
    height: 64px
}

.earn-card__title {
    margin: var(--sp-5) 0 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text-invert)
}

.earn-card__text {
    margin: var(--sp-2) 0 0;
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-text-on-dark-2)
}

.earn-card__note {
    margin: auto 0 0;
    padding-top: var(--sp-5);
    font-size: 1rem;
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.keep {
    padding-block: var(--section-y-lg);
    background: var(--c-bg-alt)
}

.keep__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.keep__eyebrow img {
    display: block;
    flex-shrink: 0
}

.keep__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .keep__grid {
        grid-template-columns: minmax(0, 823fr) minmax(0, 465fr);
        column-gap: var(--sp-6)
    }
}

.keep__copy {
    display: flex;
    flex-direction: column
}

.keep__title {
    max-width: 720px;
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text);
    text-wrap: wrap
}

.keep__lead {
    max-width: 595px;
    margin: var(--sp-5) 0 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.keep__note {
    max-width: 630px;
    margin: auto 0 0;
    padding-top: var(--sp-5);
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.keep__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: 0;
    list-style: none
}

@media(min-width:640px)and (max-width:1023.98px) {
    .keep__list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.keep-card {
    padding: clamp(1.5rem, 1.34rem + .8vw, 2rem);
    border-radius: var(--radius-card);
    background: var(--c-surface-card)
}

.keep-card__count {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-accent)
}

.keep-card__title {
    margin: var(--sp-1) 0 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text)
}

.keep-card__text {
    margin: 10px 0 0;
    font-size: 1rem;
    line-height: var(--lh-copy);
    color: var(--c-text-muted)
}

.creators {
    position: relative;
    padding-block: var(--section-y-lg);
    background: var(--c-bg-dark);
    overflow-x: clip
}

.creators:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 29.06%;
    left: 50%;
    width: 44.27%;
    height: 42.45%;
    margin-left: -26.35%;
    border-radius: 50%;
    background: var(--c-glow-ember);
    filter: blur(var(--glow-blur));
    pointer-events: none
}

.creators__inner {
    position: relative;
    z-index: 1
}

.creators__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.creators__eyebrow img {
    display: block;
    flex-shrink: 0
}

.creators__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .creators__header {
        grid-template-columns: minmax(0, 680fr) minmax(0, 506fr);
        column-gap: 10.15%;
        align-items: end
    }
}

.creators__title {
    max-width: 630px;
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text-on-dark);
    text-wrap: wrap
}

.creators__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-on-dark)
}

.creators__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    gap: var(--sp-6) var(--sp-5);
    margin: clamp(2.5rem, 1.86rem + 3.2vw, 4.5rem) 0 0;
    padding: 0;
    list-style: none
}

@media(min-width:640px) {
    .creators__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .creators__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.video-card__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: 424 / 238;
    overflow: hidden;
    border: 1px solid var(--c-border-video);
    border-radius: var(--radius-media);
    background: var(--c-surface-on-dark)
}

.video-card__media:after {
    padding: 0 !important
}

.video-card__thumb,
.video-card__play {
    grid-area: 1 / 1
}

.video-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-card__play {
    place-self: center;
    width: clamp(3rem, 2.76rem + 1.2vw, 3.75rem);
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    transition: transform var(--dur) var(--ease)
}

a.video-card__media:hover .video-card__play,
a.video-card__media:focus-visible .video-card__play {
    transform: scale(1.08)
}

@media(prefers-reduced-motion:reduce) {
    .video-card__play {
        transition: none
    }

    a.video-card__media:hover .video-card__play,
    a.video-card__media:focus-visible .video-card__play {
        transform: none
    }
}

.video-card__by {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: clamp(1rem, .84rem + .8vw, 1.5rem) 0 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-on-dark)
}

.video-card__avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-on-dark);
    object-fit: cover
}

.pricing {
    --c-plan-annual: var(--brand-orange-50);
    --c-plan-lifetime: #ffddc8;
    --c-bundle: #09090b;
    --c-bundle-dim: #9f9fa9;
    --c-bundle-rule: var(--brand-slate);
    --c-plan-cta-line: #d4d4d8;
    padding-block: var(--section-y-lg);
    background: var(--c-bg-alt)
}

.pricing__inner {
    text-align: center
}

.pricing__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.pricing__eyebrow img {
    display: block;
    flex-shrink: 0
}

.pricing__title {
    max-width: 17em;
    margin: var(--sp-4) auto 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text)
}

/* Site-count switch. Four equal columns; the thumb shares column 1 with the
   first label and is pushed across by whole column widths. Labels are pinned
   to their columns — left to auto-placement they would flow in after the
   thumb and each land one column late. */
.plan-switch {
    flex: none;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    appearance: none;
    scroll-margin-top: calc((var(--header-h) + var(--sp-4)) * -1)
}

.plan-toggle {
    --tiers: 4;
    display: grid;
    grid-template-columns: repeat(var(--tiers), minmax(0, 1fr));
    width: min(calc(var(--tiers) * 146.75px), 100%);
    margin: 30px auto 0;
    padding: 3px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-pill);
    background: var(--c-plan-annual)
}

.plan-toggle__thumb {
    grid-area: 1 / 1;
    border-radius: var(--radius-pill);
    background: var(--c-primary);
    transition: transform var(--dur-med) var(--ease)
}

/* Tiers are addressed by position, 1-6 — the plugin caps them at six. */
.plan-toggle:has(.plan-switch--2:checked) .plan-toggle__thumb {
    transform: translate(100%)
}

.plan-toggle:has(.plan-switch--3:checked) .plan-toggle__thumb {
    transform: translate(200%)
}

.plan-toggle:has(.plan-switch--4:checked) .plan-toggle__thumb {
    transform: translate(300%)
}

.plan-toggle:has(.plan-switch--5:checked) .plan-toggle__thumb {
    transform: translate(400%)
}

.plan-toggle:has(.plan-switch--6:checked) .plan-toggle__thumb {
    transform: translate(500%)
}

.plan-toggle__label {
    display: flex;
    grid-area: 1 / 1;
    z-index: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding-inline: var(--sp-2);
    font-size: clamp(.9375rem, .875rem + .3vw, 1.125rem);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    color: var(--c-text);
    cursor: pointer;
    transition: color var(--dur-med) var(--ease)
}

.plan-toggle__label:nth-of-type(2) {
    grid-column: 2
}

.plan-toggle__label:nth-of-type(3) {
    grid-column: 3
}

.plan-toggle__label:nth-of-type(4) {
    grid-column: 4
}

.plan-toggle__label:nth-of-type(5) {
    grid-column: 5
}

.plan-toggle__label:nth-of-type(6) {
    grid-column: 6
}

.plan-toggle__icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: currentColor
}

/* Phones: four tiers have ~84px each at 375px, so the labels, icons and
   gaps shrink to fit; below 360px the icons go so the text never spills. */
@media(max-width:479px) {
    .plan-toggle__label {
        gap: 4px;
        min-height: 42px;
        padding-inline: 2px;
        font-size: 13px
    }

    .plan-toggle__icon {
        width: 14px;
        height: 14px
    }
}

@media(max-width:359px) {
    .plan-toggle__label {
        font-size: 12px
    }

    .plan-toggle__icon {
        display: none
    }
}

.plan-toggle__label:has(.plan-switch:checked) {
    color: var(--brand-white)
}

.plan-toggle__label:has(.plan-switch:checked) .plan-toggle__icon {
    color: currentColor
}

.plan-toggle__label:has(.plan-switch:focus-visible) {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: var(--radius-pill)
}

/* Show only the checked tier's price and checkout button. */
.pricing:has(.plan-switch--1:checked) [data-tier]:not([data-tier="1"]),
.pricing:has(.plan-switch--2:checked) [data-tier]:not([data-tier="2"]),
.pricing:has(.plan-switch--3:checked) [data-tier]:not([data-tier="3"]),
.pricing:has(.plan-switch--4:checked) [data-tier]:not([data-tier="4"]),
.pricing:has(.plan-switch--5:checked) [data-tier]:not([data-tier="5"]),
.pricing:has(.plan-switch--6:checked) [data-tier]:not([data-tier="6"]) {
    display: none
}

/* Grid, sized off the 1321px design: 436 + 435 for the joined licence panel,
   a 2px seam, 448 for the bundle. fr in the same ratio so it scales down
   without a breakpoint. The bundle is the taller card and sits 102px above
   the panel's top edge. --solo is the grid with no bundle published. */
.pricing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin: 45px auto 0;
    text-align: left
}

@media(min-width:1024px) {
    .pricing__grid:not(.pricing__grid--solo) {
        grid-template-columns: minmax(0, 871fr) minmax(0, 448fr);
        align-items: start;
        gap: 2px
    }
}

.pricing__plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none
}

/* Two cards is the design. Any other count shares the width equally. */
@media(min-width:640px) {
    .pricing__plans {
        grid-template-columns: minmax(0, 436fr) minmax(0, 435fr);
        gap: 0
    }

    .pricing__plans--flex {
        grid-template-columns: repeat(var(--plans), minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .pricing__grid:not(.pricing__grid--solo) .pricing__plans {
        margin-top: 102px
    }
}

.plan {
    display: grid;
    align-content: start;
    padding: 33px 40px 39px;
    border-radius: var(--radius-card);
    background: var(--c-plan-annual)
}

.plan--highlight {
    background: var(--c-plan-lifetime)
}

/* Joined: the cards share one panel, so only its outer corners are rounded.
   With a bundle beside it on desktop the panel's right side is square too. */
@media(min-width:640px) {
    .plan {
        border-radius: 0
    }

    .plan:first-child {
        border-start-start-radius: var(--radius-card);
        border-end-start-radius: var(--radius-card)
    }

    .plan:last-child {
        border-start-end-radius: var(--radius-card);
        border-end-end-radius: var(--radius-card)
    }

    /* The design gives the first of two cards a 27px right inset, so its
       button runs wider than the second card's. */
    .pricing__plans:not(.pricing__plans--flex) .plan:first-child {
        padding-inline-end: 27px
    }
}

@media(min-width:1024px) {
    .pricing__grid:not(.pricing__grid--solo) .plan:last-child {
        border-start-end-radius: 0;
        border-end-end-radius: 0
    }
}

/* min-height is the badge's height, so a card without a badge keeps its
   name on the same line as the one that has it. */
.plan__name,
.bundle__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 26px;
    font-family: var(--ff-body);
    font-size: 20px;
    font-weight: var(--fw-medium);
    line-height: 26px;
    color: var(--c-text)
}

.plan__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    background: var(--c-primary);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: .02em;
    color: var(--brand-white)
}

.plan__badge:before {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.2 1.5h7.6L15 5.6 8 14.5 1 5.6zm-.9 4.2L8 11.8l4.7-6.1zM5 2.9 3.4 4.8h2.4zm6 0-.8 1.9h2.4zm-3 .1-.9 1.8h1.8z"/></svg>') center / contain no-repeat
}

.plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin-top: 13px;
    animation: aat-price-in var(--dur-med) var(--ease) both
}

@keyframes aat-price-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }
}

.plan__now,
.bundle__now {
    font-family: var(--ff-body);
    font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--c-text)
}

.plan--highlight .plan__now {
    color: var(--c-accent)
}

.plan__was,
.bundle__was {
    font-size: 28px;
    line-height: 1;
    color: var(--c-bundle-dim)
}

.plan__terms,
.bundle__pitch {
    margin-top: 4px;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text-muted)
}

.plan__cta,
.bundle__cta {
    width: 100%;
    min-height: 52px;
    margin-top: 23px;
    font-size: var(--fs-base)
}

.plan__cta:not(.btn--primary) {
    border-color: var(--c-plan-cta-line);
    background: transparent;
    color: var(--c-text)
}

.plan__cta:not(.btn--primary):hover {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: var(--brand-white)
}

.plan__features {
    --tick-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.2 12.3 2.4 8.5l1.2-1.2 2.6 2.6 6.2-6.2 1.2 1.2z"/></svg>');
    display: grid;
    gap: 10px;
    margin-top: 25px;
    padding: 0;
    list-style: none
}

.plan__features li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text-muted)
}

.plan__features li:before {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--c-tick);
    mask: var(--tick-mask) center / 18px auto no-repeat
}

/* Bundle card. */
.bundle {
    display: grid;
    align-content: start;
    padding: 33px 40px 28px;
    border-radius: var(--radius-card);
    background: var(--c-bundle);
    color: var(--brand-white)
}

.bundle__name,
.bundle__now {
    color: var(--brand-white)
}

.bundle__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin-top: 13px
}

.bundle__suffix {
    margin-left: -4px;
    font-size: 16px;
    line-height: 1
}

.bundle__pitch {
    color: var(--brand-white)
}

.bundle__cta {
    background: var(--brand-white);
    color: var(--c-text)
}

.bundle__cta:hover {
    background: var(--c-primary);
    color: var(--brand-white)
}

.bundle__label {
    margin-top: 25px;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 24px;
    color: var(--brand-white)
}

.bundle__list {
    display: grid;
    gap: 17px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none
}

.bundle__item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center
}

.bundle__logo {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: contain
}

.bundle__logo--tile {
    display: grid;
    place-items: center;
    background: var(--tile, var(--c-primary));
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--brand-white)
}

.bundle__product {
    display: grid;
    min-width: 0
}

.bundle__product-name {
    font-size: 16px;
    line-height: 22px
}

.bundle__product-desc {
    font-size: 14px;
    line-height: 20px
}

.bundle__sites {
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap
}

.bundle__total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--c-bundle-rule);
    font-size: 16px;
    line-height: 24px
}

.bundle__total-price {
    display: flex;
    gap: var(--sp-3)
}

.bundle__total-price s {
    color: var(--c-bundle-dim)
}

.bundle__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 24px
}

.bundle__notes li {
    display: flex;
    align-items: center;
    gap: 8px
}

.bundle__notes li:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-tick)
}

/* Phones: the 40px desktop inset leaves the bundle rows too narrow, so the
   product names wrap. Everything above 640px keeps the design's spacing. */
@media(max-width:639px) {
    .plan,
    .bundle {
        padding: 28px 24px 30px
    }

    .bundle__item {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 12px
    }

    .bundle__logo {
        width: 32px;
        height: 32px
    }

    .bundle__product-desc {
        font-size: 13px;
        line-height: 18px
    }

    .bundle__sites {
        font-size: 14px
    }

    .pricing .pricing__guarantee {
        gap: 4px 10px;
        padding: var(--sp-3) var(--sp-4);
        border-radius: var(--radius-lg)
    }
}

.pricing__guarantee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 73px;
    margin-top: var(--sp-7);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-pill);
    background: var(--c-plan-annual);
    font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
    line-height: 1.4
}

@media(min-width:1024px) {
    .pricing__guarantee {
        margin-top: 93px
    }
}

.pricing__guarantee img {
    display: block;
    flex-shrink: 0
}

.pricing__guarantee strong {
    font-weight: var(--fw-medium);
    color: var(--c-text)
}

.pricing__guarantee span {
    margin-left: -6px;
    color: var(--c-text-muted)
}

.ready {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--c-bg-light)
}

.ready__floor,
.ready__inner {
    grid-area: 1 / 1
}

.ready__inner {
    padding-block: var(--section-y-lg)
}

.ready__floor {
    align-self: end;
    width: 100%;
    aspect-ratio: 1920 / 287;
    background: url(../img/ready-floor.png) center / 100% 100% no-repeat;
    pointer-events: none
}

.ready__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.ready__eyebrow img {
    display: block;
    flex-shrink: 0
}

.ready__header {
    display: grid;
    row-gap: var(--sp-4);
    margin-top: var(--sp-4)
}

@media(min-width:1024px) {
    .ready__header {
        grid-template-columns: minmax(0, 720fr) minmax(0, 466fr);
        column-gap: 10.15%;
        align-items: center
    }
}

.ready__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text);
    text-wrap: wrap
}

.ready__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.ready__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6) var(--sp-5);
    margin: clamp(2rem, .72rem + 6.4vw, 6rem) 0 0;
    padding: 0;
    list-style: none
}

@media(min-width:640px) {
    .ready__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .ready__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.ready-item__tile {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--c-surface-tile)
}

.ready-item__tile img {
    display: block
}

.ready-item__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: clamp(1rem, .84rem + .8vw, 1.5rem) 0 0;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text)
}

.ready-item__title:before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--c-accent)
}

.ready-item__text {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.faq {
    interpolate-size: allow-keywords;
    padding-block: var(--section-y-lg);
    background: var(--c-bg-alt)
}

.faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7)
}

@media(min-width:1024px) {
    .faq__grid {
        grid-template-columns: minmax(0, 471fr) minmax(0, 760fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 6.742%
    }

    .faq__intro {
        grid-column: 1;
        grid-row: 1
    }

    .faq__contact {
        grid-column: 1;
        grid-row: 2;
        align-self: end
    }

    .faq__list {
        grid-column: 2;
        grid-row: 1 / span 2
    }
}

.faq__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    color: var(--c-accent)
}

.faq__eyebrow img {
    display: block;
    flex-shrink: 0
}

.faq__title {
    margin: var(--sp-4) 0 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text);
    text-wrap: wrap
}

.faq__lead {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.faq__contact {
    display: grid;
    justify-items: start;
    gap: var(--sp-5);
    padding: var(--sp-5);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-card);
    background: var(--c-surface-warm)
}

@media(min-width:640px) {
    .faq__contact {
        max-width: 336px
    }
}

.faq__contact-q {
    max-width: 262px;
    font-family: var(--ff-display);
    text-wrap: wrap;
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text)
}

.faq__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-link);
    color: var(--c-text);
    transition: color var(--dur) var(--ease)
}

.faq__contact-text {
    text-decoration: underline
}

.faq__contact-link:hover,
.faq__contact-link:focus-visible {
    color: var(--c-primary)
}

.faq__contact-link:after {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    background-color: currentcolor;
    mask: url(../icons/faq-chevron.svg) center / auto no-repeat
}

.faq__list {
    display: grid;
    align-content: start;
    gap: 8px
}

.faq-item {
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-card);
    background: var(--c-surface-warm)
}

.faq-item__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-5);
    list-style: none;
    cursor: pointer
}

.faq-item__q::-webkit-details-marker {
    display: none
}

.faq-item__label {
    font-family: var(--ff-display);
    font-size: var(--fs-faq-label);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--c-text)
}

.faq-item__toggle {
    display: grid;
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--c-text-muted);
    transition: color var(--dur) var(--ease)
}

.faq-item__toggle:before,
.faq-item__toggle:after {
    content: "";
    grid-area: 1 / 1;
    place-self: center;
    border-radius: var(--radius-pill);
    background: currentcolor;
    transition: width var(--dur) var(--ease), transform var(--dur) var(--ease)
}

.faq-item__toggle:before {
    width: 16.34px;
    height: 2.5px
}

.faq-item__toggle:after {
    width: 2.5px;
    height: 16.34px
}

.faq-item[open] .faq-item__toggle {
    color: var(--c-text)
}

.faq-item[open] .faq-item__toggle:before {
    width: 18.67px
}

.faq-item[open] .faq-item__toggle:after {
    transform: scaleY(0)
}

.faq-item__q:hover .faq-item__toggle {
    color: var(--c-text)
}

.faq-item__a {
    margin-top: var(--sp-3);
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

@supports selector(::details-content) {
    .faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete
    }

    .faq-item[open]::details-content {
        block-size: auto
    }
}

.purchase {
    padding-block: var(--sp-8);
    background: var(--c-bg-sand);
    text-align: center
}

.purchase__title {
    max-width: 18.625em;
    margin-inline: auto;
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h2);
    color: var(--c-text)
}

.purchase__lead {
    max-width: 759px;
    margin: var(--sp-2) auto 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    color: var(--c-text-muted)
}

.purchase__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--cta-gap)
}

.purchase__assurances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--cta-gap);
    padding: 0;
    list-style: none
}

.assurance {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--fs-sm);
    line-height: var(--lh-copy);
    color: var(--c-text-muted);
    text-align: left
}

.assurance img {
    flex: none
}

.footer {
    padding-top: var(--section-y-lg);
    background: var(--c-bg-footer);
    color: var(--c-text-footer)
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7)
}

@media(min-width:1024px) {
    .footer__top {
        grid-template-columns: minmax(0, 480fr) minmax(0, 625fr);
        column-gap: 16.16%;
        align-items: start
    }
}

@media(min-width:1024px)and (max-width:1200px) {
    .footer__top {
        column-gap: 12%
    }
}

.footer-sub {
    padding: var(--sp-6);
    border-radius: var(--radius-card);
    background: var(--c-surface-footer)
}

.footer-sub__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4)
}

.footer-sub__title {
    max-width: 9.5em;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--brand-white)
}

.footer-sub__title img {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem
}

.footer-sub__logo {
    flex: none;
    width: auto;
    height: 40px
}

.footer-sub__form {
    display: grid;
    justify-items: start;
    gap: var(--cta-gap);
    margin-top: var(--cta-gap)
}

.footer-sub__input {
    width: 100%;
    padding: 0 0 var(--sp-2);
    border: 0;
    border-bottom: 1px solid var(--c-border-footer);
    border-radius: 0;
    background: none;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--brand-white);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)
}

.footer-sub__input::placeholder {
    color: var(--brand-white);
    opacity: 1
}

.footer-sub__input:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 4px;
    border-bottom-color: var(--c-primary);
    box-shadow: 0 1px 0 0 var(--c-primary)
}

.footer-sub__btn {
    min-height: 45px;
    padding: var(--sp-2) var(--sp-5);
    border-radius: 32px;
    color: var(--brand-zinc-50)
}

.footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-7) var(--sp-6)
}

@media(min-width:540px)and (max-width:1023.98px), (min-width:1040px) {
    .footer__nav {
        justify-content: space-between
    }
}

.footer-col__title {
    font-family: var(--ff-body);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--brand-white)
}

.footer-col__list {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: 0;
    list-style: none
}

.footer-col__link {
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-footer);
    transition: color var(--dur) var(--ease)
}

.footer-col__link:hover,
.footer-col__link:focus-visible {
    color: var(--brand-white)
}

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border-footer)
}

@media(min-width:1024px) {
    .footer__bar {
        margin-top: 7.3rem
    }
}

@media(max-width:519.98px) {
    .footer__bar {
        justify-content: center;
        text-align: center
    }
}

.footer__copyright {
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--c-text-footer-dim)
}

.footer__social {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0;
    list-style: none
}

.footer__social-link {
    position: relative;
    display: block;
    border-radius: var(--radius-pill)
}

.footer__social-link:before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: var(--brand-white);
    opacity: 0;
    transition: opacity var(--dur) var(--ease)
}

.footer__social-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--brand-white);
    -webkit-mask: var(--social-icon) center / auto no-repeat;
    mask: var(--social-icon) center / auto no-repeat;
    -webkit-mask-source-type: luminance;
    mask-mode: luminance;
    transition: background-color var(--dur) var(--ease)
}

.footer__social-link:hover .footer__social-icon,
.footer__social-link:focus-visible .footer__social-icon {
    background-color: var(--c-primary)
}

.footer__social-link:hover:before,
.footer__social-link:focus-visible:before {
    opacity: 1
}

.footer__brand {
    container-type: inline-size;
    width: 100%;
    max-width: var(--container-max);
    margin-top: var(--sp-7);
    margin-inline: auto;
    overflow: clip
}

.footer__wordmark {
    display: block;
    font-family: var(--ff-display);
    font-size: var(--wordmark-size);
    font-weight: var(--fw-regular);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(180deg, var(--brand-white) 0%, var(--c-bg-footer) 81.25%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.no-js .nav__disclosure {
    display: none
}

.no-js .nav__sub {
    height: auto
}

.no-js .interaction__tabs {
    display: none
}

.no-js .interaction__body {
    grid-template-columns: minmax(0, 1fr)
}