/* =======================================*/
/* Quarito Public Website Theme */
/* =======================================*/

/*
 * The one stylesheet for every public page: the marketing pages, Help Center, Partners,
 * Community, the legal pages, Payments, and a customer's help center (/kb).
 * The look is the dashboard's and the landing page's: soft greys and white cards in light,
 * ink navy in dark, Inter Tight for titles, Inter for everything else, rounded shapes, and
 * the peach-to-sky gradient used sparingly (the main button, the dot before a kicker,
 * one serif word in a headline, a soft haze behind the top of a page).
 * Text on the gradient is always ink: white on its pale stops is under 2.4:1.
 * Light is the default; dark when picked in the dashboard or by the device (theme_header sets data-theme).
 * Each section ends with its own breakpoints: PC 1280px, Tablet 992px, Mobile 768px, Small Mobile 576px.
 */





/* =======================================*/
/* Quarito Variables */
/* =======================================*/

:root {
    color-scheme: light;

    /* Colors */
    --bg: #F4F4F7;
    --bg_muted: #EAEAF0;
    --surface: #FFFFFF;
    --border: #DCDCE4;
    --hairline: #E8E8EE;
    --text: #0A0B10;
    --text_muted: #5D6070;
    --text_faint: #81848F;
    --accent: #7C3AED; /* the gradient's violet, deep enough for text on white (5.7:1) */
    --accent_dark: #6A2BD6;
    --accent_soft: #F1EAFE;
    --accent_text: #FFFFFF;
    --danger: #D92D20;
    --success: #17A35B;

    /* The gradient */
    --gradient: linear-gradient(120deg, #FFB199, #D38CFF 50%, #7CC8FF);
    --on_gradient: #0A0B10;
    --haze: .16; /* the gradient haze behind a page's top */

    /* Corners and shadows */
    --radius: 10px;
    --radius_lg: 16px;
    --radius_xl: 22px;
    --bubble: 10px 10px 10px 3px; /* a speech bubble: one sharp corner */
    --bubble_lg: 16px 16px 16px 4px; /* the same shape for cards and other section boxes */
    --bubble_xl: 22px 22px 22px 6px;
    --shadow: 0 16px 40px rgba(16, 17, 26, .12);
    --shadow_sm: 0 1px 2px rgba(16, 17, 26, .06), 0 2px 8px rgba(16, 17, 26, .04);

    /* Layout */
    --container: 1120px;
    --gutter: 24px;
    --header_h: 68px;

    /* Fonts */
    --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font_display: 'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    --font_serif: 'Instrument Serif', Georgia, serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* The magnifier inside search fields (a grey that reads on both themes) */
    --search_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2381848F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");

    /* The example chats on the marketing pages */
    --demo_accent: #6D5BF0; /* a customer's brand colour in the examples */
    --demo_on: #FFFFFF; /* text on it, picked by theme.js for contrast */
    --online: var(--success);
    --code_string: #B4532A;

    /* The Premium column in Compare plans */
    --tint: color-mix(in srgb, var(--accent) 5%, var(--surface));
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    :root {
        --header_h: 60px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    :root {
        --gutter: 16px;
    }
}





/* =======================================*/
/* Dark Theme */
/* =======================================*/

/* Dark from the device setting, unless light was picked */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0A0B10;
        --bg_muted: #1A1D27;
        --surface: #11131A;
        --border: #2E3140;
        --hairline: #21242E;
        --text: #F4F4F8;
        --text_muted: #9598A8;
        --text_faint: #737688;
        --accent: #D38CFF;
        --accent_dark: #E3B3FF;
        --accent_soft: #251B35;
        --accent_text: #0A0B10;
        --danger: #FF8A80;
        --success: #7CE0A6;
        --haze: .12;
        --shadow: 0 20px 60px rgba(0, 0, 0, .55);
        --shadow_sm: 0 1px 2px rgba(0, 0, 0, .4);
        --code_string: #FFB199;
    }
    :root:not([data-theme="light"]) .brand_logo:not(.on_dark) {
        display: none;
    }
    :root:not([data-theme="light"]) .brand_logo.on_dark {
        display: block;
    }
    :root:not([data-theme="light"]) .illo:not(.on_dark) {
        display: none;
    }
    :root:not([data-theme="light"]) .illo.on_dark {
        display: block;
    }
}
/* Dark picked in the dashboard */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0A0B10;
    --bg_muted: #1A1D27;
    --surface: #11131A;
    --border: #2E3140;
    --hairline: #21242E;
    --text: #F4F4F8;
    --text_muted: #9598A8;
    --text_faint: #737688;
    --accent: #D38CFF;
    --accent_dark: #E3B3FF;
    --accent_soft: #251B35;
    --accent_text: #0A0B10;
    --danger: #FF8A80;
    --success: #7CE0A6;
    --haze: .12;
    --shadow: 0 20px 60px rgba(0, 0, 0, .55);
    --shadow_sm: 0 1px 2px rgba(0, 0, 0, .4);
    --code_string: #FFB199;
}
:root[data-theme="dark"] .brand_logo:not(.on_dark) {
    display: none;
}
:root[data-theme="dark"] .brand_logo.on_dark {
    display: block;
}
:root[data-theme="dark"] .illo:not(.on_dark) {
    display: none;
}
:root[data-theme="dark"] .illo.on_dark {
    display: block;
}





/* =======================================*/
/* Reset & Base */
/* =======================================*/

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
    font-family: var(--font_display);
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--text);
    text-wrap: balance;
}
h3 {
    letter-spacing: -.015em;
}
p {
    text-wrap: pretty;
}
a {
    color: inherit;
}
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
::selection {
    background: rgba(211, 140, 255, .35);
}
code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--bg_muted);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 1px 6px;
    overflow-wrap: anywhere;
}





/* =======================================*/
/* Layout & Text Helpers */
/* =======================================*/

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container.narrow {
    max-width: 808px;
}
.muted {
    color: var(--text_muted);
}
/* The one serif word in a headline, written in the gradient */
.accent_word {
    font-family: var(--font_serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.08em;
    letter-spacing: -.01em;
    padding-right: .06em;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sr_only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gradient);
}
.lead {
    max-width: 60ch;
    font-size: 19px;
    line-height: 1.55;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .lead {
        font-size: 17px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--bubble);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, border-color .15s ease, color .15s ease;
}
.btn_primary {
    background: var(--gradient);
    color: var(--on_gradient);
}
.btn_primary:hover {
    filter: brightness(1.05) saturate(1.1);
    transform: translateY(-1px);
}
.btn_ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn_ghost:hover {
    border-color: var(--text_faint);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
    .btn_primary:hover {
        transform: none;
    }
}





/* =======================================*/
/* Navigation Bar */
/* =======================================*/

