/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@font-face {
    font-family: "JakartaLocal";
    src: url("/fonts/4c9affa5bc8f420e-s.p.woff2") format("woff2");
    /* font-weight: 100 900;
    font-style: normal;
    font-display: swap; */
    font-display: swap;
    font-weight: 400 800;
    font-style: normal;
}

@font-face {
    font-family: "ManropeLocal";
    src: url("/fonts/558ca1a6aa3cb55e-s.p.woff2") format("woff2");
    /* font-weight: 100 900;
    font-style: normal;
    font-display: swap; */
    font-display: swap;
    font-weight: 400 500;
    font-style: normal;
}

:root {
    --font-jakarta: "JakartaLocal";
    --font-manrope: "ManropeLocal";
}

@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
        ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
        *,
        ::backdrop,
        :after,
        :before {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-ease: initial;
        }
    }
}

@layer theme {
    :host,
    :root {
        --font-sans:
            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "Noto Sans", Arial, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
            "Noto Color Emoji";
        --font-mono:
            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
        --spacing: 0.25rem;
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --default-transition-duration: 0.15s;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
    }
}

@layer base {
    *,
    ::backdrop,
    :after,
    :before {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }

    :host,
    html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(
            --default-font-family,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            "Helvetica Neue",
            "Noto Sans",
            Arial,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji"
        );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }

    abbr: where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }

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

    b,
    strong {
        font-weight: bolder;
    }

    code,
    kbd,
    pre,
    samp {
        font-family: var(
            --default-mono-font-family,
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace
        );
        font-feature-settings: var(
            --default-mono-font-feature-settings,
            normal
        );
        font-variation-settings: var(
            --default-mono-font-variation-settings,
            normal
        );
        font-size: 1em;
    }

    small {
        font-size: 80%;
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }

    :-moz-focusring:where(:not(iframe)) {
        outline: auto;
    }

    progress {
        vertical-align: baseline;
    }

    summary {
        display: list-item;
    }

    menu,
    ol,
    ul {
        list-style: none;
    }

    audio,
    canvas,
    embed,
    iframe,
    img,
    object,
    svg,
    video {
        vertical-align: middle;
        display: block;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }

    :where(select: is([multiple],[size])) optgroup {
        font-weight: bolder;
    }

    :where(select: is([multiple],[size])) optgroup option {
        padding-inline-start: 20px;
    }

    ::file-selector-button {
        margin-inline-end: 4px;
    }

    ::placeholder {
        opacity: 1;
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or
        (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentColor;
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }

    textarea {
        resize: vertical;
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }

    ::-webkit-datetime-edit {
        display: inline-flex;
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }

    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-year-field {
        padding-block: 0;
    }

    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-month-field {
        padding-block: 0;
    }

    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0;
    }

    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-second-field {
        padding-block: 0;
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1;
    }

    :-moz-ui-invalid {
        box-shadow: none;
    }

    button,input: where([type=button],[type=reset],[type=submit]) {
        appearance: button;
    }

    ::file-selector-button {
        appearance: button;
    }

    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto;
    }

    [hidden]: where(:not([hidden=until-found])) {
        display: none !important;
    }
}

