:root,
[data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, #ffffff26, #fff0);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: #212529bf;
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: #21252980;
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: #0000002d;
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 .5rem 1rem #00000026;
    --bs-box-shadow-sm: 0 .125rem .25rem #00000013;
    --bs-box-shadow-lg: 0 1rem 3rem #0000002d;
    --bs-box-shadow-inset: inset 0 1px 2px #00000013;
    --bs-focus-ring-width: .25rem;
    --bs-focus-ring-opacity: .25;
    --bs-focus-ring-color: #0d6efd40;
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545
}

[data-bs-theme=dark] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #dee2e6bf;
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: #dee2e680;
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: #ffffff26;
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f
}

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

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: #0000;
    margin: 0
}

hr {
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
    margin: 1rem 0
}

h6,
h5,
h4,
h3,
h2,
h1 {
    color: var(--bs-heading-color);
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}

h1 {
    font-size: calc(1.375rem + 1.5vw)
}

@media (min-width:1200px) {
    h1 {
        font-size: 2.5rem
    }
}

h2 {
    font-size: calc(1.325rem + .9vw)
}

@media (min-width:1200px) {
    h2 {
        font-size: 2rem
    }
}

h3 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width:1200px) {
    h3 {
        font-size: 1.75rem
    }
}

h4 {
    font-size: calc(1.275rem + .3vw)
}

@media (min-width:1200px) {
    h4 {
        font-size: 1.5rem
    }
}

h5 {
    font-size: 1.25rem
}

h6 {
    font-size: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

abbr[title] {
    cursor: help;
    text-decoration-skip-ink: none;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

address {
    font-style: normal;
    line-height: inherit;
    margin-bottom: 1rem
}

ol,
ul {
    padding-left: 2rem
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: .875em
}

mark {
    color: var(--bs-highlight-color);
    background-color: var(--bs-highlight-bg);
    padding: .1875em
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline
}

a:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb)
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

pre,
code,
kbd,
samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: .875em;
    display: block;
    overflow: auto
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal
}

code {
    color: var(--bs-code-color);
    word-wrap: break-word;
    font-size: .875em
}

a>code {
    color: inherit
}

kbd {
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    border-radius: .25rem;
    padding: .1875rem .375rem;
    font-size: .875em
}

kbd kbd {
    padding: 0;
    font-size: 1em
}

figure {
    margin: 0 0 1rem
}

img,
svg {
    vertical-align: middle
}

table {
    caption-side: bottom;
    border-collapse: collapse
}

caption {
    color: var(--bs-secondary-color);
    text-align: left;
    padding-top: .5rem;
    padding-bottom: .5rem
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}

label {
    display: inline-block
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

input,
button,
select,
optgroup,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0
}

button,
select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

select:disabled {
    opacity: 1
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
    cursor: pointer
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

textarea {
    resize: vertical
}

fieldset {
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0
}

legend {
    float: left;
    width: 100%;
    line-height: inherit;
    margin-bottom: .5rem;
    padding: 0;
    font-size: calc(1.275rem + .3vw)
}

@media (min-width:1200px) {
    legend {
        font-size: 1.5rem
    }
}

legend+* {
    clear: left
}

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

::-webkit-datetime-edit-text {
    padding: 0
}

::-webkit-datetime-edit-minute {
    padding: 0
}

::-webkit-datetime-edit-hour-field {
    padding: 0
}

::-webkit-datetime-edit-day-field {
    padding: 0
}

::-webkit-datetime-edit-month-field {
    padding: 0
}

::-webkit-datetime-edit-year-field {
    padding: 0
}

::-webkit-inner-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button {
    cursor: pointer;
    filter: grayscale()
}

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

::-webkit-color-swatch-wrapper {
    padding: 0
}

::file-selector-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

iframe {
    border: 0
}

summary {
    cursor: pointer;
    display: list-item
}

progress {
    vertical-align: baseline
}

[hidden] {
    display: none !important
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-left: auto;
    margin-right: auto
}

@media (min-width:576px) {

    .container-sm,
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {

    .container-md,
    .container-sm,
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {

    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px
    }
}

@media (min-width:1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px
    }
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important
}

.visually-hidden *,
.visually-hidden-focusable:not(:focus):not(:focus-within) * {
    overflow: hidden !important
}

:root {
    --fp-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fp-font-display: "Bricolage Grotesque", var(--fp-font);
    --fp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --fp-ink: #0e1015;
    --fp-ink-soft: #2a2e38;
    --fp-muted: #61687a;
    --fp-bg: #fff;
    --fp-bg-alt: #f5f6fb;
    --fp-surface: #fff;
    --fp-surface-2: #fff;
    --fp-hover: #0e10150d;
    --fp-border: #0e101517;
    --fp-border-strong: #0e101524;
    --fp-accent: #153deb;
    --fp-accent-ink: #0f2fb8;
    --fp-grad: linear-gradient(120deg, #607bf1 0%, #153deb 100%);
    --fp-grad-soft: linear-gradient(120deg, #607bf124, #153deb24);
    --fp-on-grad: #fff;
    --fp-brand-shadow: #153deb80;
    --fp-brand-ring: #153deb24;
    --fp-success: #16a34a;
    --fp-selection: #153deb2e;
    --fp-glass: #fffffff5;
    --fp-glass-scrolled: #fff;
    --fp-glass-solid: #fffffffa;
    --fp-hero-img: none;
    --fp-hero-cream: 240, 243, 254;
    --fp-dots: #0e101529;
    --fp-dots-pitch: 22px;
    --fp-navy: #0a1230;
    --fp-navy-2: #101c4f;
    --fp-navy-ink: #fff;
    --fp-navy-muted: #ffffffb8;
    --fp-navy-border: #ffffff1f;
    --fp-navy-dots: #ffffff24;
    --fp-cta-bg: linear-gradient(120deg, #0a1230 0%, #0e1a45 50%, #122158 100%);
    --fp-cta-ink: #fff;
    --fp-cta-muted: #ffffffc7;
    --fp-cta-glow-a: #607bf166;
    --fp-cta-glow-b: #153deb80;
    --fp-cta-btn-bg: #fff;
    --fp-cta-btn-ink: var(--fp-ink);
    --fp-shadow-sm: 0 1px 2px #0e10150a, 0 4px 14px #0e10150d;
    --fp-shadow-md: 0 10px 30px -10px #0e10152e;
    --fp-shadow-lg: 0 30px 70px -25px #281e3c4d;
    --fp-shadow-frame: 0 1px 0 #fff9 inset, 0 24px 60px -20px #0e101547, 0 2px 6px #0e10150f;
    --fp-radius: 16px;
    --fp-radius-md: 12px;
    --fp-radius-lg: 24px;
    --fp-optical-lift: 1px;
    --fp-header-top: 10px;
    --fp-header-ease: .32s cubic-bezier(.3, .8, .3, 1);
    --fp-header-h: calc(5.25rem + var(--fp-header-top))
}

* {
    -webkit-font-smoothing: antialiased
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--fp-font);
    color: var(--fp-ink);
    background: var(--fp-bg);
    letter-spacing: -.011em;
    overflow-x: hidden
}

::selection {
    background: var(--fp-selection)
}

:focus-visible {
    outline: 2px solid var(--fp-accent);
    outline-offset: 3px;
    border-radius: 4px
}

main {
    padding-top: var(--fp-header-h)
}

main>.section:first-child {
    padding-top: clamp(2.33rem, 4.67vw, 4rem)
}

main>.section.auth:first-child {
    padding-top: calc(clamp(2.33rem, 4.67vw, 4rem) - 15px)
}

:where(section[id]) {
    scroll-margin-top: calc(var(--fp-header-h) + 1rem)
}

body.has-subnav :where(section[id]) {
    scroll-margin-top: calc(var(--fp-header-h) - var(--fp-header-top) + 3.9rem)
}

body.has-subnav :where(section.section--flush-top[id]) {
    scroll-margin-top: calc(var(--fp-header-h) - var(--fp-header-top) + 6.4rem)
}

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

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

.text-grad {
    background: var(--fp-grad);
    -webkit-text-fill-color: transparent;
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.display {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    text-wrap: balance;
    font-weight: 700;
    line-height: 1.05
}

.kicker {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-muted);
    font-size: .74rem;
    font-weight: 700;
    display: inline-block
}

.tag {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fp-accent);
    background: #153deb17;
    background: color-mix(in srgb, var(--fp-accent) 9%, transparent);
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    padding: .15rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.4;
    display: inline-flex
}

.tag--neutral {
    background: var(--fp-hover);
    color: var(--fp-muted)
}

.tag--dark {
    background: var(--fp-ink);
    color: var(--fp-bg)
}

.btn-grad,
.btn-ghost,
.btn-outline-ink,
.btn-light-lg,
.btn-success {
    padding: calc(.7rem - var(--fp-optical-lift)) 1.25rem calc(.7rem + var(--fp-optical-lift));
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, background .18s, color .18s;
    display: inline-flex
}

.btn-grad svg,
.btn-ghost svg,
.btn-outline-ink svg,
.btn-light-lg svg {
    flex: none;
    font-size: 1em
}

.btn-grad {
    background: var(--fp-grad);
    color: var(--fp-on-grad);
    box-shadow: 0 8px 22px -8px var(--fp-brand-shadow);
    background-size: 140% 140%
}

.btn-success {
    background: var(--fp-success);
    color: var(--fp-on-grad);
    box-shadow: 0 8px 22px -8px var(--fp-brand-shadow);
    background-size: 140% 140%
}

.btn-grad:hover {
    color: var(--fp-on-grad);
    box-shadow: 0 14px 30px -8px var(--fp-brand-shadow);
    background-position: 100%;
    transform: translateY(-2px)
}

.btn-grad--lg {
    padding: calc(.95rem - var(--fp-optical-lift)) 1.7rem calc(.95rem + var(--fp-optical-lift));
    font-size: 1.02rem
}

.btn-grad[disabled],
.btn-grad[aria-disabled=true] {
    background: var(--fp-hover);
    color: var(--fp-muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none
}

.btn-ghost {
    color: var(--fp-ink);
    background: 0 0
}

.btn-ghost:hover {
    color: var(--fp-ink);
    background: var(--fp-hover)
}

.btn-outline-ink {
    background: var(--fp-surface);
    color: var(--fp-ink);
    box-shadow: inset 0 0 0 1px var(--fp-border-strong), var(--fp-shadow-sm);
    border: 0
}

.btn-outline-ink:hover {
    color: var(--fp-ink);
    box-shadow: inset 0 0 0 1px var(--fp-border-strong), var(--fp-shadow-md);
    transform: translateY(-2px)
}

.btn-outline-ink--lg {
    padding: calc(.95rem - var(--fp-optical-lift)) 1.7rem calc(.95rem + var(--fp-optical-lift));
    font-size: 1.02rem
}

.btn-light-lg {
    background: var(--fp-cta-btn-bg);
    color: var(--fp-cta-btn-ink);
    padding: calc(.95rem - var(--fp-optical-lift)) 1.8rem calc(.95rem + var(--fp-optical-lift));
    font-size: 1.02rem;
    box-shadow: 0 12px 30px -10px #0006
}

.btn-light-lg:hover {
    color: var(--fp-cta-btn-ink);
    transform: translateY(-2px)
}

.btn-link {
    color: var(--fp-accent);
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex
}

.btn-link svg {
    transition: transform .18s
}

.btn-link:hover {
    color: var(--fp-accent-ink)
}

.btn-link:hover svg {
    transform: translate(3px)
}

.btn-row {
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    display: flex
}

.btn-row--center {
    justify-content: center
}

.fineprint {
    color: var(--fp-muted);
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    font-size: .85rem;
    list-style: none;
    display: flex
}

.fineprint li {
    align-items: center;
    gap: .4rem;
    display: inline-flex
}

.fineprint svg {
    color: var(--fp-success)
}

.fineprint--center {
    justify-content: center
}

.pill-brand {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    color: var(--fp-ink);
    align-items: center;
    gap: .3rem;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex
}

.pill-brand__mark {
    object-fit: contain;
    width: 24px;
    height: 24px
}

.site-header {
    top: var(--fp-header-top);
    z-index: 1030;
    transition: top var(--fp-header-ease), padding var(--fp-header-ease), background var(--fp-header-ease), box-shadow var(--fp-header-ease);
    padding: .85rem 0;
    position: fixed;
    left: 0;
    right: 0
}

.site-header .container {
    transition: padding var(--fp-header-ease);
    padding-inline: clamp(1rem, 4vw, 1rem)
}

.site-header__inner {
    width: 100%;
    transition: width var(--fp-header-ease);
    margin-inline: auto
}

@media (min-width:1200px) {
    .site-header__inner {
        width: 75%
    }
}

.site-header.is-scrolled {
    background: var(--fp-glass-scrolled);
    box-shadow: 0 1px 0 var(--fp-border), var(--fp-shadow-md);
    padding: 0;
    top: 0
}

.site-header.is-scrolled .site-header__inner {
    width: 100%
}

.site-header.is-scrolled .container {
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5)
}

.site-header.is-scrolled .pill-nav {
    box-shadow: none;
    background: 0 0;
    border-color: #0000;
    border-radius: 0;
    padding-inline: 0
}

.pill-nav {
    background: var(--fp-glass);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-sm);
    transition: box-shadow var(--fp-header-ease), background var(--fp-header-ease), border-radius var(--fp-header-ease), border-color var(--fp-header-ease), padding var(--fp-header-ease);
    border-radius: 999px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .5rem .55rem .5rem 1.1rem;
    display: grid;
    position: relative
}

.pill-nav__links {
    justify-content: center;
    align-items: center;
    gap: .25rem;
    display: flex
}

.pill-nav__links>a,
.pill-nav__links .pill-nav__drop-btn {
    color: var(--fp-ink-soft);
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s
}

.pill-nav__links>a:hover,
.pill-nav__links .pill-nav__drop-btn:hover,
.pill-nav__links>a[aria-current=page],
.pill-nav__links .pill-nav__drop-btn[aria-current=page] {
    color: var(--fp-accent)
}

.pill-nav__links .pill-nav__login-mobile {
    display: none
}

.pill-nav__drop {
    position: relative
}

.pill-nav__drop.is-current>.pill-nav__drop-btn,
.pill-nav__drop.is-open>.pill-nav__drop-btn {
    color: var(--fp-accent)
}

.pill-nav__drop-btn {
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: .3rem;
    display: inline-flex
}

.pill-nav__drop-caret {
    width: .8em;
    height: .8em;
    transition: transform .2s
}

.is-open>.pill-nav__drop-btn .pill-nav__drop-caret {
    transform: rotate(180deg)
}

.pill-nav__menu {
    z-index: 5;
    border-radius: var(--fp-radius);
    background: var(--fp-glass-solid);
    border: 1px solid var(--fp-border);
    min-width: 180px;
    box-shadow: var(--fp-shadow-md);
    opacity: 0;
    visibility: hidden;
    padding: .45rem;
    transition: opacity .18s, transform .18s, visibility .18s;
    position: absolute;
    top: calc(100% + .5rem);
    left: calc(50% + 10px);
    transform: translate(-50%, -6px)
}

.pill-nav__menu:before {
    content: "";
    height: .6rem;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0
}

.pill-nav__menu a {
    border-radius: calc(var(--fp-radius) - 6px);
    color: var(--fp-ink-soft);
    white-space: nowrap;
    padding: .55rem .8rem;
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: block
}

.pill-nav__menu a:hover {
    background: var(--fp-hover);
    color: var(--fp-ink)
}

.pill-nav__menu a[aria-current=page] {
    color: var(--fp-accent)
}

.pill-nav__drop.is-open>.pill-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%)
}

.pill-nav__cta {
    justify-content: flex-end;
    align-items: center;
    gap: .25rem;
    display: flex
}

.pill-nav__cta .btn-ghost,
.pill-nav__cta .btn-grad {
    font-size: .93rem;
    font-weight: 500
}

.pill-nav__start-icon {
    display: none
}

.pill-nav__toggle {
    background: var(--fp-hover);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    display: none
}

.pill-nav__toggle span {
    background: var(--fp-ink);
    border-radius: 2px;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    transition: transform .25s, opacity .2s;
    display: block
}