.site_header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
}
.header_inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--header_h);
}
.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    text-decoration: none;
}
/* the Weave logo: logo.svg, and logo-dark.svg (.on_dark) in dark */
.brand_logo {
    display: block;
    width: auto;
    height: 28px;
    flex: 0 0 auto;
}
.brand_logo.on_dark {
    display: none;
}
.brand_tagline {
    padding-left: 16px;
    border-left: 1px solid var(--border);
    font-size: 14px;
    line-height: 20px;
    color: var(--text_muted);
    white-space: nowrap;
}
.site_nav {
    display: flex;
    gap: 24px;
    margin-left: auto;
}
.site_nav a {
    position: relative;
    text-decoration: none;
    color: var(--text_muted);
    font-size: 14px;
    white-space: nowrap;
    transition: color .15s ease;
}
.site_nav a:hover, .site_nav a[aria-current="page"] {
    color: var(--text);
}
/* The page you're on: a short gradient line under its name */
.site_nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient);
}
.site_nav .nav_login {
    display: none;
}
.header_actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
/* The menu button, on narrow screens only */
.nav_toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.nav_toggle svg {
    width: 20px;
    height: 20px;
}
.nav_toggle .icon_close, .nav_toggle[aria-expanded="true"] .icon_open {
    display: none;
}
.nav_toggle[aria-expanded="true"] .icon_close {
    display: block;
}
/* Skip to the page's content, shown when tabbed to */
.skip_link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 30;
    padding: 10px 16px;
    border-radius: var(--bubble);
    background: var(--text);
    color: var(--bg);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.skip_link:focus {
    top: 12px;
}
/* "Log in" reads as a plain link next to the one gradient button */
.header_actions .btn {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
}
.header_actions .btn_ghost {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 500;
    color: var(--text_muted);
}
.header_actions .btn_ghost:hover {
    color: var(--text);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    /* Narrow screens: the links fold into the menu button */
    .nav_toggle {
        display: inline-flex;
    }
    .header_inner {
        gap: 14px;
    }
    .header_actions {
        margin-left: auto;
    }
    .site_nav {
        position: absolute;
        top: var(--header_h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 6px var(--gutter) 18px;
        background: var(--bg);
        border-bottom: 1px solid var(--hairline);
        box-shadow: var(--shadow);
    }
    .site_nav.is_open {
        display: flex;
    }
    .site_nav a {
        padding: 14px 0;
        border-bottom: 1px solid var(--hairline);
        font-size: 16px;
        color: var(--text);
    }
    .site_nav a:last-child {
        border-bottom: 0;
    }
    .site_nav a[aria-current="page"]::after {
        left: auto;
        right: 0;
        top: 50%;
        bottom: auto;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        transform: translateY(-50%);
    }
    .site_nav .nav_login {
        display: block;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .brand_logo {
        height: 26px;
    }
    .header_inner {
        gap: 16px;
    }
    .header_actions {
        margin-left: auto;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .brand_logo {
        height: 22px;
    }
    .header_actions {
        gap: 14px;
    }
    .header_actions .btn_primary {
        min-height: 36px;
        padding: 0 12px;
    }
    /* it's in the menu */
    .header_actions .header_login {
        display: none;
    }
}





/* =======================================*/
/* Numbered Feature Cards (Partners, Community) */
/* =======================================*/

.features {
    padding: 24px 0 96px;
}
.features h2 {
    margin-bottom: 28px;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -.04em;
    line-height: 1.1;
}
.feature_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    counter-reset: feature;
}
.feature_card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.feature_card h3 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
/* The number in a small speech bubble */
.feature_card h3::before {
    counter-increment: feature;
    content: counter(feature, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.feature_card p {
    color: var(--text_muted);
    font-size: 15px;
}
.partner_points {
    margin: 32px 0 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .features {
        padding-bottom: 72px;
    }
    .partner_points {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Page Body (Help, Partners, Community, Legal, Payments) */
/* =======================================*/

.page_body {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding: 64px 0 96px;
}
.page_body::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: var(--gradient);
    opacity: var(--haze);
    filter: blur(120px);
    left: 50%;
    top: -260px;
    width: 900px;
    height: 520px;
    transform: translateX(-50%);
}
.page_body h1 {
    max-width: 20ch;
    margin-bottom: 18px;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.04;
}
.page_body h2 {
    margin: 44px 0 10px;
    font-size: 26px;
    letter-spacing: -.03em;
    line-height: 1.2;
}
.page_body p {
    margin-bottom: 14px;
}
.page_body .lead {
    margin-bottom: 24px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .page_body {
        padding: 44px 0 72px;
    }
    .page_body::before {
        width: 600px;
        height: 400px;
        top: -200px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Forms */
/* =======================================*/

.form_stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 560px;
    margin-top: 28px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_xl);
    box-shadow: var(--shadow);
}
.form_stack label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}
.form_stack input, .form_stack textarea {
    font: inherit;
    font-weight: 400;
    font-size: 16px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form_stack textarea {
    resize: vertical;
    line-height: 1.5;
}
.form_stack input::placeholder, .form_stack textarea::placeholder {
    color: var(--text_faint);
}
.form_stack input:focus, .form_stack textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_soft);
}
.form_stack .btn {
    align-self: flex-start;
    margin-top: 4px;
}
.page_body .form_note {
    margin: 0;
    font-size: 13px;
}
.form_stack .optional {
    font-style: normal;
    font-weight: 400;
    color: var(--text_faint);
}
.form_stack .field_error {
    min-height: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--danger);
}
.form_stack .field_error:empty {
    display: none;
}
.form_stack .has_error input, .form_stack .has_error textarea {
    border-color: var(--danger);
}
.form_stack .has_error input:focus, .form_stack .has_error textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.form_stack .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
    transform: none;
}
.form_status {
    margin: 0 !important;
    font-size: 15px;
}
.form_status:empty {
    display: none;
}
.form_status.is_success {
    padding: 12px 16px;
    border-radius: 12px 12px 12px 4px;
    background: var(--accent_soft);
    color: var(--text);
}
.form_status.is_error {
    color: var(--danger);
}
/* Honeypot — off screen, not display:none, which some bots skip */
.hp_field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.form_stack select {
    width: 100%;
    min-height: 46px;
    padding: 11px 40px 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    background: var(--surface);
    font: inherit;
    font-weight: 400;
    font-size: 16px;
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2381848F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.form_stack select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_soft);
}
.form_small {
    font-size: 13px;
    color: var(--text_faint);
}
.form_small a {
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .form_stack {
        padding: 24px 20px;
        border-radius: var(--bubble_lg);
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .form_pair {
        grid-template-columns: minmax(0, 1fr);
    }
}





/* =======================================*/
/* Footer */
/* =======================================*/

.site_footer {
    padding: 64px 0 36px;
    border-top: 1px solid var(--hairline);
    background: var(--surface);
    font-size: 14px;
}
.footer_grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.footer_brand .brand_logo {
    height: 26px;
}
.footer_brand p {
    max-width: 300px;
    margin-top: 14px;
    color: var(--text_muted);
}
.footer_brand .btn {
    margin-top: 20px;
    min-height: 40px;
    font-size: 14px;
}
.footer_col h2 {
    margin-bottom: 14px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_faint);
}
.footer_col ul {
    list-style: none;
    display: grid;
    gap: 10px;
}
.footer_col a, .footer_base a {
    color: var(--text_muted);
    text-decoration: none;
    transition: color .15s ease;
}
.footer_col a:hover, .footer_base a:hover {
    color: var(--text);
}
.footer_base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 52px;
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
    color: var(--text_faint);
}
.footer_legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .footer_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer_brand {
        grid-column: 1 / -1;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Sections */
/* =======================================*/

.section {
    padding: 104px 0;
    scroll-margin-top: var(--header_h);
}
.section + .section {
    padding-top: 0;
}
/* A white band, for rhythm between two grey ones */
.section.band {
    padding-top: 104px;
    background: var(--surface);
    border-block: 1px solid var(--hairline);
}
.section.band + .section {
    padding-top: 104px;
}
.section_head {
    max-width: 660px;
    margin-bottom: 52px;
}
.section_head.center {
    margin-inline: auto;
    text-align: center;
}
.section_head h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.08;
}
.section_head .dek {
    margin-top: 18px;
}
.section_head .eyebrow {
    margin-bottom: 16px;
}
.dek {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text_muted);
}
.section_more {
    margin-top: 36px;
    text-align: center;
    color: var(--text_muted);
}
.text_link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
}
.text_link:hover {
    text-decoration: underline;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .section {
        padding: 76px 0;
    }
    .section + .section {
        padding-top: 0;
    }
    .section.band, .section.band + .section {
        padding-block: 76px;
    }
    .section_head {
        margin-bottom: 36px;
    }
    .dek {
        font-size: 17px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Page Hero */
/* =======================================*/

.page_hero {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding: 56px 0 88px;
}
.page_hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: 50%;
    top: -240px;
    width: 920px;
    height: 560px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--gradient);
    opacity: var(--haze);
    filter: blur(120px);
}
.page_head {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.page_head h1 {
    margin-top: 22px;
    font-size: clamp(40px, 5.4vw, 66px);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1.03;
}
.page_head .dek {
    max-width: 36em;
    margin: 22px auto 0;
}
.page_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .page_hero {
        padding: 36px 0 64px;
    }
    .page_hero::before {
        width: 600px;
        height: 420px;
        top: -200px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Chips, Ticks & Icons */
/* =======================================*/

/* A pill with the green online dot */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 13px 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    color: var(--text_muted);
}
.online_dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--online);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 18%, transparent);
}
/* A list with violet ticks */
.check_list {
    list-style: none;
    display: grid;
    gap: 11px;
}
.check_list li {
    position: relative;
    padding-left: 28px;
}
.check_list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .5em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
.tick {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* A line drawing in a speech-bubble frame */
.feature_icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px;
    background: var(--bg);
    color: var(--text);
}
.feature_icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Cards & Split Layout */
/* =======================================*/

/* A raised card */
.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.band .card {
    background: var(--bg);
    box-shadow: none;
}
/* Two columns: words and a picture */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}
.split .section_head {
    margin-bottom: 0;
}
.split.reverse > :first-child {
    order: 2;
}
.split .check_list {
    margin-top: 30px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }
    .split.reverse > :first-child {
        order: 0;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Choice Chips */
/* =======================================*/

/* A row of choices: tabs, filters and segmented switches share the bubble chip */
.choice_row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text_muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.choice:hover {
    border-color: var(--text_faint);
    color: var(--text);
}
.choice[aria-selected="true"], .choice[aria-pressed="true"], .choice[aria-checked="true"] {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
}
.choice svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* A control's label above it, in the examples */
.control_label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .choice {
        transition: none;
    }
}





/* =======================================*/
/* Benefits & Steps */
/* =======================================*/