@layer components;
@layer utilities {
    .collapse {
        visibility: collapse;
    }

    .invisible {
        visibility: hidden;
    }

    .visible {
        visibility: visible;
    }

    .absolute {
        position: absolute;
    }

    .fixed {
        position: fixed;
    }

    .relative {
        position: relative;
    }

    .static {
        position: static;
    }

    .sticky {
        position: sticky;
    }

    .top-3 {
        top: calc(var(--spacing) * 3);
    }

    .top-5 {
        top: calc(var(--spacing) * 5);
    }

    .top-10 {
        top: calc(var(--spacing) * 10);
    }

    .top-12 {
        top: calc(var(--spacing) * 12);
    }

    .top-20 {
        top: calc(var(--spacing) * 20);
    }

    .top-25 {
        top: calc(var(--spacing) * 25);
    }

    .top-200 {
        top: calc(var(--spacing) * 200);
    }

    .isolate {
        isolation: isolate;
    }

    .container {
        width: 100%;
    }

    @media (min-width: 40rem) {
        .container {
            max-width: 40rem;
        }
    }

    @media (min-width: 48rem) {
        .container {
            max-width: 48rem;
        }
    }

    @media (min-width: 64rem) {
        .container {
            max-width: 64rem;
        }
    }

    @media (min-width: 80rem) {
        .container {
            max-width: 80rem;
        }
    }

    @media (min-width: 96rem) {
        .container {
            max-width: 96rem;
        }
    }

    .block {
        display: block;
    }

    .contents {
        display: contents;
    }

    .flex {
        display: flex;
    }

    .grid {
        display: grid;
    }

    .hidden {
        display: none;
    }

    .inline {
        display: inline;
    }

    .inline-block {
        display: inline-block;
    }

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

    .table {
        display: table;
    }

    .size-full {
        width: 100%;
        height: 100%;
    }

    .h-4 {
        height: calc(var(--spacing) * 4);
    }

    .w-1\/2 {
        width: 50%;
    }

    .shrink {
        flex-shrink: 1;
    }

    .grow {
        flex-grow: 1;
    }

    .grow\! {
        flex-grow: 1 !important;
    }

    .border-collapse {
        border-collapse: collapse;
    }

    .transform {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
            var(--tw-skew-x,) var(--tw-skew-y,);
    }

    .resize {
        resize: both;
    }

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

    .rounded {
        border-radius: 0.25rem;
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px;
    }

    .p-1\.5 {
        padding: calc(var(--spacing) * 1.5);
    }

    .p-7 {
        padding: calc(var(--spacing) * 7);
    }

    .capitalize {
        text-transform: capitalize;
    }

    .lowercase {
        text-transform: lowercase;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .italic {
        font-style: italic;
    }

    .line-through {
        text-decoration-line: line-through;
    }

    .underline {
        text-decoration-line: underline;
    }

    .shadow {
        --tw-shadow:
            0 1px 3px 0 var(--tw-shadow-color, #0000001a),
            0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    }

    .ring,
    .shadow {
        box-shadow:
            var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
            calc(1px + var(--tw-ring-offset-width))
            var(--tw-ring-color, currentcolor);
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
    }

    .blur {
        --tw-blur: blur(8px);
    }

    .blur,
    .invert {
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
            var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
            var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }

    .invert {
        --tw-invert: invert(100%);
    }

    .filter {
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
            var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
            var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }

    .transition {
        transition-property:
            color,
            background-color,
            border-color,
            outline-color,
            text-decoration-color,
            fill,
            stroke,
            --tw-gradient-from,
            --tw-gradient-via,
            --tw-gradient-to,
            opacity,
            box-shadow,
            transform,
            translate,
            scale,
            rotate,
            filter,
            -webkit-backdrop-filter,
            backdrop-filter,
            display,
            content-visibility,
            overlay,
            pointer-events;
        transition-timing-function: var(
            --tw-ease,
            var(--default-transition-timing-function)
        );
        transition-duration: var(
            --tw-duration,
            var(--default-transition-duration)
        );
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out);
    }

    @media (min-width: 48rem) {
        .md\:flex {
            display: flex;
        }
    }
}

:root {
    --sm-navy: #1d3557;
    --sm-navy-2: #0f2540;
    --sm-navy-3: #28466b;
    --sm-cobalt: #1f7ee0;
    --sm-cobalt-deep: #1668c2;
    --sm-cobalt-soft: #e4f0fb;
    --sm-gold: #c89854;
    --sm-gold-deep: #a87a3d;
    --sm-gold-soft: #f6ebd6;
    --sm-blue: var(--sm-cobalt);
    --sm-blue-deep: var(--sm-cobalt-deep);
    --sm-cyan: #4fb3e8;
    --sm-pink: var(--sm-cobalt);
    --sm-magenta: var(--sm-navy);
    --sm-hot-pink: var(--sm-cobalt-deep);
    --sm-gradient: linear-gradient(135deg, #1d3557, #1f7ee0 55%, #c89854);
    --sm-gradient-soft: linear-gradient(
        135deg,
        #1d35571a,
        #1f7ee01a 55%,
        #c8985424
    );
    --sm-gradient-text: linear-gradient(92deg, #1d3557, #1f7ee0 55%, #c89854);
    --sm-gradient-button: linear-gradient(92deg, #1f7ee0, #1668c2);
    --sm-gradient-button-hover: linear-gradient(92deg, #1668c2, #105097);
    --sm-bg: #fff;
    --sm-bg-lavender: #f4f6fa;
    --sm-bg-alt: #f7f9fc;
    --sm-bg-tint: #eef2f8;
    --sm-card: #fff;
    --sm-line: #e3e7ef;
    --sm-line-soft: #eef0f6;
    --sm-line-strong: #cfd5e1;
    --sm-faq-bg: #eaf1f8;
    --sm-faq-active: var(--sm-navy);
    --sm-ink: var(--sm-navy);
    --sm-ink-2: var(--sm-navy-3);
    --sm-ink-3: #324f74;
    --sm-ink-line: #ffffff1a;
    --sm-fg-1: #0e1e33;
    --sm-fg-2: #44546e;
    --sm-fg-3: #6c7a93;
    --sm-fg-4: #9aa5ba;
    --sm-fg-on-grad: #fff;
    --sm-fg-on-dark: #fff;
    --sm-fg-on-dark-2: #ffffffbd;
    --sm-success: #16a36a;
    --sm-success-text: #1ca85c;
    --sm-warning: #e6a832;
    --sm-danger: #e0264c;
    --sm-info: var(--sm-cobalt);
    --sm-star: #f5b240;
    --sm-glow-blue: 0 14px 40px -10px #1f7ee073;
    --sm-glow-pink: 0 14px 40px -10px #1f7ee073;
    --sm-glow-grad: 0 18px 50px -14px #1d355766, 0 6px 16px -8px #1f7ee059;
    --sm-shadow-sm: 0 1px 2px #0f25400f;
    --sm-shadow-md: 0 6px 18px -6px #0f25401a, 0 2px 6px -2px #0f25400f;
    --sm-shadow-lg: 0 24px 48px -16px #0f254033, 0 10px 20px -10px #0f25401a;
    --sm-shadow-card: 0 8px 24px -10px #0f25401a, 0 1px 2px #0f25400d;
    --sm-r-xs: 6px;
    --sm-r-sm: 10px;
    --sm-r-md: 14px;
    --sm-r-lg: 20px;
    --sm-r-xl: 28px;
    --sm-r-pill: 999px;
    --sm-s-1: 4px;
    --sm-s-2: 8px;
    --sm-s-3: 12px;
    --sm-s-4: 16px;
    --sm-s-5: 20px;
    --sm-s-6: 24px;
    --sm-s-8: 32px;
    --sm-s-10: 40px;
    --sm-s-12: 48px;
    --sm-s-16: 64px;
    --sm-s-20: 80px;
    --sm-s-24: 96px;
    --sm-font-display:
        var(--font-jakarta), "Plus Jakarta Sans", system-ui, -apple-system,
        "Segoe UI", sans-serif;
    --sm-font-body:
        var(--font-manrope), "Manrope", system-ui, -apple-system, "Segoe UI",
        sans-serif;
    --sm-font-mono:
        var(--font-mono), "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
        Consolas, monospace;
    --sm-t-hero: 72px;
    --sm-t-h1: 56px;
    --sm-t-h2: 40px;
    --sm-t-h3: 28px;
    --sm-t-h4: 22px;
    --sm-t-lead: 20px;
    --sm-t-body: 16px;
    --sm-t-sm: 14px;
    --sm-t-xs: 12px;
    --sm-container: 1200px;
    --sm-container-narrow: 960px;
    --sm-header-h: 72px;
}

:root[data-palette="navy-gold"] {
    --sm-pink: var(--sm-gold-deep);
    --sm-blue: var(--sm-navy);
    --sm-info: var(--sm-gold-deep);
    --sm-gradient-button: linear-gradient(92deg, #c89854, #a87a3d);
    --sm-gradient-button-hover: linear-gradient(92deg, #a87a3d, #8a6228);
    --sm-glow-blue: 0 14px 40px -10px #a87a3d73;
    --sm-glow-pink: 0 14px 40px -10px #a87a3d73;
}

* {
    box-sizing: border-box;
}

#app,
body,
html {
    margin: 0;
    padding: 0;
}

body,
html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--sm-font-body);
    color: var(--sm-fg-1);
    background: var(--sm-bg);
    -webkit-font-smoothing: antialiased;
}

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

button {
    cursor: pointer;
    font-family: inherit;
}

html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    font-family: var(--sm-font-display);
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    transition:
        transform 0.12s,
        box-shadow 0.22s,
        background 0.22s,
        color 0.16s,
        border-color 0.16s;
    display: inline-flex;
}

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

.btn-primary {
    background: var(--sm-pink);
    color: #fff;
    box-shadow: 0 6px 18px -6px #1f7ee073;
}

.btn-primary:hover {
    background: var(--sm-blue-deep);
    box-shadow: 0 10px 26px -8px #1f7ee08c;
}

.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(100deg, #0000 20%, #ffffff4d 50%, #0000 80%);
    position: absolute;
    inset: 0;
    transform: translate(-120%);
}

.btn-primary:focus-visible:after,
.btn-primary:hover:after {
    animation: sm-sweep 0.72s;
}

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

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

@keyframes sm-sweep {
    to {
        transform: translate(120%);
    }
}

.btn-save {
    letter-spacing: 0.01em;
    color: #fff;
    background: #ffffff38;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:after {
        display: none;
    }

    .btn-primary:hover {
        transform: none;
    }
}

:root[data-palette="navy-gold"] .btn-primary:hover {
    background: var(--sm-gold-deep);
}

.btn-pink-outline {
    color: var(--sm-pink);
    border: 1.5px solid var(--sm-pink);
    box-shadow: none;
    background: #fff;
}

.btn-pink-outline:hover {
    background: #1f7ee00f;
}

.btn-navy {
    background: var(--sm-navy);
    color: #fff;
    box-shadow: 0 6px 18px -6px #0f254073;
}

.btn-navy:hover {
    background: var(--sm-navy-2);
    box-shadow: 0 10px 26px -8px #0f25408c;
}

.btn-gold {
    background: var(--sm-gold);
    color: var(--sm-navy);
    box-shadow: 0 6px 18px -6px #c8985473;
}

.btn-gold:hover {
    background: var(--sm-gold-deep);
    color: #fff;
}

.btn-grad {
    background: var(--sm-gradient-button);
    color: #fff;
    box-shadow: var(--sm-glow-blue);
}

.btn-grad:hover {
    background: var(--sm-gradient-button-hover);
    box-shadow: var(--sm-glow-grad);
}

.btn-pill {
    border-radius: 999px;
}

.btn-outline {
    color: var(--sm-fg-1);
    border: 1.5px solid var(--sm-line-strong);
    background: #fff;
}

.btn-outline:hover {
    border-color: var(--sm-navy);
    background: var(--sm-bg);
}

.btn-ghost {
    background: var(--sm-bg-tint);
    color: var(--sm-fg-1);
}

.btn-ghost:hover {
    background: #e1e7f0;
}

.btn-dark {
    background: var(--sm-navy);
    color: #fff;
}

.btn-dark:hover {
    background: var(--sm-navy-2);
}

.btn-md {
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
}

.btn-sm {
    border-radius: 10px;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .btn-sm {
        height: 44px;
    }
}

.btn-lg {
    height: 56px;
    padding: 0 28px;
    font-size: 16px;
}

.eyebrow {
    font-family: var(--sm-font-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sm-fg-3);
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
}

.eyebrow-on-dark {
    color: #ffffffbd;
}

.eyebrow-grad,
.grad-text {
    background: var(--sm-gradient-text);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
}

.eyebrow-gold {
    color: var(--sm-gold-deep);
}

.sm-h1 {
    font-size: var(--sm-t-h1);
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.sm-h1,
.sm-h2 {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    text-wrap: balance;
    font-weight: 800;
}

.sm-h2 {
    font-size: var(--sm-t-h2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.sm-h3 {
    font-family: var(--sm-font-display);
    font-size: var(--sm-t-h3);
    letter-spacing: -0.015em;
    color: var(--sm-fg-1);
    font-weight: 700;
    line-height: 1.2;
}

.sm-card {
    border: 1px solid var(--sm-line);
    box-shadow: var(--sm-shadow-md);
    background: #fff;
    border-radius: 20px;
    transition:
        transform 0.18s,
        box-shadow 0.22s,
        border-color 0.22s;
}

.sm-card.hoverable:hover {
    box-shadow: var(--sm-shadow-lg);
    border-color: var(--sm-line-strong);
    transform: translateY(-2px);
}

.sm-input {
    border: 1px solid var(--sm-line-strong);
    width: 100%;
    height: 48px;
    font-family: var(--sm-font-body);
    background: #fff;
    border-radius: 12px;
    outline: none;
    padding: 0 14px;
    font-size: 15px;
    transition:
        border-color 0.16s,
        box-shadow 0.16s;
}

.sm-input:focus {
    border-color: var(--sm-cobalt);
    box-shadow: 0 0 0 4px #1f7ee026;
}

.sm-label {
    color: var(--sm-fg-1);
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    display: block;
}

.sm-help {
    color: var(--sm-fg-3);
    margin-top: 6px;
    font-size: 12px;
    display: block;
}

.req {
    color: var(--sm-cobalt);
}

.divider {
    background: var(--sm-line);
    border: 0;
    height: 1px;
    margin: 0;
}

.muted {
    color: var(--sm-fg-3);
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.icon-grad svg {
    stroke: url(#sm-icon-grad);
}

@keyframes sm-breathe {
    0%,
    to {
        opacity: 0.65;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.06);
    }
}

.sm-bloom {
    animation: sm-breathe 6s ease-in-out infinite;
}

@keyframes sm-fade-up {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: sm-fade-up 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes sm-pulse {
    0%,
    to {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.92;
        transform: scale(1.05);
    }
}

@keyframes live-pulse {
    0%,
    to {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes sm-floaty {
    0%,
    to {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes sm-spinslow {
    to {
        transform: rotate(1turn);
    }
}

.live-indicator {
    animation: live-pulse 2s ease-in-out infinite;
}

.btn:focus-visible,
.sm-input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--sm-cobalt);
    outline-offset: 3px;
}

::selection {
    color: var(--sm-fg-1);
    background: #1f7ee038;
}

.hero-base {
    background: var(--sm-bg-lavender);
    padding-top: 64px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.hero-dark {
    color: #fff;
    background: linear-gradient(#0f2540, #1d3557);
}

.hero-dark .hero-h1,
.hero-dark .hero-sub {
    color: #fff;
}

.hero-dark .hero-sub {
    color: #ffffffc7;
}

.hero-blob-a,
.hero-blob-b {
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    position: absolute;
}

.hero-blob-a {
    background: #1f7ee038;
    width: 440px;
    height: 440px;
    top: -120px;
    right: -120px;
}

.hero-blob-b {
    background: #c8985429;
    width: 360px;
    height: 360px;
    bottom: -120px;
    left: -80px;
}

.hero-dark .hero-blob-a {
    background: #1f7ee059;
}

.hero-dark .hero-blob-b {
    background: #c8985438;
}

.platform-marquee {
    gap: 12px;
    width: max-content;
    padding: 0 24px;
    animation: sm-scroll 38s linear infinite;
    display: flex;
}

@keyframes sm-scroll {
    0% {
        transform: translate(0);
    }

    to {
        transform: translate(-50%);
    }
}

.platform-marquee-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
}

.star-row {
    color: var(--sm-star);
    letter-spacing: 1px;
}

.ticker {
    background: linear-gradient(
        90deg,
        var(--sm-bg-lavender) 0,
        var(--sm-cobalt-soft) 100%
    );
    border-bottom: 1px solid var(--sm-line);
    position: relative;
    overflow: hidden;
}

.ticker:after,
.ticker:before {
    content: "";
    z-index: 2;
    pointer-events: none;
    width: 64px;
    position: absolute;
    top: 0;
    bottom: 0;
}

.ticker:before {
    background: linear-gradient(90deg, var(--sm-bg-lavender), #f4f6fa00);
    left: 0;
}

.ticker:after {
    background: linear-gradient(270deg, var(--sm-cobalt-soft), #e4f0fb00);
    right: 0;
}

.ticker-track {
    width: max-content;
    animation: ticker-scroll 48s linear infinite;
    display: inline-flex;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item,
.ticker-row {
    align-items: center;
    display: inline-flex;
}

.ticker-item {
    color: var(--sm-fg-2);
    white-space: nowrap;
    gap: 8px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
}

.ticker-item:after {
    content: "";
    background: var(--sm-line-strong);
    border-radius: 999px;
    width: 4px;
    height: 4px;
    margin-left: 22px;
}

@keyframes ticker-scroll {
    0% {
        transform: translate(0);
    }

    to {
        transform: translate(-50%);
    }
}

@media (max-width: 980px) {
    .ticker-track {
        animation-duration: 36s;
    }

    .ticker-item {
        padding: 9px 16px;
    }

    .ticker-item:after {
        margin-left: 16px;
    }
}

@media (max-width: 480px) {
    .ticker-track {
        animation-duration: 30s;
    }

    .ticker-item {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        animation: none;
    }

    .ticker-row:nth-child(2) {
        display: none;
    }
}

.st-grid {
    grid-template-columns: 1.7fr 0.8fr 1.1fr 140px;
    align-items: center;
    display: grid;
}

.st-row {
    transition: background 0.16s;
}

.st-row:hover {
    background: #1f7ee00a;
}

.st-row .st-cta-primary {
    display: none;
}

.st-row:hover .st-cta-primary {
    display: inline-flex;
}

.st-row:hover .st-cta-outline {
    display: none;
}

@media (max-width: 980px) {
    .st-grid {
        grid-template-columns: 1.6fr 0.7fr 1fr 118px;
    }
}

@media (max-width: 640px) {
    .st-head {
        display: none !important;
    }

    .st-grid {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .st-col-cta,
    .st-col-delivery {
        display: none !important;
    }

    .st-row {
        padding: 14px 16px !important;
    }

    .st-col-price {
        font-size: 16px !important;
    }
}

#faq,
#services,
#why {
    scroll-margin-top: 88px;
}

@media (max-width: 980px) {
    .hero-visual-wrap {
        justify-content: center;
        margin-top: 12px;
        display: flex;
    }
}

@media (max-width: 640px) {
    .hero-stage {
        width: 320px;
        min-height: 400px !important;
    }
}

.why-tile {
    transition:
        transform 0.2s,
        box-shadow 0.22s,
        border-color 0.22s;
}

.why-tile:hover {
    box-shadow: var(--sm-shadow-lg);
    border-color: var(--sm-line-strong);
    transform: translateY(-2px);
}

.hdr-desktop-nav {
    white-space: nowrap;
    gap: 28px;
    font-size: 15px;
    display: flex;
}

@media (max-width: 1240px) {
    .hdr-desktop-nav {
        gap: 20px;
        font-size: 14px;
    }
}

.hdr-desktop-cta {
    display: flex;
}

.hdr-mobile-toggle {
    display: none;
}

.mm-panel {
    display: block;
}

@media (max-width: 1080px) {
    main h1 {
        font-size: clamp(40px, 6.5vw, 60px) !important;
    }
}

@media (max-width: 980px) {
    :root {
        --sm-header-h: 56px;
    }

    .hdr-desktop-cta,
    .hdr-desktop-nav {
        display: none !important;
    }

    .hdr-mobile-toggle {
        display: inline-flex !important;
    }

    .mm-panel {
        display: none !important;
    }

    .grid-2-collapse,
    .grid-3-collapse {
        grid-template-columns: 1fr !important;
    }

    .grid-4-collapse {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    main h1 {
        font-size: clamp(36px, 7.5vw, 52px) !important;
    }

    main h2 {
        font-size: clamp(28px, 5.5vw, 40px) !important;
    }
}

@media (max-width: 640px) {
    .container,
    .container-narrow {
        padding: 0 16px;
    }

    main h1 {
        font-size: clamp(30px, 8vw, 44px) !important;
    }

    main h2 {
        font-size: clamp(24px, 7vw, 34px) !important;
    }

    main h3 {
        font-size: clamp(18px, 5.5vw, 24px) !important;
    }

    .grid-4-collapse {
        grid-template-columns: 1fr !important;
    }

    .co-input,
    .sm-input {
        font-size: 16px;
    }
}

.svc-tabs {
    background: var(--sm-bg-lavender);
    border: 1px solid var(--sm-line);
    scrollbar-width: none;
    border-radius: 999px;
    gap: 8px;
    margin-bottom: 20px;
    padding: 6px;
    display: flex;
    overflow-x: auto;
}

.svc-tabs::-webkit-scrollbar {
    display: none;
}

.svc-tab {
    white-space: nowrap;
    font-family: var(--sm-font-display);
    color: var(--sm-fg-2);
    border-radius: 999px;
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    transition:
        background 0.16s,
        color 0.16s;
}

.svc-tab-active,
.svc-tab:hover {
    color: var(--sm-fg-1);
}

.svc-tab-active {
    box-shadow: var(--sm-shadow-sm);
    background: #fff;
}

.pkg-card {
    border: 1px solid var(--sm-line);
    box-shadow: var(--sm-shadow-md);
    background: #fff;
    border-radius: 20px;
    padding: 24px;
}

.svc-faq-a[hidden],
.svc-mobile-bar {
    display: none;
}

@media (max-width: 980px) {
    .svc-side-col {
        display: none;
    }

    .svc-body {
        padding-bottom: 96px !important;
    }

    .svc-mobile-bar {
        z-index: 50;
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--sm-line);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fffffff5;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 -10px 30px -16px #0f254040;
    }

    .svc-mobile-bar .btn {
        height: 50px;
        padding: 0 22px;
    }
}

.prem-toggle {
    background: var(--sm-bg-lavender);
    border: 1px solid var(--sm-line);
    border-radius: 999px;
    gap: 3px;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 3px;
    display: inline-flex;
}

.prem-opt {
    min-height: 44px;
    font-family: var(--sm-font-display);
    color: var(--sm-fg-2);
    cursor: pointer;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    font-size: 13.5px;
    font-weight: 700;
    transition:
        background 0.16s,
        color 0.16s,
        box-shadow 0.16s;
    display: inline-flex;
}

.prem-opt-active {
    color: var(--sm-fg-1);
    box-shadow: var(--sm-shadow-sm);
    background: #fff;
}

.prem-opt-active.prem-opt-gold {
    background: linear-gradient(135deg, var(--sm-gold), var(--sm-gold-deep));
    color: #fff;
    box-shadow: 0 4px 12px -4px #b8860b80;
}

.prem-opt-active.prem-opt-gold .prem-badge {
    color: #fff;
    background: #ffffff47;
}

.prem-badge,
.prem-opt-gold:not(.prem-opt-active) {
    color: var(--sm-gold-deep);
}

.prem-badge {
    background: var(--sm-gold-soft);
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 640px) {
    .prem-toggle {
        display: inline-flex;
    }

    .prem-opt {
        justify-content: center;
        padding: 0 13px;
        font-size: 13px;
    }
}

.pkg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    display: grid;
}

.grid-2-collapse > *,
.grid-3-collapse > *,
.grid-4-collapse > *,
.pkg-grid > * {
    min-width: 0;
}

.foot-col-toggle {
    width: 100%;
    color: var(--sm-fg-1);
    font-family: var(--sm-font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 800;
    display: flex;
}

.foot-col-links {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    display: flex;
}

.foot-col-link {
    color: var(--sm-fg-2);
    padding: 2px 0;
    font-size: 14px;
}

.foot-col-chevron {
    color: var(--sm-fg-3);
    flex-shrink: 0;
    transition: transform 0.16s;
}

@media (min-width: 641px) {
    .foot-col-toggle {
        pointer-events: none;
        cursor: default;
    }

    .foot-col-chevron {
        display: none;
    }
}

@media (max-width: 640px) {
    .foot-col-toggle {
        border-bottom: 1px solid var(--sm-line-soft);
        cursor: pointer;
        min-height: 44px;
        padding: 15px 0;
    }

    .foot-col-links {
        margin-top: 0;
        padding: 6px 0 10px;
    }

    .foot-col-links[data-open="false"] {
        display: none;
    }
}

.foot-trust {
    border-bottom: 1px solid var(--sm-line);
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
    margin-bottom: 30px;
    padding-bottom: 26px;
    display: flex;
}

.foot-trust > span {
    color: var(--sm-fg-2);
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
}

.foot-trust svg {
    color: var(--sm-cobalt);
    flex-shrink: 0;
}

.foot-bottom-link {
    color: var(--sm-fg-3);
}

.foot-bottom-link:hover {
    color: var(--sm-fg-1);
}

@media (max-width: 640px) {
    .foot-trust {
        gap: 10px 20px;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .foot-trust > span {
        font-size: 12.5px;
    }
}

.foot-top {
    grid-template-columns: 1.1fr 4.4fr;
    gap: 32px;
    display: grid;
}

.foot-links {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    display: grid;
}

.foot-links > *,
.foot-top > * {
    min-width: 0;
}

@media (max-width: 1100px) {
    .foot-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 980px) {
    .foot-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 24px;
    }
}

@media (max-width: 640px) {
    .foot-links {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.pkg-tile {
    border: 1.5px solid var(--sm-line-strong);
    text-align: center;
    cursor: pointer;
    background: var(--sm-bg-alt);
    border-radius: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-height: 86px;
    padding: 14px 10px;
    transition:
        border-color 0.16s,
        box-shadow 0.2s,
        background 0.16s;
    display: flex;
    position: relative;
}

.pkg-tile-active,
.pkg-tile:hover {
    border-color: var(--sm-cobalt);
    background: #fff;
}

.pkg-tile-active {
    box-shadow: 0 0 0 4px #1f7ee01f;
}

.pkg-tile-pop {
    border: 2px solid var(--sm-gold);
    background: #fff;
}

.pkg-tile-qty {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    font-size: 17px;
    font-weight: 800;
}

.pkg-tile-old {
    color: var(--sm-fg-4);
    font-size: 12px;
    text-decoration: line-through;
}

.pkg-tile-new {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    font-size: 13.5px;
    font-weight: 800;
}

.pkg-tile-tag {
    background: var(--sm-gold);
    color: var(--sm-navy);
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translate(-50%);
}

@media (max-width: 980px) {
    .pkg-grid {
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .pkg-card {
        padding: 16px;
    }

    .pkg-grid {
        gap: 6px;
    }

    .pkg-tile {
        min-height: 76px;
        padding: 10px 4px;
    }

    .pkg-tile-qty {
        font-size: 15px;
    }

    .pkg-tile-new {
        font-size: 12px;
    }

    .pkg-tile-old {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .pkg-grid {
        gap: 5px;
    }

    .pkg-tile {
        padding: 8px 3px;
    }
}

.blog-index-title {
    font-family: var(--sm-font-display);
    letter-spacing: -0.03em;
    color: var(--sm-fg-1);
    text-wrap: balance;
    margin: 10px 0 14px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.05;
}

.blog-index-lede {
    color: var(--sm-fg-2);
    max-width: 620px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.55;
}

.blog-card-eyebrow {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sm-gold-deep);
    font-size: 11px;
    font-weight: 800;
}

.blog-featured {
    border: 1px solid var(--sm-line);
    box-shadow: var(--sm-shadow-md);
    color: inherit;
    background: #fff;
    border-radius: 22px;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    transition:
        box-shadow 0.22s,
        transform 0.2s;
    display: grid;
    overflow: hidden;
}

.blog-featured:hover {
    box-shadow: var(--sm-shadow-lg);
    transform: translateY(-2px);
}

.blog-featured-image {
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.blog-featured-body {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 36px;
    display: flex;
}

.blog-featured-title {
    font-family: var(--sm-font-display);
    letter-spacing: -0.02em;
    color: var(--sm-fg-1);
    text-wrap: balance;
    margin: 4px 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

.blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    display: grid;
}

.blog-card {
    border: 1px solid var(--sm-line);
    box-shadow: var(--sm-shadow-sm);
    color: inherit;
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    transition:
        box-shadow 0.22s,
        transform 0.2s,
        border-color 0.22s;
    display: flex;
    overflow: hidden;
}

.blog-card:hover {
    box-shadow: var(--sm-shadow-lg);
    border-color: var(--sm-line-strong);
    transform: translateY(-2px);
}

.blog-card-image {
    aspect-ratio: 16/10;
    background: var(--sm-bg-tint);
    position: relative;
    overflow: hidden;
}

.blog-card-body {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 20px;
    display: flex;
}

.blog-card-title {
    font-family: var(--sm-font-display);
    letter-spacing: -0.01em;
    color: var(--sm-fg-1);
    margin: 2px 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.blog-card-excerpt {
    color: var(--sm-fg-2);
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
}

.blog-card-meta {
    color: var(--sm-fg-3);
    margin-top: 4px;
    font-size: 12px;
}

.blog-card-link {
    color: var(--sm-cobalt);
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
}

.blog-cat-nav {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.blog-cat-nav-label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sm-fg-3);
    margin-right: 4px;
    font-size: 12px;
    font-weight: 700;
}

.blog-cat-chip {
    border: 1px solid var(--sm-line);
    color: var(--sm-fg-2);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    transition:
        background 0.16s,
        color 0.16s,
        border-color 0.16s;
    display: inline-flex;
}

.blog-cat-chip:hover {
    border-color: var(--sm-cobalt);
    color: var(--sm-cobalt);
}

.blog-cat-count {
    color: var(--sm-fg-3);
    background: var(--sm-bg-lavender);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 800;
}

.blog-cat-chip-active {
    background: var(--sm-navy);
    border-color: var(--sm-navy);
    color: #fff;
}

.blog-cat-chip-active:hover {
    color: #fff;
}

.blog-cat-chip-active .blog-cat-count {
    color: #fff;
    background: #ffffff2e;
}

.blog-pagination {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    display: flex;
}

.blog-page,
.blog-page-arrow {
    border: 1px solid var(--sm-line);
    min-width: 42px;
    height: 42px;
    color: var(--sm-fg-2);
    background: #fff;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    transition:
        background 0.16s,
        color 0.16s,
        border-color 0.16s;
    display: inline-flex;
}

.blog-page-arrow:hover,
.blog-page:hover {
    border-color: var(--sm-cobalt);
    color: var(--sm-cobalt);
}

.blog-page-active {
    background: var(--sm-navy);
    color: #fff;
    border-color: var(--sm-navy);
}

.blog-page-active:hover {
    color: #fff;
}

.blog-page-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.blog-page-ellipsis {
    color: var(--sm-fg-4);
    padding: 0 4px;
}

.blog-post-hero {
    padding-top: 52px;
    padding-bottom: 8px;
}

.blog-crumbs {
    color: var(--sm-fg-3);
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    display: flex;
}

.blog-crumbs a {
    color: var(--sm-fg-2);
    font-weight: 600;
    transition: color 0.16s;
}

.blog-crumbs a:hover {
    color: var(--sm-cobalt);
}

.blog-eyebrow {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sm-gold-deep);
    font-size: 12px;
    font-weight: 800;
    display: inline-block;
}

.blog-post-title {
    font-family: var(--sm-font-display);
    letter-spacing: -0.035em;
    color: var(--sm-fg-1);
    text-wrap: balance;
    margin: 14px 0 16px;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.06;
}

.blog-post-lede {
    color: var(--sm-fg-2);
    text-wrap: pretty;
    max-width: 62ch;
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 1.6;
}

.container-narrow[style*="center"] .blog-post-lede,
.container[style*="center"] .blog-post-lede {
    margin-inline: auto;
}

.blog-meta {
    color: var(--sm-fg-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    font-size: 14px;
    display: flex;
}

.blog-hero-image-wrap {
    box-shadow: var(--sm-shadow-lg);
    border-radius: 22px;
    margin: 28px 0 12px;
    overflow: hidden;
}

.blog-hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.blog-prose {
    padding: 28px 0 8px;
}

.blog-html {
    font-family: var(--sm-font-body);
    color: var(--sm-fg-2);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    line-height: 1.8;
}

.blog-html > :first-child {
    margin-top: 0 !important;
}

.blog-html p {
    margin: 0 0 24px;
}

.blog-html > p:first-of-type {
    color: var(--sm-fg-1);
    font-size: 20px;
    line-height: 1.65;
}

.blog-html b,
.blog-html strong {
    color: var(--sm-fg-1);
    font-weight: 700;
}

.blog-html em,
.blog-html h2 {
    color: var(--sm-fg-1);
}

.blog-html h2 {
    font-family: var(--sm-font-display);
    letter-spacing: -0.03em;
    margin: 56px 0 18px;
    scroll-margin-top: 96px;
    font-size: clamp(26px, 3.4vw, 32px);
    font-weight: 800;
    line-height: 1.18;
}

.blog-html h2:before {
    content: "";
    background: var(--sm-gradient-text);
    border-radius: 999px;
    width: 44px;
    height: 4px;
    margin-bottom: 18px;
    display: block;
}

.blog-html h3 {
    letter-spacing: -0.015em;
    margin: 40px 0 14px;
    font-size: 23px;
}

.blog-html h3,
.blog-html h4 {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    font-weight: 800;
}

.blog-html h4 {
    margin: 28px 0 10px;
    font-size: 19px;
}

.blog-html a {
    color: var(--sm-cobalt-deep);
    text-underline-offset: 3px;
    font-weight: 600;
    -webkit-text-decoration: underline #1f7ee059;
    text-decoration: underline #1f7ee059;
    text-decoration-thickness: 2px;
    transition:
        text-decoration-color 0.16s,
        color 0.16s;
}

.blog-html a:hover {
    color: var(--sm-cobalt);
    -webkit-text-decoration-color: var(--sm-cobalt);
    text-decoration-color: var(--sm-cobalt);
}

.blog-html ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.blog-html ul > li {
    margin: 0 0 13px;
    padding-left: 30px;
    line-height: 1.7;
    position: relative;
}

.blog-html ul > li:before {
    content: "";
    background: var(--sm-cobalt);
    border-radius: 2px;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 11px;
    left: 7px;
    transform: rotate(45deg);
}

.blog-html ol {
    counter-reset: li;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.blog-html ol > li {
    counter-increment: li;
    margin: 0 0 16px;
    padding-left: 44px;
    line-height: 1.7;
    position: relative;
}

.blog-html ol > li:before {
    content: counter(li);
    background: var(--sm-cobalt-soft);
    width: 30px;
    height: 30px;
    color: var(--sm-cobalt-deep);
    font-family: var(--sm-font-display);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
}

.blog-html img {
    max-width: 100%;
    height: auto;
    box-shadow: var(--sm-shadow-md);
    border-radius: 18px;
    margin: 14px 0;
    display: block;
}

.blog-html figure {
    margin: 32px 0;
}

.blog-html figure img {
    margin: 0 auto;
}

.blog-html figcaption {
    color: var(--sm-fg-3);
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
}

.blog-html blockquote {
    background: linear-gradient(135deg, var(--sm-gold-soft), #fff);
    border-left: 1px solid var(--sm-gold);
    border: 1px solid var(--sm-gold);
    border-left-width: 4px;
    color: var(--sm-fg-1);
    border-radius: 0 16px 16px 0;
    margin: 32px 0;
    padding: 22px 28px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
}

.blog-html blockquote p:last-child {
    margin-bottom: 0;
}

.blog-html hr {
    background: var(--sm-line);
    border: 0;
    height: 1px;
    margin: 44px 0;
}

.blog-html table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--sm-line);
    border-radius: 14px;
    width: 100%;
    margin: 28px 0;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}

.blog-html td,
.blog-html th {
    text-align: left;
    border-bottom: 1px solid var(--sm-line);
    padding: 13px 16px;
}

.blog-html th {
    background: var(--sm-bg-alt);
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    font-weight: 800;
}

.blog-html tr:last-child td {
    border-bottom: 0;
}

.blog-post-cta {
    color: #fff;
    max-width: 760px;
    box-shadow: var(--sm-glow-grad);
    background: linear-gradient(135deg, #0f2540, #1d3557);
    border-radius: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 48px auto;
    padding: 28px 32px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.blog-post-cta:after {
    content: "";
    filter: blur(20px);
    pointer-events: none;
    background: #1f7ee040;
    border-radius: 999px;
    width: 220px;
    height: 220px;
    position: absolute;
    top: -90px;
    right: -60px;
}

.blog-post-cta > * {
    z-index: 1;
    position: relative;
}

.blog-related-section {
    border-top: 1px solid var(--sm-line);
    margin-top: 72px;
    padding-top: 48px;
}

.blog-related-title {
    font-family: var(--sm-font-display);
    letter-spacing: -0.02em;
    color: var(--sm-fg-1);
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 800;
}

.lf-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
    gap: 56px;
    display: grid;
}

.lf-main .blog-html {
    margin-left: 0;
    margin-right: 0;
}

.lf-toc {
    scrollbar-width: thin;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 96px;
    overflow-y: auto;
}

.lf-toc-head {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sm-fg-3);
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 800;
}

.lf-toc-link {
    color: var(--sm-fg-3);
    border-left: 2px solid var(--sm-line);
    cursor: pointer;
    padding: 7px 0 7px 16px;
    font-size: 13.5px;
    line-height: 1.4;
    transition:
        color 0.16s,
        border-color 0.16s;
    display: block;
}

.lf-toc-link:hover {
    color: var(--sm-fg-1);
}

.lf-toc-active {
    color: var(--sm-cobalt-deep);
    border-left-color: var(--sm-cobalt);
    font-weight: 700;
}

@media (max-width: 1080px) {
    .lf-layout {
        grid-template-columns: minmax(0, 1fr) 210px;
        gap: 36px;
    }
}

@media (max-width: 980px) {
    .lf-layout {
        grid-template-columns: 1fr;
    }

    .lf-toc-col {
        display: none;
    }
}

.guide-collapse {
    max-height: 440px;
    transition: max-height 0.45s;
    position: relative;
    overflow: hidden;
}

.guide-collapse.guide-open {
    max-height: 24000px;
}

.guide-fade {
    pointer-events: none;
    background: linear-gradient(#fff0, #fff 85%);
    height: 180px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.svc-faq-a {
    color: var(--sm-fg-2);
    border-top: 1px solid var(--sm-line-soft);
    margin-top: 14px;
    padding-top: 14px;
    font-size: 14.5px;
    line-height: 1.75;
}

.svc-faq-a p {
    margin: 0 0 12px;
}

.svc-faq-a p:last-child {
    margin-bottom: 0;
}

.svc-faq-a a {
    color: var(--sm-cobalt-deep);
    text-underline-offset: 2px;
    font-weight: 600;
    text-decoration: underline;
}

.svc-faq-a strong {
    color: var(--sm-fg-1);
}

.svc-faq-a ol,
.svc-faq-a ul {
    margin: 8px 0;
    padding-left: 20px;
}

.svc-faq-a li {
    margin-bottom: 6px;
}

@media (max-width: 980px) {
    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-featured-image {
        min-height: 240px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-index-title {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-featured-body {
        padding: 24px;
    }

    .blog-html {
        font-size: 16.5px;
    }

    .blog-html h2 {
        margin: 40px 0 14px;
    }

    .blog-html > p:first-of-type {
        font-size: 18px;
    }

    .blog-post-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }
}

.rev-rows {
    flex-direction: column;
    gap: 18px;
    display: flex;
}

.rev-marquee-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
}

.rev-track {
    will-change: transform;
    gap: 18px;
    width: max-content;
    display: flex;
}

.rev-track-ltr {
    animation: rev-scroll-ltr 60s linear infinite;
}

.rev-track-rtl {
    animation: rev-scroll-rtl 60s linear infinite;
}

.rev-marquee-wrap:hover .rev-track {
    animation-play-state: paused;
}

@keyframes rev-scroll-rtl {
    0% {
        transform: translate(0);
    }

    to {
        transform: translate(-50%);
    }
}

@keyframes rev-scroll-ltr {
    0% {
        transform: translate(-50%);
    }

    to {
        transform: translate(0);
    }
}

.rev-card {
    box-sizing: border-box;
    border: 1px solid var(--sm-line);
    width: 360px;
    box-shadow: var(--sm-shadow-sm);
    text-align: left;
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    flex: 0 0 360px;
    gap: 12px;
    padding: 22px;
    display: flex;
}

.rev-card-head {
    align-items: center;
    gap: 12px;
    display: flex;
}

.rev-avatar {
    color: #fff;
    width: 42px;
    height: 42px;
    font-size: 15px;
    font-weight: 800;
    font-family: var(--sm-font-display);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.rev-name {
    color: var(--sm-fg-1);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.rev-role {
    color: var(--sm-fg-3);
    margin-top: 1px;
    font-size: 12px;
}

.rev-stars {
    color: var(--sm-star);
    letter-spacing: 1px;
    font-size: 14px;
}

.rev-text {
    color: var(--sm-fg-2);
    font-size: 14px;
    line-height: 1.6;
}

.rev-verified {
    color: var(--sm-success-text);
    align-items: center;
    gap: 5px;
    margin-top: auto;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
}

.rev-stats-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 760px) {
    .rev-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .rev-card {
        flex-basis: 290px;
        width: 290px;
        padding: 18px;
    }

    .rev-track-ltr,
    .rev-track-rtl {
        animation-duration: 44s;
    }

    .rev-text {
        font-size: 13.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rev-track {
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        width: auto;
        padding-bottom: 6px;
        overflow-x: auto;
        animation: none !important;
    }

    .rev-marquee-wrap {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.sm-announce {
    min-height: 48px;
    font-family: var(--sm-font-display);
    color: var(--sm-fg-2);
    background: var(--sm-bg-lavender);
    border-bottom: 1px solid var(--sm-line);
    justify-content: center;
    align-items: center;
    padding: 9px 108px 9px 52px;
    font-size: 14px;
    font-weight: 600;
    animation: sm-banner-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    display: flex;
    position: relative;
    overflow: hidden;
}

@keyframes sm-banner-in {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.sm-b-inner {
    z-index: 1;
    width: 100%;
    display: flex;
    position: relative;
}

.sm-b-content,
.sm-b-inner {
    justify-content: center;
    align-items: center;
}

.sm-b-content {
    flex-wrap: wrap;
    gap: 12px;
    display: inline-flex;
}

.sm-b-text {
    white-space: nowrap;
}

.sm-b-text strong {
    font-weight: 800;
}

.sm-b-dash-label {
    color: var(--sm-fg-1);
    font-weight: 700;
}

.sm-b-dash-label strong {
    color: var(--sm-navy);
}

@keyframes sm-tshine {
    0% {
        background-position: 200%;
    }

    to {
        background-position: -200%;
    }
}

@keyframes sm-gloss {
    0% {
        transform: translate(-160%) skew(-18deg);
    }

    18% {
        transform: translate(320%) skew(-18deg);
    }

    to {
        transform: translate(320%) skew(-18deg);
    }
}

.sm-announce .kw {
    color: #0000;
    background: linear-gradient(
            90deg,
            #1d3557 10%,
            #1f7ee0 45%,
            #c89854 75%,
            #1d3557 95%
        )
        0 0/250%;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 800;
    animation: sm-tshine 4s linear infinite;
}

.sm-b-new-pill {
    letter-spacing: 0.07em;
    color: var(--sm-cobalt-deep);
    background:
        linear-gradient(#fff, #fff) padding-box padding-box,
        linear-gradient(92deg, #1f7ee0, #c89854) border-box;
    border: 1.5px solid #0000;
    border-radius: 999px;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    position: relative;
    overflow: hidden;
}

.sm-b-new-word {
    color: var(--sm-navy);
    font-weight: 800;
}

.sm-b-new-pill b {
    color: #0000;
    background: linear-gradient(90deg, #1d3557 20%, #1f7ee0 55%, #c89854 90%) 0
        0/200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: sm-tshine 3.5s linear infinite;
}

.sm-b-new-pill:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(100deg, #0000 10%, #ffffffe6 50%, #0000 90%);
    width: 40%;
    animation: sm-gloss 4.5s ease-in-out 1.6s infinite;
    position: absolute;
    inset: -2px 0;
    transform: translate(-160%) skew(-18deg);
}

.sm-b-perk {
    align-items: center;
    gap: 8px;
    min-width: 0;
    animation: sm-perk-in 0.4s both;
    display: inline-flex;
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

.sm-b-perk-ic {
    background: var(--sm-cobalt-soft);
    width: 22px;
    height: 22px;
    color: var(--sm-cobalt-deep);
    border: 1px solid #cfe3f7;
    border-radius: 999px;
    flex-shrink: 0;
    place-items: center;
    display: inline-grid;
    position: relative;
    overflow: hidden;
}

.sm-b-perk-ic.coin {
    background: linear-gradient(135deg, var(--sm-gold), var(--sm-gold-deep));
    border-color: var(--sm-gold-soft);
    color: #4a3410;
    box-shadow: 0 2px 8px #c8985459;
}

.sm-b-perk-ic:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(100deg, #0000 10%, #ffffffd9 50%, #0000 90%);
    width: 50%;
    animation: sm-gloss 4.5s ease-in-out 0.4s infinite;
    position: absolute;
    inset: 0;
    transform: translate(-160%) skew(-18deg);
}

.sm-b-perkdots {
    align-items: center;
    gap: 4px;
    display: inline-flex;
}

.sm-b-perkdots i {
    background: var(--sm-line-strong);
    border-radius: 999px;
    width: 5px;
    height: 5px;
    transition:
        background 0.2s,
        transform 0.2s;
}

.sm-b-perkdots i.on {
    background: var(--sm-cobalt);
    transform: scale(1.3);
}

.sm-b-cta {
    border: 1.5px solid var(--sm-cobalt);
    color: var(--sm-cobalt-deep);
    white-space: nowrap;
    background: #fff;
    border-radius: 999px;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.15s,
        background 0.2s;
    display: inline-flex;
}

.sm-b-cta:hover {
    background: var(--sm-cobalt-soft);
    transform: scale(1.03);
}

.sm-b-cta-short {
    display: none;
}

.sm-announce-x {
    width: 44px;
    height: 44px;
    color: var(--sm-fg-4);
    background: 0 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    transition:
        background 0.16s,
        color 0.16s;
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

.sm-announce-x:hover {
    color: var(--sm-fg-2);
    background: #0f25400f;
}

@media (max-width: 1100px) {
    .sm-b-content {
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
    }

    .sm-b-dash-label,
    .sm-b-perkdots {
        display: none;
    }

    .sm-b-perk {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .sm-b-perk .sm-b-text {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .sm-b-cta {
        flex-shrink: 0;
    }
}

@media (max-width: 900px) {
    .sm-b-cta-full {
        display: none;
    }

    .sm-b-cta-short {
        display: inline;
    }
}

.sm-b-t-short {
    display: none;
}

@media (max-width: 768px) {
    .sm-announce {
        padding: 9px 44px 9px 16px;
    }

    .sm-b-t-full {
        display: none;
    }

    .sm-b-t-short {
        white-space: nowrap;
        display: inline;
    }

    .sm-b-dash-label,
    .sm-b-perkdots {
        display: none;
    }

    .sm-b-new-pill {
        padding: 3px 8px;
        font-size: 9.5px;
    }

    .sm-b-cta-full {
        display: none;
    }

    .sm-b-cta-short {
        display: inline;
    }

    .sm-b-content {
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
    }

    .sm-b-perk {
        flex: 1;
        min-width: 0;
    }

    .sm-b-perk .sm-b-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .sm-announce {
        padding: 9px 34px 9px 12px;
    }

    .sm-b-perk-ic {
        display: none;
    }

    .sm-b-new-pill {
        gap: 3px;
        padding: 3px 7px;
        font-size: 8.5px;
    }

    .sm-b-cta {
        padding: 6px 11px;
    }

    .sm-b-content {
        gap: 6px;
    }
}

@media (max-width: 375px) {
    .sm-b-new-word {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sm-announce,
    .sm-announce .kw,
    .sm-b-new-pill b,
    .sm-b-perk {
        animation: none;
    }

    .sm-b-new-pill:after,
    .sm-b-perk-ic:after {
        opacity: 0;
        animation: none;
    }
}

.pl-section {
    background: #fff;
    padding: 46px 0;
}

.pl-section.tint {
    background: var(--sm-bg-lavender);
}

.pl-h2 {
    font-family: var(--sm-font-display);
    letter-spacing: -0.02em;
    color: var(--sm-fg-1);
    text-wrap: balance;
    margin: 8px 0 6px;
    font-size: 30px;
    font-weight: 800;
}

.pl-sub {
    max-width: 62ch;
    color: var(--sm-fg-3);
    text-wrap: pretty;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.6;
}

.pl-hero-trust {
    color: var(--sm-fg-2);
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
}

.pl-hero-trust > span {
    align-items: center;
    gap: 6px;
    display: inline-flex;
}

.pl-hero-trust svg {
    color: var(--sm-cobalt);
}

.pl-toggle-row {
    justify-content: center;
    margin-bottom: 22px;
    display: flex;
}

.pl-toggle {
    background: var(--sm-bg-alt);
    border: 1px solid var(--sm-line);
    border-radius: 999px;
    gap: 4px;
    padding: 4px;
    display: inline-flex;
}

.pl-toggle button {
    font: inherit;
    color: var(--sm-fg-2);
    cursor: pointer;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 700;
}

.pl-toggle button.on {
    color: var(--sm-fg-1);
    box-shadow: var(--sm-shadow-sm);
    background: #fff;
}

.pl-toggle .save {
    color: var(--sm-success);
    margin-left: 4px;
    font-size: 12px;
}

.pl-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 18px;
    display: grid;
}

.pl-card {
    border: 1px solid var(--sm-line);
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    gap: 9px;
    padding: 22px 20px;
    display: flex;
    position: relative;
}

.pl-card.pop {
    border: 2px solid var(--sm-cobalt);
    box-shadow: var(--sm-shadow-card);
}

.pl-ribbon {
    background: var(--sm-cobalt);
    color: #fff;
    letter-spacing: 0.1em;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 800;
    position: absolute;
    top: -11px;
    left: 20px;
}

.pl-name {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    font-size: 19px;
    font-weight: 800;
}

.pl-tag {
    color: var(--sm-fg-3);
    min-height: 39px;
    font-size: 13px;
    line-height: 1.5;
}

.pl-price {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    display: flex;
}

.pl-price .was {
    color: var(--sm-fg-4);
    font-size: 15px;
    text-decoration: line-through;
}

.pl-price .amt {
    font-family: var(--sm-font-display);
    letter-spacing: -0.03em;
    color: var(--sm-fg-1);
    font-size: 34px;
    font-weight: 800;
}

.pl-price .per {
    color: var(--sm-fg-3);
    font-size: 14px;
    font-weight: 600;
}

.pl-bill {
    color: var(--sm-fg-3);
    font-size: 12.5px;
}

.pl-bill b {
    color: var(--sm-success);
}

.pl-credits {
    background: var(--sm-cobalt-soft);
    color: var(--sm-fg-2);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    font-size: 13px;
    display: flex;
}

.pl-credits svg {
    color: var(--sm-cobalt);
    flex-shrink: 0;
}

.pl-credits strong {
    color: var(--sm-fg-1);
}

.pl-feats {
    flex-direction: column;
    flex: 1;
    gap: 7px;
    margin: 2px 0 6px;
    padding: 0;
    list-style: none;
    display: flex;
}

.pl-feats li {
    color: var(--sm-fg-2);
    gap: 8px;
    font-size: 13.2px;
    line-height: 1.45;
    display: flex;
}

.pl-feats .ic {
    background: var(--sm-cobalt-soft);
    width: 17px;
    height: 17px;
    color: var(--sm-cobalt);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    display: inline-flex;
}

.ae-wrap {
    border: 1px solid var(--sm-line);
    background: #fff;
    border-radius: 18px;
    gap: 20px;
    padding: 22px;
}

.ae-block,
.ae-wrap {
    flex-direction: column;
    display: flex;
}

.ae-block {
    gap: 10px;
}

.ae-lbl {
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sm-fg-3);
    font-size: 12px;
    font-weight: 800;
}

.ae-badge {
    letter-spacing: 0.06em;
    white-space: nowrap;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 8.5px;
    font-weight: 800;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translate(-50%);
}

.ae-badge.popular {
    background: var(--sm-cobalt);
    color: #fff;
}

.ae-badge.value {
    background: var(--sm-gold);
    color: var(--sm-navy);
}

.ae-hint {
    color: var(--sm-fg-3);
    font-size: 12.5px;
}

.ae-plats {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
}

.ae-plat {
    border: 1.5px solid var(--sm-line-strong);
    background: var(--sm-bg-alt);
    font: inherit;
    color: var(--sm-fg-2);
    cursor: pointer;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
}

.ae-plat.on {
    border-color: var(--sm-cobalt);
    color: var(--sm-fg-1);
    background: #fff;
}

.ae-plat .ic {
    width: 14px;
    color: var(--sm-cobalt);
    display: inline-flex;
}

.ae-handles {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    display: grid;
}

.ae-handle {
    color: var(--sm-fg-3);
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
}

.ae-handle input {
    border: 1px solid var(--sm-line);
    font: inherit;
    color: var(--sm-fg-1);
    background: #fff;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 14px;
}

.ae-handle input:focus {
    outline: 2px solid var(--sm-cobalt);
    outline-offset: 1px;
    border-color: var(--sm-cobalt);
}

.ae-two {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    display: grid;
}

.ae-sum {
    border-top: 1px solid var(--sm-line);
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    display: flex;
}

.ae-sum-price {
    align-items: baseline;
    gap: 5px;
    display: flex;
}

.ae-sum-price .amt {
    font-family: var(--sm-font-display);
    letter-spacing: -0.03em;
    color: var(--sm-fg-1);
    font-size: 38px;
    font-weight: 800;
}

.ae-sum-price .per {
    color: var(--sm-fg-3);
    font-size: 15px;
    font-weight: 600;
}

.ae-sum-bill {
    color: var(--sm-fg-3);
    font-size: 13px;
}

.ae-sum-bill b {
    color: var(--sm-success);
}

.ae-sum-note {
    color: var(--sm-fg-3);
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    display: inline-flex;
}

.ae-sum-note svg {
    color: var(--sm-gold-deep);
}

.ae-tracks {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    display: grid;
}

.ae-track {
    border: 1.5px solid var(--sm-line-strong);
    background: var(--sm-bg-alt);
    font: inherit;
    cursor: pointer;
    text-align: left;
    border-radius: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    transition:
        border-color 0.16s,
        background 0.16s;
    display: flex;
}

.ae-track.on,
.ae-track:hover {
    border-color: var(--sm-cobalt);
    background: #fff;
}

.ae-track.on {
    box-shadow: 0 0 0 3px #1f7ee01f;
}

.ae-track .ic {
    color: var(--sm-cobalt);
    margin-bottom: 4px;
    display: inline-flex;
}

.ae-track .t {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    font-size: 15px;
    font-weight: 800;
}

.ae-track .s {
    color: var(--sm-fg-3);
    font-size: 12.5px;
    line-height: 1.35;
}

.ae-search {
    border: 1px solid var(--sm-line);
    background: #fff;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    display: flex;
    position: relative;
}

.ae-search svg {
    color: var(--sm-fg-3);
    flex-shrink: 0;
}

.ae-search input {
    font: inherit;
    color: var(--sm-fg-1);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    padding: 11px 0;
    font-size: 14px;
}

.ae-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    padding: 2px;
    display: grid;
}

.ae-tile {
    border: 1.5px solid var(--sm-line-strong);
    background: var(--sm-bg-alt);
    min-height: 88px;
    font: inherit;
    cursor: pointer;
    border-radius: 13px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 11px 7px;
    transition:
        border-color 0.16s,
        background 0.16s,
        opacity 0.16s;
    display: flex;
    position: relative;
}

.ae-tile.on,
.ae-tile:hover:not(:disabled) {
    border-color: var(--sm-cobalt);
    background: #fff;
}

.ae-tile.on {
    box-shadow: 0 0 0 3px #1f7ee01f;
}

.ae-tile:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.ae-tile .nm {
    color: var(--sm-fg-1);
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

.ae-tile .sv {
    color: var(--sm-fg-3);
    text-align: center;
    font-size: 10.5px;
    line-height: 1.25;
}

.ae-tile .chk {
    background: var(--sm-cobalt);
    color: #fff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    display: inline-flex;
    position: absolute;
    top: 6px;
    right: 6px;
}

.ae-targets {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    display: grid;
}

.ae-target {
    flex-direction: column;
    gap: 10px;
    display: flex;
}

.ae-two .pl-toggle button {
    min-height: 44px;
}

.ae-two .pl-toggle,
.ae-two .prem-toggle {
    width: 100%;
}

.ae-two .prem-opt {
    flex: 1;
    justify-content: center;
}

.ae-two .pl-toggle button {
    flex: 1;
}

.ae-sku {
    border: 1px solid var(--sm-line);
    min-height: 44px;
    font: inherit;
    color: var(--sm-fg-1);
    cursor: pointer;
    appearance: none;
    background: #fff
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        right 11px center no-repeat;
    border-radius: 9px;
    padding: 10px 34px 10px 12px;
    font-size: 14px;
    font-weight: 600;
}

.ae-sku:focus {
    outline: 2px solid var(--sm-cobalt);
    outline-offset: 1px;
    border-color: var(--sm-cobalt);
}

.ae-sum-lines {
    color: var(--sm-fg-2);
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font-size: 12.5px;
    display: flex;
}

.ae-sum-lines span {
    align-items: center;
    gap: 5px;
    display: inline-flex;
}

.ae-sum-lines svg {
    color: var(--sm-success);
}

.ae-layout {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
    display: grid;
}

.ae-side {
    display: none;
}

.ae-sum-inline {
    display: flex;
}

.ae-step {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    letter-spacing: -0.01em;
    gap: 9px;
    font-size: 15px;
    display: flex;
}

.ae-step,
.ae-step .n {
    align-items: center;
    font-weight: 800;
}

.ae-step .n {
    background: var(--sm-cobalt);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    font-size: 12px;
    display: inline-flex;
}

.ae-step .n,
.ae-step-note {
    font-family: var(--sm-font-sans, inherit);
}

.ae-step-note {
    color: var(--sm-fg-3);
    white-space: nowrap;
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
}

.ae-select {
    border: 1.5px solid var(--sm-line-strong);
    width: 100%;
    min-height: 46px;
    font: inherit;
    color: var(--sm-fg-1);
    cursor: pointer;
    appearance: none;
    background: #fff
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        right 13px center no-repeat;
    border-radius: 12px;
    padding: 11px 38px 11px 14px;
    font-size: 15px;
    font-weight: 700;
}

.ae-select:focus {
    outline: 2px solid var(--sm-cobalt);
    outline-offset: 1px;
    border-color: var(--sm-cobalt);
}

.ae-more {
    border: 1px dashed var(--sm-line-strong);
    width: 100%;
    min-height: 44px;
    font: inherit;
    color: var(--sm-cobalt);
    cursor: pointer;
    background: 0 0;
    border-radius: 11px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    transition:
        border-color 0.16s,
        background 0.16s;
    display: inline-flex;
}

.ae-more:hover {
    border-color: var(--sm-cobalt);
    background: var(--sm-cobalt-soft);
}

.ae-mobile-bar {
    display: none;
}

.ae-mobile-price {
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    display: flex;
}

.ae-mobile-price .amt {
    font-family: var(--sm-font-display);
    letter-spacing: -0.02em;
    color: var(--sm-fg-1);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.ae-mobile-price .per {
    color: var(--sm-fg-3);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 979px) {
    .ae-mobile-bar {
        z-index: 50;
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--sm-line);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fffffff5;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 -10px 30px -16px #0f254040;
    }

    .ae-mobile-bar .btn {
        flex-shrink: 0;
        height: 50px;
        padding: 0 22px;
    }

    .ae-sum-inline .ae-sum-price,
    .ae-sum-inline > .btn {
        display: none;
    }

    .ae-sum-inline {
        border-top: 1px solid var(--sm-line);
        padding-top: 16px;
    }

    .ae-layout {
        padding-bottom: 84px;
    }
}

@media (min-width: 980px) {
    .ae-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
        gap: 24px;
    }

    .ae-side {
        display: block;
        position: sticky;
        top: 96px;
    }

    .ae-side .ae-sum {
        border-top: 1px solid var(--sm-line);
        border: 1px solid var(--sm-line);
        box-shadow: var(--sm-shadow-md);
        background: #fff;
        border-radius: 18px;
        padding: 24px 22px;
    }

    .ae-sum-inline {
        display: none;
    }
}

@media (max-width: 620px) {
    .ae-handle input,
    .ae-search input,
    .ae-targets input,
    .ae-track,
    .pl-toggle button {
        min-height: 44px;
    }

    .ae-more,
    .ae-select {
        min-height: 46px;
    }

    .ae-tracks {
        grid-template-columns: 1fr;
    }

    .ae-grid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }
}

.pl-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    display: grid;
}

.pl-step {
    border: 1px solid var(--sm-line);
    background: #fff;
    border-radius: 14px;
    padding: 18px;
}

.pl-step .n {
    background: var(--sm-cobalt);
    color: #fff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
}

.pl-step b {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    margin-bottom: 4px;
    font-size: 15px;
    display: block;
}

.pl-step p {
    color: var(--sm-fg-3);
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.pl-ovl {
    z-index: 1000;
    overscroll-behavior: contain;
    background: #0e1e338c;
    justify-content: center;
    align-items: center;
    padding: 18px;
    display: flex;
    position: fixed;
    inset: 0;
}

.pl-modal {
    width: 100%;
    max-width: 420px;
    box-shadow: var(--sm-shadow-lg);
    background: #fff;
    border-radius: 18px;
    max-height: 92vh;
    padding: 26px 24px 20px;
    position: relative;
    overflow-y: auto;
}

.pl-modal-x {
    background: var(--sm-bg-alt);
    width: 30px;
    height: 30px;
    color: var(--sm-fg-3);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 12px;
}

.pl-modal-head {
    text-align: center;
    margin-bottom: 16px;
}

.pl-modal-badge {
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sm-cobalt-deep);
    background: var(--sm-cobalt-soft);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
}

.pl-modal-price {
    font-family: var(--sm-font-display);
    letter-spacing: -0.03em;
    color: var(--sm-fg-1);
    margin-top: 10px;
    font-size: 36px;
    font-weight: 800;
}

.pl-modal-price span {
    color: var(--sm-fg-3);
    font-size: 15px;
    font-weight: 600;
}

.pl-modal-bill {
    color: var(--sm-fg-3);
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.55;
}

.pl-modal-lbl {
    color: var(--sm-fg-2);
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    display: block;
}

.pl-modal-input {
    border: 1px solid var(--sm-line);
    width: 100%;
    font: inherit;
    color: var(--sm-fg-1);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px 13px;
    font-size: 16px;
}

.pl-modal-input:focus {
    outline: 2px solid var(--sm-cobalt);
    outline-offset: 1px;
    border-color: var(--sm-cobalt);
}

.pl-modal-err {
    color: var(--sm-danger);
    background: #fdeaee;
    border-radius: 9px;
    margin-bottom: 11px;
    padding: 9px 11px;
    font-size: 13px;
}

.pl-modal-trust {
    color: var(--sm-fg-3);
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 13px;
    font-size: 12px;
    display: flex;
}

.pl-modal-trust span {
    align-items: center;
    gap: 5px;
    display: inline-flex;
}

.pl-modal-trust svg {
    color: var(--sm-success);
}

@media (max-width: 1100px) {
    .pl-grid,
    .pl-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .ae-two {
        grid-template-columns: 1fr;
    }

    .pl-h2 {
        font-size: 25px;
    }
}

@media (max-width: 560px) {
    .pl-grid,
    .pl-steps {
        grid-template-columns: 1fr;
    }

    .ae-wrap {
        padding: 16px;
    }
}

.subx {
    border: 1px solid var(--sm-line);
    background: var(--sm-bg-lavender);
    color: inherit;
    border-radius: 14px;
    grid-template-columns: 40px 1fr 18px;
    align-items: center;
    gap: 13px;
    min-height: 44px;
    margin-bottom: 16px;
    padding: 13px 15px;
    transition:
        border-color 0.16s,
        background 0.16s,
        transform 0.16s;
    display: grid;
}

.subx:hover {
    border-color: var(--sm-cobalt);
    background: #fff;
}

.subx-ico {
    background: var(--sm-cobalt-soft);
    width: 40px;
    height: 40px;
    color: var(--sm-cobalt);
    border-radius: 11px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.subx-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex;
}

.subx-title {
    color: var(--sm-fg-1);
    font-size: 14px;
    font-weight: 800;
}

.subx-sub {
    color: var(--sm-fg-3);
    font-size: 12.5px;
    line-height: 1.5;
}

.subx-arrow {
    color: var(--sm-cobalt);
    flex-shrink: 0;
}

.subx:hover .subx-arrow {
    transform: translate(2px);
}

@media (prefers-reduced-motion: reduce) {
    .subx,
    .subx-arrow {
        transition: none;
    }

    .subx:hover .subx-arrow {
        transform: none;
    }
}

@media (max-width: 480px) {
    .subx {
        grid-template-columns: 34px 1fr;
        gap: 11px;
        padding: 12px 13px;
    }

    .subx-ico {
        border-radius: 9px;
        width: 34px;
        height: 34px;
    }

    .subx-arrow {
        display: none;
    }
}

.mm-sub-link {
    color: var(--sm-cobalt);
    border-bottom: 1px solid #0000;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
}

.mm-sub-link:hover {
    border-bottom-color: var(--sm-cobalt);
}

.subup {
    border: 1.5px solid var(--sm-cobalt);
    background: linear-gradient(#f7fbff, #fff);
    border-radius: 16px;
    margin-bottom: 16px;
    transition: box-shadow 0.16s;
}

.subup.on {
    box-shadow: 0 0 0 3px #1f7ee01a;
}

.subup-bar {
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    display: flex;
}

.subup-main {
    cursor: pointer;
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex;
}

.subup-title {
    font-family: var(--sm-font-display);
    color: var(--sm-fg-1);
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    display: flex;
}

.subup-badge {
    letter-spacing: 0.07em;
    background: var(--sm-cobalt);
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 800;
}

.subup-sub {
    color: var(--sm-fg-3);
    font-size: 12.5px;
    line-height: 1.4;
}

.subup-switch-btn {
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    display: inline-flex;
}

.subup-switch {
    background: var(--sm-line-strong);
    border-radius: 999px;
    width: 44px;
    height: 26px;
    transition: background 0.18s;
    display: block;
    position: relative;
}

.subup.on .subup-switch {
    background: var(--sm-cobalt);
}

.subup-switch-knob {
    width: 20px;
    height: 20px;
    box-shadow: var(--sm-shadow-sm);
    background: #fff;
    border-radius: 999px;
    transition: transform 0.18s;
    position: absolute;
    top: 3px;
    left: 3px;
}

.subup.on .subup-switch-knob {
    transform: translate(18px);
}

.subup-body {
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 16px;
    display: flex;
}

.subup-cadence {
    background: var(--sm-bg-alt);
    border: 1px solid var(--sm-line);
    border-radius: 999px;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    display: inline-flex;
}

.subup-cad {
    min-height: 38px;
    font: inherit;
    color: var(--sm-fg-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
}

.subup-cad.on {
    color: var(--sm-fg-1);
    box-shadow: var(--sm-shadow-sm);
    background: #fff;
}

.subup-save {
    color: var(--sm-success-text);
    font-size: 11px;
    font-weight: 800;
}

.subup-size {
    flex-direction: column;
    gap: 6px;
    display: flex;
}

.subup-size-lbl {
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sm-fg-3);
    font-size: 11.5px;
    font-weight: 800;
}

.subup-select {
    border: 1.5px solid var(--sm-line-strong);
    width: 100%;
    min-height: 48px;
    font: inherit;
    color: var(--sm-fg-1);
    cursor: pointer;
    background: #fff;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 700;
}

.subup-select:focus {
    outline: 2px solid var(--sm-cobalt);
    outline-offset: 1px;
    border-color: var(--sm-cobalt);
}

.subup-price {
    align-items: baseline;
    gap: 4px;
    display: flex;
}

.subup-amt {
    font-family: var(--sm-font-display);
    letter-spacing: -0.03em;
    color: var(--sm-fg-1);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.subup-per {
    color: var(--sm-fg-3);
    font-size: 14px;
    font-weight: 600;
}

.subup-sum {
    border: 1px solid var(--sm-line);
    background: #fff;
    border-radius: 12px;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    display: flex;
}

.subup-sum-line {
    color: var(--sm-fg-2);
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
}

.subup-sum-line strong {
    color: var(--sm-fg-1);
    font-weight: 800;
}

.subup-sum-bill {
    font-size: 12.5px;
}

.subup-note,
.subup-sum-bill {
    color: var(--sm-fg-3);
    margin: 0;
}

.subup-note {
    align-items: center;
    gap: 6px;
    font-size: 12px;
    display: inline-flex;
}

.subup-note svg {
    color: var(--sm-cobalt);
    flex-shrink: 0;
}

.subup-cta {
    width: 100%;
}

@media (max-width: 620px) {
    .subup-title {
        font-size: 14.5px;
    }

    .subup-cad {
        min-height: 44px;
    }

    .subup.on {
        scroll-margin-bottom: 88px;
    }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false;
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false;
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false;
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff;
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

@property --tw-blur {
    syntax: "*";
    inherits: false;
}

@property --tw-brightness {
    syntax: "*";
    inherits: false;
}

@property --tw-contrast {
    syntax: "*";
    inherits: false;
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false;
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false;
}

@property --tw-invert {
    syntax: "*";
    inherits: false;
}

@property --tw-opacity {
    syntax: "*";
    inherits: false;
}

@property --tw-saturate {
    syntax: "*";
    inherits: false;
}

@property --tw-sepia {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false;
}

@property --tw-ease {
    syntax: "*";
    inherits: false;
}

@font-face {
    font-family: jakarta;
    src: url(/fonts/636a5ac981f94f8b-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 400 800;
    font-style: normal;
}

@font-face {
    font-family: jakarta Fallback;
    src: local("Arial");
    ascent-override: 98.16%;
    descent-override: 20.99%;
    line-gap-override: 0%;
    size-adjust: 105.75%;
}

.__className_2d308b {
    font-family:
        jakarta,
        jakarta Fallback;
    font-style: normal;
}

.__variable_2d308b {
    --font-jakarta: "jakarta", "jakarta Fallback";
}

@font-face {
    font-family: manrope;
    src: url(/fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 400 800;
    font-style: normal;
}

@font-face {
    font-family: manrope Fallback;
    src: local("Arial");
    ascent-override: 106.45%;
    descent-override: 29.96%;
    line-gap-override: 0%;
    size-adjust: 100.14%;
}

.__className_91203e {
    font-family:
        manrope,
        manrope Fallback;
    font-style: normal;
}

.__variable_91203e {
    --font-manrope: "manrope", "manrope Fallback";
}

@font-face {
    font-family: mono;
    src: url(/fonts/558ca1a6aa3cb55e-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 400 500;
    font-style: normal;
}

@font-face {
    font-family: mono Fallback;
    src: local("Arial");
    ascent-override: 77.57%;
    descent-override: 22.82%;
    line-gap-override: 0%;
    size-adjust: 131.49%;
}

.__className_51302e {
    font-family:
        mono,
        mono Fallback;
    font-style: normal;
}

.__variable_51302e {
    --font-mono: "mono", "mono Fallback";
}