@media (min-width:1024px) and (max-width:1199px) {
    .pill-nav {
        justify-content: space-between;
        display: flex
    }

    .pill-nav__links {
        flex: 1;
        gap: 0
    }

    .pill-nav__links>a,
    .pill-nav__links .pill-nav__drop-btn {
        padding-inline: .6rem
    }
}

@media (max-width:1023px) {
    .pill-nav {
        justify-content: space-between;
        gap: .5rem;
        padding: .5rem .55rem .5rem 1rem;
        display: flex
    }

    .pill-nav__links {
        border-radius: var(--fp-radius);
        background: var(--fp-glass-solid);
        border: 1px solid var(--fp-border);
        box-shadow: var(--fp-shadow-md);
        opacity: 0;
        visibility: hidden;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding: .6rem;
        transition: opacity .2s, transform .2s, visibility .2s;
        position: absolute;
        top: calc(100% + .6rem);
        left: 0;
        right: 0;
        transform: translateY(-8px)
    }

    .pill-nav__links>a,
    .pill-nav__links .pill-nav__drop-btn {
        padding: .7rem .9rem;
        font-size: .98rem
    }

    .pill-nav__links .pill-nav__login-mobile {
        border-top: 1px solid var(--fp-border);
        border-radius: 0;
        margin-top: .3rem;
        padding-top: .9rem;
        display: block
    }

    .pill-nav.is-open .pill-nav__links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .pill-nav__drop-btn {
        text-align: left;
        justify-content: space-between;
        width: 100%
    }

    .pill-nav__menu {
        min-width: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        background: 0 0;
        border: 0;
        border-radius: 0;
        padding: 0 0 .3rem;
        transition: none;
        display: none;
        position: static;
        transform: none
    }

    .pill-nav__menu:before {
        content: none
    }

    .pill-nav__menu a {
        white-space: normal;
        padding: .6rem .9rem .6rem 1.7rem;
        font-size: .95rem
    }

    .pill-nav__drop.is-open>.pill-nav__menu {
        display: block;
        transform: none
    }

    .pill-nav__toggle {
        display: flex
    }

    .pill-nav__cta .btn-ghost {
        display: none
    }

    .pill-nav__cta {
        margin-left: auto
    }

    .pill-nav.is-open .pill-nav__toggle span:first-child {
        transform: translateY(7px)rotate(45deg)
    }

    .pill-nav.is-open .pill-nav__toggle span:nth-child(2) {
        opacity: 0
    }

    .pill-nav.is-open .pill-nav__toggle span:nth-child(3) {
        transform: translateY(-7px)rotate(-45deg)
    }
}

@media (max-width:480px) {
    .pill-brand {
        font-size: 1.05rem
    }

    .pill-nav__cta .pill-nav__start {
        justify-content: center;
        gap: 0;
        width: 42px;
        height: 42px;
        padding: 0;
        font-size: 1.15rem
    }

    .pill-nav__start-label {
        clip-path: inset(50%);
        white-space: nowrap;
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden
    }

    .pill-nav__start-icon {
        display: block
    }
}

.site-footer {
    border-top: 1px solid var(--fp-border);
    background: var(--fp-bg-alt);
    padding: clamp(2.5rem, 5vw, 4rem) 0 2rem
}

.site-footer__top {
    border-bottom: 1px solid var(--fp-border);
    grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(0, 1fr));
    gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
    padding-bottom: 2.5rem;
    display: grid
}

.site-footer__brand {
    max-width: 300px
}

.site-footer__brand p {
    color: var(--fp-muted);
    margin: 1rem 0 0;
    font-size: .92rem;
    line-height: 1.6
}

.site-footer__col {
    flex-direction: column;
    gap: .6rem;
    display: flex
}

.site-footer__col h5 {
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fp-ink);
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 700
}

.site-footer__col a {
    color: var(--fp-muted);
    font-size: .92rem;
    text-decoration: none;
    transition: color .15s
}

.site-footer__col a:hover {
    color: var(--fp-ink)
}

.site-footer__col--wide {
    grid-column: span 2
}

.site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem clamp(1.5rem, 4vw, 3.5rem);
    display: grid
}

.site-footer__bottom {
    color: var(--fp-muted);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-top: 1.75rem;
    font-size: .85rem;
    display: flex
}

.site-footer__bottom a {
    color: var(--fp-muted);
    text-decoration: none
}

.site-footer__bottom a:hover {
    color: var(--fp-ink)
}

.site-footer__bottom nav {
    flex-wrap: wrap;
    gap: 1.25rem;
    display: flex
}

@media (max-width:960px) {
    .site-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .site-footer__brand {
        grid-column: 1/-1
    }
}

@media (max-width:480px) {
    .site-footer__top {
        grid-template-columns: 1fr
    }

    .site-footer__col--wide {
        grid-column: 1/-1
    }

    .site-footer__bottom {
        text-align: center;
        flex-direction: column;
        align-items: center
    }

    .site-footer__bottom nav {
        justify-content: center
    }
}

.backtotop {
    z-index: 1040;
    border: 1px solid var(--fp-border);
    background: var(--fp-glass-solid);
    -webkit-backdrop-filter: blur(20px)saturate(180%);
    backdrop-filter: blur(20px)saturate(180%);
    width: 46px;
    height: 46px;
    color: var(--fp-ink);
    cursor: pointer;
    box-shadow: var(--fp-shadow-md);
    opacity: 0;
    visibility: hidden;
    border-radius: 50%;
    place-items: center;
    font-size: 18px;
    transition: opacity .25s, transform .25s, visibility .25s, box-shadow .2s;
    display: grid;
    position: fixed;
    bottom: 16px;
    right: 16px;
    transform: translateY(10px)scale(.9)
}

.backtotop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none
}

.backtotop:hover {
    box-shadow: var(--fp-shadow-lg);
    transform: translateY(-2px)
}

.section {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    overflow-x: clip
}

.section--alt {
    background: var(--fp-bg-alt)
}

.section--tight {
    padding: clamp(2rem, 4vw, 3.5rem) 0
}

.section--flush-top {
    padding-top: 0
}

.section--flush-bottom {
    padding-bottom: 0
}

.section--dark {
    background: var(--fp-navy);
    color: var(--fp-navy-ink)
}

.section--dark .section__title {
    color: var(--fp-navy-ink)
}

.section--dark .section__sub {
    color: var(--fp-navy-muted)
}

.section--dark .eyebrow {
    color: #b9c6ff;
    background: #ffffff14;
    border-color: #ffffff29
}

.section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem)
}

.section__head--left {
    text-align: left;
    margin-inline: 0
}

.section__head--wide {
    max-width: 860px
}

.section__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    text-wrap: balance;
    margin: .85rem 0 0;
    font-size: clamp(1.9rem, 3.8vw, 2.85rem);
    font-weight: 700;
    line-height: 1.06
}

.section__sub {
    color: var(--fp-muted);
    text-wrap: pretty;
    margin: 1rem 0 0;
    font-size: 1.1rem;
    line-height: 1.6
}

.section__cta {
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    display: flex
}

.eyebrow {
    background: #153deb17;
    background: color-mix(in srgb, var(--fp-accent) 9%, transparent);
    border: 1px solid #153deb29;
    border: 1px solid color-mix(in srgb, var(--fp-accent) 16%, transparent);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp-accent);
    border-radius: 999px;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    font-size: .76rem;
    font-weight: 700;
    display: inline-flex
}

.eyebrow svg {
    font-size: .9rem
}

.section__title--left {
    text-align: left;
    margin: .4rem 0 0
}

.check-list {
    flex-direction: column;
    gap: .7rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.check-list li {
    color: var(--fp-ink-soft);
    align-items: flex-start;
    gap: .65rem;
    font-size: .98rem;
    line-height: 1.5;
    display: flex
}

.check-list li svg {
    color: var(--fp-accent);
    flex: none;
    margin-top: .2rem;
    font-size: 1.05rem
}

.dots-bg {
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--fp-dots) 1px, transparent 1.2px);
    background-size: var(--fp-dots-pitch) var(--fp-dots-pitch);
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, #0000 100%);
    mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, #0000 100%)
}

.dots-bg--dark {
    background-image: radial-gradient(var(--fp-navy-dots) 1px, transparent 1.2px)
}

.fp-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    display: grid
}

.fp-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    display: grid
}

.fp-field {
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    min-width: 0;
    display: grid
}

.fp-field label {
    color: var(--fp-ink);
    font-size: .84rem;
    font-weight: 600
}

.fp-field__optional {
    color: var(--fp-muted);
    margin-left: .35rem;
    font-size: .74rem;
    font-weight: 500
}

.fp-field.is-invalid .fp-control {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px #dc26261f
}

.fp-field__label-row {
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    display: flex
}

.fp-field__label-link {
    color: var(--fp-muted);
    font-size: .79rem;
    font-weight: 500;
    text-decoration: none
}

.fp-field__label-link:hover,
.fp-field__label-link:focus-visible {
    color: var(--fp-accent);
    text-decoration: underline
}

.fp-notice {
    border: 1px solid color-mix(in srgb, var(--fp-accent) 22%, transparent);
    background: color-mix(in srgb, var(--fp-accent) 6%, transparent);
    border-radius: 12px;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .25rem;
    padding: .85rem 1rem;
    display: flex
}

.fp-notice>svg {
    color: var(--fp-accent);
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: 1.05rem
}

.fp-notice p {
    color: var(--fp-ink-soft);
    margin: 0;
    font-size: .86rem;
    line-height: 1.5
}

.fp-notice--success {
    border-color: color-mix(in srgb, var(--fp-success) 30%, transparent);
    background: color-mix(in srgb, var(--fp-success) 8%, transparent)
}

.fp-notice--success>svg {
    color: var(--fp-success)
}

.fp-notice--error {
    background: #dc26260f;
    border-color: #dc262647
}

.fp-notice--error>svg {
    color: #dc2626
}

.fp-control {
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-bg-alt);
    border-radius: 12px;
    align-items: center;
    gap: .6rem;
    padding: 0 .95rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    display: flex;
    position: relative
}

.fp-control>svg {
    color: var(--fp-muted);
    flex-shrink: 0;
    font-size: 1.1rem
}

.fp-control input,
.fp-control select,
.fp-control textarea {
    width: 0;
    min-width: 0;
    color: var(--fp-ink);
    font: inherit;
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1 1 0;
    padding: .78rem 0;
    font-size: .96rem
}

.fp-control input::placeholder,
.fp-control select::placeholder,
.fp-control textarea::placeholder {
    color: color-mix(in srgb, var(--fp-muted) 65%, transparent)
}

.fp-control select {
    appearance: none;
    cursor: pointer;
    padding-right: 1.5rem
}

.fp-control--area {
    align-items: flex-start
}

.fp-control--area>svg {
    margin-top: .9rem
}

.fp-control--area textarea {
    resize: vertical;
    min-height: 9rem;
    line-height: 1.55
}

.fp-control--select:after {
    content: "";
    border-right: 1.5px solid var(--fp-muted);
    border-bottom: 1.5px solid var(--fp-muted);
    pointer-events: none;
    width: .5rem;
    height: .5rem;
    position: absolute;
    top: 50%;
    right: .95rem;
    transform: translateY(-70%)rotate(45deg)
}

.fp-control:focus-within {
    background: var(--fp-surface);
    border-color: var(--fp-accent);
    box-shadow: 0 0 0 4px var(--fp-brand-ring)
}

.fp-control:focus-within>svg {
    color: var(--fp-accent)
}

.fp-eye {
    color: var(--fp-muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    margin-right: -.35rem;
    padding: .25rem;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex
}

.fp-eye:hover {
    color: var(--fp-ink);
    background: var(--fp-hover)
}

.fp-eye .fp-eye-hide,
.fp-eye.is-visible .fp-eye-show {
    display: none
}

.fp-eye.is-visible .fp-eye-hide {
    display: block
}

.fp-error {
    color: #dc2626;
    margin: 0;
    font-size: .8rem
}

.fp-check {
    color: var(--fp-ink-soft);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-self: flex-start;
    align-items: center;
    gap: .55rem;
    margin: -.2rem 0 0;
    font-size: .88rem;
    font-weight: 500;
    display: inline-flex
}

.fp-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--fp-accent);
    cursor: pointer;
    margin: 0
}

.fp-swap {
    margin-top: .9rem;
    display: grid
}

.fp-swap>* {
    grid-area: 1/1;
    align-self: center;
    margin: 0;
    transition: opacity .2s
}

.fp-swap:has([data-turnstile-hint]:not([hidden]))>:not([data-turnstile-hint]) {
    visibility: hidden;
    opacity: 0
}

.fp-verifying {
    color: var(--fp-muted);
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin: -.25rem 0 0;
    font-size: .8rem;
    display: flex
}

.fp-verifying svg {
    color: var(--fp-accent)
}

.fp-verifying[hidden],
.cf-turnstile:empty {
    display: none
}

.fp-hp {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    left: -9999px !important
}

@media (max-width:480px) {
    .fp-form__row {
        grid-template-columns: minmax(0, 1fr)
    }
}

.template-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    display: grid
}

.template-more {
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    display: flex
}

.template-more.is-loading a {
    opacity: .6;
    pointer-events: none
}

.template-card.is-new {
    animation: .35s both template-card-in
}

@keyframes template-card-in {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .template-card.is-new {
        animation: none
    }
}

.template-notice {
    border-radius: var(--fp-radius-md);
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border);
    color: var(--fp-ink-soft);
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    font-size: .92rem;
    display: flex
}

.template-notice svg {
    color: var(--fp-accent);
    flex: none
}

.template-card {
    color: inherit;
    flex-direction: column;
    display: flex;
    position: relative
}

.template-card__stage {
    position: relative
}

.template-card__shot {
    aspect-ratio: 4/3;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--fp-radius-md) var(--fp-radius-md) 0 0;
    box-shadow: var(--fp-shadow-sm);
    background: #ffffff47;
    border: 1px solid #0e10151f;
    border-bottom: 0;
    padding: 4px 4px 0;
    transition: box-shadow .22s;
    display: block;
    position: relative;
    overflow: hidden
}

.template-card__shot:after {
    content: "";
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: #fff6;
    transition: opacity .22s;
    position: absolute;
    inset: 0
}

.template-card__shot:hover:after,
.template-card__shot:focus-within:after {
    opacity: 1
}

.template-card__stage:has(.template-card__phone) .template-card__shot {
    width: 88%
}

.template-card:hover .template-card__shot {
    box-shadow: var(--fp-shadow-lg)
}

.template-card__shot-link {
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: block
}

.template-card__shot-link img {
    object-fit: cover;
    object-position: top center;
    border-radius: calc(var(--fp-radius-md) - 4px) calc(var(--fp-radius-md) - 4px) 0 0;
    background: var(--fp-bg-alt);
    width: 100%;
    height: 100%;
    display: block
}

.template-card__phone {
    aspect-ratio: 1/2;
    z-index: 3;
    border-radius: var(--fp-radius-md) var(--fp-radius-md) 0 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff47;
    border: 1px solid #0e10151f;
    border-bottom: 0;
    width: 24%;
    padding: 4px 4px 0;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    box-shadow: 0 18px 40px -14px #0e101580
}

.template-card__phone img {
    object-fit: cover;
    object-position: top;
    border-radius: calc(var(--fp-radius-md) - 4px) calc(var(--fp-radius-md) - 4px) 0 0;
    width: 100%;
    height: 100%;
    display: block;
    transform: none
}

.template-card__preview {
    z-index: 2;
    padding: calc(.65rem - var(--fp-optical-lift)) 1.15rem calc(.65rem + var(--fp-optical-lift));
    background: var(--fp-grad);
    color: var(--fp-on-grad);
    white-space: nowrap;
    box-shadow: 0 8px 22px -8px var(--fp-brand-shadow);
    opacity: 0;
    border-radius: 999px;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s, transform .2s, box-shadow .18s;
    display: inline-flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)scale(.94)
}

.template-card__preview svg {
    font-size: 1.05em
}

.template-card__preview:hover,
.template-card__preview:focus-visible {
    box-shadow: 0 14px 30px -8px var(--fp-brand-shadow)
}

.template-card__shot:hover .template-card__preview,
.template-card__preview:focus-visible,
.template-card__shot-link:focus-visible+.template-card__preview {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1)
}