.benefit_grid, .steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    counter-reset: card;
}
.benefit, .step {
    padding: 32px 28px;
}
.benefit_number {
    font-family: var(--font_display);
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.benefit h3, .step h3 {
    margin: 20px 0 8px;
    font-size: 21px;
    font-weight: 500;
}
.benefit p, .step p {
    color: var(--text_muted);
}
.step_number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.band .step_number {
    background: var(--surface);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .benefit_grid, .steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .benefit, .step {
        padding: 24px;
    }
}





/* =======================================*/
/* Big Steps & Step Pictures */
/* =======================================*/

.big_steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.big_step {
    display: flex;
    flex-direction: column;
    padding: 30px 28px 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header_h) + 20px);
}
.big_step h3 {
    margin: 20px 0 8px;
    font-size: 22px;
    font-weight: 500;
}
.big_step p {
    color: var(--text_muted);
}
/* The picture at the foot of each step (Illustrations/: step_1 to step_3), on a band of the page's colour */
.step_pic {
    margin: 26px -28px 0;
    border-top: 1px solid var(--hairline);
    background: var(--bg);
}
/* Inside a white band the cards are grey, so the picture's band turns white */
.band .step_pic {
    background: var(--surface);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .big_steps {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Tiles & Line Lists */
/* =======================================*/

.tile_grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.tile_grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tile {
    padding: 24px;
    transition: border-color .2s ease, transform .2s ease;
}
.tile:hover {
    border-color: var(--border);
}
.tile h3 {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.tile p {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text_muted);
}
a.tile {
    display: block;
    color: inherit;
    text-decoration: none;
}
a.tile:hover {
    transform: translateY(-2px);
}
.tile_link {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}
/* A list of short lines with a hairline above each */
.line_list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
}
.line_list li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 0 28px;
    border-top: 1px solid var(--border);
}
.line_list strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.line_list span {
    font-size: 15px;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .tile_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tile_grid.three {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .line_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .tile_grid, .line_list {
        grid-template-columns: minmax(0, 1fr);
    }
    .tile {
        padding: 24px;
    }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .tile {
        transition: none;
    }
    a.tile:hover {
        transform: none;
    }
}





/* =======================================*/
/* Pictures */
/* =======================================*/

/* A picture made in Illustrations/ by render.mjs: a WebP when it's still, an SVG when it moves.
   Each comes in a light and a dark copy; the dark one (.on_dark) shows with the dark theme, as .brand_logo does */
.illo {
    display: block;
}
.illo.on_dark {
    display: none;
}
.illo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}







/* =======================================*/
/* Chat Demo */
/* =======================================*/

.demo_head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--demo_accent);
    color: var(--demo_on);
    transition: background-color .25s ease, color .25s ease;
}
.demo_avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--demo_on) 22%, transparent);
    font-size: 12px;
    font-weight: 600;
}
/* A teammate's photo instead of initials */
img.demo_avatar {
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--demo_on) 45%, transparent);
}
.demo_who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}
.demo_who strong {
    font-size: 15px;
    font-weight: 600;
}
.demo_status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    opacity: .92;
}
.demo_status .online_dot {
    width: 6px;
    height: 6px;
    background: #7CE0A6;
    box-shadow: none;
}
.demo_msg {
    max-width: 82%;
    padding: 10px 14px;
    line-height: 1.45;
}
.demo_msg.agent {
    align-self: flex-start;
    background: var(--bg_muted);
    color: var(--text);
    border-radius: var(--bubble);
}
.demo_msg.visitor {
    align-self: flex-end;
    background: var(--demo_accent);
    color: var(--demo_on);
    border-radius: 10px 10px 3px 10px;
    transition: background-color .25s ease, color .25s ease;
}
.demo_note {
    align-self: center;
    font-size: 12px;
    color: var(--text_faint);
}
.demo_composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px 14px;
    padding: 9px 9px 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--bubble_lg);
    font-size: 14px;
    color: var(--text_faint);
}
.demo_send {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--bubble);
    background: var(--demo_accent);
    color: var(--demo_on);
    transition: background-color .25s ease;
}
.demo_send svg {
    width: 16px;
    height: 16px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .demo_head, .demo_msg.visitor, .demo_send {
        transition: none;
    }
}





/* =======================================*/
/* Code Box */
/* =======================================*/

.code_box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--bubble_lg);
}
.code_box pre {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}
.code_box code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    color: var(--text);
    overflow-wrap: normal;
}
.copy_button {
    flex: 0 0 auto;
    min-width: 84px;
    min-height: 38px;
    font-size: 14px;
}
.copy_status {
    min-height: 22px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--success);
}
.code_block {
    display: block;
    padding: 24px 26px;
}
.code_block code {
    font-size: 13.5px;
    line-height: 1.8;
    white-space: pre;
}
.code_block .c {
    color: var(--text_faint);
}
.code_block .s {
    color: var(--code_string);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .code_box {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
    }
    .copy_button {
        width: 100%;
    }
}





/* =======================================*/
/* Plan Cards */
/* =======================================*/

.price_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
    align-items: stretch;
}
.price_card {
    display: flex;
    flex-direction: column;
    padding: 34px;
    text-align: left;
}
/* Premium: the same card inside a 1px gradient outline */
.price_card.featured {
    padding: 1px;
    border: 0;
    border-radius: var(--bubble_lg);   /* the Free card's shape, so the outline follows the inner card's corners */
    background: var(--gradient);
    box-shadow: 0 40px 100px color-mix(in srgb, #7C3AED 14%, transparent);
}
.price_inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 33px;
    border-radius: 15px 15px 15px 3px;
    background: var(--surface);
}
.price_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.price_card :is(h2, h3) {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.plan_badge {
    padding: 4px 11px;
    border-radius: var(--bubble);
    background: var(--accent_soft);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    margin-block: -8px;
}
.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-top: 16px;
}
.price strong {
    font-family: var(--font_display);
    font-size: 54px;
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--text);
}
.price span {
    color: var(--text_muted);
}
.price_for {
    margin-top: 12px;
    color: var(--text_muted);
}
.price_card .check_list {
    margin: 28px 0 34px;
}
.price_card .btn {
    margin-top: auto;
}
.plan_notes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    margin-top: 36px;
    font-size: 14px;
    color: var(--text_muted);
}
.plan_notes li {
    display: flex;
    align-items: center;
    gap: 9px;
}
.plan_notes .tick {
    width: 16px;
    height: 16px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .price_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .price_card {
        padding: 24px;
    }
    .price_card.featured {
        padding: 1px;
    }
    .price_inner {
        padding: 23px;
    }
}





/* =======================================*/
/* Sale Prices */
/* =======================================*/

/* While a Premium sale runs (app.php): the regular price struck through, a "% off"
   pill and the optional note. others/price_tag writes the price, others/sale_bar the bar. */
.was_price {
    margin-right: .15em;
    font-size: .55em;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--text_faint);
    text-decoration: line-through;
    text-decoration-thickness: .07em;
    white-space: nowrap;
}
.price .was_price,
.calc_price .was_price {
    margin-right: 0;
    font-family: var(--font_display);
    font-size: 28px;
    line-height: 1;
    text-decoration-thickness: 2px;
}
small .was_price {
    margin-right: 3px;
    font-size: inherit;
    letter-spacing: 0;
    text-decoration-thickness: 1px;
}
.sale_badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--bubble);
    background: var(--gradient);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    color: var(--on_gradient);
    white-space: nowrap;
}
.sale_line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    flex-basis: 100%;
    margin-top: 6px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--text_muted);
}
.price .sale_line {
    margin-top: 4px;
}

/* The bar above the masthead, on every page but home */
.sale_bar {
    background: var(--gradient);
    font-size: 14px;
    color: var(--on_gradient);
}
.sale_bar_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    min-height: 44px;
    padding-block: 9px;
    text-align: center;
}
.sale_bar .sale_badge {
    background: var(--on_gradient);
    color: #FFFFFF;
}
.sale_bar p strong {
    font-weight: 600;
}
.sale_bar_link {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.sale_bar_link:hover {
    text-decoration-thickness: 2px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .sale_bar {
        font-size: 13px;
    }
    .sale_bar_inner {
        gap: 4px 10px;
    }
    .price .was_price,
    .calc_price .was_price {
        font-size: 24px;
    }
}





/* =======================================*/
/* FAQ */
/* =======================================*/

.faq_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 72px;
    align-items: start;
}
.faq_list {
    border-bottom: 1px solid var(--border);
}
.faq_item {
    border-top: 1px solid var(--border);
}
.faq_item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--font_display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--text);
}
.faq_item summary::-webkit-details-marker {
    display: none;
}
.faq_item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-family: var(--font);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: var(--text_faint);
    transition: transform .2s ease;
}
.faq_item[open] summary::after {
    transform: rotate(45deg);
}
.faq_item summary:hover::after {
    color: var(--text);
}
.faq_item summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}
.faq_answer {
    max-width: 64ch;
    padding: 0 0 24px;
    color: var(--text_muted);
}
.faq_answer p + p {
    margin-top: 10px;
}
.faq_answer a {
    color: var(--accent);
    font-weight: 600;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .faq_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .faq_item summary {
        font-size: 17px;
    }
}





/* =======================================*/
/* Closing Band */
/* =======================================*/

.cta_band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px 0;
    border-top: 1px solid var(--hairline);
}
.cta_band::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 780px;
    height: 380px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--gradient);
    opacity: calc(var(--haze) * 1.3);
    filter: blur(100px);
    pointer-events: none;
}
.cta_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    text-align: center;
}
.cta_band h2 {
    max-width: 17ch;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1.04;
}
.cta_note {
    margin-top: -16px;
    font-size: 14px;
    color: var(--text_muted);
}
.cta_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .cta_band {
        padding: 84px 0;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Help Center */
/* =======================================*/

.help_page .lead {
    margin-bottom: 8px;
}
.help_layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    margin-top: 40px;
}
/* The contents: a raised card of rounded rows, kept in view */
.help_toc {
    position: sticky;
    top: calc(var(--header_h) + 20px);
    align-self: start;
    padding: 12px 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.page_body .help_toc_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 10px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.help_toc_title::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gradient);
}
.help_toc ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.help_toc a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--bubble);
    font-size: 14px;
    color: var(--text_muted);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.help_toc a:hover {
    background: var(--bg_muted);
    color: var(--text);
}
/* Each article on its own card */
.help_articles {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}
.help_article {
    padding: 32px 36px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
    scroll-margin-top: calc(var(--header_h) + 20px);
}
.page_body .help_article h2 {
    margin: 0 0 12px;
    font-size: 26px;
}
.help_article h3 {
    margin: 24px 0 8px;
    font-size: 17px;
    font-weight: 600;
}
.help_article p {
    color: var(--text);
}
.page_body .help_article p:last-child {
    margin-bottom: 0;
}
.help_article a {
    color: var(--accent);
    font-weight: 600;
    text-underline-offset: 3px;
}
.help_steps, .help_list {
    margin: 0 0 14px 1.25em;
    display: grid;
    gap: 8px;
}
.help_article > :is(.help_steps, .help_list):last-child {
    margin-bottom: 0;
}
.help_steps li::marker {
    color: var(--text_faint);
    font-variant-numeric: tabular-nums;
}
.help_list li::marker {
    color: var(--accent);
}