.template-card__meta {
    z-index: 4;
    background: var(--fp-surface);
    border-radius: 0 0 var(--fp-radius-md) var(--fp-radius-md);
    box-shadow: var(--fp-shadow-sm);
    border: 1px solid #0e10151f;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding: calc(.9rem + 4px) 1.1rem .9rem;
    display: flex;
    position: relative
}

.template-card__id {
    min-width: 0
}

.template-card__id h3 {
    letter-spacing: -.02em;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700
}

.template-card__id h3 a {
    color: inherit;
    text-decoration: none
}

.template-card__id h3 a:hover {
    color: var(--fp-accent)
}

.template-card__id span {
    color: var(--fp-muted);
    margin-top: .15rem;
    font-size: .8rem;
    font-style: italic;
    display: block
}

.template-card__start {
    padding: calc(.45rem - var(--fp-optical-lift)) .8rem calc(.45rem + var(--fp-optical-lift));
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    color: var(--fp-ink);
    white-space: nowrap;
    border-radius: 999px;
    flex: none;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s;
    display: inline-flex
}

.template-card__start:hover,
.template-card__start:focus-visible {
    background: var(--fp-grad);
    color: var(--fp-on-grad);
    box-shadow: 0 8px 22px -8px var(--fp-brand-shadow);
    border-color: #0000
}

.template-card__arrow {
    color: var(--fp-accent);
    transition: transform .2s
}

.template-card__start:hover .template-card__arrow,
.template-card__start:focus-visible .template-card__arrow {
    color: inherit;
    transform: translate(3px)
}

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

@media (max-width:560px) {
    .template-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-inline: auto
    }

    .template-grid--home .template-card:nth-child(n+7) {
        display: none
    }
}

.prose {
    color: var(--fp-ink-soft);
    font-size: 1.02rem;
    line-height: 1.7
}

.prose>*+* {
    margin-top: 1.1em
}

:where(.prose) h2,
:where(.prose) h3,
:where(.prose) h4 {
    font-family: var(--fp-font-display);
    color: var(--fp-ink);
    letter-spacing: -.02em;
    scroll-margin-top: calc(var(--fp-header-h) + 1.5rem);
    line-height: 1.25
}

:where(.prose) h2 {
    margin-top: 2.2em;
    padding-top: .2em;
    font-size: 1.45rem;
    font-weight: 700
}

:where(.prose) h3 {
    margin-top: 1.8em;
    font-size: 1.15rem;
    font-weight: 700
}

:where(.prose) h4 {
    margin-top: 1.5em;
    font-size: 1rem;
    font-weight: 700
}

:where(.prose) h2+*,
:where(.prose) h3+*,
:where(.prose) h4+* {
    margin-top: .6em
}

:where(.prose) p {
    margin-top: 1.1em
}

:where(.prose) strong {
    color: var(--fp-ink);
    font-weight: 600
}

:where(.prose) a {
    color: var(--fp-accent);
    text-underline-offset: .15em;
    text-decoration: underline;
    text-decoration-thickness: 1px
}

:where(.prose) a:hover {
    text-decoration-thickness: 2px
}

:where(.prose) ul,
:where(.prose) ol {
    padding-left: 1.4rem
}

:where(.prose) ul li,
:where(.prose) ol li {
    margin-top: .4em;
    padding-left: .15rem
}

:where(.prose) ul li::marker {
    color: var(--fp-muted)
}

:where(.prose) ol li::marker {
    color: var(--fp-muted)
}

:where(.prose) ul ul,
:where(.prose) ul ol,
:where(.prose) ol ul,
:where(.prose) ol ol {
    margin-top: .4em
}

:where(.prose) ol>li::marker {
    color: var(--fp-accent);
    font-weight: 600
}

:where(.prose) code {
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border);
    color: var(--fp-ink);
    word-break: break-word;
    border-radius: 6px;
    padding: .12em .4em;
    font-size: .88em
}

:where(.prose) pre {
    border-radius: var(--fp-radius);
    color: #e6e8ef;
    background: #0e1015;
    padding: 1rem 1.15rem;
    font-size: .88rem;
    line-height: 1.55;
    overflow-x: auto
}

:where(.prose) pre code {
    color: inherit;
    font-size: inherit;
    background: 0 0;
    border: 0;
    padding: 0
}

:where(.prose) kbd {
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    font: 600 .82em var(--fp-font);
    color: var(--fp-ink);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: .1em .45em;
    display: inline-block
}

:where(.prose) blockquote {
    border-radius: var(--fp-radius);
    border: 1px solid color-mix(in srgb, var(--fp-accent) 22%, transparent);
    border-left: 4px solid var(--fp-accent);
    background: color-mix(in srgb, var(--fp-accent) 6%, transparent);
    color: var(--fp-ink-soft);
    margin: 1.4em 0;
    padding: .9rem 1.1rem .9rem 1.25rem
}

:where(.prose) blockquote p {
    margin: 0
}

:where(.prose) blockquote p+p {
    margin-top: .6em
}

:where(.prose) blockquote>p:first-child>strong:first-child {
    color: var(--fp-accent)
}

:where(.prose) .table-wrap {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    overflow-x: auto
}

:where(.prose) table {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
    font-size: .93rem;
    line-height: 1.5
}

:where(.prose) table th,
:where(.prose) table td {
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--fp-border);
    padding: .6rem .8rem
}

:where(.prose) table th {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-ink);
    background: var(--fp-bg-alt);
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 700
}

:where(.prose) table tbody tr:last-child td {
    border-bottom: 0
}

:where(.prose) hr {
    border: 0;
    border-top: 1px solid var(--fp-border);
    margin: 2.2em 0
}

:where(.prose) img {
    max-width: 100%;
    height: auto
}

:where(.prose) .help-figure {
    margin: 1.6em 0
}

:where(.prose) .help-figure .lightbox-link {
    display: block
}

:where(.prose) .help-figure img {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    width: 100%;
    box-shadow: var(--fp-shadow-sm);
    background: var(--fp-bg-alt);
    display: block
}

:where(.prose) .help-figure figcaption {
    color: var(--fp-muted);
    text-align: center;
    margin-top: .6rem;
    font-size: .84rem
}

:where(.prose) details {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    background: var(--fp-surface);
    padding: .8rem 1rem
}

:where(.prose) details summary {
    cursor: pointer;
    color: var(--fp-ink);
    font-weight: 600
}

:where(.prose) details[open] summary {
    margin-bottom: .6rem
}

.crumbs {
    margin-bottom: 1rem;
    font-size: .88rem
}

.crumbs ol {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.crumbs li {
    align-items: center;
    gap: .3rem;
    display: inline-flex
}

.crumbs a {
    color: var(--fp-muted);
    text-decoration: none
}

.crumbs a:hover {
    color: var(--fp-ink)
}

.crumbs__sep {
    color: var(--fp-accent);
    font-size: .8rem;
    display: inline-flex
}

.lightbox-link {
    cursor: zoom-in;
    display: block;
    position: relative
}

.lightbox-link__cue {
    color: #fff;
    opacity: 0;
    pointer-events: none;
    background: #0e1015d1;
    border-radius: 999px;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    font-size: .76rem;
    font-weight: 600;
    transition: opacity .2s, transform .2s;
    display: inline-flex;
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    transform: translateY(4px)
}

.lightbox-link__cue svg {
    font-size: .95em
}

.lightbox-link:hover .lightbox-link__cue,
.lightbox-link:focus-visible .lightbox-link__cue {
    opacity: 1;
    transform: none
}

.lightbox {
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: clamp(1rem, 4vw, 3rem);
    display: none
}

.lightbox[open] {
    display: flex
}

.lightbox::backdrop {
    background: #0a0c14db
}

.lightbox__figure {
    max-width: min(1600px, 100%);
    max-height: 100%;
    margin: 0;
    display: flex
}

.lightbox__img {
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 2*clamp(1rem, 4vw, 3rem));
    display: block;
    box-shadow: 0 40px 100px -30px #000c, 0 0 0 1px #ffffff14
}

.lightbox__close {
    color: #fff;
    cursor: pointer;
    background: #ffffff1a;
    border: 1px solid #ffffff2e;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    transition: background .18s;
    display: inline-flex;
    position: fixed;
    top: 1rem;
    right: 1rem
}

.lightbox__close:hover {
    background: #ffffff38
}

.lightbox.is-tall {
    padding-top: clamp(3.5rem, 6vw, 4.5rem);
    display: block;
    overflow-y: auto
}

.lightbox.is-tall .lightbox__figure {
    max-width: min(1200px, 100%);
    max-height: none;
    margin: 0 auto;
    display: block
}

.lightbox.is-tall .lightbox__img {
    width: 100%;
    max-height: none
}

html.has-lightbox {
    overflow: hidden
}

.hero {
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(-1 * var(--fp-header-h));
    padding: calc(var(--fp-header-h) + clamp(1rem, 2.5vw, 1.75rem)) 0 clamp(2rem, 4vw, 3rem);
    background-image: var(--fp-hero-img);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(var(--fp-hero-cream));
    flex-direction: column;
    justify-content: center;
    display: flex;
    position: relative;
    overflow: hidden
}

.hero .container {
    z-index: 1;
    position: relative
}

.hero__scrim {
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--fp-hero-cream), .97) 0%, rgba(var(--fp-hero-cream), .9) 28%, rgba(var(--fp-hero-cream), .5) 50%, rgba(var(--fp-hero-cream), 0) 66%);
    position: absolute;
    inset: 0
}

.hero__container {
    flex-direction: column;
    flex: 1;
    align-items: center;
    width: 100%;
    display: flex
}

.hero__copy {
    text-align: center;
    max-width: 880px;
    margin: auto 0 0
}

.hero__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.035em;
    white-space: nowrap;
    margin: 0;
    font-size: clamp(2.15rem, 4.8vw, 3.7rem);
    font-weight: 700;
    line-height: 1.08
}

.hero__lead {
    color: var(--fp-ink-soft);
    text-wrap: pretty;
    max-width: 26em;
    margin: 1.4rem auto 0;
    font-size: clamp(1.2rem, 2.1vw, 1.45rem);
    font-weight: 500;
    line-height: 1.7
}

.hero__cta {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 2rem;
    display: flex
}

.hero__primary {
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    display: flex
}

.hero__nocard {
    color: var(--fp-muted);
    white-space: nowrap;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    display: inline-flex
}

.hero__nocard svg {
    color: var(--fp-success)
}

.hero__facts {
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 2rem;
    margin: auto 0 0;
    padding: 2.5rem 0 0;
    list-style: none;
    display: flex
}

.hero__fact {
    color: var(--fp-ink-soft);
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 600;
    display: inline-flex
}

.hero__fact svg {
    color: var(--fp-accent);
    font-size: 1rem
}

.page-hero {
    margin-top: calc(-1 * var(--fp-header-h));
    padding: calc(var(--fp-header-h) + clamp(2rem, 5vw, 3.75rem)) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, var(--fp-bg-alt) 0%, var(--fp-bg) 100%);
    text-align: center;
    position: relative;
    overflow: hidden
}

.page-hero .container {
    z-index: 1;
    position: relative
}

.page-hero__inner {
    max-width: 1000px;
    margin: 0 auto
}

.page-hero__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
    margin: 1rem 0 0;
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    font-weight: 700;
    line-height: 1.04
}

.page-hero__lead {
    color: var(--fp-ink-soft);
    text-wrap: pretty;
    max-width: 620px;
    margin: 1.25rem auto 0;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65
}

.page-hero__cta {
    margin-top: 1.75rem
}

.page-hero--wide-lead .page-hero__lead {
    max-width: 52rem
}

.page-hero__meta {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fp-muted);
    margin: 0;
    font-size: .86rem;
    font-weight: 600
}

.page-hero--nav {
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem)
}

.page-hero--sm {
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem)
}

.page-hero--sm .page-hero__title {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem)
}

.page-hero--sm .page-hero__lead {
    margin-top: .9rem;
    font-size: clamp(1rem, 1.3vw, 1.1rem)
}

@media (max-width:991.98px) {
    .hero {
        background-position: 72%
    }

    .hero__title {
        white-space: normal;
        text-wrap: balance
    }

    .hero__scrim {
        background: linear-gradient(90deg, rgba(var(--fp-hero-cream), .96) 0%, rgba(var(--fp-hero-cream), .87) 55%, rgba(var(--fp-hero-cream), .74) 100%)
    }
}

@media (max-width:640px) {
    .hero {
        background-position: 78%
    }

    .hero__scrim {
        background: linear-gradient(180deg, rgba(var(--fp-hero-cream), .9) 0%, rgba(var(--fp-hero-cream), .82) 100%)
    }

    .hero__title {
        font-size: clamp(2.1rem, 9vw, 2.7rem)
    }

    .hero__lead {
        font-size: 1.25rem
    }

    .hero__cta,
    .hero__primary {
        width: 100%
    }

    .hero__cta .btn-grad,
    .hero__cta .btn-outline-ink {
        justify-content: center;
        width: 100%
    }
}

.product-frame {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-strong);
    box-shadow: var(--fp-shadow-frame);
    border-radius: 14px;
    position: relative;
    overflow: hidden
}

.product-frame img,
.product-frame video {
    width: 100%;
    height: auto;
    display: block
}

.product-frame img {
    transition: opacity .3s
}

.product-frame.is-loading {
    background: var(--fp-bg-alt)
}

.product-frame.is-loading img {
    opacity: 0
}

.product-frame.is-loading:before {
    content: "";
    background: linear-gradient(100deg, #0000 30%, #ffffffb3 50%, #0000 70%) 0 0/200% 100%;
    animation: 1.4s ease-in-out infinite frame-shimmer;
    position: absolute;
    inset: 0
}

.product-frame .product-frame__img--mobile,
.product-frame.is-mobile .product-frame__img--desktop {
    display: none
}

.product-frame.is-mobile .product-frame__img--mobile {
    display: block
}

.product-frame--soft {
    box-shadow: var(--fp-shadow-md);
    border-radius: 12px
}

.frame-stage {
    position: relative
}

.frame-stage.is-mobile .callout {
    display: none
}

.device-toggle {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-sm);
    border-radius: 999px;
    gap: .2rem;
    padding: .25rem;
    display: inline-flex
}

.device-toggle button {
    color: var(--fp-muted);
    font: inherit;
    padding: calc(.5rem - var(--fp-optical-lift)) .95rem calc(.5rem + var(--fp-optical-lift));
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    font-weight: 600;
    transition: background .18s, color .18s;
    display: inline-flex
}

.device-toggle button svg {
    font-size: 1rem
}

.device-toggle button[aria-pressed=true] {
    background: var(--fp-ink);
    color: var(--fp-bg)
}

.device-toggle button:hover:not([aria-pressed=true]) {
    color: var(--fp-ink);
    background: var(--fp-hover)
}

.device-toggle--center {
    width: max-content;
    margin: 0 auto 1.1rem;
    display: flex
}

.callout {
    left: calc(var(--x) - 7px);
    top: var(--y);
    z-index: 3;
    pointer-events: none;
    align-items: center;
    gap: .55rem;
    height: 0;
    transition: opacity .25s, visibility .25s;
    display: flex;
    position: absolute
}

.callout--left {
    left: auto;
    right: calc(100% - var(--x) - 7px);
    flex-direction: row-reverse
}

.callout--below {
    left: var(--x);
    top: calc(var(--y) - 7px);
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    width: 0;
    height: auto
}

.callout__dot {
    background: var(--fp-accent);
    border-radius: 50%;
    flex: none;
    width: 14px;
    height: 14px;
    position: relative;
    box-shadow: 0 0 0 3px #fff
}

.callout__dot:after {
    content: "";
    border: 2px solid var(--fp-accent);
    opacity: .6;
    border-radius: 50%;
    animation: 2.2s ease-out infinite callout-pulse;
    position: absolute;
    inset: -4px
}

.callout__label {
    background: var(--fp-ink);
    color: #fff;
    white-space: nowrap;
    border-radius: 999px;
    padding: .42rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 10px 24px -10px #0e101580
}

@keyframes callout-pulse {
    0% {
        opacity: .7;
        transform: scale(.7)
    }

    70% {
        opacity: 0;
        transform: scale(1.6)
    }

    to {
        opacity: 0;
        transform: scale(1.6)
    }
}