/* The Help Center's front page: a group title, then cards of guides */
.page_body .help_group_title {
    margin: 48px 0 16px;
    font-size: 22px;
}
.help_start .tile h3 {
    font-size: 19px;
}
.help_cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.help_cards > li {
    display: flex;
}
.help_card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 22px 24px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.help_card:hover {
    border-color: var(--border);
    transform: translateY(-2px);
}
.help_card strong {
    font-size: 16px;
    font-weight: 600;
}
.help_card span {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text_muted);
}
.doc_more {
    margin-top: 40px;
    color: var(--text_muted);
}

/* A guide: every guide on the left, the guide itself on the right */
.doc_page .help_layout {
    margin-top: 0;
}
.doc_nav {
    max-height: calc(100vh - var(--header_h) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.doc_home {
    display: block;
    padding: 6px 10px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.doc_nav .help_toc_title {
    padding-top: 16px;
}
.doc_nav a[aria-current="page"] {
    background: var(--bg_muted);
    color: var(--text);
    font-weight: 600;
}
.doc_nav_sections {
    margin: 2px 0 6px 12px;
    padding-left: 8px;
    border-left: 1px solid var(--hairline);
}
.help_toc .doc_nav_sections a {
    padding: 5px 10px;
    font-size: 13px;
}
.doc_main {
    min-width: 0;
    max-width: 760px;
}
.doc_head {
    margin-bottom: 28px;
}
.page_body .doc_head h1 {
    max-width: none;
    margin-top: 14px;
    font-size: clamp(32px, 4vw, 46px);
}
.page_body .doc_head .lead {
    margin-bottom: 0;
}
.doc_jump {
    display: none;
}
.help_article .doc_code {
    margin: 14px 0 16px;
}
.help_article .doc_code:last-child {
    margin-bottom: 0;
}
.help_article h3:first-child {
    margin-top: 0;
}

/* A code block or an AI prompt, with a Copy button */
.doc_code {
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--bubble);
}
.doc_code_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 6px 16px;
    border-bottom: 1px solid var(--hairline);
}
.doc_code_label {
    min-width: 0;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text_muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.doc_copy {
    flex: 0 0 auto;
    min-width: 64px;
    min-height: 30px;
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease;
}
.doc_copy:hover {
    border-color: var(--accent);
}
.doc_code pre {
    padding: 16px 18px;
    overflow-x: auto;
}
.doc_code code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre;
    overflow-wrap: normal;
}
.doc_code.wrap pre {
    max-height: 420px;
    overflow-y: auto;
}
.doc_code.wrap code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Previous and next guide */
.doc_pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 28px;
}
.doc_pager_link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease;
}
.doc_pager_link:hover {
    border-color: var(--border);
}
.doc_pager_link.next {
    grid-column: 2;
    text-align: right;
}
.doc_pager_link span {
    font-size: 13px;
    color: var(--text_muted);
}
.doc_pager_link strong {
    font-size: 15px;
    font-weight: 600;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    /* Narrow screens: the contents become a row of chips above the articles */
    .help_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 28px;
    }
    .help_toc {
        position: static;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .page_body .help_toc_title {
        padding: 0 0 10px;
    }
    .help_toc ol {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .help_toc ol::-webkit-scrollbar {
        display: none;
    }
    .help_toc a {
        padding: 6px 13px;
        border: 1px solid var(--hairline);
        border-radius: var(--bubble);
        background: var(--surface);
        font-size: 13px;
        white-space: nowrap;
    }
    .help_cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* A guide: the list of guides folds away; "On this page" chips and the pager stay */
    .doc_nav {
        display: none;
    }
    .doc_jump {
        display: block;
        margin-bottom: 20px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .help_article {
        padding: 24px 20px;
    }
    .page_body .help_article h2 {
        font-size: 22px;
    }
    .help_cards, .doc_pager {
        grid-template-columns: minmax(0, 1fr);
    }
    .doc_pager_link.next {
        grid-column: auto;
    }
    .doc_code pre {
        padding: 14px;
    }
}





/* =======================================*/
/* Help Center Platform Links */
/* =======================================*/

/* The install guide's "Pick your platform": a wrap of pill links, one per platform guide */
.platform_links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
}
.help_article .platform_links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.help_article .platform_links a:hover {
    border-color: var(--accent);
    color: var(--accent);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Blog List */
/* =======================================*/

/* The posts: the newest one wide, the rest in a grid (also "Keep reading" under a post) */
.post_grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.post_grid > li {
    display: flex;
}
.post_grid > li.is_first {
    grid-column: 1 / -1;
}
.post_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 28px 30px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.post_card:hover {
    border-color: var(--border);
    transform: translateY(-2px);
}
.post_topic {
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--tint);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--accent);
}
.post_card h2, .post_card h3 {
    margin: 4px 0 0;
    font-family: var(--font_display);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.25;
}
.is_first .post_card h2 {
    max-width: 24ch;
    font-size: clamp(28px, 3.2vw, 38px);
}
.post_card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text_muted);
}
.is_first .post_card p {
    max-width: 62ch;
    font-size: 16px;
}
.post_meta {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    color: var(--text_faint);
}
.blog_list .doc_more {
    text-align: center;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .post_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .post_card {
        padding: 22px 20px;
    }
    .post_card h2, .post_card h3 {
        font-size: 20px;
    }
}





/* =======================================*/
/* Blog Post */
/* =======================================*/

/* The head: back link, topic, title, summary and the byline */
.post_head {
    max-width: 720px;
    margin: 0 auto 40px;
}
/* With "In this post" beside the words, the head lines up with the words */
.post_page:has(.post_toc) .post_head {
    max-width: 988px;
    padding-left: 268px;
}
.post_back {
    display: block;
    width: fit-content;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text_muted);
    text-decoration: none;
}
.post_back:hover {
    color: var(--accent);
}
.page_body .post_head h1 {
    max-width: none;
    margin-top: 14px;
    font-size: clamp(32px, 4.4vw, 52px);
}
.post_byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
}
.post_byline img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.page_body .post_byline p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.post_byline a {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.post_byline span {
    color: var(--text_muted);
}

/* The words on the right, "In this post" on the left, kept in view */
.post_layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 720px);
    justify-content: center;
    gap: 48px;
}
.post_layout:not(:has(.post_toc)) {
    grid-template-columns: minmax(0, 720px);
}
.post_toc a {
    font-size: 13.5px;
    line-height: 1.4;
}
.post_body {
    min-width: 0;
    font-size: 17px;
    line-height: 1.75;
}
.page_body .post_body h2 {
    margin: 48px 0 14px;
    font-size: 28px;
    scroll-margin-top: calc(var(--header_h) + 20px);
}
.post_body h3 {
    margin: 30px 0 10px;
    font-size: 19px;
    font-weight: 600;
}
.page_body .post_body p {
    margin-bottom: 18px;
}
.post_body > ul, .post_body > ol {
    display: grid;
    gap: 10px;
    margin: 0 0 22px 1.25em;
}
.post_body > ul li::marker {
    color: var(--accent);
}
.post_body > ol li::marker {
    color: var(--text_faint);
    font-variant-numeric: tabular-nums;
}
.post_body a {
    color: var(--accent);
    font-weight: 600;
    text-underline-offset: 3px;
}
.post_body .doc_code {
    margin: 6px 0 22px;
    line-height: 1.5;
}
/* A tip or a note, in a tinted box */
.page_body .post_note {
    margin: 4px 0 24px;
    padding: 16px 20px;
    background: var(--tint);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--bubble) var(--bubble) 0;
    font-size: 15.5px;
    line-height: 1.65;
}
/* A table that scrolls sideways on small screens */
.table_wrap {
    margin: 6px 0 26px;
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    background: var(--surface);
}
.post_table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}
.post_table th, .post_table td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hairline);
}
.post_table tbody tr:last-child > * {
    border-bottom: 0;
}
.post_table thead th {
    background: var(--bg_muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.post_table tbody th {
    font-weight: 600;
}
.post_table td {
    color: var(--text_muted);
}
/* Messages to copy, each with its own Copy button */
.copy_lines {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
}
.copy_line {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 14px 14px 18px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble);
}
.page_body .copy_line p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}
/* The writer, after the post */
.post_author {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 48px;
    padding: 24px 26px;
}
.post_author img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.page_body .post_author p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text_muted);
}
.page_body .post_author .post_author_name {
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--text);
}
/* "Keep reading" */
.post_more {
    max-width: 988px;
    margin: 72px auto 0;
}
.page_body .post_more h2 {
    margin: 0 0 18px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    /* The contents move above the words, as a row of chips (Help Center rules) */
    .post_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .post_head, .post_page:has(.post_toc) .post_head {
        max-width: none;
        margin-bottom: 28px;
        padding-left: 0;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .post_body {
        font-size: 16px;
    }
    .page_body .post_body h2 {
        margin-top: 40px;
        font-size: 24px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .copy_line {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .copy_line .doc_copy {
        align-self: flex-start;
    }
    .post_author {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }
}





/* =======================================*/
/* Alternatives */
/* =======================================*/

/* The comparisons' front page: one card per tool */
.alt_grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.alt_grid > li {
    display: flex;
}
.alt_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 26px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.alt_card:hover {
    border-color: var(--border);
    transform: translateY(-2px);
}
.alt_card strong {
    font-family: var(--font_display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.02em;
}
.alt_card_text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text_muted);
}
.alt_card .tile_link {
    margin-top: auto;
    padding-top: 6px;
}

/* One comparison: the table holds sentences, so they read from the left */
.compare.alt_compare tbody td {
    font-size: 14.5px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
}
.compare.alt_compare thead th:first-child {
    width: 28%;
}
.compare.alt_compare tbody th {
    vertical-align: top;
}
.alt_why .tile h3 {
    margin-top: 0;
}
/* The cost for a team of five */
.alt_costs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
}
.alt_cost {
    padding: 28px 30px;
}
.alt_cost.is_ours {
    background: var(--tint);
    border-color: var(--border);
}
.alt_cost_name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text_muted);
}
.alt_cost_price {
    margin: 6px 0 10px;
    font-family: var(--font_display);
    font-size: 32px;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.alt_cost p:last-child {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text_muted);
}
/* Choose one or the other */
.alt_choose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.alt_choice {
    padding: 30px 32px;
}
.alt_choice h2 {
    margin-bottom: 16px;
    font-size: 24px;
    letter-spacing: -.02em;
}
.alt_list {
    list-style: none;
    display: grid;
    gap: 12px;
}
.alt_list li {
    display: flex;
    gap: 10px;
    font-size: 15.5px;
    line-height: 1.55;
}
.alt_list .tick {
    flex: 0 0 auto;
    margin-top: 3px;
}
/* Switching, in four numbered cards */
.alt_steps {
    list-style: none;
    counter-reset: alt_step;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.alt_steps li {
    counter-increment: alt_step;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}
.alt_steps li::before {
    content: counter(alt_step);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--tint);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}
.alt_steps strong {
    font-size: 16px;
    font-weight: 600;
}
.alt_steps span {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text_muted);
}
/* Other comparisons, and where the facts come from */
.alt_others {
    padding-top: 0;
}
.alt_others_title {
    margin-bottom: 14px;
    font-size: 20px;
    letter-spacing: -.02em;
}
.alt_other_links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.alt_other_links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.alt_other_links a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.alt_note {
    max-width: 820px;
    margin-top: 28px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text_faint);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .alt_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .alt_steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .alt_choose, .alt_costs {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .alt_grid, .alt_steps {
        grid-template-columns: minmax(0, 1fr);
    }
    .compare.alt_compare thead th:first-child {
        width: 30%;
    }
    .compare.alt_compare tbody td {
        font-size: 13px;
    }
    .alt_choice, .alt_cost {
        padding: 24px 20px;
    }
}





/* =======================================*/
/* Payments Page */
/* =======================================*/

/* Paddle's payment link (/pay) — a title, a line, and the way back to Billing */
.pay_page .container {
    max-width: 720px;
}
.pay_page .pay_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
/* .btn's own display would show it */
.pay_page .btn[hidden] {
    display: none;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Home Hero */
/* =======================================*/

/* A soft haze of the gradient behind the top of a page */
.hero {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding: 72px 0 96px;
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: var(--gradient);
    opacity: var(--haze);
    filter: blur(120px);
    right: -10%;
    top: -12%;
    width: 720px;
    height: 620px;
}
.hero h1 {
    margin-bottom: 22px;
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1.02;
    max-width: 15ch;
    margin-top: 24px;
}
.hero_actions {
    display: flex;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.hero_grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 64px;
    align-items: center;
}
.hero_stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.hero_stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}
.hero_stats dt {
    font-size: 13px;
    color: var(--text_muted);
}
.hero_stats dd {
    font-family: var(--font_display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hero_pic {
    width: 100%;
    max-width: 454px;
    justify-self: end;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .hero {
        padding: 44px 0 72px;
    }
    .hero_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    .hero_pic {
        justify-self: center;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .hero::before {
        right: -60%;
        top: -10%;
        width: 520px;
        height: 480px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .hero_stats {
        gap: 14px 26px;
    }
    .hero_stats dd {
        font-size: 22px;
    }
}





/* =======================================*/
/* Home Hero Picture */
/* =======================================*/

/* An SVG that plays (Illustrations/: hero): the agent's photo, the chat over it, two small cards floating.
   It runs past its box so the shadows stay soft, and its margins pull it back (render.mjs prints them) */
.hero_pic .illo img {
    width: 144.05%;
    max-width: none;
    margin: -15.42% -19.82% -33.04% -24.23%;
    pointer-events: none;
}

/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .hero_pic {
        max-width: 420px;
    }
    .hero_pic .illo img {
        width: 108.94%;
        margin: -16.76% -4.47% -41.9% -4.47%;
    }
}





/* =======================================*/
/* Home In Short */
/* =======================================*/

.what_split {
    align-items: start;
}
.glance {
    display: grid;
    padding: 8px 26px;
}
.glance div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--hairline);
}
.glance div:last-child {
    border-bottom: 0;
}
.glance dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text_muted);
}
.glance dd {
    font-size: 15px;
    color: var(--text);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .glance {
        padding: 4px 18px;
    }
    .glance div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}





/* =======================================*/
/* Home Benefit Pictures */
/* =======================================*/

/* A small scene at the top of each benefit card (Illustrations/: benefit_1 to benefit_3), on a band of the page's colour */
.benefit {
    overflow: hidden;
}
.benefit_pic {
    margin: -32px -28px 28px;
    border-bottom: 1px solid var(--hairline);
    background: var(--bg);
}

/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .benefit_pic {
        margin: -24px -24px 24px;
    }
}





/* =======================================*/
/* Home Your Brand */
/* =======================================*/

.brand_lab {
    padding: 20px;
}
.brand_stage {
    position: relative;
    overflow: hidden;
    height: 330px;
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    background: var(--bg);
    /* a picture, not text: nothing to select */
    -webkit-user-select: none;
    user-select: none;
}
.stage_bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
}
.stage_bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}
.stage_bar span {
    margin-left: 10px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--bg);
    font-size: 11px;
    color: var(--text_faint);
}
.stage_page {
    display: grid;
    gap: 10px;
    padding: 22px 20px;
}
.sk {
    display: block;
    height: 9px;
    width: 62%;
    border-radius: 5px;
    background: var(--bg_muted);
}
.sk.sk_title {
    height: 16px;
    width: 44%;
    margin-bottom: 4px;
}
.sk.short {
    width: 38%;
}
.sk_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 62%;
    margin-top: 10px;
}
.sk_cards span {
    height: 70px;
    border-radius: 10px;
    background: var(--bg_muted);
}
.stage_widget {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transition: right .3s ease, left .3s ease;
}
.brand_stage[data-corner="left"] .stage_widget {
    right: auto;
    left: 14px;
    align-items: flex-start;
}
.brand_stage[data-corner="left"] .sk_cards, .brand_stage[data-corner="left"] .sk {
    margin-left: auto;
}
.stage_window {
    width: 214px;
    overflow: hidden;
    border-radius: 14px 14px 14px 4px;
    background: #FFFFFF;
    color: #0A0B10;
    box-shadow: 0 18px 44px rgba(16, 17, 26, .22);
    transition: background-color .25s ease, color .25s ease;
}
.brand_stage[data-mode="dark"] .stage_window {
    background: #11131A;
    color: #F4F4F8;
}
.stage_head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    background: var(--demo_accent);
    color: var(--demo_on);
    transition: background-color .25s ease, color .25s ease;
}
.stage_head strong {
    display: block;
    font-size: 12.5px;
    line-height: 1.2;
}
.stage_head small {
    display: block;
    font-size: 10.5px;
    opacity: .85;
}
.stage_avatar {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--demo_on) 22%, transparent);
    font-size: 10px;
    font-weight: 700;
}
img.stage_avatar {
    object-fit: cover;
    border: 1.5px solid color-mix(in srgb, var(--demo_on) 45%, transparent);
}
.stage_greeting {
    margin: 12px 12px 10px;
    padding: 8px 10px;
    border-radius: 10px 10px 10px 3px;
    background: #EEEEF3;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.brand_stage[data-mode="dark"] .stage_greeting {
    background: #1F2230;
}
.stage_input {
    display: block;
    margin: 0 10px 10px;
    padding: 7px 10px;
    border: 1px solid #DCDCE4;
    border-radius: 9px;
    font-size: 11px;
    color: #81848F;
}
.brand_stage[data-mode="dark"] .stage_input {
    border-color: #2E3140;
    color: #737688;
}
.stage_launcher {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--demo_accent);
    color: var(--demo_on);
    box-shadow: 0 10px 26px rgba(16, 17, 26, .25);
    transition: background-color .25s ease, color .25s ease;
}
.stage_launcher svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.brand_controls {
    display: grid;
    gap: 20px;
    padding: 22px 6px 6px;
}
.control_label .hex {
    margin-left: 6px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--text_faint);
}
.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.swatch {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
}
.swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--text);
}
.swatch_any {
    overflow: hidden;
    background: conic-gradient(#FFB199, #F5B83D, #7CE0A6, #7CC8FF, #D38CFF, #FFB199);
}
.swatch_any input {
    position: absolute;
    inset: -8px;
    width: 48px;
    height: 48px;
    opacity: 0;
    cursor: pointer;
}
.swatch_any:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.control_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.lab_field input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    color: var(--text);
}
.lab_field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_soft);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .brand_lab {
        padding: 14px;
    }
    .brand_stage {
        height: 300px;
    }
    .control_pair {
        grid-template-columns: minmax(0, 1fr);
    }
    .sk_cards {
        width: 100%;
    }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .stage_widget, .stage_window, .stage_head, .stage_launcher {
        transition: none;
    }
}