.float-card {
    z-index: 2;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border-strong);
    width: min(46%, 340px);
    box-shadow: var(--fp-shadow-lg);
    border-radius: 12px;
    position: absolute;
    overflow: hidden
}

.float-card img {
    width: 100%;
    height: auto;
    display: block
}

.float-card--br {
    bottom: -8%;
    right: -6%
}

.float-card--bl {
    bottom: -8%;
    left: -6%
}

.float-card--tr {
    top: -8%;
    right: -6%
}

@media (max-width:900px) {
    .callout {
        display: none
    }

    .float-card {
        width: 48%
    }

    .float-card--br {
        bottom: -5%;
        right: -3%
    }

    .float-card--bl {
        bottom: -5%;
        left: -3%
    }

    .float-card--tr {
        top: -5%;
        right: -3%
    }
}

@keyframes frame-shimmer {
    0% {
        background-position: 200% 0
    }

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

@media (prefers-reduced-motion:reduce) {
    .product-frame.is-loading:before {
        animation: none
    }
}

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

.marquee__track {
    width: max-content;
    animation: marquee-slide var(--marquee-duration, 70s) linear infinite;
    display: flex
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
    animation-play-state: paused
}

.marquee__group {
    flex: none;
    gap: 1.25rem;
    padding-right: 1.25rem;
    display: flex
}

@keyframes marquee-slide {
    to {
        transform: translate(-50%)
    }
}

@media (prefers-reduced-motion:reduce) {
    .marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none
    }

    .marquee__track {
        animation: none
    }

    .marquee__group+.marquee__group {
        display: none
    }
}

.site-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    width: clamp(250px, 26vw, 360px);
    box-shadow: var(--fp-shadow-sm);
    color: inherit;
    border-radius: 14px;
    flex: none;
    text-decoration: none;
    transition: transform .22s, box-shadow .22s;
    display: block;
    overflow: hidden
}

.site-card:hover {
    box-shadow: var(--fp-shadow-lg);
    color: inherit;
    transform: translateY(-4px)
}

.site-card__shot {
    aspect-ratio: 4/3;
    background: var(--fp-bg-alt);
    overflow: hidden
}

.site-card__shot img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
    display: block
}

.site-card__meta {
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem .95rem;
    font-size: .86rem;
    display: flex
}

.site-card__meta strong {
    font-weight: 650
}

.site-card__meta span {
    color: var(--fp-muted);
    font-size: .8rem
}

.showcase {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    display: grid
}

.showcase--reverse .showcase__copy {
    order: 2
}

.showcase__copy .section__title {
    text-align: left;
    margin-top: .85rem;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem)
}

.showcase__lead {
    color: var(--fp-muted);
    text-wrap: pretty;
    margin: 1rem 0 0;
    font-size: 1.08rem;
    line-height: 1.65
}

.showcase__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: 1.75rem;
    display: flex
}

.showcase__media {
    min-width: 0;
    position: relative
}

.showcase__media--spill {
    margin-bottom: 6%
}

.showcase__art {
    border-radius: var(--fp-radius);
    width: 100%;
    height: auto;
    display: block
}

.fact-row {
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.fact-row li {
    flex-direction: column;
    gap: .1rem;
    display: flex
}

.fact-row strong {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1
}

.fact-row span {
    color: var(--fp-muted);
    font-size: .82rem
}

@media (max-width:900px) {
    .showcase {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .showcase--reverse .showcase__copy {
        order: 0
    }

    .showcase__media--spill {
        margin-bottom: 8%
    }
}

.stack {
    aspect-ratio: 16/10;
    position: relative
}

.stack:before {
    content: "";
    pointer-events: none;
    background-image: radial-gradient(#0e101529 1.3px, #0000 1.8px);
    background-size: 18px 18px;
    position: absolute;
    inset: -6%;
    -webkit-mask-image: radial-gradient(60% 58%, #000 40%, #0000 100%);
    mask-image: radial-gradient(60% 58%, #000 40%, #0000 100%)
}

.stack__layers {
    perspective: 1400px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    inset: 0
}

.stack__layer {
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--w) * 1%);
    z-index: var(--z);
    transform-origin: 50%;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1) var(--d), opacity .6s ease var(--d);
    will-change: transform, opacity;
    position: absolute
}

.stack__layer img {
    background: var(--fp-surface);
    border-radius: 10px;
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 26px 60px -22px #0e10156b, 0 0 0 1px #0e101514
}

.stack__layer:first-child img {
    border-radius: 12px;
    box-shadow: 0 40px 90px -32px #0e101566, 0 0 0 1px #0e101512
}

@media (hover:hover) and (pointer:fine) {
    .stack__layer img {
        transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s
    }

    .stack__layer:not(:first-child):hover img {
        transform: scale(1.12);
        box-shadow: 0 34px 70px -24px #0e101580, 0 0 0 1px #0e10151a
    }
}

.stack.is-settled .stack__layer {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .35s
}

.stack.is-ready:not(.is-in) .stack__layer {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) rotateX(var(--rx)) rotateY(var(--ry))
}

.stack--tilt {
    --tilt-x: 5deg;
    --tilt-y: -9deg
}

.stack--tilt .stack__layers {
    transform: perspective(1800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d
}

.stack--tilt .stack__layer {
    transform: translateZ(calc(var(--z) * 16px))
}

@media (hover:hover) and (pointer:fine) {
    .stack--tilt.is-settled .stack__layer:not(:first-child):hover {
        transform: translateZ(calc(var(--z) * 16px + 30px)) rotateY(calc(-1 * var(--tilt-y))) rotateX(calc(-1 * var(--tilt-x)))
    }
}

.stack--tilt.is-ready:not(.is-in) .stack__layer {
    transform: translate3d(var(--dx), var(--dy), calc(var(--z) * 16px)) rotateX(var(--rx)) rotateY(var(--ry))
}

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

    .stack.is-ready:not(.is-in) .stack__layer {
        opacity: 1;
        transform: none
    }
}

@media (max-width:720px) {
    .stack {
        aspect-ratio: auto;
        margin-inline: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2)
    }

    .stack:before {
        display: none
    }

    .stack__layers {
        perspective: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
        padding: .5rem calc(var(--bs-gutter-x, 1.5rem) / 2) 1.25rem;
        scrollbar-width: none;
        align-items: flex-start;
        gap: .85rem;
        display: flex;
        position: static;
        overflow-x: auto
    }

    .stack__layers::-webkit-scrollbar {
        display: none
    }

    .stack__layer {
        scroll-snap-align: start;
        flex: 0 0 86%;
        width: auto;
        transition: none;
        position: static
    }

    .stack__layer[data-slide=narrow] {
        flex-basis: 62%
    }

    .stack__layer[data-slide=tall] {
        flex-basis: 44%
    }

    .stack__layer img,
    .stack__layer:first-child img {
        box-shadow: 0 0 0 1px #0e10151a, 0 10px 24px -16px #0e101559
    }

    .stack.is-ready:not(.is-in) .stack__layer,
    .stack--tilt .stack__layer {
        opacity: 1;
        transform: none
    }

    .stack--tilt .stack__layers {
        transform: none
    }
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    display: grid
}

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

.feature-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.feature-card {
    border-radius: var(--fp-radius);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    flex-direction: column;
    padding: 1.5rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    position: relative
}

.feature-card:hover {
    box-shadow: var(--fp-shadow-md);
    border-color: var(--fp-border-strong);
    transform: translateY(-3px)
}

.feature-card__icon {
    background: #153deb14;
    background: color-mix(in srgb, var(--fp-accent) 8%, transparent);
    width: 42px;
    height: 42px;
    color: var(--fp-accent);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    display: inline-flex
}

.feature-card h3 {
    letter-spacing: -.015em;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 1.1rem 0 .45rem;
    font-size: 1.05rem;
    font-weight: 650;
    display: flex
}

.feature-card p {
    color: var(--fp-muted);
    text-wrap: pretty;
    margin: 0;
    font-size: .93rem;
    line-height: 1.55
}

.feature-card__media {
    aspect-ratio: 16/10;
    border-bottom: 1px solid var(--fp-border);
    background: var(--fp-bg-alt);
    margin: -1.5rem -1.5rem 1.25rem;
    overflow: hidden
}

.feature-card__media img,
.feature-card__media video {
    object-fit: cover;
    object-position: top left;
    width: 100%;
    height: 100%;
    display: block
}

.feature-card--media {
    overflow: hidden
}

.feature-card__media--panel {
    aspect-ratio: 5/4
}

.section--alt .feature-card {
    box-shadow: var(--fp-shadow-sm)
}

@media (max-width:1000px) {

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

@media (max-width:600px) {

    .feature-grid,
    .feature-grid--2,
    .feature-grid--4 {
        grid-template-columns: 1fr
    }
}

.tabs__list {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    width: max-content;
    max-width: 100%;
    box-shadow: var(--fp-shadow-sm);
    border-radius: 999px;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 0 auto;
    padding: .3rem;
    display: flex
}

.tabs__tab {
    color: var(--fp-muted);
    font: inherit;
    padding: calc(.6rem - var(--fp-optical-lift)) 1.05rem calc(.6rem + var(--fp-optical-lift));
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    font-weight: 600;
    transition: background .18s, color .18s;
    display: inline-flex
}

.tabs__tab svg {
    font-size: 1.05rem
}

.tabs__tab:hover {
    color: var(--fp-ink)
}

.tabs__tab[aria-selected=true] {
    background: var(--fp-ink);
    color: var(--fp-bg)
}

.tabs__panel {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid
}

.tabs__panel[hidden] {
    display: none
}

.tabs__panel h3 {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1
}

.tabs__panel p {
    color: var(--fp-muted);
    margin: .9rem 0 0;
    line-height: 1.6
}

@media (max-width:900px) {
    .tabs__panel {
        grid-template-columns: 1fr
    }

    .tabs__list {
        border-radius: 14px;
        width: 100%
    }

    .tabs__tab {
        flex: 40%;
        justify-content: center
    }
}

.switcher {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    display: grid
}

.switcher__list {
    top: calc(var(--fp-header-top) + var(--fp-header-h) + 4.5rem);
    flex-direction: column;
    gap: .25rem;
    display: flex;
    position: sticky
}

.switcher__tab {
    text-align: left;
    border: 0;
    border-left: 2px solid var(--fp-border);
    width: 100%;
    font: inherit;
    color: var(--fp-muted);
    cursor: pointer;
    background: 0 0;
    padding: .7rem 0 .7rem 1.1rem;
    transition: color .18s, border-color .18s;
    display: block
}

.switcher__tab:hover {
    color: var(--fp-ink)
}

.switcher__tab[aria-selected=true] {
    color: var(--fp-ink);
    border-left-color: var(--fp-accent)
}

.switcher__tab[aria-selected=true] .switcher__tab-text {
    opacity: 1;
    max-height: 8rem;
    margin-top: .3rem
}

.switcher__tab:focus-visible {
    outline: 2px solid var(--fp-accent);
    outline-offset: 3px;
    border-radius: 4px
}

.switcher__tab-title {
    letter-spacing: -.01em;
    font-size: 1rem;
    font-weight: 650;
    display: block
}

.switcher__tab-title .tag {
    vertical-align: 2px;
    margin-left: .4rem
}

.switcher__tab-text {
    color: var(--fp-muted);
    opacity: 0;
    max-height: 0;
    font-size: .92rem;
    line-height: 1.55;
    transition: max-height .3s, opacity .25s, margin-top .3s;
    display: block;
    overflow: hidden
}

.switcher__stage {
    min-width: 0
}

.switcher__panel {
    margin: 0;
    animation: .35s both switcher-in
}

.switcher__panel[hidden] {
    display: none
}

.switcher__screen {
    margin: 0;
    animation: .3s both switcher-in
}

.switcher__screen[hidden] {
    display: none
}

.switcher__pills {
    flex-wrap: wrap;
    gap: .35rem;
    margin: .85rem 0 0;
    display: flex
}

.switcher__pill {
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-muted);
    font: inherit;
    padding: calc(.35rem - var(--fp-optical-lift)) .8rem calc(.35rem + var(--fp-optical-lift));
    cursor: pointer;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    transition: background .18s, color .18s, border-color .18s
}

.switcher__pill:hover {
    color: var(--fp-ink);
    border-color: #0e101573
}

.switcher__pill[aria-selected=true] {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: var(--fp-bg)
}

.switcher__caption {
    color: var(--fp-muted);
    margin: .9rem 0 0;
    font-size: .92rem;
    line-height: 1.55;
    display: none
}

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

    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .switcher__panel,
    .switcher__screen {
        animation: none
    }

    .switcher__tab-text {
        transition: none
    }
}

@media (max-width:900px) {
    .switcher {
        grid-template-columns: 1fr;
        gap: 1.25rem
    }

    .switcher__list {
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
        padding-bottom: .35rem;
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
        flex-direction: row;
        gap: .4rem;
        position: static;
        overflow-x: auto
    }

    .switcher__list::-webkit-scrollbar {
        display: none
    }

    .switcher__tab {
        scroll-snap-align: start;
        border-left: 0;
        border: 1px solid var(--fp-border);
        background: var(--fp-surface);
        white-space: nowrap;
        border-radius: 999px;
        flex: none;
        width: auto;
        padding: .55rem 1rem
    }

    .switcher__tab[aria-selected=true] {
        background: var(--fp-ink);
        border-color: var(--fp-ink);
        color: var(--fp-bg)
    }

    .switcher__tab-title {
        font-size: .9rem
    }

    .switcher__tab-text,
    .switcher__tab[aria-selected=true] .switcher__tab-text {
        display: none
    }

    .switcher__caption {
        display: block
    }
}

.steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    position: relative
}

.steps:before {
    content: "";
    border-top: 1px dashed var(--fp-border-strong);
    position: absolute;
    top: 1.1rem;
    left: 16.6%;
    right: 16.6%
}

.step {
    text-align: center;
    position: relative
}

.step__num {
    background: var(--fp-ink);
    width: 2.2rem;
    height: 2.2rem;
    color: var(--fp-bg);
    font-family: var(--fp-font-display);
    box-shadow: 0 0 0 6px var(--fp-bg-alt);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: .95rem;
    font-weight: 700;
    display: inline-flex;
    position: relative
}

.step h3 {
    letter-spacing: -.015em;
    margin: 1rem 0 .45rem;
    font-size: 1.15rem;
    font-weight: 650
}

.step p {
    color: var(--fp-muted);
    margin: 0;
    max-width: 22rem;
    margin-inline: auto;
    font-size: .95rem;
    line-height: 1.6
}

@media (max-width:900px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        max-width: 480px;
        margin-inline: auto
    }

    .steps:before {
        display: none
    }
}

.billing-toggle {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-sm);
    border-radius: 999px;
    gap: .25rem;
    margin-top: 1.5rem;
    padding: .3rem;
    display: inline-flex
}

.billing-toggle button {
    color: var(--fp-muted);
    font: inherit;
    padding: calc(.55rem - var(--fp-optical-lift)) 1.15rem calc(.55rem + var(--fp-optical-lift));
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    font-weight: 600;
    transition: background .2s, color .2s;
    display: inline-flex
}

.billing-toggle button.is-active {
    background: var(--fp-ink);
    color: var(--fp-bg)
}

.billing-toggle button.is-active .billing-toggle__save {
    color: #fff;
    background: #ffffff24;
    box-shadow: inset 0 0 0 1px #ffffff59
}

.billing-toggle__save {
    color: #15803d;
    background: #16a34a14;
    border-radius: 999px;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-weight: 700;
    transition: background .2s, color .2s
}

.pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
    max-width: 1080px;
    margin: 0 auto;
    display: grid
}

.price-card {
    border-radius: var(--fp-radius-lg);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    flex-direction: column;
    padding: 2rem 1.75rem;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    position: relative
}

.price-card:hover {
    box-shadow: var(--fp-shadow-md);
    transform: translateY(-4px)
}

.price-card--popular {
    box-shadow: var(--fp-shadow-lg);
    background: linear-gradient(var(--fp-surface), var(--fp-surface)) padding-box, var(--fp-grad) border-box;
    border: 2px solid #0000;
    transform: translateY(-8px)scale(1.015)
}

.price-card--popular:hover {
    transform: translateY(-12px)scale(1.015)
}

.price-card__tag {
    background: var(--fp-grad);
    color: var(--fp-on-grad);
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px var(--fp-brand-shadow);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .75rem;
    font-weight: 700;
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translate(-50%)
}

.price-card__name {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    display: flex
}

.price-card__desc {
    color: var(--fp-muted);
    min-height: 2.6em;
    margin: .5rem 0 1.4rem;
    font-size: .92rem;
    line-height: 1.55
}

.price-card__price {
    letter-spacing: -.04em;
    font-weight: 800;
    font-family: var(--fp-font-display);
    align-items: baseline;
    gap: .1rem;
    display: flex
}

.price-card__currency {
    align-self: flex-start;
    margin-top: .35rem;
    font-size: 1.5rem
}

.price-card__amount {
    font-size: 3.2rem;
    line-height: 1
}

.price-card__period {
    color: var(--fp-muted);
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--fp-font);
    letter-spacing: -.01em
}

.price-card__hint {
    color: var(--fp-muted);
    min-height: 1.3em;
    margin: .5rem 0 1.4rem;
    font-size: .85rem
}

.price-card__cta {
    justify-content: center;
    width: 100%
}

.price-card__features {
    border-top: 1px solid var(--fp-border);
    flex-direction: column;
    gap: .75rem;
    margin: 1.6rem 0 0;
    padding: 1.5rem 0 0;
    list-style: none;
    display: flex
}

.price-card__features li {
    color: var(--fp-ink-soft);
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    line-height: 1.45;
    display: flex
}

.price-card__features li svg {
    color: var(--fp-accent);
    flex-shrink: 0;
    margin-top: .15rem
}

.price-card__features .price-card__plus {
    color: var(--fp-ink);
    font-weight: 600
}

.price-card__features .price-card__plus svg {
    color: var(--fp-ink)
}

.price-card__footnote {
    color: var(--fp-muted);
    margin: 1.25rem 0 0;
    font-size: .82rem;
    line-height: 1.5
}

.price-card--compact {
    padding: 1.6rem 1.5rem
}

.price-card--compact.price-card--popular {
    transform: none
}

.price-card--compact.price-card--popular:hover {
    transform: translateY(-4px)
}

.price-card--compact .price-card__amount {
    font-size: 2.6rem
}

.price-card--compact .price-card__desc {
    min-height: 0;
    margin-bottom: 1.1rem
}

.price-card--compact .price-card__features {
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem
}

.pricing-notice {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    color: var(--fp-ink-soft);
    border-radius: 999px;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem auto 0;
    padding: .6rem 1rem;
    font-size: .88rem;
    display: inline-flex
}

.pricing-notice svg {
    color: var(--fp-accent);
    flex: none
}

@media (max-width:960px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px
    }

    .price-card--popular {
        transform: none
    }

    .price-card--popular:hover {
        transform: translateY(-4px)
    }
}

.compare-wrap {
    max-width: 1080px;
    margin: 0 auto
}

@media (max-width:760px) {
    .compare-wrap {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto
    }
}

.compare {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 680px;
    font-size: .94rem
}

.compare th,
.compare td {
    border-bottom: 1px solid var(--fp-border);
    vertical-align: middle;
    padding: .85rem .9rem
}

.compare td {
    text-align: center;
    width: 19%
}

.compare th[scope=row] {
    text-align: left;
    color: var(--fp-ink-soft);
    font-weight: 500
}

.compare thead th {
    top: calc(var(--fp-header-h) - .25rem);
    z-index: 5;
    background: var(--fp-bg);
    text-align: center;
    border-bottom: 2px solid var(--fp-border-strong);
    padding: 1.1rem .9rem .9rem;
    position: sticky
}

.compare thead th:first-child {
    text-align: left
}

.compare__plan {
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    display: flex
}

.compare__plan-name {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    font-size: 1.15rem;
    font-weight: 700
}

.compare__plan-price {
    color: var(--fp-muted);
    font-size: .82rem;
    font-weight: 500
}

.compare__plan-cta {
    padding: calc(.45rem - var(--fp-optical-lift)) .85rem calc(.45rem + var(--fp-optical-lift));
    margin-top: .55rem;
    font-size: .8rem
}

.compare__group th {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-muted);
    border-bottom: 1px solid var(--fp-border-strong);
    padding: 2.1rem .9rem .6rem;
    font-size: .74rem;
    font-weight: 700
}

.compare__hint {
    color: var(--fp-muted);
    margin-top: .15rem;
    font-size: .8rem;
    font-weight: 400;
    display: block
}

.compare__yes {
    color: var(--fp-accent);
    font-size: 1.15rem;
    display: inline-flex
}

.compare__no {
    color: var(--fp-border-strong);
    font-size: 1.15rem;
    display: inline-flex
}

.compare__val {
    color: var(--fp-ink);
    font-weight: 600
}

.compare td.is-popular,
.compare thead th.is-popular {
    background: #153deb0a;
    background: color-mix(in srgb, var(--fp-accent) 4%, var(--fp-bg))
}

.compare thead th.is-popular {
    border-top: 3px solid var(--fp-accent);
    border-radius: 12px 12px 0 0
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
    border-bottom: 0
}

.compare-scroll-hint {
    color: var(--fp-muted);
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    font-size: .82rem;
    display: none
}

.compare-scroll-hint svg {
    font-size: 1rem
}

@media (max-width:760px) {
    .compare {
        min-width: 640px
    }

    .compare th[scope=row],
    .compare thead th:first-child {
        z-index: 3;
        background: var(--fp-bg);
        width: 46vw;
        min-width: 150px;
        max-width: 200px;
        box-shadow: 1px 0 0 var(--fp-border);
        position: sticky;
        left: 0
    }

    .compare thead th {
        top: auto
    }

    .compare thead th:first-child {
        z-index: 6
    }

    .compare td {
        width: auto;
        min-width: 130px
    }

    .compare th,
    .compare td {
        padding-inline: .7rem
    }

    .compare__hint {
        display: none
    }

    .compare-scroll-hint {
        display: inline-flex
    }
}

.compare-notes {
    max-width: 1080px;
    color: var(--fp-muted);
    margin: 1.25rem auto 0;
    font-size: .84rem;
    line-height: 1.55
}

.compare-notes p {
    margin: 0
}

.compare-notes p+p {
    margin-top: .35rem
}

.faq {
    flex-direction: column;
    gap: .6rem;
    max-width: 760px;
    margin: 0 auto;
    display: flex
}

.faq__item {
    border-radius: var(--fp-radius-md);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    transition: border-color .2s, box-shadow .2s
}

.faq__item[open] {
    border-color: var(--fp-border-strong);
    box-shadow: var(--fp-shadow-sm)
}

.faq__item[open] .faq__icon {
    transform: rotate(45deg)
}

.faq__item.is-animating {
    overflow: hidden
}

.faq__item.is-animating .faq__answer {
    transition: opacity .25s
}

.faq__item.is-closing .faq__answer {
    opacity: 0
}

.faq__item summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    list-style: none;
    display: flex
}

.faq__item summary::-webkit-details-marker {
    display: none
}

.faq__icon {
    color: var(--fp-muted);
    flex: none;
    transition: transform .2s
}

.faq__answer {
    color: var(--fp-muted);
    padding: 0 1.25rem 1.15rem;
    font-size: .96rem;
    line-height: 1.6
}

.faq__answer p {
    margin: 0
}

.faq__answer p+p {
    margin-top: .6rem
}

.faq__answer a {
    color: var(--fp-accent)
}

.cta-band {
    border-radius: var(--fp-radius-lg);
    background: var(--fp-cta-bg);
    color: var(--fp-cta-ink);
    text-align: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden
}

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

.cta-band__glow {
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 60% at 15% 20%, var(--fp-cta-glow-a), transparent 70%), radial-gradient(ellipse 45% 60% at 85% 80%, var(--fp-cta-glow-b), transparent 70%);
    position: absolute;
    inset: 0
}

.cta-band h2 {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    color: var(--fp-cta-ink);
    text-wrap: balance;
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.06
}

.cta-band p {
    color: var(--fp-cta-muted);
    max-width: 560px;
    margin: 1rem auto 1.75rem;
    font-size: 1.08rem;
    line-height: 1.6
}

.cta-band .fineprint {
    color: var(--fp-cta-muted)
}

.cta-band .fineprint svg {
    color: #7ee2a3
}

.subnav {
    top: calc(var(--fp-header-h) - var(--fp-header-top));
    z-index: 1020;
    pointer-events: none;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
    padding: .35rem 1rem .65rem;
    display: flex;
    position: sticky
}

.subnav__inner {
    pointer-events: auto;
    background: var(--fp-glass-solid);
    -webkit-backdrop-filter: blur(14px)saturate(180%);
    backdrop-filter: blur(14px)saturate(180%);
    border: 1px solid var(--fp-border);
    max-width: 100%;
    box-shadow: var(--fp-shadow-sm);
    scrollbar-width: none;
    border-radius: 999px;
    gap: .2rem;
    padding: .3rem;
    display: inline-flex;
    overflow-x: auto
}

.subnav__inner::-webkit-scrollbar {
    display: none
}

.subnav.is-stuck {
    padding: 0
}

.subnav.is-stuck .subnav__inner {
    background: var(--fp-glass-scrolled);
    width: 100%;
    box-shadow: var(--fp-shadow-md);
    border-width: 0 0 1px;
    border-radius: 0;
    justify-content: safe center;
    padding: calc(.6rem + 4px) 1rem calc(.6rem + 3px);
    display: flex
}

.subnav a {
    padding: calc(.5rem - var(--fp-optical-lift)) .95rem calc(.5rem + var(--fp-optical-lift));
    color: var(--fp-muted);
    white-space: nowrap;
    border-radius: 999px;
    flex: none;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, color .18s
}

.subnav a:hover {
    color: var(--fp-ink);
    background: var(--fp-hover)
}

.subnav a.is-active {
    background: var(--fp-ink);
    color: var(--fp-bg)
}

.publish-band {
    background: var(--fp-navy);
    color: var(--fp-navy-ink);
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    position: relative;
    overflow: hidden
}

.publish-band .container {
    z-index: 1;
    position: relative
}

.publish-band__glow {
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(40% 45%, #153deb73, #0000 70%);
    position: absolute;
    inset: -20% -10%
}

.domain-typer {
    border: 1px solid var(--fp-navy-border);
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    background: #ffffff0f;
    border-radius: 999px;
    align-items: center;
    gap: 0;
    max-width: 100%;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0;
    padding: .55rem 1.5rem .6rem 1.25rem;
    font-size: clamp(1.7rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    box-shadow: inset 0 1px #ffffff14, 0 24px 60px -24px #0009
}

.domain-typer__lock {
    color: #7ee2a3;
    flex: none;
    margin-right: .5em;
    font-size: .5em
}

.domain-typer__sub {
    color: #b9c6ff;
    white-space: pre
}

.domain-typer__caret {
    vertical-align: -.12em;
    background: #b9c6ff;
    width: .06em;
    height: .95em;
    margin: 0 .06em 0 .02em;
    animation: 1s steps(2, end) infinite caret-blink;
    display: inline-block
}

.domain-typer__host {
    color: var(--fp-navy-ink)
}

@keyframes caret-blink {
    50% {
        opacity: 0
    }
}

.publish-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid
}

.publish-facts li {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-navy-border);
    background: #ffffff0d;
    padding: 1.25rem 1.35rem
}

.publish-facts svg {
    color: #b9c6ff;
    font-size: 1.4rem
}

.publish-facts h3 {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .8rem 0 .3rem;
    font-size: 1rem;
    font-weight: 650;
    display: flex
}

.publish-facts p {
    color: var(--fp-navy-muted);
    margin: 0;
    font-size: .92rem;
    line-height: 1.55
}

.publish-facts .tag {
    color: #dfe6ff;
    background: #ffffff1f
}

@media (max-width:800px) {
    .publish-facts {
        grid-template-columns: 1fr
    }
}

.filter-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin: -.5rem 0 2.25rem;
    display: flex
}

.filter-chip {
    padding: calc(.5rem - var(--fp-optical-lift)) 1rem calc(.5rem + var(--fp-optical-lift));
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-ink-soft);
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
    display: inline-flex
}

.filter-chip:hover {
    color: var(--fp-ink);
    border-color: #0e101573
}

.filter-chip.is-active {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: var(--fp-bg)
}

.filter-bar--home {
    margin: -.75rem 0 2.25rem
}

.category-empty {
    text-align: center;
    border: 1px dashed var(--fp-border-strong);
    border-radius: var(--fp-radius-lg);
    max-width: 34rem;
    color: var(--fp-ink-soft);
    margin: 0 auto;
    padding: 2.5rem 1.5rem
}

.category-empty__title {
    font-family: var(--fp-font-display);
    color: var(--fp-ink);
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    font-weight: 700
}

.category-empty p {
    margin: 0 0 1.25rem
}

.category-article {
    max-width: 46rem;
    margin: 0 auto
}

.category-article>h2:first-child {
    margin-top: 0
}

.preview-body {
    background: var(--fp-bg-alt);
    height: 100dvh;
    overflow: hidden
}

.preview {
    flex-direction: column;
    height: 100dvh;
    display: flex
}

.preview__bar {
    background: var(--fp-surface);
    border-bottom: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-sm);
    z-index: 2;
    flex: none;
    align-items: center;
    gap: 1rem;
    padding: .6rem clamp(.75rem, 2vw, 1.25rem);
    display: flex
}

.preview__side {
    align-items: center;
    gap: .6rem;
    min-width: 0;
    display: flex
}

.preview__side--start {
    flex: auto
}

.preview__side--end {
    flex: none;
    justify-content: flex-end;
    gap: .75rem
}

.preview__brand {
    color: var(--fp-ink);
    flex: none;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    display: inline-flex
}

.preview__brand img {
    width: 28px;
    height: 28px;
    display: block
}

.preview__brand span {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    font-size: 1rem;
    font-weight: 800
}

.preview__sep {
    background: var(--fp-border);
    flex: none;
    width: 1px;
    height: 22px
}

.preview__crumbs {
    flex: 0 auto;
    align-items: baseline;
    gap: .45rem;
    min-width: 0;
    display: flex
}

.preview__crumbs a {
    color: var(--fp-muted);
    flex: none;
    font-size: .9rem;
    text-decoration: none
}

.preview__crumbs a:hover {
    color: var(--fp-ink)
}

.preview__current {
    letter-spacing: -.01em;
    color: var(--fp-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .98rem;
    font-weight: 700;
    overflow: hidden
}

.preview__current,
.preview__current:hover {
    color: var(--fp-ink)
}

.preview__current:hover {
    text-decoration: underline
}

.preview__crumb-sep {
    color: var(--fp-border-strong);
    flex: none
}

.preview__desc {
    min-width: 0;
    color: var(--fp-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 100 auto;
    font-size: calc(.98rem - 2px);
    font-style: italic;
    overflow: hidden
}

.preview__viewports {
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border);
    border-radius: 999px;
    gap: .15rem;
    padding: .2rem;
    display: inline-flex
}

.preview__vp {
    width: 2.1rem;
    height: 1.9rem;
    color: var(--fp-muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    transition: background .16s, color .16s;
    display: inline-flex
}

.preview__vp svg {
    font-size: 1.15rem
}

.preview__vp:hover {
    color: var(--fp-ink)
}

.preview__vp.is-active {
    background: var(--fp-surface);
    color: var(--fp-ink);
    box-shadow: var(--fp-shadow-sm)
}

.preview__cta {
    white-space: nowrap;
    flex: none;
    padding: .6rem 1.05rem;
    font-size: .92rem
}

.preview__stage {
    background: var(--fp-bg-alt);
    flex: auto;
    justify-content: center;
    min-height: 0;
    display: flex;
    position: relative
}

.preview__loading {
    z-index: 1;
    background: var(--fp-surface);
    color: var(--fp-muted);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .9rem;
    font-size: .92rem;
    transition: opacity .35s, visibility .35s;
    display: flex;
    position: absolute;
    inset: 0
}

.preview__loading p {
    margin: 0
}

.preview__loading.is-done {
    opacity: 0;
    visibility: hidden
}

.preview__spinner {
    border: 2.5px solid var(--fp-border);
    border-top-color: var(--fp-accent);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: .7s linear infinite preview-spin
}

.preview__frame {
    width: 100%;
    height: 100%;
    transition: max-width .28s, padding .28s
}

.preview__frame iframe {
    background: #fff;
    border: 0;
    width: 100%;
    height: 100%;
    display: block
}

.preview__frame.is-mobile {
    max-width: 430px;
    padding: 1rem 0
}

.preview__frame.is-mobile iframe {
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-lg);
    border: 1px solid var(--fp-border)
}

@keyframes preview-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .preview__spinner {
        animation-duration: 2.4s
    }

    .preview__loading {
        transition: none
    }
}