/* =======================================*/
/* Home Privacy */
/* =======================================*/

#privacy .line_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin-top: 30px;
}
.privacy_more {
    margin-top: 6px;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    #privacy .line_list {
        grid-template-columns: minmax(0, 1fr);
    }
}





/* =======================================*/
/* Home Inbox Picture */
/* =======================================*/

/* A picture of the dashboard inbox (Illustrations/: inbox) in a frame. It comes in four sizes, one for
   each breakpoint, because the app itself changes with the screen: no visitor details below 992px,
   no sidebar below 768px, only the open chat on a phone */
.inbox_pic {
    overflow: hidden;
    margin-bottom: 36px;
    border: 1px solid var(--border);
    border-radius: var(--bubble_xl);
    background: var(--bg);
    box-shadow: var(--shadow);
}
.inbox_pic .illo img {
    width: 100%;
}

/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .inbox_pic {
        margin-bottom: 28px;
    }
}





/* =======================================*/
/* Home Office Hours */
/* =======================================*/

.hours_controls {
    display: grid;
    gap: 22px;
    margin-top: 32px;
}
.switch_row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--text_faint);
    transition: background .2s ease;
}
.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}
.switch_row[aria-checked="true"] .switch {
    background: var(--gradient);
}
.switch_row[aria-checked="true"] .switch::after {
    transform: translateX(18px);
}
.hours_example {
    position: relative;
    width: 100%;
    max-width: 380px;
    justify-self: center;
    /* a picture, not text: nothing to select */
    -webkit-user-select: none;
    user-select: none;
}
.hours_card {
    overflow: hidden;
    border-radius: var(--bubble_xl);
    box-shadow: var(--shadow);
}
.hours_body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 196px;
    padding: 20px 18px;
    font-size: 14px;
}
.away_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--demo_on) 55%, transparent);
}
.hours_example[data-online="true"] .when_away, .hours_example[data-online="false"] .when_online {
    display: none;
}
.hours_hidden {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 28px;
    text-align: center;
    border-radius: var(--bubble_xl);
    border-style: dashed;
}
.hours_hidden strong {
    font-family: var(--font_display);
    font-size: 19px;
    font-weight: 500;
}
.hours_hidden span:last-child {
    color: var(--text_muted);
    font-size: 14px;
}
.hours_example[data-online="false"][data-away="hide"] .hours_card {
    display: none;
}
.hours_example[data-online="false"][data-away="hide"] .hours_hidden {
    display: flex;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .switch, .switch::after {
        transition: none;
    }
}





/* =======================================*/
/* Home Who It's For */
/* =======================================*/

#who .tile_grid > li {
    display: flex;
}
#who .tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    padding: 0;
}
/* A photo of each kind of business across the top of its card */
.tile_photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--bg_muted);
    border-bottom: 1px solid var(--hairline);
}
.tile_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
}
.tile_body h3 {
    margin-top: 0;
}
#who .tile_link {
    margin-top: auto;
    padding-top: 14px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    /* Three photo cards stay side by side on tablets */
    #who .tile_grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    #who .tile_grid.three {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Home Your Team */
/* =======================================*/

/* A picture of the team page (Illustrations/: team) in a card */
.team_pic {
    width: 100%;
    max-width: 500px;
    justify-self: center;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.team_pic .illo img {
    width: 100%;
}
#team .line_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin-top: 30px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    #team .line_list {
        grid-template-columns: minmax(0, 1fr);
    }
}





/* =======================================*/
/* Features List & Filter */
/* =======================================*/

.feature_list {
    padding-top: 0;
}
.filter_bar {
    position: sticky;
    top: var(--header_h);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 14px 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.filter_count {
    font-size: 13px;
    color: var(--text_faint);
    white-space: nowrap;
}
.feature_groups {
    display: grid;
    gap: 16px;
}
.feature_group {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 40px;
    padding: 36px;
    scroll-margin-top: calc(var(--header_h) + 80px);
}
.feature_group[hidden] {
    display: none;
}
.group_head h2 {
    margin-top: 20px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.03em;
}
.group_head p {
    margin-top: 8px;
    color: var(--text_muted);
}
.group_items {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}
.feature_row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-top: 1px solid var(--hairline);
}
.feature_row strong {
    font-size: 15px;
    font-weight: 600;
}
.feature_row span {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .feature_group {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 28px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    /* The chips scroll sideways rather than stacking up under the masthead */
    .filter_bar .choice_row {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .filter_bar .choice_row::-webkit-scrollbar {
        display: none;
    }
    .filter_bar .choice {
        white-space: nowrap;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .group_items {
        grid-template-columns: minmax(0, 1fr);
    }
    .feature_group {
        padding: 24px 20px;
    }
}





/* =======================================*/
/* Features Pricing Teaser */
/* =======================================*/

/* Pricing, in short */
.plans_teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
}
.plans_teaser .section_head {
    margin-bottom: 0;
}
.teaser_side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px;
}
.teaser_plans {
    display: flex;
    gap: 40px;
}
.teaser_plans div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.teaser_plans dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.teaser_plans dd {
    font-family: var(--font_display);
    font-size: 40px;
    letter-spacing: -.04em;
    line-height: 1.1;
}
.teaser_plans dd span {
    font-family: var(--font);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .plans_teaser {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .teaser_side {
        justify-self: start;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* How It Works Install Guides */
/* =======================================*/

.install_box {
    max-width: 860px;
    margin: 0 auto;
}
.platform_tabs {
    margin-top: 28px;
}
.platform_tabs [role="tablist"] {
    justify-content: center;
}
.guide {
    margin-top: 18px;
    padding: 30px 34px;
}
.guide:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.guide h3 {
    font-size: 20px;
    font-weight: 500;
}
.guide_steps {
    list-style: none;
    counter-reset: guide;
    display: grid;
    gap: 14px;
    margin-top: 20px;
}
.guide_steps li {
    position: relative;
    padding-left: 44px;
    counter-increment: guide;
    line-height: 1.55;
}
.guide_steps li::before {
    content: counter(guide);
    position: absolute;
    left: 0;
    top: -3px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px 10px 10px 3px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
}
.band .guide_steps li::before {
    background: var(--bg);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .platform_tabs [role="tablist"] {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1);
        padding: 2px var(--gutter);
        scrollbar-width: none;
    }
    .platform_tabs [role="tablist"]::-webkit-scrollbar {
        display: none;
    }
    .platform_tabs .choice {
        white-space: nowrap;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .guide {
        padding: 24px 20px;
    }
}





/* =======================================*/
/* How It Works Conversation Flow */
/* =======================================*/

.flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    position: relative;
}
.flow::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient);
    opacity: .5;
}
.flow li {
    position: relative;
    padding-top: 34px;
}
.flow_dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--accent);
}
.flow h3 {
    font-size: 19px;
    font-weight: 500;
}
.flow p {
    margin-top: 8px;
    color: var(--text_muted);
    font-size: 15px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding-left: 30px;
    }
    .flow::before {
        left: 6px;
        right: auto;
        top: 8px;
        bottom: 8px;
        width: 2px;
        height: auto;
    }
    .flow li {
        padding-top: 0;
    }
    .flow_dot {
        left: -30px;
        top: 4px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* How It Works Setup */
/* =======================================*/

.setup_grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.setup_grid .tile {
    display: flex;
    flex-direction: column;
}
.tile_where {
    margin-top: auto;
    padding-top: 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
}
.dev_more {
    margin-top: 20px;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .setup_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .setup_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .setup_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}





/* =======================================*/
/* Use Cases */
/* =======================================*/

.cases {
    overflow-x: clip;
    padding-top: 0;
}
.case_tabs {
    justify-content: center;
    margin-bottom: 24px;
}
.case {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px;
    align-items: center;
    padding: 44px;
}
.case[hidden] {
    display: none;
}
.case h2 {
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1.1;
}
.case .dek {
    margin-top: 14px;
}
.case_label {
    margin: 28px 0 14px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.case_features {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.case_features a {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid var(--border);
    border-radius: var(--bubble);
    background: var(--bg);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}
.case_features a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* The example chat, an SVG that plays (Illustrations/: case_services and the others).
   It runs past its box so the shadow stays soft, and its margins pull it back (render.mjs prints them) */
.case_pic {
    width: 100%;
    max-width: 420px;
    justify-self: center;
}
.case_pic .illo img {
    width: 152.38%;
    max-width: none;
    margin: -16.67% -26.19% -35.71% -26.19%;
    pointer-events: none;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .case {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding: 32px 28px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .case_tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1);
        padding: 2px var(--gutter);
        scrollbar-width: none;
    }
    .case_tabs::-webkit-scrollbar {
        display: none;
    }
    .case_tabs .choice {
        white-space: nowrap;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .case {
        padding: 24px 20px;
    }
}





/* =======================================*/
/* Pricing Plan Finder */
/* =======================================*/

.plans {
    margin-top: 52px;
}
.calc {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
}
.band .calc {
    background: var(--surface);
    box-shadow: var(--shadow_sm);
}
.calc_inputs {
    display: grid;
    gap: 30px;
    padding: 36px;
}
.calc_field {
    display: block;
}
.calc_label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
}
.calc_label output {
    font-family: var(--font_display);
    font-size: 18px;
    font-weight: 500;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.calc_scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text_faint);
}
.calc input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: none;
    cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--bg_muted) var(--fill, 0%));
}
.calc input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--bg_muted);
}
.calc input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}
.calc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(16, 17, 26, .25);
}
.calc input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(16, 17, 26, .25);
}
.calc input[type="range"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 8px;
}
.calc_result {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 36px;
    border-left: 1px solid var(--hairline);
    background: var(--bg);
}
.calc_result::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -120px;
    top: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: var(--haze);
    filter: blur(60px);
}
.calc_kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.calc_plan {
    font-family: var(--font_display);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.1;
}
.calc_price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.calc_price strong {
    font-family: var(--font_display);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1;
}
.calc_price span {
    color: var(--text_muted);
}
.calc_each {
    margin-top: 10px;
    font-size: 15px;
}
.calc_why {
    font-size: 14px;
    color: var(--text_muted);
}
.calc_result .btn {
    margin-top: 22px;
}
.calc_result .btn[hidden] {
    display: none;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .calc {
        grid-template-columns: minmax(0, 1fr);
    }
    .calc_result {
        border-left: 0;
        border-top: 1px solid var(--hairline);
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .calc_inputs, .calc_result {
        padding: 26px 22px;
    }
}





/* =======================================*/
/* Pricing Compare Plans */
/* =======================================*/

.compare_wrap {
    max-width: 900px;
    margin: 0 auto;
}
.compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.compare th, .compare td {
    padding: 18px 16px;
    vertical-align: middle;
}
.compare thead th {
    position: sticky;
    top: var(--header_h);
    z-index: 2;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-family: var(--font_display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.02em;
    text-align: center;
}
.compare thead th:first-child {
    width: 46%;
}
.compare thead th small {
    display: block;
    margin-top: 2px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text_muted);
}
.compare tbody th {
    padding-left: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
}
.compare tbody th small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text_faint);
}
.compare tbody td {
    text-align: center;
    font-size: 15px;
}
.compare tbody td .tick {
    display: inline-block;
    vertical-align: middle;
}
.compare tbody tr > * {
    border-bottom: 1px solid var(--hairline);
}
.compare tfoot td {
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
}
.compare tfoot .btn {
    width: 100%;
    max-width: 180px;
}
.compare .is_featured {
    background: var(--tint);
}
.compare thead .is_featured {
    background: var(--tint);
    border-radius: 14px 14px 0 0;
}
.compare thead .is_featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 14px 14px 0 0;
    background: var(--gradient);
}
.compare tfoot .is_featured {
    border-radius: 0 0 14px 3px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .compare th, .compare td {
        padding: 15px 8px;
    }
    .compare thead th {
        font-size: 17px;
    }
    .compare thead th:first-child {
        width: 44%;
    }
    .compare tbody th, .compare tbody td {
        font-size: 14px;
    }
    .compare tfoot td {
        padding-inline: 4px;
    }
    .compare tfoot .btn {
        min-height: 48px;
        padding: 6px;
        font-size: 14px;
        line-height: 1.2;
        white-space: normal;
    }
}