@media (max-width:720px) {

    .preview__viewports,
    .preview__desc,
    .preview__brand span,
    .preview__sep,
    .preview__crumb-sep,
    .preview__crumbs a:not(.preview__current) {
        display: none
    }

    .preview__cta {
        padding: .55rem .85rem;
        font-size: .88rem
    }
}

.page-hero--template-page .page-hero__lead {
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem)
}

.template-shot {
    max-width: 64rem;
    color: inherit;
    margin: 0 auto;
    text-decoration: none;
    display: block;
    position: relative
}

.template-shot__stage {
    display: block;
    position: relative
}

.template-shot__frame {
    aspect-ratio: 4/3;
    border-radius: var(--fp-radius-md);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--fp-shadow-frame);
    background: #ffffff47;
    border: 1px solid #0e10151f;
    padding: 4px;
    transition: box-shadow .22s;
    display: block;
    overflow: hidden
}

.template-shot__frame img {
    object-fit: cover;
    object-position: top center;
    border-radius: calc(var(--fp-radius-md) - 4px);
    background: var(--fp-bg-alt);
    width: 100%;
    height: 100%;
    display: block
}

.template-shot__stage:has(.template-shot__phone) .template-shot__frame {
    width: 88%
}

.template-shot__phone {
    aspect-ratio: 1/2;
    z-index: 2;
    border-radius: var(--fp-radius-md);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff47;
    border: 1px solid #0e10151f;
    width: 22%;
    padding: 5px;
    display: block;
    position: absolute;
    bottom: -2%;
    right: 0;
    overflow: hidden;
    box-shadow: 0 24px 50px -16px #0e101580
}

.template-shot__phone img {
    object-fit: cover;
    object-position: top;
    border-radius: calc(var(--fp-radius-md) - 5px);
    width: 100%;
    height: 100%;
    display: block
}

.template-shot:hover .template-shot__frame {
    box-shadow: var(--fp-shadow-lg)
}

.template-shot__actions {
    margin-top: calc(clamp(1.5rem, 3vw, 2.25rem) + 25px)
}

.template-detail {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 64rem;
    margin: 0 auto;
    display: grid
}

.template-detail__copy {
    max-width: 40rem
}

.template-detail__copy>h2:first-child {
    margin-top: 0
}

.template-facts {
    top: calc(var(--fp-header-top) + var(--fp-header-h) + 1.5rem);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-sm);
    padding: 1.5rem;
    position: sticky
}

.template-facts__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.01em;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700
}

.template-facts dl {
    gap: .75rem;
    margin: 0 0 1.25rem;
    display: grid
}

.template-facts dl>div {
    border-bottom: 1px solid var(--fp-border);
    gap: .15rem;
    padding-bottom: .75rem;
    display: grid
}

.template-facts dl>div:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.template-facts dt {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-muted);
    font-size: .75rem;
    font-weight: 600
}

.template-facts dd {
    color: var(--fp-ink);
    margin: 0;
    font-size: .95rem
}

.template-facts dd a {
    color: var(--fp-accent);
    text-decoration: none
}

.template-facts dd a:hover {
    text-decoration: underline
}

.template-facts__cta {
    justify-content: center;
    width: 100%;
    display: inline-flex
}

.template-facts__note {
    color: var(--fp-muted);
    margin: .9rem 0 0;
    font-size: .82rem;
    line-height: 1.5
}

@media (max-width:900px) {
    .template-detail {
        grid-template-columns: 1fr
    }

    .template-facts {
        position: static
    }
}

.auth__wrap {
    max-width: 640px;
    margin: 0 auto
}

.auth__wrap:has(.auth__template) {
    max-width: 720px
}

.auth__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.55rem, 2.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15
}

.auth__starters {
    border-bottom: 1px solid var(--fp-border);
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem
}

.auth__starters-lead {
    color: var(--fp-muted);
    margin: .4rem 0 0;
    font-size: .98rem
}

.auth__starters-grid {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .85rem;
    margin: 1.1rem calc(-1*clamp(1.75rem, 3.5vw, 2.75rem)) 0;
    padding: 0 clamp(1.75rem, 3.5vw, 2.75rem) .5rem;
    scroll-padding-inline: clamp(1.75rem, 3.5vw, 2.75rem);
    list-style: none;
    display: flex;
    overflow-x: auto
}

.auth__starters-grid::-webkit-scrollbar {
    display: none
}

.auth__starters-grid li {
    scroll-snap-align: start;
    flex: 0 0 168px
}

@media (hover:hover) and (pointer:fine) {
    .auth__starters-grid {
        scrollbar-width: thin;
        scrollbar-color: var(--fp-border-strong) transparent
    }
}

.auth__starter {
    color: var(--fp-ink);
    border-radius: 10px;
    text-decoration: none;
    display: block
}

.auth__starter:hover .auth__starter-shot,
.auth__starter:focus-visible .auth__starter-shot {
    border-color: var(--fp-ink);
    box-shadow: var(--fp-shadow-md)
}

.auth__starter:hover .auth__starter-name {
    color: var(--fp-accent)
}

.auth__starter-stage {
    display: block;
    position: relative
}

.auth__starter-shot {
    aspect-ratio: 4/3;
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border-strong);
    border-radius: 8px;
    transition: border-color .18s, box-shadow .18s;
    display: block;
    overflow: hidden
}

.auth__starter-shot img {
    object-fit: cover;
    object-position: top center;
    width: 100%;
    height: 100%;
    display: block
}

.auth__starter-stage:has(.auth__starter-phone) .auth__starter-shot {
    width: 88%
}

.auth__starter-phone {
    aspect-ratio: 1/2;
    z-index: 2;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #ffffff59;
    border-radius: 6px 6px 0 0;
    width: 26%;
    padding: 2px 2px 0;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px #0e10152e, 0 8px 18px -8px #0e101573
}

.auth__starter-phone img {
    object-fit: cover;
    object-position: top;
    border-radius: 4px 4px 0 0;
    width: 100%;
    height: 100%;
    display: block
}

.auth__starter--all .auth__starter-shot {
    color: var(--fp-muted);
    justify-content: center;
    align-items: center;
    display: flex
}

.auth__starter--all .auth__starter-shot svg {
    font-size: 1.6rem
}

.auth__starter-name {
    margin-top: .5rem;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    transition: color .15s;
    display: block
}

.auth__starter-cat {
    color: var(--fp-muted);
    margin-top: .15rem;
    font-size: .76rem;
    display: block
}

.auth__template {
    border-bottom: 1px solid var(--fp-border);
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem
}

.auth__template-row {
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: 1.1rem;
    display: grid
}

.auth__template-perks {
    grid-area: 1/2;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.auth__template-perks li {
    color: var(--fp-ink-soft);
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    line-height: 1.45;
    display: flex
}

.auth__template-perks li strong {
    color: var(--fp-ink);
    font-weight: 650
}

.auth__template-perks svg {
    color: var(--fp-success);
    flex-shrink: 0;
    margin-top: .12em;
    font-size: 1.15rem
}

.auth__template-swap {
    color: var(--fp-muted);
    border-bottom: 1px solid #0000;
    grid-area: 2/1;
    justify-self: start;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, border-color .15s, gap .15s;
    display: inline-flex
}

.auth__template-swap svg {
    font-size: .95em
}

.auth__template-swap:hover {
    color: var(--fp-ink);
    border-bottom-color: var(--fp-border-strong);
    gap: .5rem
}

.auth__chosen {
    grid-area: 1/1;
    position: relative
}

.auth__chosen:has(.auth__chosen-phone) .auth__preview {
    width: 88%
}

.auth__chosen-phone {
    aspect-ratio: 1/2;
    z-index: 2;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #ffffff59;
    border-radius: 8px 8px 0 0;
    width: 26%;
    padding: 3px 3px 0;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px #0e10152e, 0 10px 22px -10px #0e101573
}

.auth__chosen-phone img {
    object-fit: cover;
    object-position: top;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 100%;
    display: block
}

.auth__preview {
    background: var(--fp-surface-2);
    border: 1px solid var(--fp-border-strong);
    width: 100%;
    box-shadow: var(--fp-shadow-md);
    border-radius: 10px;
    transition: border-color .18s, box-shadow .18s;
    display: block;
    position: relative;
    overflow: hidden
}

.auth__preview:hover {
    border-color: var(--fp-ink);
    box-shadow: var(--fp-shadow-lg)
}

.auth__preview.is-static {
    cursor: default;
    pointer-events: none
}

.auth__preview:hover .auth__preview-cue,
.auth__preview:focus-visible .auth__preview-cue {
    opacity: 1;
    transform: none
}

.auth__preview img {
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: top center;
    width: 100%;
    display: block
}

.auth__preview-cue {
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    background: #0f172ad9;
    border-radius: 999px;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    font-size: .76rem;
    font-weight: 600;
    transition: opacity .2s, transform .2s;
    display: inline-flex;
    position: absolute;
    inset-block-end: .5rem;
    inset-inline-start: .5rem;
    transform: translateY(4px)
}

.auth__preview-bar {
    background: var(--fp-bg-alt);
    border-bottom: 1px solid var(--fp-border);
    align-items: center;
    gap: .26rem;
    padding: .32rem .55rem;
    display: flex
}

.auth__preview-bar i {
    background: var(--fp-border-strong);
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.auth__card {
    border-radius: var(--fp-radius-lg);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-md);
    padding: clamp(1.75rem, 3.5vw, 2.75rem)
}

.auth__card-head {
    margin-bottom: 1.5rem
}

.auth__card-head p {
    color: var(--fp-muted);
    margin: .4rem 0 0;
    font-size: .98rem
}

.auth__social {
    box-sizing: border-box;
    width: 100%;
    padding: calc(.8rem - var(--fp-optical-lift)) 1.1rem calc(.8rem + var(--fp-optical-lift));
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    color: var(--fp-ink);
    cursor: pointer;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow .18s, transform .18s, border-color .18s;
    display: flex;
    position: relative
}

.auth__social:hover:not(:disabled) {
    color: var(--fp-ink);
    box-shadow: var(--fp-shadow-sm);
    border-color: var(--fp-ink);
    transform: translateY(-1px)
}

.auth__social:disabled {
    cursor: not-allowed;
    color: var(--fp-muted);
    border-style: dashed
}

.auth__social:disabled .auth__social-icon {
    filter: grayscale();
    opacity: .55
}

.auth__social-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem
}

.auth__social-text {
    flex-direction: column;
    align-items: center;
    min-width: 0;
    line-height: 1.2;
    display: flex
}

.auth__social-text small {
    color: var(--fp-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: .74rem;
    font-weight: 500;
    overflow: hidden
}

.auth__soon {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-accent);
    background: var(--fp-brand-ring);
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .68rem;
    font-weight: 700;
    position: absolute;
    top: 50%;
    right: .8rem;
    transform: translateY(-50%)
}

.auth__divider {
    color: var(--fp-muted);
    align-items: center;
    gap: .9rem;
    margin: 1.4rem 0;
    font-size: .8rem;
    display: flex
}

.auth__divider>span {
    white-space: nowrap;
    align-items: center;
    gap: .5rem;
    display: inline-flex
}

.auth__divider:before,
.auth__divider:after {
    content: "";
    background: var(--fp-border);
    flex: 1;
    height: 1px
}

.auth__last {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #15803d;
    white-space: nowrap;
    background: #16a34a1f;
    border-radius: 999px;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex
}

.auth__last svg {
    font-size: .95em
}

.auth__social.is-last-used {
    border-color: #16a34a73;
    box-shadow: 0 0 0 3px #16a34a1a
}

.auth__social.is-last-used .auth__last {
    position: absolute;
    top: 50%;
    right: .8rem;
    transform: translateY(-50%)
}

.auth__submit {
    width: 100%;
    padding: calc(.9rem - var(--fp-optical-lift)) 1.5rem calc(.9rem + var(--fp-optical-lift));
    justify-content: center;
    margin-top: .35rem;
    font-size: 1rem
}

.auth__submit:disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: saturate(.6);
    box-shadow: none;
    transform: none
}

.auth__submit.is-busy {
    cursor: progress
}

.auth__submit.is-busy:disabled {
    opacity: .9;
    filter: none
}

.auth__consent {
    text-align: center;
    color: var(--fp-muted);
    margin: 0;
    font-size: .8rem;
    line-height: 1.5
}

.auth__consent a {
    color: var(--fp-ink);
    border-bottom: 1px solid var(--fp-border-strong);
    text-decoration: none
}

.auth__consent a:hover {
    border-color: var(--fp-ink)
}

.auth__notice {
    border-radius: var(--fp-radius);
    background: var(--fp-grad-soft);
    border: 1px solid var(--fp-brand-ring);
    color: var(--fp-ink-soft);
    align-items: flex-start;
    gap: .8rem;
    margin-top: 1.5rem;
    padding: .95rem 1.1rem;
    font-size: .88rem;
    line-height: 1.55;
    display: flex
}

.auth__notice>svg {
    color: var(--fp-accent);
    flex-shrink: 0;
    margin-top: .15rem;
    font-size: 1.25rem
}

.auth__notice strong {
    color: var(--fp-ink);
    font-weight: 700
}

.auth__notice a {
    color: var(--fp-accent);
    font-weight: 600;
    text-decoration: none
}

.auth__notice a:hover {
    text-decoration: underline
}

.auth__switch {
    text-align: center;
    color: var(--fp-muted);
    margin: 2rem 0 0;
    font-size: .95rem
}

.auth__switch a {
    color: var(--fp-accent);
    font-weight: 600;
    text-decoration: none
}

.auth__switch a:hover {
    text-decoration: underline
}

.auth__switch--inline {
    border-top: 1px solid var(--fp-border);
    margin: .25rem 0 0;
    padding-top: 1rem;
    font-size: .9rem
}

.auth__switch-sep {
    color: var(--fp-border-strong);
    margin: 0 .35rem
}

@media (max-width:600px) {
    .auth__starters-grid li {
        flex-basis: 148px
    }

    .auth__template-row {
        grid-template-columns: 1fr;
        row-gap: 1rem
    }

    .auth__preview {
        max-width: 320px
    }

    .auth__template-perks {
        grid-area: 2/1
    }

    .auth__template-swap {
        grid-row: 3
    }
}

@media (max-width:480px) {
    .auth__soon {
        display: none
    }

    .auth__social.is-last-used .auth__last {
        position: static;
        transform: none
    }
}

.auth__scopes {
    gap: .75rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
    display: grid
}

.auth__scopes li {
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    line-height: 1.45;
    display: flex
}