/* =======================================*/
/* About Story */
/* =======================================*/

.story {
    align-items: start;
}
.story_title {
    margin-bottom: 24px;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.08;
}
.story_text {
    display: grid;
    gap: 16px;
    max-width: 34em;
    font-size: 18px;
    line-height: 1.65;
    color: var(--text_muted);
}
.story_text p:last-child {
    color: var(--text);
    font-weight: 500;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* About Promises */
/* =======================================*/

/* The promises in numbers */
.promise_stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.promise_stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    padding: 30px 28px;
    border-bottom: 1px solid var(--hairline);
}
.promise_stats div:nth-child(odd) {
    border-right: 1px solid var(--hairline);
}
.promise_stats div:nth-last-child(-n + 2) {
    border-bottom: 0;
}
.promise_stats dd {
    font-family: var(--font_display);
    font-size: 52px;
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.promise_stats dt {
    font-size: 14px;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .promise_stats div {
        padding: 22px 18px;
    }
    .promise_stats dd {
        font-size: 40px;
    }
}





/* =======================================*/
/* About Values & Founder */
/* =======================================*/

/* The four ideas, beside the founder's photo */
.values_wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
}
.values {
    list-style: none;
}
.values li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 30px 32px;
    border-bottom: 1px solid var(--hairline);
}
.values li:last-child {
    border-bottom: 0;
}
.values .benefit_number {
    font-size: 40px;
}
.values h3 {
    margin-bottom: 6px;
    font-size: 21px;
    font-weight: 500;
}
.values p {
    color: var(--text_muted);
}
.founder {
    margin: 0;
}
.founder img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bubble_xl);
    box-shadow: var(--shadow);
    user-select: none;
    -webkit-user-drag: none;
}
.founder figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 18px;
    padding-left: 6px;
}
.founder figcaption strong {
    font-size: 18px;
    font-weight: 500;
}
.founder figcaption span {
    font-size: 14px;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .values_wrap {
        gap: 36px;
    }
    .values li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 16px;
        padding: 26px 24px;
    }
    .values .benefit_number {
        font-size: 34px;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .values_wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .founder {
        width: 100%;
        max-width: 380px;
        justify-self: center;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .values li {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        padding: 22px 20px;
    }
    .values .benefit_number {
        font-size: 30px;
    }
    .values h3 {
        font-size: 19px;
    }
}





/* =======================================*/
/* About Get Involved */
/* =======================================*/

.involved > li {
    display: flex;
}
.involved .tile {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.involved .tile_link {
    margin-top: auto;
    padding-top: 14px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Contact */
/* =======================================*/

.contact {
    padding-top: 0;
}
.contact_grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: start;
}
.contact_title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.03em;
}
.ways {
    list-style: none;
    display: grid;
    gap: 12px;
}
.way {
    display: flex;
    gap: 18px;
    padding: 22px 24px;
}
.way h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.way p {
    margin: 4px 0 8px;
    font-size: 14.5px;
    color: var(--text_muted);
}
.way .text_link {
    margin-right: 14px;
    font-size: 14px;
}
.contact_form_wrap .form_stack {
    max-width: none;
    margin-top: 0;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .contact_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }
    .contact_form_wrap {
        order: -1;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .way {
        padding: 20px 18px;
        gap: 14px;
    }
}





/* =======================================*/
/* Legal Head */
/* =======================================*/

.legal_head {
    max-width: 760px;
    margin-bottom: 40px;
}
.page_body .legal_head h1 {
    font-size: clamp(36px, 4.6vw, 54px);
}
.page_body .legal_head .lead {
    margin-bottom: 10px;
}
.page_body .legal_meta {
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--text_faint);
}
.legal_switch {
    display: inline-flex;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.legal_switch a {
    padding: 8px 16px;
    border-radius: var(--bubble);
    font-size: 14px;
    font-weight: 500;
    color: var(--text_muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.legal_switch a:hover {
    background: var(--bg_muted);
    color: var(--text);
}
.legal_switch a[aria-current="page"] {
    background: var(--accent_soft);
    color: var(--accent);
    font-weight: 600;
}
/* "Terms", "Refunds": on phones, where the full names don't fit */
.legal_short {
    display: none;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .legal_head {
        margin-bottom: 28px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .legal_switch {
        display: flex;
    }
    .legal_switch a {
        flex: 1 1 0;
        padding: 8px 10px;
        text-align: center;
    }
    .legal_long {
        display: none;
    }
    .legal_short {
        display: inline;
    }
}





/* =======================================*/
/* Legal Contents */
/* =======================================*/

.legal_layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 808px);
    gap: 32px;
    align-items: start;
}
.legal_side {
    position: sticky;
    top: calc(var(--header_h) + 20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - var(--header_h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 10px 10px;
    margin: -2px -10px -10px; /* room for the cards' shadows */
}
.legal_toc {
    padding: 12px 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.page_body .legal_toc_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 10px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.legal_toc_title::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gradient);
}
.legal_toc ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.legal_toc a {
    display: flex;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--bubble);
    font-size: 14px;
    line-height: 1.4;
    color: var(--text_muted);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.legal_toc a span {
    flex: 0 0 auto;
    min-width: 1.5em;
    color: var(--text_faint);
    font-variant-numeric: tabular-nums;
}
.legal_toc a:hover {
    background: var(--bg_muted);
    color: var(--text);
}
.legal_help {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
    font-size: 13px;
}
.page_body .legal_help p {
    margin-bottom: 4px;
    color: var(--text_muted);
}
.legal_help a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.legal_help a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    /* Narrower: the contents become a row of chips above the document */
    .legal_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .legal_side {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    /* the last section says the same */
    .legal_help {
        display: none;
    }
    .legal_toc {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .page_body .legal_toc_title {
        padding: 0 0 10px;
    }
    .legal_toc ol {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .legal_toc ol::-webkit-scrollbar {
        display: none;
    }
    .legal_toc a {
        gap: 4px;
        padding: 6px 13px;
        border: 1px solid var(--hairline);
        background: var(--surface);
        font-size: 13px;
        white-space: nowrap;
    }
    .legal_toc a span {
        min-width: 0;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Legal Document */
/* =======================================*/

.legal {
    padding: 48px 56px 40px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_xl);
    box-shadow: var(--shadow_sm);
}
.legal section {
    scroll-margin-top: calc(var(--header_h) + 20px);
}
.page_body .legal section > h2 {
    margin: 40px 0 12px;
    font-size: 21px;
}
.legal h3 {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.legal p, .legal li {
    color: var(--text_muted);
}
.legal ul {
    margin: 0 0 14px 1.25em;
    display: grid;
    gap: 8px;
}
.legal li::marker {
    color: var(--accent);
}
.legal strong {
    font-weight: 600;
    color: var(--text);
}
.legal a {
    color: var(--accent);
    font-weight: 500;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.page_body .legal section > :last-child {
    margin-bottom: 0;
}
/* "In short": a soft violet card at the top */
.legal_summary {
    padding: 24px 28px;
    border-radius: var(--bubble_lg);
    background: var(--accent_soft);
}
.page_body .legal_summary h2 {
    margin: 0 0 12px;
    font-size: 18px;
}
.legal_summary li {
    color: var(--text);
}
.page_body .legal_summary p {
    margin: 14px 0 0;
    font-size: 14px;
}
.page_body .legal_summary ul {
    margin-bottom: 0;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {
    .legal {
        padding: 32px 24px 24px;
        border-radius: var(--bubble_lg);
    }
    .legal_summary {
        padding: 20px;
    }
    .page_body .legal section > h2 {
        margin-top: 32px;
        font-size: 19px;
    }
}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .legal {
        padding: 24px 18px 18px;
    }
    .legal_summary {
        padding: 18px 16px;
    }
}





/* =======================================*/
/* Help Center Pages (/kb) Masthead */
/* =======================================*/

.kb_masthead {
    padding: 20px 0 26px;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
}
.kb_masthead_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.kb_brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-family: var(--font_display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    text-decoration: none;
}
.kb_brand img, .kb_brand_initial {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}
.kb_brand_initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent_soft);
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
}
.kb_brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb_search {
    display: flex;
    gap: 8px;
    max-width: 620px;
    margin-top: 20px;
}
/* Search: a soft box with the magnifier inside, the buttons' shape */
.kb_search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 18px 0 44px;
    border: 1px solid var(--hairline);
    border-radius: var(--bubble);
    background: var(--bg) var(--search_icon) no-repeat 16px 50% / 18px 18px;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kb_search input::placeholder {
    color: var(--text_faint);
}
.kb_search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_soft);
    background-color: var(--surface);
}
.kb_search .btn {
    min-height: 46px;
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .kb_search {
        flex-direction: column;
    }
    .kb_search .btn {
        align-self: flex-start;
    }
}





/* =======================================*/
/* Help Center Pages (/kb) Lists */
/* =======================================*/

/* A raised card */
.kb_category, .kb_list {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.kb_page {
    padding: 44px 0 72px;
}
.kb_page h1 {
    margin-bottom: 12px;
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.06;
    overflow-wrap: anywhere;
}
.kb_page .lead {
    margin-bottom: 20px;
}
.kb_page > .container > .btn {
    margin-top: 8px;
}
.kb_crumbs {
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text_muted);
}
.kb_crumbs a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.kb_crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kb_categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 28px 0 8px;
}
.kb_category {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    text-decoration: none;
    transition: border-color .15s ease;
}
.kb_category strong {
    font-family: var(--font_display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.kb_category span {
    font-size: 14px;
    color: var(--text_muted);
}
.kb_category em {
    align-self: flex-start;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--accent_soft);
    color: var(--accent);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}
.kb_category:hover {
    border-color: var(--border);
}
.kb_category:hover strong {
    color: var(--accent);
}
.kb_section_title {
    margin: 44px 0 14px;
    font-size: 24px;
    letter-spacing: -.03em;
}
/* Articles: rows inside one card */
.kb_list {
    list-style: none;
    max-width: 760px;
    overflow: hidden;
}
.kb_list li {
    padding: 18px 22px;
}
.kb_list li + li {
    border-top: 1px solid var(--hairline);
}
.kb_list a {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.kb_list a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kb_list p {
    margin-top: 4px;
    font-size: 14.5px;
    color: var(--text_muted);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .kb_list li {
        padding: 16px 18px;
    }
}





/* =======================================*/
/* Help Center Pages (/kb) Article */
/* =======================================*/

.kb_article, .kb_aside {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bubble_lg);
    box-shadow: var(--shadow_sm);
}
.kb_article_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
    align-items: start;
}
.kb_article {
    max-width: 80ch;
    padding: 40px 44px;
    border-radius: var(--bubble_xl);
}
.kb_updated {
    margin-bottom: 26px;
    font-size: 14px;
}
.kb_body {
    font-size: 16.5px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.kb_body > * + * {
    margin-top: 16px;
}
.kb_body h2 {
    margin-top: 36px;
    font-size: 26px;
    letter-spacing: -.03em;
    line-height: 1.25;
    scroll-margin-top: 20px;
}
.kb_body h3 {
    margin-top: 28px;
    font-size: 19px;
    font-weight: 600;
    scroll-margin-top: 20px;
}
.kb_body h4 {
    margin-top: 22px;
    font-size: 16px;
    font-weight: 600;
}
.kb_body a {
    color: var(--accent);
    font-weight: 600;
    text-underline-offset: 3px;
}
.kb_body ul, .kb_body ol {
    padding-left: 1.3em;
    display: grid;
    gap: 6px;
}
.kb_body li::marker {
    color: var(--accent);
}
.kb_body blockquote {
    padding: 12px 18px;
    border-left: 3px solid var(--accent);
    border-radius: 0 12px 12px 0;
    background: var(--bg);
    color: var(--text_muted);
}
.kb_body pre {
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg);
    font-size: 14px;
    line-height: 1.6;
}
.kb_body pre code {
    padding: 0;
    border: 0;
    background: none;
}
.kb_body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.kb_body hr {
    border: 0;
    border-top: 1px solid var(--hairline);
}
.kb_ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 40px;
    padding: 18px 20px;
    border-radius: var(--bubble_lg);
    background: var(--accent_soft);
}
.kb_ask strong {
    font-family: var(--font_display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
}
.kb_aside {
    position: sticky;
    top: 24px;
    padding: 12px 8px;
}
.kb_aside:not(:has(*)) {
    display: none;
}
.kb_aside_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 10px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text_muted);
}
.kb_aside_title::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gradient);
}
.kb_toc + .kb_aside_title {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}
.kb_toc {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kb_toc a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--bubble);
    font-size: 14px;
    color: var(--text_muted);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.kb_toc li.level_3 a {
    padding-left: 22px;
}
.kb_toc a:hover {
    background: var(--bg_muted);
    color: var(--text);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {
    .kb_article_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .kb_aside {
        position: static;
    }
}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {
    .kb_article {
        padding: 24px 20px;
        border-radius: var(--bubble_lg);
    }
}





/* =======================================*/
/* Help Center Pages (/kb) Footer */
/* =======================================*/

/* The footer sits at the foot of the window even when the page is short */
body:has(> .hosted_footer) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body:has(> .hosted_footer) > main {
    flex: 1 0 auto;
}
.hosted_footer {
    margin-top: 24px;
    padding: 24px 0 40px;
    border-top: 1px solid var(--hairline);
}
.hosted_powered {
    font-size: 13px;
    color: var(--text_muted);
    text-decoration: none;
}
.hosted_powered strong {
    color: var(--text);
    font-weight: 600;
}
.hosted_powered:hover strong {
    color: var(--accent);
}


/* For PC View */
@media screen and (max-width: 1280px) {

}
/* For Tablet View */
@media screen and (max-width: 992px) {

}
/* For Mobile View */
@media screen and (max-width: 768px) {

}
/* For Small Mobile View */
@media screen and (max-width: 576px) {

}





/* =======================================*/
/* Print */
/* =======================================*/

/* On paper: just the content */
@media print {
    .site_header, .site_footer, .legal_switch, .legal_side, .page_body::before {
        display: none;
    }
    .page_body {
        padding: 0;
    }
    .legal_layout {
        display: block;
    }
    .legal {
        padding: 0;
        border: 0;
        box-shadow: none;
    }
    .legal p, .legal li {
        color: #000;
    }
}