.auth__scopes li svg {
    width: 1.15em;
    height: 1.15em;
    color: var(--brand, #f26522);
    flex: none;
    margin-top: .15em
}

.auth__note {
    color: var(--muted, #6b6b6b);
    margin: 0 0 1rem;
    font-size: .875rem
}

.auth__actions {
    gap: .6rem;
    margin-top: 1.5rem;
    display: grid
}

.auth__actions form {
    margin: 0
}

.auth__actions .auth__submit {
    width: 100%
}

.auth__deny {
    border: 1px solid var(--border, #e2e2e2);
    width: 100%;
    color: inherit;
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    padding: .7rem 1rem;
    display: block
}

.auth__deny:hover {
    background: var(--surface-2, #f5f5f5)
}

.contact__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 1080px;
    margin: 0 auto;
    display: grid
}

.contact__aside {
    gap: 1.75rem;
    display: grid
}

.contact__channel {
    align-items: flex-start;
    gap: 1rem;
    display: flex
}

.contact__channel h3 {
    letter-spacing: -.01em;
    margin: .15rem 0 .25rem;
    font-size: 1.02rem;
    font-weight: 700
}

.contact__channel p {
    color: var(--fp-muted);
    margin: 0 0 .4rem;
    font-size: .92rem;
    line-height: 1.55
}

.contact__channel a {
    width: fit-content;
    color: var(--fp-accent);
    border-bottom: 1px solid var(--fp-brand-ring);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s;
    display: block
}

.contact__channel a:hover {
    border-color: var(--fp-accent)
}

.contact__channel a+a {
    margin-top: .25rem
}

.contact__channel-icon {
    background: var(--fp-grad-soft);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--fp-accent);
    border-radius: 14px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    display: inline-flex
}

.contact__card {
    border-radius: var(--fp-radius-lg);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-md);
    padding: clamp(1.75rem, 3.5vw, 2.75rem)
}

.contact__submit {
    justify-content: center;
    width: 100%;
    margin-top: .35rem;
    padding: .9rem 1.5rem;
    font-size: 1rem
}

.contact__submit:disabled {
    cursor: wait;
    opacity: .55;
    filter: saturate(.6);
    box-shadow: none;
    transform: none
}

.contact__fineprint {
    text-align: center;
    color: var(--fp-muted);
    margin: 0;
    font-size: .8rem;
    line-height: 1.5
}

.contact__fineprint a {
    color: var(--fp-ink);
    border-bottom: 1px solid var(--fp-border-strong);
    text-decoration: none
}

.contact__fineprint a:hover {
    border-color: var(--fp-ink)
}

.contact__success {
    text-align: center;
    padding: 1.5rem .5rem
}

.contact__success h2 {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    margin: 1rem 0 .5rem;
    font-size: 1.6rem;
    font-weight: 800
}

.contact__success p {
    max-width: 420px;
    color: var(--fp-muted);
    margin: 0 auto 1.5rem;
    line-height: 1.6
}

.contact__success-icon {
    background: var(--fp-grad-soft);
    width: 3.5rem;
    height: 3.5rem;
    color: var(--fp-success);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 1.9rem;
    display: inline-flex
}

@media (max-width:900px) {
    .contact__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px
    }

    .contact__aside {
        order: 2
    }
}

.legal__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem)
}

.legal__date {
    color: var(--fp-muted);
    margin: 1.25rem 0 0;
    font-size: .85rem;
    font-weight: 600
}

.legal__body {
    max-width: 720px;
    color: var(--fp-ink-soft);
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.7
}

.legal__body h2 {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    color: var(--fp-ink);
    margin: 0 0 1rem;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25
}

.legal__body h3 {
    color: var(--fp-ink);
    margin: 1.5rem 0 .5rem;
    font-size: 1.02rem;
    font-weight: 700
}

.legal__body p {
    margin: 0 0 1rem
}

.legal__body ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem
}

.legal__body ul li {
    margin-bottom: .5rem
}

.legal__body ul li::marker {
    color: var(--fp-accent)
}

.legal__body strong {
    color: var(--fp-ink);
    font-weight: 600
}

.legal__body a {
    color: var(--fp-accent);
    border-bottom: 1px solid var(--fp-brand-ring);
    text-decoration: none;
    transition: border-color .15s
}

.legal__body a:hover {
    border-color: var(--fp-accent)
}

.legal__table-wrap {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    margin: 0 0 1rem;
    overflow-x: auto
}

.legal__table-wrap table {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: .92rem;
    line-height: 1.5
}

.legal__table-wrap th,
.legal__table-wrap td {
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--fp-border);
    padding: .75rem .9rem
}

.legal__table-wrap th {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-ink);
    background: var(--fp-bg-alt);
    font-size: .76rem;
    font-weight: 700
}

.legal__table-wrap tbody tr:last-child td {
    border-bottom: 0
}

.legal__table-wrap code {
    background: var(--fp-bg-alt);
    color: var(--fp-ink);
    border-radius: 6px;
    padding: .1em .4em;
    font-size: .85em
}

.legal__section {
    border-bottom: 1px solid var(--fp-border);
    scroll-margin-top: calc(var(--fp-header-h) + 1.5rem);
    margin-bottom: 2.25rem;
    padding: 0 0 2.25rem
}

.legal__section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.help.page-hero {
    z-index: 3;
    overflow: visible
}

.help.page-hero .help-crumbs {
    margin-bottom: 1rem
}

.help.page-hero .help-crumbs ol {
    justify-content: center
}

.help.page-hero .help-article__meta {
    justify-content: center;
    margin-top: 1.25rem
}

.help .help-search {
    text-align: left;
    max-width: 640px;
    margin: 1.75rem auto 0;
    position: relative
}

.help .help-search__field {
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
    border-radius: 999px;
    align-items: center;
    gap: .7rem;
    padding: 0 1rem 0 1.1rem;
    transition: border-color .15s, box-shadow .15s;
    display: flex
}

.help .help-search__field>svg {
    color: var(--fp-muted);
    flex: none;
    font-size: 1.2rem
}

.help .help-search__field input {
    min-width: 0;
    font: inherit;
    color: var(--fp-ink);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1 1 0;
    padding: .95rem 0;
    font-size: 1.02rem
}

.help .help-search__field input::placeholder {
    color: color-mix(in srgb, var(--fp-muted) 70%, transparent)
}

.help .help-search__field input::-webkit-search-cancel-button {
    cursor: pointer
}

.help .help-search__field:focus-within {
    border-color: var(--fp-accent);
    box-shadow: 0 0 0 4px var(--fp-brand-ring)
}

.help .help-search__field:focus-within>svg {
    color: var(--fp-accent)
}

.help .help-search__results {
    z-index: 20;
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    box-shadow: var(--fp-shadow-lg);
    max-height: min(60vh, 420px);
    margin: 0;
    padding: .4rem;
    list-style: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    overflow-y: auto
}

.help .help-search__results li a,
.help .help-search__results li .help-search__empty {
    color: var(--fp-ink);
    border-radius: 10px;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .8rem;
    text-decoration: none;
    display: flex
}

.help .help-search__results li a:hover,
.help .help-search__results li.is-active a {
    background: var(--fp-hover)
}

.help .help-search__results li.is-active a {
    background: color-mix(in srgb, var(--fp-accent) 8%, transparent)
}

.help .help-search__results mark {
    color: var(--fp-accent);
    background: 0 0;
    padding: 0;
    font-weight: 700
}

.help .help-search__name {
    font-size: .95rem;
    font-weight: 600
}

.help .help-search__cat {
    color: var(--fp-muted);
    font-size: .8rem
}

.help .help-search__empty {
    color: var(--fp-muted);
    font-size: .92rem
}

.help .help-search__empty a {
    color: var(--fp-accent)
}

.help .help-crumbs {
    margin-bottom: 1.5rem;
    font-size: .88rem
}

.help .help-crumbs ol {
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.help .help-crumbs li {
    align-items: center;
    gap: .3rem;
    display: inline-flex
}

.help .help-crumbs a {
    color: var(--fp-muted);
    text-decoration: none
}

.help .help-crumbs a:hover {
    color: var(--fp-ink)
}

.help .help-crumbs__sep {
    color: var(--fp-accent);
    font-size: .8rem;
    display: inline-flex
}

.help .help-sidenav {
    font-size: .93rem
}

.help .help-sidenav__back {
    color: var(--fp-muted);
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    text-decoration: none;
    display: inline-flex
}

.help .help-sidenav__back:hover {
    color: var(--fp-ink)
}

.help .help-sidenav__title {
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp-ink);
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 700
}

.help .help-sidenav__title a {
    color: inherit;
    text-decoration: none
}

.help .help-sidenav__title a:hover {
    color: var(--fp-accent)
}

.help .help-sidenav ul {
    flex-direction: column;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.help .help-sidenav li a {
    color: var(--fp-ink-soft);
    border-radius: 10px;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: flex
}

.help .help-sidenav li a svg {
    color: var(--fp-muted);
    flex: none;
    font-size: 1.05rem
}

.help .help-sidenav li a:hover {
    background: var(--fp-hover);
    color: var(--fp-ink)
}

.help .help-sidenav li.is-current a {
    background: color-mix(in srgb, var(--fp-accent) 9%, transparent);
    color: var(--fp-accent);
    font-weight: 600
}

.help .help-sidenav li.is-current a svg {
    color: var(--fp-accent)
}

.help .help-list {
    flex-direction: column;
    gap: .6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.help .help-list__item {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: inherit;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    display: flex
}

.help .help-list__item:hover {
    box-shadow: var(--fp-shadow-md);
    border-color: var(--fp-border-strong);
    transform: translateY(-2px)
}

.help .help-list__item:hover .help-list__arrow {
    transform: translate(3px)
}

.help .help-list__text {
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    display: flex
}

.help .help-list__title {
    color: var(--fp-ink);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    display: flex
}

.help .help-list__desc {
    color: var(--fp-muted);
    font-size: .9rem;
    line-height: 1.5
}

.help .help-list__arrow {
    color: var(--fp-accent);
    flex: none;
    margin-left: auto;
    font-size: 1.1rem;
    transition: transform .2s
}

.help .help-list__empty {
    text-align: center;
    color: var(--fp-muted);
    border: 1px dashed var(--fp-border-strong);
    border-radius: var(--fp-radius);
    padding: 1.5rem
}

.help .help-list--compact {
    margin-top: .8rem
}

.help .help-list--compact .help-list__item {
    padding: .8rem 1rem
}

.help .help-list--compact .help-list__desc {
    font-size: .86rem
}

.help .help-badge {
    background: var(--fp-grad);
    color: var(--fp-on-grad);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    padding: .15rem .55rem;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex
}

.help .help-cta {
    border-radius: var(--fp-radius-lg);
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border);
    align-items: center;
    gap: 1.25rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: 1.5rem 1.75rem;
    display: flex
}

.help .help-cta__icon {
    background: var(--fp-grad);
    width: 3rem;
    height: 3rem;
    color: var(--fp-on-grad);
    box-shadow: 0 10px 22px -8px var(--fp-brand-shadow);
    border-radius: 14px;
    flex: none;
    place-items: center;
    font-size: 1.5rem;
    display: grid
}

.help .help-cta__text {
    flex: auto
}

.help .help-cta__text h2 {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700
}

.help .help-cta__text p {
    color: var(--fp-muted);
    margin: .25rem 0 0;
    font-size: .95rem;
    line-height: 1.5
}

.help .help-cta .btn-grad {
    flex: none
}

.help .help-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
    display: grid
}

.help .help-sidenav {
    top: calc(var(--fp-header-h) + 1rem);
    position: sticky
}

.help .help-main {
    min-width: 0
}

.help-hub .help-cats {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    display: grid
}

.help-hub .help-cat {
    border-radius: var(--fp-radius-lg);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: inherit;
    gap: 1rem;
    padding: 1.3rem 1.3rem 1.2rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex
}

.help-hub .help-cat:hover {
    box-shadow: var(--fp-shadow-md);
    border-color: var(--fp-border-strong);
    transform: translateY(-4px)
}

.help-hub .help-cat__icon {
    background: color-mix(in srgb, var(--fp-accent) 9%, transparent);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--fp-accent);
    border-radius: 12px;
    flex: none;
    place-items: center;
    font-size: 1.35rem;
    display: grid
}

.help-hub .help-cat__body {
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    display: flex
}

.help-hub .help-cat__title {
    color: var(--fp-ink);
    letter-spacing: -.01em;
    font-size: 1.02rem;
    font-weight: 700
}

.help-hub .help-cat__desc {
    color: var(--fp-muted);
    font-size: .9rem;
    line-height: 1.5
}

.help-hub .help-cat__count {
    color: var(--fp-accent);
    margin-top: .3rem;
    font-size: .78rem;
    font-weight: 600
}

.help-hub .help-popular {
    margin-top: clamp(2.5rem, 5vw, 4rem)
}

.help-hub .help-popular__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
    font-size: 1.3rem;
    font-weight: 700
}

.help-hub .help-popular__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.help-hub .help-popular__list a {
    border-bottom: 1px solid var(--fp-border);
    color: var(--fp-ink);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    text-decoration: none;
    display: flex
}

.help-hub .help-popular__list a:hover .help-popular__name {
    color: var(--fp-accent)
}

.help-hub .help-popular__list a:hover .help-popular__arrow {
    color: var(--fp-accent);
    transform: translate(3px)
}

.help-hub .help-popular__text {
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    display: flex
}

.help-hub .help-popular__name {
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color .15s
}

.help-hub .help-popular__cat {
    color: var(--fp-muted);
    font-size: .78rem
}

.help-hub .help-popular__arrow {
    color: var(--fp-muted);
    flex: none;
    transition: transform .15s, color .15s
}

.help-quick {
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .9rem;
    max-width: 640px;
    margin: 1rem auto 0;
    font-size: .88rem;
    display: flex
}

.help-quick__label {
    color: var(--fp-muted)
}

.help-quick a {
    color: var(--fp-ink-soft);
    border-bottom: 1px solid var(--fp-border-strong);
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, border-color .15s
}

.help-quick a:hover {
    color: var(--fp-accent);
    border-color: currentColor
}

.help-category__head {
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .5rem;
    display: flex
}

.help-category__head h1 {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800
}

.help-category__head p {
    color: var(--fp-muted);
    margin: .4rem 0 0;
    font-size: 1.05rem;
    line-height: 1.55
}

.help-category__icon {
    background: color-mix(in srgb, var(--fp-accent) 9%, transparent);
    width: 3rem;
    height: 3rem;
    color: var(--fp-accent);
    border-radius: 14px;
    flex: none;
    place-items: center;
    margin-top: .2rem;
    font-size: 1.5rem;
    display: grid
}

.help-category .help-search {
    max-width: none;
    margin: 1.25rem 0 0
}

.help-category .help-popular__list {
    grid-template-columns: 1fr
}

.help-article__grid {
    grid-template-columns: 230px minmax(0, 1fr) 200px;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
    display: grid
}

.help-article__main {
    max-width: 760px
}

.help-article__meta {
    color: var(--fp-muted);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.1rem;
    font-size: .84rem;
    display: flex
}

.help-article__meta span {
    align-items: center;
    gap: .3rem;
    display: inline-flex
}

.help-article__meta svg {
    font-size: .95rem
}

.help-article .prose {
    margin-top: 0
}

.help-article .help-toc {
    font-size: .88rem
}

.help-article .help-toc ol {
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.help-article .help-toc a {
    border-left: 2px solid var(--fp-border);
    color: var(--fp-muted);
    padding: .3rem 0 .3rem .75rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    display: block
}

.help-article .help-toc a:hover {
    color: var(--fp-ink)
}

.help-article .help-toc li.is-active a {
    color: var(--fp-accent);
    border-color: var(--fp-accent);
    font-weight: 600
}

.help-article .help-toc--side {
    top: calc(var(--fp-header-h) + 1rem);
    position: sticky
}

.help-article .help-toc--side h2 {
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp-ink);
    margin: 0 0 .7rem;
    font-size: .74rem;
    font-weight: 700
}

.help-article .help-toc--inline {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    background: var(--fp-bg-alt);
    margin-top: 1.5rem;
    padding: .75rem 1rem;
    display: none
}

.help-article .help-toc--inline summary {
    cursor: pointer;
    color: var(--fp-ink);
    font-weight: 600
}

.help-article .help-toc--inline ol {
    margin-top: .6rem
}

.help-article .help-related {
    border-top: 1px solid var(--fp-border);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.5rem
}

.help-article .help-related h2 {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700
}

@media (max-width:1100px) {
    .help-article__grid {
        grid-template-columns: 220px minmax(0, 1fr)
    }

    .help-article .help-toc--side {
        display: none
    }

    .help-article .help-toc--inline {
        display: block
    }
}

@media (max-width:860px) {

    .help .help-layout,
    .help-article__grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .help .help-sidenav {
        position: static
    }

    .help-article .help-sidenav--articles {
        border-top: 1px solid var(--fp-border);
        order: 2;
        padding-top: 1.5rem
    }

    .help .help-cta {
        flex-direction: column;
        align-items: flex-start
    }

    .help-category__head {
        flex-direction: column
    }
}

.mag img {
    color: #0000;
    background-color: var(--fp-bg-alt)
}

.mag .mag-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp-accent);
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex
}

.mag .mag-kicker:hover {
    text-underline-offset: .2em;
    text-decoration: underline
}

.mag .mag-meta {
    color: var(--fp-muted);
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .84rem;
    display: flex
}

.mag .mag-meta__sep {
    background: color-mix(in srgb, var(--fp-muted) 75%, transparent);
    vertical-align: middle;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    margin: 0 .2rem;
    font-size: 0;
    display: inline-block
}

.mag .mag-crumbs {
    margin-bottom: 1.75rem;
    font-size: .88rem
}

.mag .mag-crumbs ol {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mag .mag-crumbs li {
    align-items: center;
    gap: .3rem;
    display: inline-flex
}

.mag .mag-crumbs a {
    color: var(--fp-muted);
    text-decoration: none
}

.mag .mag-crumbs a:hover {
    color: var(--fp-ink)
}

.mag .mag-crumbs__home {
    display: inline-flex
}

.mag .mag-crumbs__home svg {
    font-size: 1.05rem
}

.mag .mag-crumbs__current {
    color: var(--fp-ink-soft)
}

.mag .mag-crumbs__sep {
    color: var(--fp-accent);
    font-size: .8rem;
    display: inline-flex
}

.mag.page-hero {
    z-index: 3;
    overflow: visible
}

.mag.page-hero .mag-kicker {
    margin-bottom: .9rem
}

.mag.page-hero .mag-category__intro {
    text-align: left;
    max-width: 640px;
    margin: 1.25rem auto 0;
    font-size: 1rem
}

.mag.page-hero .mag-category__intro p {
    margin: 0
}

.mag.page-hero .mag-category__intro p+p {
    margin-top: .8em
}

.mag .mag-search {
    text-align: left;
    max-width: 600px;
    margin: 1.75rem auto 0;
    position: relative
}

.mag .mag-search__field {
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
    border-radius: 999px;
    align-items: center;
    gap: .7rem;
    padding: 0 1rem 0 1.1rem;
    transition: border-color .15s, box-shadow .15s;
    display: flex
}

.mag .mag-search__field>svg {
    color: var(--fp-muted);
    flex: none;
    font-size: 1.2rem
}

.mag .mag-search__field input {
    min-width: 0;
    font: inherit;
    color: var(--fp-ink);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1 1 0;
    padding: .9rem 0;
    font-size: 1rem
}

.mag .mag-search__field input::placeholder {
    color: color-mix(in srgb, var(--fp-muted) 70%, transparent)
}

.mag .mag-search__field input::-webkit-search-cancel-button {
    cursor: pointer
}

.mag .mag-search__field:focus-within {
    border-color: var(--fp-accent);
    box-shadow: 0 0 0 4px var(--fp-brand-ring)
}

.mag .mag-search__field:focus-within>svg {
    color: var(--fp-accent)
}

.mag .mag-search__results {
    z-index: 20;
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    box-shadow: var(--fp-shadow-lg);
    max-height: min(60vh, 420px);
    margin: 0;
    padding: .4rem;
    list-style: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    overflow-y: auto
}

.mag .mag-search__results li a,
.mag .mag-search__results li .mag-search__empty {
    color: var(--fp-ink);
    border-radius: 10px;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .8rem;
    text-decoration: none;
    display: flex
}

.mag .mag-search__results li a:hover,
.mag .mag-search__results li.is-active a {
    background: var(--fp-hover)
}

.mag .mag-search__results li.is-active a {
    background: color-mix(in srgb, var(--fp-accent) 8%, transparent)
}

.mag .mag-search__results mark {
    color: var(--fp-accent);
    background: 0 0;
    padding: 0;
    font-weight: 700
}

.mag .mag-search__name {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35
}

.mag .mag-search__cat {
    color: var(--fp-muted);
    font-size: .78rem
}

.mag .mag-search__empty {
    color: var(--fp-muted);
    font-size: .92rem
}

.mag .mag-chips {
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.5rem auto 0;
    display: flex
}

.mag .mag-chips a {
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    color: var(--fp-ink-soft);
    border-radius: 999px;
    align-items: center;
    padding: .45rem .95rem;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
    display: inline-flex
}

.mag .mag-chips a:hover {
    color: var(--fp-ink);
    border-color: var(--fp-ink)
}

.mag .mag-chips a.is-current {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: var(--fp-surface)
}

.mag .mag-lead {
    border-bottom: 1px solid var(--fp-border);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    display: grid
}

.mag .mag-lead__media {
    border-radius: var(--fp-radius-lg);
    background: var(--fp-bg-alt);
    box-shadow: var(--fp-shadow-md);
    aspect-ratio: 3/2;
    display: block;
    overflow: hidden
}

.mag .mag-lead__media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.mag .mag-lead__body {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    display: flex
}

.mag .mag-lead__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.03em;
    text-wrap: balance;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1
}

.mag .mag-lead__title a {
    color: var(--fp-ink);
    text-decoration: none
}

.mag .mag-lead__title a:hover {
    color: var(--fp-accent)
}

.mag .mag-lead__excerpt {
    color: var(--fp-ink-soft);
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6
}

.mag .mag-lead__more {
    color: var(--fp-accent);
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex
}

.mag .mag-lead__more svg {
    transition: transform .15s
}

.mag .mag-lead__more:hover svg {
    transform: translate(3px)
}

.mag .mag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3.75rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
    max-width: 1024px;
    margin-inline: auto;
    display: grid
}

.mag .mag-grid--related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
    max-width: none
}

.mag .mag-card {
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    display: flex
}

.mag .mag-card__media {
    border-radius: var(--fp-radius);
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border);
    aspect-ratio: 3/2;
    display: block;
    overflow: hidden
}

.mag .mag-card__media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .35s;
    display: block
}

.mag .mag-card:hover .mag-card__media img {
    transform: scale(1.03)
}

.mag .mag-card__body {
    flex-direction: column;
    gap: .65rem;
    display: flex
}

.mag .mag-card__body>.mag-meta {
    margin-top: .35rem
}

.mag .mag-card__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.025em;
    text-wrap: pretty;
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2
}

.mag .mag-card__title a {
    color: var(--fp-ink);
    text-decoration: none
}

.mag .mag-card__title a:hover {
    color: var(--fp-accent)
}

.mag .mag-card__excerpt {
    color: var(--fp-muted);
    margin: 0;
    font-size: 1rem;
    line-height: 1.6
}

.mag-grid--related .mag .mag-card {
    gap: .9rem
}

.mag-grid--related .mag .mag-card .mag-card__title {
    font-size: 1.18rem;
    line-height: 1.3
}

.mag-grid--related .mag .mag-card .mag-card__excerpt {
    font-size: .95rem
}

.mag .mag-card.is-new {
    animation: .35s both mag-in
}

.mag .mag-list {
    flex-direction: column;
    gap: 0;
    display: flex
}

.mag .mag-row {
    border-bottom: 1px solid var(--fp-border);
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    display: grid
}

.mag .mag-row:first-child {
    padding-top: 0
}

.mag .mag-row__media {
    border-radius: var(--fp-radius);
    background: var(--fp-bg-alt);
    border: 1px solid var(--fp-border);
    aspect-ratio: 3/2;
    display: block;
    overflow: hidden
}

.mag .mag-row__media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .35s;
    display: block
}

.mag .mag-row:hover .mag-row__media img {
    transform: scale(1.03)
}

.mag .mag-row__body {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    min-width: 0;
    display: flex
}

.mag .mag-row__title {
    font-family: var(--fp-font-display);
    letter-spacing: -.025em;
    text-wrap: pretty;
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2
}

.mag .mag-row__title a {
    color: var(--fp-ink);
    text-decoration: none
}

.mag .mag-row__title a:hover {
    color: var(--fp-accent)
}

.mag .mag-row__excerpt {
    color: var(--fp-ink-soft);
    margin: 0;
    font-size: 1rem;
    line-height: 1.6
}

.mag .mag-row__more {
    color: var(--fp-accent);
    align-items: center;
    gap: .4rem;
    margin-top: .2rem;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex
}

.mag .mag-row__more svg {
    transition: transform .15s
}

.mag .mag-row__more:hover svg {
    transform: translate(3px)
}

.mag .mag-row.is-new {
    animation: .35s both mag-in
}

.mag .mag-more {
    justify-content: center;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    display: flex
}

.mag .mag-more.is-loading button {
    opacity: .6;
    pointer-events: none
}

.mag .mag-empty {
    text-align: center;
    color: var(--fp-muted);
    border: 1px dashed var(--fp-border-strong);
    border-radius: var(--fp-radius);
    padding: 2.5rem 1rem
}

.mag .mag-section-title {
    font-family: var(--fp-font-display);
    letter-spacing: -.02em;
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    font-weight: 700
}

.mag.mag-post .mag-post__head-inner {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 860px;
    display: flex
}

.mag.mag-post .mag-post__head-inner .mag-crumbs {
    margin-bottom: .75rem
}

.mag.mag-post .mag-post__head-inner .page-hero__title {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 800
}

.mag.mag-post .mag-post__cover {
    max-width: 1100px;
    margin: clamp(1.75rem, 3.5vw, 3rem) auto 0
}

.mag.mag-post .mag-post__cover img {
    border-radius: var(--fp-radius-lg);
    border: 1px solid var(--fp-border);
    width: 100%;
    height: auto;
    box-shadow: var(--fp-shadow-md);
    background: var(--fp-bg-alt);
    display: block
}

.mag.mag-post .mag-post__body {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem)
}

.mag.mag-post .mag-post__layout {
    display: block
}

.mag.mag-post .mag-post__rail {
    display: none
}

.mag.mag-post .mag-post__foot {
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: flex
}

.mag .mag-byline {
    color: var(--fp-muted);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    display: flex
}

.mag .mag-byline__avatar {
    background: var(--fp-grad);
    width: 2.1rem;
    height: 2.1rem;
    color: var(--fp-on-grad);
    border-radius: 50%;
    place-items: center;
    font-size: .9rem;
    font-weight: 700;
    display: inline-grid;
    overflow: hidden
}

.mag .mag-byline__avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.mag .mag-byline__name {
    color: var(--fp-ink);
    font-weight: 600
}

.mag .mag-byline time {
    color: inherit
}

.mag .mag-toc {
    font-size: .88rem
}

.mag .mag-toc ol {
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mag .mag-toc a {
    border-left: 2px solid var(--fp-border);
    color: var(--fp-muted);
    padding: .3rem 0 .3rem .75rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    display: block
}

.mag .mag-toc a:hover {
    color: var(--fp-ink)
}

.mag .mag-toc li.is-active a {
    color: var(--fp-accent);
    border-color: var(--fp-accent);
    font-weight: 600
}

.mag .mag-toc--inline {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    background: var(--fp-bg-alt);
    max-width: 720px;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    padding: .75rem 1rem
}

.mag .mag-toc--inline summary {
    cursor: pointer;
    color: var(--fp-ink);
    font-weight: 600
}

.mag .mag-toc--inline ol {
    margin-top: .6rem
}

.mag .mag-toc--rail h2 {
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp-ink);
    margin: 0 0 .7rem;
    font-size: .74rem;
    font-weight: 700
}

.mag .mag-rail-cta {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-muted);
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.15rem 1.25rem;
    font-size: .9rem;
    display: flex
}

.mag .mag-rail-cta p {
    margin: 0;
    line-height: 1.5
}

.mag .mag-rail-cta__title {
    font-family: var(--fp-font-display);
    color: var(--fp-ink);
    letter-spacing: -.02em;
    font-size: 1.05rem;
    font-weight: 700
}

.mag .mag-rail-cta .btn-grad {
    margin-top: .25rem
}

.mag .mag-rail-cta__link {
    color: var(--fp-accent);
    font-weight: 600;
    text-decoration: none
}

.mag .mag-rail-cta__link:hover {
    text-decoration: underline
}

.mag .mag-prose {
    font-size: 1.125rem;
    line-height: 1.7
}

.mag .mag-prose>* {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto
}

.mag .mag-prose>.mag-figure--wide,
.mag .mag-prose>.mag-block--wide {
    max-width: 960px
}

.mag .mag-prose>.mag-figure--full,
.mag .mag-prose>.mag-block--full {
    max-width: none
}

.mag .mag-prose>h2 {
    font-size: 1.7rem
}

.mag .mag-prose>h3 {
    font-size: 1.25rem
}

.mag .mag-prose>p:first-child {
    color: var(--fp-ink-soft);
    font-size: 1.22rem;
    line-height: 1.6
}

.mag .mag-figure {
    margin: 2em auto
}

.mag .mag-figure .lightbox-link {
    display: block
}

.mag .mag-figure img {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-bg-alt);
    width: 100%;
    height: auto;
    display: block
}

.mag .mag-figure figcaption {
    color: var(--fp-muted);
    text-align: center;
    margin-top: .7rem;
    font-size: .86rem;
    line-height: 1.5
}

.mag .mag-block {
    margin: 2em auto
}

.mag .mag-share {
    border-top: 1px solid var(--fp-border);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: 1.5rem;
    display: flex
}

.mag .mag-share__label {
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp-muted);
    margin-right: .35rem;
    font-size: .8rem;
    font-weight: 700
}

.mag .mag-share__btn {
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-surface);
    color: var(--fp-ink-soft);
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    display: inline-flex
}

.mag .mag-share__btn svg {
    font-size: 1.05rem
}

.mag .mag-share__btn:hover {
    color: var(--fp-ink);
    border-color: var(--fp-ink)
}

.mag .mag-share__btn .mag-share__copied {
    display: none
}

.mag .mag-share__btn.is-copied {
    color: var(--fp-success);
    border-color: var(--fp-success)
}

.mag .mag-share__btn.is-copied .mag-share__copy {
    display: none
}

.mag .mag-share__btn.is-copied .mag-share__copied {
    align-items: center;
    gap: .35rem;
    display: inline-flex
}

.mag .mag-related {
    padding-top: .5rem
}

.mag .mag-prevnext {
    border-top: 1px solid var(--fp-border);
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
    display: grid
}

.mag .mag-prevnext__link {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-ink);
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
    display: flex
}

.mag .mag-prevnext__link:hover {
    border-color: var(--fp-border-strong);
    transform: translateY(-2px)
}

.mag .mag-prevnext__link--next {
    text-align: right;
    align-items: flex-end
}

.mag .mag-prevnext__label {
    color: var(--fp-muted);
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex
}

.mag .mag-prevnext__title {
    font-weight: 600;
    line-height: 1.35
}

@keyframes mag-in {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (min-width:1100px) {
    .mag.mag-post .mag-toc--inline {
        display: none
    }

    .mag.mag-post .mag-post__layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        column-gap: 3rem;
        display: grid
    }

    .mag.mag-post .mag-prose {
        grid-column: 1;
        min-width: 0
    }

    .mag.mag-post .mag-prose>* {
        max-width: 795px;
        margin-left: 0;
        margin-right: 0
    }

    .mag.mag-post .mag-prose>.mag-figure--wide,
    .mag.mag-post .mag-prose>.mag-block--wide,
    .mag.mag-post .mag-prose>.mag-figure--full,
    .mag.mag-post .mag-prose>.mag-block--full {
        max-width: none
    }

    .mag.mag-post .mag-post__rail {
        grid-column: 2;
        align-self: stretch;
        min-width: 0;
        display: block
    }

    .mag.mag-post .mag-post__rail-inner {
        top: calc(var(--fp-header-h) + 1.5rem);
        position: sticky
    }
}

@media (max-width:1000px) {
    .mag .mag-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:760px) {
    .mag .mag-lead {
        grid-template-columns: 1fr;
        gap: 1.25rem
    }

    .mag .mag-row {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .mag .mag-prevnext {
        grid-template-columns: 1fr
    }

    .mag .mag-prevnext__link--next {
        text-align: left;
        align-items: flex-start
    }

    .mag .mag-prose {
        font-size: 1.05rem
    }

    .mag .mag-share__btn span:not(.mag-share__copy):not(.mag-share__copied) {
        display: none
    }
}

@media (max-width:620px) {
    .mag .mag-grid {
        grid-template-columns: 1fr
    }
}

@media (prefers-reduced-motion:reduce) {

    .mag .mag-card.is-new,
    .mag .mag-row.is-new {
        animation: none
    }

    .mag .mag-card__media img,
    .mag .mag-row__media img {
        transition: none
    }
}