@import '_content/Inky.Design/Inky.Design.n1m02r4a70.bundle.scp.css';

/* /Components/Features/FeatureGroup.razor.rz.scp.css */
/* The side room keeps the 1200px column centred inside its full-width band, as the hero does. */
.feature-group[b-1sgns1efgw] {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    padding-inline: max(var(--space-6), calc((100% - var(--content-width)) / 2));
}

.feature-group__header[b-1sgns1efgw] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.feature-group__label[b-1sgns1efgw] {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feature-group__heading[b-1sgns1efgw] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.02em;
}

/* Phone and tablet: the heading takes its smaller size and the rows sit closer. */
@media (max-width: 60rem) { /* --bp-lg */
    .feature-group[b-1sgns1efgw] {
        gap: 5rem;
    }

    .feature-group__heading[b-1sgns1efgw] {
        font-size: var(--mkt-text-32);
        line-height: 1.125;
    }
}
/* /Components/Features/FeatureRow.razor.rz.scp.css */
/* Two 560px columns 80px apart: the picture fills one, the text is at most 540px in the other. */
.feature[b-f9qtvw6nth] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 5rem;
}

.feature--visual-first .feature__visual[b-f9qtvw6nth] {
    order: -1;
}

.feature__text[b-f9qtvw6nth] {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    min-width: 0;
    max-width: 33.75rem;
}

.feature__title[b-f9qtvw6nth] {
    color: var(--clr-white);
    font-size: var(--mkt-text-32);
    font-weight: 700;
    line-height: 1.175;
    letter-spacing: -0.014em;
}

.feature__body[b-f9qtvw6nth] {
    color: var(--text-muted);
    font-size: var(--mkt-text-18);
    line-height: 1.5889;
}

/* The panel is 420px tall at the design's width and grows with its content, never clipping it. */
.feature__visual[b-f9qtvw6nth] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625rem;
    min-width: 0;
    min-height: 26.25rem;
    padding: 1.75rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-dark);
    overflow: hidden;
}

/* Phone and tablet: the text sits above its picture, and the picture is as tall as its content. */
@media (max-width: 60rem) { /* --bp-lg */
    .feature[b-f9qtvw6nth] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
    }

    .feature--visual-first .feature__visual[b-f9qtvw6nth] {
        order: 0;
    }

    .feature__text[b-f9qtvw6nth] {
        gap: var(--space-4);
        max-width: none;
    }

    .feature__title[b-f9qtvw6nth] {
        font-size: var(--mkt-text-24);
        line-height: 1.2292;
    }

    .feature__visual[b-f9qtvw6nth] {
        min-height: 0;
    }
}
/* /Components/Features/FeaturesMarketing.razor.rz.scp.css */
/* The public page: its address and live badge, the studio's name, three pieces and its styles. */
.page-top[b-nb6wvggbwu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.page-top__link[b-nb6wvggbwu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem var(--space-3);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-pill);
    background: var(--clr-card);
    color: var(--clr-off-white);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.page-top__link[b-nb6wvggbwu]  .page-top__icon {
    color: var(--text-muted);
}

.page-head[b-nb6wvggbwu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.page-head__avatar[b-nb6wvggbwu] {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--clr-accent) 0%, var(--clr-accent-light) 71.4%);
}

.page-head__text[b-nb6wvggbwu] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.page-head__name[b-nb6wvggbwu] {
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 700;
    line-height: 1.2;
}

.page-head__note[b-nb6wvggbwu] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.portfolio[b-nb6wvggbwu] {
    display: flex;
    gap: var(--space-2);
}

/* Three photo tiles side by side, each cropped to the strip's shape. */
.portfolio__tile[b-nb6wvggbwu] {
    flex: 1 1 0;
    min-width: 0;
    height: 5rem;
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* The sender line under the emails. */
.sender[b-nb6wvggbwu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.sender__label[b-nb6wvggbwu] {
    color: var(--text-muted);
}

.sender__name[b-nb6wvggbwu] {
    color: var(--clr-white);
    font-weight: 600;
}
/* /Components/Features/FeaturesTools.razor.rz.scp.css */
/* The estimate card: a label, the range and where it came from. */
.estimate[b-ad2ngwi7il] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--space-4) 1.125rem;
    border: 1px solid var(--clr-border-light);
    border-radius: 0.875rem;
    background: var(--clr-card);
}

.estimate__value[b-ad2ngwi7il] {
    color: var(--clr-white);
    font-size: var(--mkt-text-28);
    font-weight: 700;
    line-height: 1.2143;
    letter-spacing: -0.012em;
}

.estimate__note[b-ad2ngwi7il] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.accuracy[b-ad2ngwi7il] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.accuracy__note[b-ad2ngwi7il] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

/* The stencil: a title and a send button, the canvas, and the layers under it. */
.stencil__head[b-ad2ngwi7il] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* The title wraps rather than running under the button when the row is too narrow for both. */
.stencil__title[b-ad2ngwi7il] {
    flex: 1 1 0;
    min-width: 0;
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.stencil__send[b-ad2ngwi7il] {
    flex: none;
    padding: 0.375rem var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

/* On a phone the pill runs into the right padding, as designed, so the title fits on a line. */
@media (max-width: 25.5rem) { /* 408px */
    .stencil__head[b-ad2ngwi7il] {
        gap: 0.25rem;
        margin-inline-end: -0.75rem;
    }
}

/* A fixed-height strip: a wide panel crops the photo's top and bottom, a narrow one its sides. */
.stencil__photo[b-ad2ngwi7il] {
    display: block;
    flex: none;
    width: 100%;
    height: 9.375rem;
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* The recall check's search box is a picture of one, so it is a span and never an input. */
.recall-search[b-ad2ngwi7il] {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--clr-gray-mid);
    border-radius: var(--radius-pill);
    background: var(--clr-card);
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}
/* /Components/Features/FeaturesWork.razor.rz.scp.css */
/* The client record's opening line: a large avatar, the name and when they became a client. */
.client-head[b-hmu7k6dxcc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.client-head__text[b-hmu7k6dxcc] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.client-head__name[b-hmu7k6dxcc] {
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 700;
    line-height: 1.2;
}

.client-head__note[b-hmu7k6dxcc] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}
/* /Components/Features/MockAvatar.razor.rz.scp.css */
.avatar[b-itiu4d97i7] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--clr-accent) 22%, transparent);
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 700;
    line-height: 1.25;
}

.avatar--large[b-itiu4d97i7] {
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--mkt-text-16);
    line-height: 1.2;
}
/* /Components/Features/MockButton.razor.rz.scp.css */
.mock-button[b-0ir1urgjxc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6875rem var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2143;
    text-align: center;
}
/* /Components/Features/MockCaption.razor.rz.scp.css */
.caption[b-938q3kd2z3] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* /Components/Features/MockMetrics.razor.rz.scp.css */
/* The basis is the smallest a figure may be: two fit across the phone's 284px and three across at 88px each. */
.metrics[b-cwd823u7mj] {
    --figure-basis: 8.5rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.metrics--three[b-cwd823u7mj] {
    --figure-basis: 5.5rem;
}

.metrics__figure[b-cwd823u7mj] {
    display: flex;
    flex: 1 1 var(--figure-basis);
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.875rem var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: 0.875rem;
    background: var(--clr-card);
}

.metrics__label[b-cwd823u7mj] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.metrics__value[b-cwd823u7mj] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
/* /Components/Features/MockPills.razor.rz.scp.css */
.pills[b-5slex7thq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
/* /Components/Features/MockPlanRow.razor.rz.scp.css */
/* A row too narrow for its title and its note lets the note drop below, as it must at 320px. */
.plan-row[b-hljc6humgr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: 0.625rem;
    background: var(--clr-card);
}

.plan-row__dot[b-hljc6humgr] {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.plan-row__dot--success[b-hljc6humgr] {
    background: var(--clr-success);
}

.plan-row__dot--warning[b-hljc6humgr] {
    background: var(--clr-warning);
}

.plan-row__dot--accent[b-hljc6humgr] {
    background: var(--clr-accent);
}

.plan-row__dot--accentlight[b-hljc6humgr] {
    background: var(--clr-accent-light);
}

.plan-row__dot--quiet[b-hljc6humgr] {
    background: var(--clr-border-light);
}

.plan-row__title[b-hljc6humgr] {
    flex: 1 1 6rem;
    min-width: 0;
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.plan-row__note[b-hljc6humgr] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}
/* /Components/Features/MockRow.razor.rz.scp.css */
/* A row too narrow for its text and its status lets the status drop below, as it must at 320px. */
.mock-row[b-x82dv11et9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-card);
}

.mock-row--tile[b-x82dv11et9] {
    gap: var(--space-3);
}

.mock-row__tile[b-x82dv11et9] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.85rem;
}

.mock-row__tile--success[b-x82dv11et9] {
    background: color-mix(in srgb, var(--clr-success) 16%, transparent);
    color: var(--clr-success);
}

.mock-row__tile--warning[b-x82dv11et9] {
    background: color-mix(in srgb, var(--clr-warning) 16%, transparent);
    color: var(--clr-warning);
}

.mock-row__tile--accent[b-x82dv11et9] {
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

.mock-row__tile--muted[b-x82dv11et9] {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
}

.mock-row__text[b-x82dv11et9] {
    display: flex;
    flex: 1 1 6rem;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.mock-row__title[b-x82dv11et9] {
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.mock-row--tile .mock-row__title[b-x82dv11et9] {
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
}

.mock-row__note[b-x82dv11et9] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

/* A hyphenated number such as a lot number is never split across two lines; the design keeps it whole. */
.mock-row__text[b-x82dv11et9]  .mock-row__number {
    white-space: nowrap;
}

/* The pill's own muted tint puts the page grey under 4.5:1 on a card, so a status uses the lighter grey. */
.mock-row[b-x82dv11et9]  .mock-row__status--muted {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--clr-gray-light);
}
/* /Components/Home/HomeAudience.razor.rz.scp.css */
.audience__grid[b-fnlocxdujo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    list-style: none;
}

.audience__card[b-fnlocxdujo] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
    overflow: hidden;
}

.audience__photo[b-fnlocxdujo] {
    width: 100%;
    height: 13.75rem;
    object-fit: cover;
}

.audience__body[b-fnlocxdujo] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.375rem var(--space-6) 1.625rem;
}

.audience__title[b-fnlocxdujo] {
    color: var(--clr-white);
    font-size: var(--mkt-text-20);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.audience__text[b-fnlocxdujo] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.53125;
}

.audience__tools[b-fnlocxdujo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-top: 0.375rem;
    list-style: none;
}

.audience__tool[b-fnlocxdujo] {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--clr-accent-light) 14%, transparent);
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

/* Tablet: two cards a row. */
@media (max-width: 60rem) { /* --bp-lg */
    .audience__grid[b-fnlocxdujo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: one card a row. */
@media (max-width: 40rem) { /* --bp-sm */
    .audience__grid[b-fnlocxdujo] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Home/HomeBespokeAi.razor.rz.scp.css */
/* The design draws this header 32px above its card, closer than the wrapper's three distances. */
.bespoke[b-hx2vt2eage] {
    --mkt-section-header-gap: 2rem;
}

/* Insets are the drawn ones less the 1px border, capped by width so enlarged text fits. */
.estimate[b-hx2vt2eage] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: min(calc(var(--space-6) - 1px), 6vw);
    overflow-wrap: anywhere;
    border: 1px solid var(--clr-border);
    border-radius: 1.75rem;
    background: var(--clr-card);
}

.estimate__head[b-hx2vt2eage] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.estimate__titles[b-hx2vt2eage] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.estimate__title[b-hx2vt2eage] {
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    font-weight: 700;
    line-height: 1.2;
}

.estimate__subtitle[b-hx2vt2eage],
.estimate__note[b-hx2vt2eage] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

/* The shared pill, outlined, on the accent at the pill's usual strength. */
.estimate[b-hx2vt2eage]  .estimate__badge {
    flex: none;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--clr-accent);
    background: color-mix(in srgb, var(--clr-accent) 16%, transparent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.estimate__body[b-hx2vt2eage] {
    display: grid;
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    gap: var(--space-6);
}

.estimate__panel[b-hx2vt2eage] {
    border: 1px solid var(--clr-border);
    border-radius: 1.25rem;
    background: var(--clr-dark);
}

.estimate__label[b-hx2vt2eage] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.estimate__preview[b-hx2vt2eage] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: min(calc(var(--space-5) - 1px), 5vw);
}

.estimate__layers[b-hx2vt2eage] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Solid fills with dark text, as the design draws these two tones. */
.estimate__layers[b-hx2vt2eage]  .estimate__layer {
    color: var(--clr-dark);
}

/* Enlarged text wraps inside a pill rather than running out of the card. */
.estimate[b-hx2vt2eage]  .pill {
    white-space: normal;
}

.estimate__layers[b-hx2vt2eage]  .estimate__layer--accent {
    background: var(--clr-accent-light);
}

.estimate__layers[b-hx2vt2eage]  .estimate__layer--muted {
    background: var(--clr-gray);
}

.estimate__figures[b-hx2vt2eage] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-self: start;
}

.estimate__figure[b-hx2vt2eage] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: min(calc(var(--space-4) - 1px), 4vw) min(calc(var(--space-4) - 1px), 4vw) 0.875rem;
}

/* The design's 22px is a value, not a heading, so it is off the heading scale. */
.estimate__value[b-hx2vt2eage] {
    color: var(--clr-white);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.estimate__closing[b-hx2vt2eage] {
    background: var(--clr-black);
    padding: 0.90625rem min(calc(var(--space-4) - 1px), 4vw);
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5625;
}

/* Phone and tablet: the heading takes the design's 28px, the badge drops and the cards stack. */
@media (max-width: 60rem) { /* --bp-lg */
    .bespoke[b-hx2vt2eage]  .section-header__heading {
        font-size: var(--mkt-text-28);
        line-height: 1.1429;
    }

    .estimate__head[b-hx2vt2eage] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .estimate__body[b-hx2vt2eage] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}
/* /Components/Home/HomeChatPhone.razor.rz.scp.css */
/* The frame is positioned so it paints above a glow behind it; a section may place it elsewhere. */
.phone[b-va7zi3huwk] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 16.875rem;
    height: 38.125rem;
    border: 2px solid var(--clr-border-light);
    border-radius: 2.375rem;
    background: var(--bg);
    box-shadow: 0 1.875rem 4.375rem rgb(0 0 0 / 0.5);
    overflow: hidden;
}

.phone__header[b-va7zi3huwk] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.375rem var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--clr-border);
}

.phone__avatar[b-va7zi3huwk] {
    flex: none;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: linear-gradient(to right, var(--clr-accent), var(--clr-accent-light));
}

.phone__who[b-va7zi3huwk] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.phone__name[b-va7zi3huwk] {
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2143;
}

.phone__status[b-va7zi3huwk] {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.phone__online[b-va7zi3huwk] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--clr-success);
}

.phone__messages[b-va7zi3huwk] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.625rem;
    min-height: 0;
    padding: var(--space-4) 0.875rem 0.875rem;
}

/* The messages are the page's own markup, so their shared look is reached with ::deep. */
.phone__messages[b-va7zi3huwk]  .bubble {
    width: fit-content;
    max-width: 12.5rem;
    padding: 0.5625rem var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--mkt-text-12);
    line-height: 1.4417;
}

.phone__messages[b-va7zi3huwk]  .bubble--client {
    align-self: flex-start;
    background: var(--clr-surface);
    color: var(--clr-off-white);
}

.phone__composer[b-va7zi3huwk] {
    padding: 0 0.875rem var(--space-4);
}

.phone__input[b-va7zi3huwk] {
    display: block;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-pill);
    background: var(--clr-surface);
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}
/* /Components/Home/HomeFloatingChip.razor.rz.scp.css */
.chip[b-ycz13j2b1n] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 1.125rem var(--space-3) 0.875rem;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    background: var(--clr-card);
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.45);
    /* Leaves room for the card's own offset from the photo's edge, so enlarged text wraps instead of being clipped. */
    max-width: calc(100% - 2.5rem);
}

.chip__icon[b-ycz13j2b1n] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--radius-pill);
}

.chip__icon--success[b-ycz13j2b1n] {
    background: color-mix(in srgb, var(--clr-success) 18%, transparent);
    color: var(--clr-success);
}

.chip__icon--accent[b-ycz13j2b1n] {
    background: color-mix(in srgb, var(--clr-accent) 18%, transparent);
    color: var(--clr-accent-light);
}

.chip__text[b-ycz13j2b1n] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chip__title[b-ycz13j2b1n] {
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2143;
}

.chip__detail[b-ycz13j2b1n] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}
/* /Components/Home/HomeHero.razor.rz.scp.css */
.hero[b-tanebftnin] {
    position: relative;
    padding: 7.5rem var(--space-6);
    overflow: hidden;
}

/* The two soft purple glows behind the copy and the photo. */
.hero__glow[b-tanebftnin] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero__glow--right[b-tanebftnin] {
    top: -10rem;
    right: -15rem;
    width: 56.25rem;
    height: 56.25rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--clr-accent) 42%, transparent), transparent);
}

.hero__glow--left[b-tanebftnin] {
    top: 23.75rem;
    left: -16.25rem;
    width: 37.5rem;
    height: 37.5rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--clr-accent-light) 14%, transparent), transparent);
}

/* The copy is centred against the photo, whichever of the two is taller. */
.hero__inner[b-tanebftnin] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    max-width: var(--content-width);
    margin-inline: auto;
}

.hero__copy[b-tanebftnin] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    min-width: 0;
}

/* The one title that is 48px on a desktop, on a 64px line; the shared page title is 52px. */
.hero__title[b-tanebftnin] {
    font-size: var(--mkt-text-48);
    line-height: 4rem;
}

/* A desktop breaks the title after "studio"; a phone lets the words wrap in the narrow column. */
.hero__line[b-tanebftnin] {
    display: block;
}

.hero__title-accent[b-tanebftnin] {
    color: var(--clr-accent-light);
}

/* 520px from 1248px up, narrowing with the window so the title keeps its width. */
.hero__visual[b-tanebftnin] {
    flex: 0 1 clamp(22.5rem, calc(100vw - 45.5rem), 32.5rem);
    min-width: 0;
}

.hero__photo[b-tanebftnin] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 1.75rem;
    object-fit: cover;
}

/* Phone and tablet: one centred column, the photo below the button. */
@media (max-width: 60rem) { /* --bp-lg */
    .hero[b-tanebftnin] {
        padding: 5rem var(--space-8);
    }

    .hero__glow--right[b-tanebftnin] {
        top: 15rem;
        right: -13.125rem;
        width: 37.5rem;
        height: 37.5rem;
    }

    .hero__glow--left[b-tanebftnin] {
        top: 32.5rem;
        left: -9.375rem;
        width: 25rem;
        height: 25rem;
    }

    .hero__inner[b-tanebftnin] {
        flex-direction: column;
        gap: 3.5rem;
        max-width: 28rem;
    }

    .hero__copy[b-tanebftnin] {
        flex: none;
        align-items: stretch;
        align-self: stretch;
        text-align: center;
    }

    .hero__title[b-tanebftnin] {
        font-size: var(--mkt-text-40);
        line-height: 1.1;
    }

    .hero__line[b-tanebftnin] {
        display: inline;
    }

    .hero__visual[b-tanebftnin] {
        flex: none;
        align-self: stretch;
    }

    .hero__photo[b-tanebftnin] {
        aspect-ratio: 328 / 415;
        border-radius: 1.25rem;
    }
}
/* /Components/Home/HomeInkyApp.razor.rz.scp.css */
/* The wrapper adds no box; it only scopes the phone spacing override to this section. */
.inky-app[b-4iwmh3fv9s] {
    display: contents;
}

/* On a phone the section keeps 80px above and below and a 24px gutter, as the design draws it. */
@media (max-width: 60rem) { /* --bp-lg */
    .inky-app[b-4iwmh3fv9s]  .home-section {
        --mkt-section-space: 5rem;
        --mkt-section-gutter: 1.5rem;
    }
}

/* A 560px copy column, and a 504px column with the phone centred in it, at the container edges. */
.inky-app__layout[b-4iwmh3fv9s] {
    display: grid;
    grid-template-columns: minmax(0, 35rem) minmax(0, 31.5rem);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.inky-app__copy[b-4iwmh3fv9s] {
    display: flex;
    flex-direction: column;
    gap: 2.125rem;
}

.inky-app__intro[b-4iwmh3fv9s] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.inky-app__heading[b-4iwmh3fv9s] {
    color: var(--clr-white);
    font-size: var(--mkt-text-52);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.015em;
}

.inky-app__accent[b-4iwmh3fv9s] {
    display: block;
    color: var(--clr-accent-light);
}

.inky-app__lead[b-4iwmh3fv9s] {
    color: var(--text-muted);
    font-size: var(--mkt-text-18);
    line-height: 1.5556;
}

.inky-app__stores[b-4iwmh3fv9s] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.inky-app__badges[b-4iwmh3fv9s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.inky-app__soon[b-4iwmh3fv9s] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
}

/* The glow is a 526px circle of the accent behind the phone, fading to nothing at its edge. */
.inky-app__stage[b-4iwmh3fv9s] {
    position: relative;
    display: flex;
    justify-content: center;
}

.inky-app__stage[b-4iwmh3fv9s]::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 32.875rem;
    height: 32.875rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--mkt-hero-glow) 40%, transparent), transparent);
    pointer-events: none;
}

/* Phone and tablet: the copy first, then the phone centred below it. */
@media (max-width: 60rem) { /* --bp-lg */
    .inky-app__layout[b-4iwmh3fv9s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .inky-app__heading[b-4iwmh3fv9s] {
        font-size: var(--mkt-text-32);
        line-height: 1.125;
    }

    .inky-app__copy[b-4iwmh3fv9s] {
        gap: 2.5rem;
    }

    .inky-app__intro[b-4iwmh3fv9s] {
        padding-inline: 0.5rem;
    }

    .inky-app__badges[b-4iwmh3fv9s] {
        gap: 0.75rem;
    }
}
/* /Components/Home/HomePhotoBand.razor.rz.scp.css */
.band[b-j7hhyoutr8] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30rem;
    padding-inline: 4.5rem;
    border-radius: var(--radius-2xl);
    background: var(--clr-dark);
    overflow: hidden;
}

.band__photo[b-j7hhyoutr8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkens the photo from the copy's side so the white text keeps its contrast. */
.band__scrim[b-j7hhyoutr8] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--clr-dark) 94%, transparent) 0%,
        color-mix(in srgb, var(--clr-dark) 70%, transparent) 50%,
        color-mix(in srgb, var(--clr-dark) 5%, transparent) 100%
    );
}

.band__copy[b-j7hhyoutr8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
    max-width: 35rem;
}

.band__eyebrow[b-j7hhyoutr8] {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.band__title[b-j7hhyoutr8] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.125;
    letter-spacing: -0.02em;
}

.band__text[b-j7hhyoutr8] {
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    line-height: 1.5556;
}

.band__cta[b-j7hhyoutr8] {
    margin-top: var(--space-2);
}

/* Phone and tablet: the copy sits at the top and the photo shows below it, so the scrim runs downwards. */
@media (max-width: 60rem) { /* --bp-lg */
    .band[b-j7hhyoutr8] {
        display: block;
        min-height: 0;
        padding: 3.5rem 1.75rem 13.125rem;
    }

    .band__scrim[b-j7hhyoutr8] {
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--clr-dark) 94%, transparent) 0%,
            color-mix(in srgb, var(--clr-dark) 70%, transparent) 50%,
            color-mix(in srgb, var(--clr-dark) 5%, transparent) 100%
        );
    }

    .band__title[b-j7hhyoutr8] {
        font-size: var(--mkt-text-32);
    }
}
/* /Components/Home/HomePill.razor.rz.scp.css */
.pill[b-wq0mal23v4] {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5625rem;
    border-radius: var(--radius-pill);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.pill--success[b-wq0mal23v4] {
    background: color-mix(in srgb, var(--clr-success) 16%, transparent);
    color: var(--clr-success);
}

.pill--warning[b-wq0mal23v4] {
    background: color-mix(in srgb, var(--clr-warning) 16%, transparent);
    color: var(--clr-warning);
}

.pill--accent[b-wq0mal23v4] {
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--accent-text);
}

.pill--muted[b-wq0mal23v4] {
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
    color: var(--text-muted);
}
/* /Components/Home/HomePillarCard.razor.rz.scp.css */
.pillar[b-8ah2z86mbg] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
    overflow: hidden;
}

/* The text sits above the mock-up, so the frame has no space above it of its own. */
.pillar__frame[b-8ah2z86mbg] {
    padding: 0 var(--space-4) var(--space-4);
}

/* The mock-up sits centred in a dark panel; the pillar's own markup supplies what is inside it. */
.pillar__visual[b-8ah2z86mbg] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625rem;
    height: 18rem;
    padding: var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-dark);
    overflow: hidden;
}

.pillar__text[b-8ah2z86mbg] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: var(--space-8) var(--space-8) 1.25rem;
}

.pillar__title[b-8ah2z86mbg] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.pillar__body[b-8ah2z86mbg] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5625;
}

/* Phone and tablet: the panel grows with its content and the text takes the smaller title. */
@media (max-width: 60rem) { /* --bp-lg */
    .pillar__visual[b-8ah2z86mbg] {
        height: auto;
        justify-content: flex-start;
    }

    .pillar__text[b-8ah2z86mbg] {
        padding: var(--space-6) var(--space-6) 1.25rem;
    }

    .pillar__title[b-8ah2z86mbg] {
        font-size: var(--mkt-text-20);
        line-height: 1.285;
    }

    .pillar__body[b-8ah2z86mbg] {
        line-height: 1.53125;
    }
}
/* /Components/Home/HomePillars.razor.rz.scp.css */
.pillars__grid[b-kjnhvjq4uc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
}

/* The rows every mock-up is drawn from: a small card with a title and a note. */
/* A row too narrow for its text and its status lets the status drop below, as it must at 320px. */
.row[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-card);
}

.row__text[b-kjnhvjq4uc] {
    display: flex;
    flex: 1 1 6rem;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.row__title[b-kjnhvjq4uc] {
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.row__title--large[b-kjnhvjq4uc] {
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
}

.row__note[b-kjnhvjq4uc] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

/* 01: the inbox. */
.inbox__filters[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.inbox__avatar[b-kjnhvjq4uc] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--clr-accent) 22%, transparent);
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 700;
    line-height: 1.25;
}

/* 02: the estimate against the actual price, six pieces. */
.chart__head[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem var(--space-3);
}

.chart__bars[b-kjnhvjq4uc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 8.1875rem;
    padding-inline: 1.75rem;
}

/* A pair is 27px wide at the design's width and narrows with the panel, so pairs never overlap. */
.chart__pair[b-kjnhvjq4uc] {
    display: flex;
    flex: 0 1 1.6875rem;
    align-items: flex-end;
    gap: 0.1875rem;
    min-width: 0;
}

.chart__bar[b-kjnhvjq4uc] {
    flex: 1 1 0;
    max-width: 0.75rem;
    border-radius: 0.1875rem;
}

.chart__bar--estimated[b-kjnhvjq4uc] {
    background: var(--clr-border-light);
}

.chart__bar--actual[b-kjnhvjq4uc] {
    background: var(--clr-accent);
}

.chart__legend[b-kjnhvjq4uc] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.chart__key[b-kjnhvjq4uc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.chart__dot[b-kjnhvjq4uc] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.chart__dot--estimated[b-kjnhvjq4uc] {
    background: var(--clr-border-light);
}

.chart__dot--actual[b-kjnhvjq4uc] {
    background: var(--clr-accent);
}

/* 03: the stencil, a photo of the work in progress. */
.stencil__head[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem var(--space-3);
}

.stencil__send[b-kjnhvjq4uc] {
    padding: 0.3125rem 0.6875rem;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

/* A fixed-height strip: a wide panel crops the photo's top and bottom, a narrow one its sides. */
.stencil__photo[b-kjnhvjq4uc] {
    display: block;
    flex: none;
    width: 100%;
    height: 9.375rem;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.stencil__layers[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* 04: the plan for a big piece. */
.plan__heading[b-kjnhvjq4uc] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan__row[b-kjnhvjq4uc] {
    border-radius: 0.625rem;
}

.plan__title[b-kjnhvjq4uc] {
    flex: 1 1 0;
    min-width: 0;
}

.plan__dot[b-kjnhvjq4uc] {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.plan__dot--done[b-kjnhvjq4uc] {
    background: var(--clr-success);
}

.plan__dot--gap[b-kjnhvjq4uc] {
    background: var(--clr-border-light);
}

.plan__dot--next[b-kjnhvjq4uc] {
    background: var(--clr-accent);
}

.plan__dot--proposed[b-kjnhvjq4uc] {
    background: var(--clr-accent-light);
}

/* 05: consent forms and ink records. */
.record__row[b-kjnhvjq4uc] {
    gap: var(--space-3);
}

.record__tile[b-kjnhvjq4uc] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.85rem;
}

.record__tile--success[b-kjnhvjq4uc] {
    background: color-mix(in srgb, var(--clr-success) 16%, transparent);
    color: var(--clr-success);
}

.record__tile--warning[b-kjnhvjq4uc] {
    background: color-mix(in srgb, var(--clr-warning) 16%, transparent);
    color: var(--clr-warning);
}

.record__tile--accent[b-kjnhvjq4uc] {
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

/* 06: the artist's own public page. */
.page-card[b-kjnhvjq4uc] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.875rem;
    border: 1px solid var(--clr-border-light);
    border-radius: 0.875rem;
    background: var(--clr-card);
}

.page-card__head[b-kjnhvjq4uc] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.page-card__avatar[b-kjnhvjq4uc] {
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-light));
}

.page-card__head[b-kjnhvjq4uc]  .page-card__shield {
    color: var(--clr-success);
}

.page-card__flags[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.page-card__next[b-kjnhvjq4uc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--clr-border);
}

.page-card__next .row__text[b-kjnhvjq4uc] {
    flex: none;
}

.page-card__button[b-kjnhvjq4uc] {
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2143;
}

/* Phone and tablet: one column. */
@media (max-width: 60rem) { /* --bp-lg */
    .pillars__grid[b-kjnhvjq4uc] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Home/HomePortfolio.razor.rz.scp.css */
/* The span is the tiles and gaps end to end; the travel is how far the drift moves the strip. */
.portfolio__marquee[b-xjpt3mpbij] {
    --portfolio-tile: 15rem;
    --portfolio-gap: var(--space-4);
    --portfolio-inset: var(--space-6);
    --portfolio-offset: 0px;
    --portfolio-step: calc(var(--portfolio-tile) + var(--portfolio-gap));
    --portfolio-span: calc(var(--portfolio-tiles) * var(--portfolio-step) - var(--portfolio-gap));
    --portfolio-travel: max(0px, calc(var(--portfolio-span) - 100vw));
}

/* By default every tile is on show in a grid; the moving strip below is the enhancement. */
.portfolio__tiles[b-xjpt3mpbij] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--portfolio-gap);
    list-style: none;
}

.portfolio__tiles--repeat[b-xjpt3mpbij],
.portfolio__controls[b-xjpt3mpbij] {
    display: none;
}

.portfolio__tile[b-xjpt3mpbij] {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--mkt-tile-midnight);
}

.portfolio__photo[b-xjpt3mpbij] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio__label[b-xjpt3mpbij] {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--clr-dark);
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

@media (min-width: 48rem) { /* --bp-md */
    .portfolio__tiles[b-xjpt3mpbij] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Only a visitor who has not asked for less motion gets a moving strip, and only where :has works. */
@media (prefers-reduced-motion: no-preference) {
    @supports selector(:has(*)) {
        .portfolio__viewport[b-xjpt3mpbij] {
            position: relative;
            container-type: inline-size;
            width: 100vw;
            margin-inline: calc(50% - 50vw);
        }

        .portfolio__strip[b-xjpt3mpbij] {
            overflow: clip;
        }

        /* The drift moves the row with translate and the stops with transform, so the two add up. */
        .portfolio__row[b-xjpt3mpbij] {
            display: flex;
            gap: var(--portfolio-gap);
            width: max-content;
            transform: translateX(var(--portfolio-offset));
            transition: transform 0.3s ease;
            animation: portfolio-drift-b-xjpt3mpbij 60s ease-in-out infinite alternate;
        }

        @keyframes portfolio-drift-b-xjpt3mpbij {
            from {
                translate: 0 0;
            }

            to {
                translate: calc(-1 * var(--portfolio-travel)) 0;
            }
        }

        .portfolio__tiles[b-xjpt3mpbij],
        .portfolio__tiles--repeat[b-xjpt3mpbij] {
            display: flex;
            gap: var(--portfolio-gap);
        }

        .portfolio__tile[b-xjpt3mpbij] {
            flex: none;
            width: var(--portfolio-tile);
        }

        /* The strip holds while the box is checked, the pointer is over it or focus is inside it. */
        .portfolio__marquee:has(#portfolio-pause:checked) .portfolio__row[b-xjpt3mpbij],
        .portfolio__strip:hover .portfolio__row[b-xjpt3mpbij],
        .portfolio__strip:focus-visible .portfolio__row[b-xjpt3mpbij],
        .portfolio__strip:has(:focus-visible) .portfolio__row[b-xjpt3mpbij] {
            animation-play-state: paused;
        }

        /* Stop n puts the nth tile at the page edge; the first stop is the start. */
        .portfolio__marquee:has(#portfolio-at-1:checked)[b-xjpt3mpbij] { --portfolio-offset: var(--portfolio-inset); }
        .portfolio__marquee:has(#portfolio-at-2:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 1 * var(--portfolio-step)); }
        .portfolio__marquee:has(#portfolio-at-3:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 2 * var(--portfolio-step)); }
        .portfolio__marquee:has(#portfolio-at-4:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 3 * var(--portfolio-step)); }
        .portfolio__marquee:has(#portfolio-at-5:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 4 * var(--portfolio-step)); }
        .portfolio__marquee:has(#portfolio-at-6:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 5 * var(--portfolio-step)); }
        .portfolio__marquee:has(#portfolio-at-7:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 6 * var(--portfolio-step)); }
        .portfolio__marquee:has(#portfolio-at-8:checked)[b-xjpt3mpbij] { --portfolio-offset: calc(var(--portfolio-inset) - 7 * var(--portfolio-step)); }

        .portfolio__controls[b-xjpt3mpbij] {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: var(--space-4) var(--space-6);
            margin-top: var(--space-6);
            padding-inline: var(--space-6);
        }

        .portfolio__pause[b-xjpt3mpbij],
        .portfolio__stop[b-xjpt3mpbij] {
            position: relative;
            display: grid;
        }

        /* The face draws the control; the input over it takes the press, focus and ring. z-index keeps it above. */
        .portfolio__face[b-xjpt3mpbij] {
            display: grid;
            place-items: center;
            min-width: 2.75rem;
            min-height: 2.75rem;
            border: 1px solid var(--clr-border-light);
            border-radius: var(--radius-pill);
            background: color-mix(in srgb, var(--clr-dark) 85%, transparent);
            color: var(--clr-white);
        }

        .portfolio__input[b-xjpt3mpbij] {
            position: absolute;
            inset: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: var(--radius-pill);
            background: transparent;
            appearance: none;
            cursor: pointer;
        }

        .portfolio__input:hover + .portfolio__face[b-xjpt3mpbij] {
            border-color: var(--clr-gray-mid);
            background: var(--clr-surface);
        }

        .portfolio__glyph[b-xjpt3mpbij] {
            grid-area: 1 / 1;
            width: 0.875rem;
            height: 1rem;
        }

        .portfolio__glyph--pause[b-xjpt3mpbij] {
            background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
        }

        .portfolio__glyph--play[b-xjpt3mpbij] {
            display: none;
            background: currentColor;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }

        .portfolio__input:checked + .portfolio__face .portfolio__glyph--pause[b-xjpt3mpbij] {
            display: none;
        }

        .portfolio__input:checked + .portfolio__face .portfolio__glyph--play[b-xjpt3mpbij] {
            display: block;
        }

        /* One name is in a control's accessible name at a time; the others are display: none. */
        .portfolio__name--pause[b-xjpt3mpbij],
        .portfolio__name--other[b-xjpt3mpbij] {
            display: inline;
        }

        .portfolio__name--play[b-xjpt3mpbij],
        .portfolio__name--previous[b-xjpt3mpbij],
        .portfolio__name--next[b-xjpt3mpbij],
        .portfolio__name--here[b-xjpt3mpbij] {
            display: none;
        }

        .portfolio__input:checked + .portfolio__face .portfolio__name--pause[b-xjpt3mpbij] {
            display: none;
        }

        .portfolio__input:checked + .portfolio__face .portfolio__name--play[b-xjpt3mpbij] {
            display: inline;
        }

        /* The three slots stay put as the stops change: previous, here and next never trade places. */
        .portfolio__steps[b-xjpt3mpbij] {
            position: relative;
            display: grid;
            grid-template-columns: 2.75rem auto 2.75rem;
            column-gap: var(--space-2);
            align-items: center;
        }

        /* Every stop but the checked one and its two neighbours is out of sight and out of the way. */
        .portfolio__steps > .portfolio__stop[b-xjpt3mpbij] {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
        }

        .portfolio__steps > .portfolio__stop:has(+ .portfolio__stop .portfolio__input:checked)[b-xjpt3mpbij],
        .portfolio__steps > .portfolio__stop:has(.portfolio__input:checked)[b-xjpt3mpbij],
        .portfolio__steps > .portfolio__stop:has(.portfolio__input:checked) + .portfolio__stop[b-xjpt3mpbij] {
            position: relative;
            grid-row: 1;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
        }

        .portfolio__steps > .portfolio__stop:has(+ .portfolio__stop .portfolio__input:checked)[b-xjpt3mpbij] {
            grid-column: 1;
        }

        .portfolio__steps > .portfolio__stop:has(.portfolio__input:checked)[b-xjpt3mpbij] {
            grid-column: 2;
        }

        .portfolio__steps > .portfolio__stop:has(.portfolio__input:checked) + .portfolio__stop[b-xjpt3mpbij] {
            grid-column: 3;
        }

        .portfolio__arrow[b-xjpt3mpbij],
        .portfolio__pips[b-xjpt3mpbij] {
            display: none;
        }

        .portfolio__stop:has(+ .portfolio__stop .portfolio__input:checked) .portfolio__arrow[b-xjpt3mpbij] {
            display: inline-flex;
            transform: scaleX(-1);
        }

        .portfolio__stop:has(.portfolio__input:checked) + .portfolio__stop .portfolio__arrow[b-xjpt3mpbij] {
            display: inline-flex;
        }

        .portfolio__stop:has(.portfolio__input:checked) .portfolio__face[b-xjpt3mpbij] {
            padding-inline: var(--space-4);
        }

        .portfolio__stop:has(.portfolio__input:checked) .portfolio__pips[b-xjpt3mpbij] {
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .portfolio__pip[b-xjpt3mpbij] {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: var(--radius-pill);
            background: var(--text-muted);
        }

        .portfolio__pip--on[b-xjpt3mpbij] {
            width: 1.25rem;
            background: var(--clr-white);
        }

        .portfolio__stop:has(+ .portfolio__stop .portfolio__input:checked) .portfolio__name--other[b-xjpt3mpbij],
        .portfolio__stop:has(.portfolio__input:checked) .portfolio__name--other[b-xjpt3mpbij],
        .portfolio__stop:has(.portfolio__input:checked) + .portfolio__stop .portfolio__name--other[b-xjpt3mpbij] {
            display: none;
        }

        .portfolio__stop:has(+ .portfolio__stop .portfolio__input:checked) .portfolio__name--previous[b-xjpt3mpbij],
        .portfolio__stop:has(.portfolio__input:checked) + .portfolio__stop .portfolio__name--next[b-xjpt3mpbij],
        .portfolio__stop:has(.portfolio__input:checked) .portfolio__name--here[b-xjpt3mpbij] {
            display: inline;
        }

        /* From this width the tiles fit end to end: 127rem is the eight tiles and gaps. */
        @container (min-width: 127rem) {
            .portfolio__tiles--repeat[b-xjpt3mpbij],
            .portfolio__controls[b-xjpt3mpbij] {
                display: none;
            }

            .portfolio__row[b-xjpt3mpbij] {
                transform: none;
                animation: none;
            }
        }
    }
}
/* /Components/Home/HomePricing.razor.rz.scp.css */
.pricing__plans[b-y40lurwntf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 24rem));
    gap: var(--space-6);
    justify-content: center;
    list-style: none;
}

/* The design's 392px card: the plans stretch to one height and the button sits at the foot. */
.plan[b-y40lurwntf] {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    min-height: 24.5rem;
    padding: var(--space-8);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
}

.plan--featured[b-y40lurwntf] {
    border: 2px solid var(--clr-accent);
    background: linear-gradient(to bottom, var(--mkt-plan-featured-top), var(--clr-card));
}

.plan__top[b-y40lurwntf] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.plan__dot[b-y40lurwntf] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--clr-accent);
}

.plan--bronze .plan__dot[b-y40lurwntf] {
    background: var(--clr-bronze);
}

.plan--silver .plan__dot[b-y40lurwntf] {
    background: var(--clr-silver);
}

.plan--gold .plan__dot[b-y40lurwntf] {
    background: var(--clr-gold);
}

.plan__name[b-y40lurwntf] {
    flex: 1 1 0;
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.005em;
}

.plan__badge[b-y40lurwntf] {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.plan__price[b-y40lurwntf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5625rem;
}

.plan__amount[b-y40lurwntf] {
    color: var(--clr-white);
    font-size: var(--mkt-text-56);
    font-weight: 700;
    line-height: 1.2143;
    letter-spacing: -0.03em;
}

.plan__period[b-y40lurwntf] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.1875;
}

.plan__highlights[b-y40lurwntf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: 1.375rem;
    border-top: 1px solid var(--clr-border);
    list-style: none;
}

.plan__highlight[b-y40lurwntf] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--clr-off-white);
    font-size: var(--mkt-text-16);
    line-height: 1.1875;
}

.plan__highlight[b-y40lurwntf]  .icon {
    margin-top: 0.09375rem;
    color: var(--clr-accent-light);
}

/* The design's small button: 10px by 18px around a 14px label, full width inside its card. */
.plan__cta[b-y40lurwntf] {
    width: 100%;
    margin-top: auto;
    padding: 0.625rem 1.125rem;
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
}

/* The filled button has no border, so it takes a clear one to stand as tall as the outlined ones. */
.plan__cta--featured[b-y40lurwntf] {
    border: 1px solid transparent;
}

/* The footnote on the left and the link on the right, centred on one line. */
.pricing__foot[b-y40lurwntf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-top: 3rem;
}

.pricing__footnote[b-y40lurwntf] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.5;
}

/* 13px is the design's link size; the negative margin keeps its 44px target out of the layout. */
.pricing__link[b-y40lurwntf] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    margin-block: -0.875rem;
    margin-inline-start: auto;
    color: var(--accent-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.pricing__link:hover[b-y40lurwntf] {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* Phone and tablet: a centred header 32px above one plan a row; footnote and link centred. */
@media (max-width: 60rem) { /* --bp-lg */
    .pricing[b-y40lurwntf] {
        --mkt-section-header-gap: 2rem;
    }

    .pricing[b-y40lurwntf]  .section-header {
        text-align: center;
    }

    .pricing__plans[b-y40lurwntf] {
        grid-template-columns: minmax(0, 30rem);
    }

    .plan[b-y40lurwntf] {
        min-height: 0;
    }

    .plan__amount[b-y40lurwntf] {
        font-size: var(--mkt-text-32);
        line-height: 1.119;
    }

    .pricing__foot[b-y40lurwntf] {
        flex-direction: column;
        gap: 0.625rem;
        margin-top: 2.25rem;
        text-align: center;
    }

    .pricing__link[b-y40lurwntf] {
        margin-inline-start: 0;
        text-align: center;
    }
}
/* /Components/Home/HomeSection.razor.rz.scp.css */
/* The fill, the line above and the spacing come from the --mkt-section-* tokens in site.css. */
.home-section[b-z4zhd29tqp] {
    padding: var(--mkt-section-space) var(--mkt-section-gutter);
    border-top: var(--mkt-section-line) solid var(--clr-border);
    background: var(--bg);
    overflow-x: clip;
}

.home-section--dark[b-z4zhd29tqp] {
    background: var(--clr-dark);
}

/* A joined section is the same block as the one above, so no line sits between them. */
.home-section--joined[b-z4zhd29tqp] {
    border-top: 0;
}

.home-section__inner[b-z4zhd29tqp] {
    max-width: var(--content-width);
    margin-inline: auto;
}

/* Every section's header sits one distance above its content; two sections draw a shorter one. */
.home-section[b-z4zhd29tqp]  .section-header {
    margin-bottom: var(--mkt-section-header-gap);
}

.home-section--snug[b-z4zhd29tqp] {
    --mkt-section-header-gap: 3rem;
}

.home-section--tight[b-z4zhd29tqp] {
    --mkt-section-header-gap: 2.75rem;
}

/* Phone and tablet: a section keeps only its space below, so two are 56px apart, not 112px. */
@media (max-width: 60rem) { /* --bp-lg */
    .home-section[b-z4zhd29tqp] {
        padding-top: 0;
    }

    .home-section--padded-top[b-z4zhd29tqp] {
        padding-top: var(--mkt-section-space);
    }
}
/* /Components/Home/HomeSectionHeader.razor.rz.scp.css */
.section-header[b-m3nhe2sebv] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.section-header--spacious[b-m3nhe2sebv] {
    gap: var(--space-4);
}

.section-header__heading[b-m3nhe2sebv] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.02em;
}

.section-header--spacious .section-header__heading[b-m3nhe2sebv] {
    line-height: 1.125;
}

.section-header__lead[b-m3nhe2sebv] {
    max-width: 45rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-18);
    line-height: 1.5556;
}

/* Phone and tablet: the heading takes its smaller size. */
@media (max-width: 60rem) { /* --bp-lg */
    .section-header__heading[b-m3nhe2sebv],
    .section-header--spacious .section-header__heading[b-m3nhe2sebv] {
        font-size: var(--mkt-text-32);
        line-height: 1.125;
    }
}
/* /Components/Home/HomeShowcase.razor.rz.scp.css */
/* The stage is the design's 1200 by 690 canvas; the laptop gives way to the phone as it narrows. */
.stage[b-kg2me10qk2] {
    position: relative;
    height: 43.125rem;
}

.stage__laptop[b-kg2me10qk2] {
    position: absolute;
    top: 0;
    left: 1.25rem;
    width: calc(100% - 10rem);
    height: 35.5rem;
    padding: 0.875rem;
    border: 2px solid var(--clr-border-light);
    border-radius: 1.875rem;
    background: var(--clr-surface);
    box-shadow: 0 1.875rem 4.375rem rgb(0 0 0 / 0.5);
}

.stage__camera[b-kg2me10qk2] {
    position: absolute;
    top: 0.1875rem;
    left: calc(50% - 0.15625rem);
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--clr-border-light);
}

.stage__base[b-kg2me10qk2] {
    position: absolute;
    top: 35.375rem;
    left: -1.25rem;
    width: calc(100% - 2.5rem);
    height: 0.875rem;
    border-radius: 0.4375rem;
    background: linear-gradient(to bottom, var(--clr-border-light), var(--clr-surface));
}

.stage[b-kg2me10qk2]  .stage__chip {
    position: absolute;
}

.stage[b-kg2me10qk2]  .stage__chip--deposit {
    top: -1.625rem;
    right: 15.3125rem;
}

.stage[b-kg2me10qk2]  .stage__chip--session {
    top: 34.25rem;
    left: 2.5rem;
}

/* The dashboard: a container, so its layout follows its own width and not the page's. */
/* The design's window is 4px taller than the laptop's content box, which leaves the bottom bezel 12px thick. */
.window[b-kg2me10qk2] {
    display: flex;
    height: 33.75rem;
    border: 1px solid var(--clr-border-light);
    border-radius: 0.875rem;
    background: var(--clr-dark);
    container-type: inline-size;
    overflow: hidden;
}

.window__sidebar[b-kg2me10qk2] {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 1.125rem;
    width: 13.75rem;
    padding: 1.375rem var(--space-4);
    background: var(--clr-card);
}

.window__logo[b-kg2me10qk2] {
    padding: 0 0 0.375rem 0.5rem;
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    font-weight: 800;
    line-height: 1.2083;
    letter-spacing: -0.03em;
}

.window__nav[b-kg2me10qk2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.window__item[b-kg2me10qk2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5625rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    font-weight: 500;
    line-height: 1.2143;
}

.window__item--active[b-kg2me10qk2] {
    background: color-mix(in srgb, var(--clr-accent) 18%, transparent);
    color: var(--accent-text);
    font-weight: 600;
}

.window__item--active[b-kg2me10qk2]  .icon {
    color: var(--clr-accent-light);
}

.window__group[b-kg2me10qk2] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.window__main[b-kg2me10qk2] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-6);
    background: var(--bg);
}

.window__metrics[b-kg2me10qk2] {
    display: flex;
    gap: var(--space-3);
}

.window__metric[b-kg2me10qk2] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.875rem var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: 0.875rem;
    background: var(--clr-card);
}

.window__note[b-kg2me10qk2] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.window__value[b-kg2me10qk2] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.01em;
}

.window__row[b-kg2me10qk2] {
    display: flex;
    flex: 1 1 0;
    gap: var(--space-3);
    min-height: 0;
}

.window__card[b-kg2me10qk2] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-border);
    border-radius: 0.875rem;
    background: var(--clr-card);
}

.window__card-title[b-kg2me10qk2] {
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2143;
}

.window__chart[b-kg2me10qk2] {
    flex: 1 1 0;
    gap: 0.875rem;
    min-width: 0;
    padding: var(--space-4) 1.125rem;
}

.window__bars[b-kg2me10qk2] {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Each bar's height is the design's, times a scale the narrower chart reduces. */
.window__bar[b-kg2me10qk2] {
    flex: 1 1 0;
    max-width: 1.875rem;
    height: calc(var(--bar-height) * var(--bar-scale, 1));
    border-radius: 0.375rem;
    background: var(--clr-border-light);
}

.window__bar--latest[b-kg2me10qk2] {
    background: var(--clr-accent);
}

.window__schedule[b-kg2me10qk2] {
    flex: none;
    gap: var(--space-2);
    width: 22.5rem;
    padding: var(--space-4);
}

.window__session[b-kg2me10qk2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5625rem var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: 0.625rem;
    background: var(--bg);
}

.window__session-top[b-kg2me10qk2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.window__session-name[b-kg2me10qk2] {
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

/* Below a laptop-sized window the sidebar goes first, then the two cards stack, then the metrics pair up. */
@container (max-width: 50rem) {
    .window__sidebar[b-kg2me10qk2] {
        display: none;
    }
}

@container (max-width: 42rem) {
    .window__main[b-kg2me10qk2] {
        padding: var(--space-4);
    }

    .window__row[b-kg2me10qk2] {
        flex: none;
        flex-direction: column;
    }

    .window__chart[b-kg2me10qk2] {
        flex: none;
        height: 12.5rem;
        --bar-scale: 0.7;
    }

    .window__schedule[b-kg2me10qk2] {
        width: auto;
    }
}

@container (max-width: 38rem) {
    .window__metrics[b-kg2me10qk2] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }
}

/* The phone sits over the laptop's right edge; its own look is HomeChatPhone's. */
.stage[b-kg2me10qk2]  .phone {
    position: absolute;
    top: 4.375rem;
    right: -0.625rem;
}

.bubble--studio[b-kg2me10qk2] {
    align-self: flex-end;
    background: var(--clr-accent);
    color: var(--clr-white);
}

.quote[b-kg2me10qk2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-self: flex-end;
    width: 12.875rem;
    padding: 0.875rem;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    background: var(--clr-card);
}

.quote__label[b-kg2me10qk2] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quote__amount[b-kg2me10qk2] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.01em;
}

.quote__note[b-kg2me10qk2] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    line-height: 1.25;
}

.quote__button[b-kg2me10qk2] {
    padding: 0.5625rem 0;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* A message keyframe names only its start, so it rests on its own styles; see ARCHITECTURE.md. */
@keyframes chat-rise-in-b-kg2me10qk2 {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes chat-fade-in-b-kg2me10qk2 {
    from {
        opacity: 0;
    }
}

@keyframes chat-typing-b-kg2me10qk2 {
    0% {
        opacity: 0;
    }

    15%, 55%, 85% {
        opacity: 1;
    }

    40%, 70% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}

/* The order of the messages is the timeline: each one starts at its own --chat-start. */
.stage[b-kg2me10qk2]  .phone__messages > :nth-child(1) { --chat-start: 0.3s; }
.stage[b-kg2me10qk2]  .phone__messages > :nth-child(2) { --chat-start: 1s; }
.stage[b-kg2me10qk2]  .phone__messages > :nth-child(3) { --chat-start: 2.7s; }
.stage[b-kg2me10qk2]  .phone__messages > :nth-child(4) { --chat-start: 3.7s; }
.stage[b-kg2me10qk2]  .phone__messages > :nth-child(5) { --chat-start: 4.7s; }

/* Each message plays once in its own reserved box, so nothing around the phone moves. */
.bubble[b-kg2me10qk2],
.quote[b-kg2me10qk2] {
    animation: chat-rise-in-b-kg2me10qk2 0.35s ease-out var(--chat-start) backwards;
}

/* Inky types first: three dots show in the bubble for a second, then the words arrive. */
.bubble--studio[b-kg2me10qk2] {
    position: relative;
}

.bubble--studio[b-kg2me10qk2]::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 1.5rem;
    height: 0.375rem;
    margin: auto;
    background: radial-gradient(circle closest-side, var(--clr-white) 98%, transparent) 0 0 / 0.5rem 0.375rem repeat-x;
    opacity: 0;
    animation: chat-typing-b-kg2me10qk2 1s linear var(--chat-start);
}

.bubble__text[b-kg2me10qk2] {
    animation: chat-fade-in-b-kg2me10qk2 0.3s ease-out calc(var(--chat-start) + 1s) backwards;
}

/* Reduced motion shows the whole conversation at once. */
@media (prefers-reduced-motion: reduce) {
    .bubble[b-kg2me10qk2],
    .quote[b-kg2me10qk2],
    .bubble--studio[b-kg2me10qk2]::before,
    .bubble__text[b-kg2me10qk2] {
        animation: none;
    }
}

/* Phone and tablet: no laptop frame and no chips; the dashboard is a card with the phone beneath it. */
@media (max-width: 60rem) { /* --bp-lg */
    .showcase[b-kg2me10qk2]  .section-header {
        text-align: center;
    }

    .showcase[b-kg2me10qk2]  .section-header__lead {
        margin-inline: auto;
    }

    .stage[b-kg2me10qk2] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-12);
        height: auto;
        padding-bottom: 1.875rem;
    }

    .stage__laptop[b-kg2me10qk2] {
        position: static;
        width: 100%;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .stage__camera[b-kg2me10qk2],
    .stage__base[b-kg2me10qk2],
    .stage[b-kg2me10qk2]  .stage__chip {
        display: none;
    }

    .window[b-kg2me10qk2] {
        height: auto;
        border-radius: var(--radius-xl);
    }

    .stage[b-kg2me10qk2]  .phone {
        position: static;
        flex: none;
    }
}
/* /Components/Home/HomeStencilCanvas.razor.rz.scp.css */
.stencil-canvas[b-48d0qwu5zr] {
    position: relative;
    flex: none;
    height: 9.375rem;
    border-radius: var(--radius-md);
    background: linear-gradient(to bottom right, var(--clr-primary-deep) 0%, var(--clr-accent-pressed) 71.4%);
    overflow: hidden;
}

/* Each tile ends in a one-pixel line; the layer sits a pixel in, so lines fall a tile along. */
.stencil-canvas[b-48d0qwu5zr]::before {
    content: '';
    position: absolute;
    inset: 1px -1px -1px 1px;
    background:
        linear-gradient(to right, transparent calc(100% - 1px), color-mix(in srgb, var(--clr-white) 20%, transparent) 0) 0 0 / 4.0625rem 100%,
        linear-gradient(to bottom, transparent calc(100% - 1px), color-mix(in srgb, var(--clr-white) 20%, transparent) 0) 0 0 / 100% 25%;
}

/* The guides sit right of centre on a desktop and centred on a phone, as the design draws them. */
.stencil-canvas__guide[b-48d0qwu5zr] {
    position: absolute;
    top: 50%;
    left: 72.22%;
    border: 1.5px dashed var(--clr-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.stencil-canvas__guide--outer[b-48d0qwu5zr] {
    width: 5.75rem;
    height: 5.75rem;
}

.stencil-canvas__guide--inner[b-48d0qwu5zr] {
    width: 3.5rem;
    height: 3.5rem;
}

/* Phone and tablet: six grid columns across, and the guides centred. */
@media (max-width: 60rem) { /* --bp-lg */
    .stencil-canvas[b-48d0qwu5zr]::before {
        background-size: calc(100% / 6) 100%, 100% 25%;
    }

    .stencil-canvas__guide[b-48d0qwu5zr] {
        left: 50%;
    }
}
/* /Components/Home/HomeSteps.razor.rz.scp.css */
.steps[b-8dsj7ypmxb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
}

.step[b-8dsj7ypmxb] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.75rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
}

.step__number[b-8dsj7ypmxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    font-weight: 700;
    line-height: 1.2;
}

/* The design's longest titles run 22px into the card's padding on one line; the margin lets them keep it. */
.step__title[b-8dsj7ypmxb] {
    margin-inline-end: -1.5rem;
    color: var(--clr-white);
    font-size: var(--mkt-text-20);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.step__text[b-8dsj7ypmxb] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.53125;
}

/* Tablet: two steps a row. */
@media (max-width: 60rem) { /* --bp-lg */
    .steps[b-8dsj7ypmxb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: one step a row. */
@media (max-width: 40rem) { /* --bp-sm */
    .steps[b-8dsj7ypmxb] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Home/HomeStoreBadge.razor.rz.scp.css */
/* The design's black badge with a 1px outline; the glyph has a fixed height and a free width. */
.store-badge[b-jukrknn0yy] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.625rem;
    padding: 0 1.25rem;
    border: 1px solid var(--mkt-store-badge-outline);
    border-radius: 0.75rem;
    background: var(--mkt-store-badge-fill);
    color: var(--clr-white);
}

.store-badge__glyph[b-jukrknn0yy] {
    flex: none;
    height: 1.75rem;
    width: auto;
}

.store-badge__text[b-jukrknn0yy] {
    display: flex;
    flex-direction: column;
}

.store-badge__lead[b-jukrknn0yy] {
    font-size: var(--mkt-text-12);
    line-height: 1.25;
    white-space: nowrap;
}

.store-badge__name[b-jukrknn0yy] {
    font-size: var(--mkt-text-20);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Phone and tablet: a slightly smaller badge so the pair share one row. */
@media (max-width: 60rem) { /* --bp-lg */
    .store-badge[b-jukrknn0yy] {
        gap: 0.625rem;
        min-height: 3.5rem;
        padding: 0 0.9375rem;
    }

    .store-badge__glyph[b-jukrknn0yy] {
        height: 1.5625rem;
    }

    .store-badge__name[b-jukrknn0yy] {
        font-size: var(--mkt-text-18);
    }
}
/* /Components/Home/HomeToolGrid.razor.rz.scp.css */
.tool-grid[b-t3sdrh4rv8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
    list-style: none;
}

.tool-card[b-t3sdrh4rv8] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
}

.tool-card__icon[b-t3sdrh4rv8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

.tool-card__title[b-t3sdrh4rv8] {
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.005em;
}

.tool-card__text[b-t3sdrh4rv8] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.5;
}

/* Tablet: two cards a row. */
@media (max-width: 60rem) { /* --bp-lg */
    .tool-grid[b-t3sdrh4rv8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: one card a row, with the larger type and padding the phone design uses. */
@media (max-width: 40rem) { /* --bp-sm */
    .tool-grid[b-t3sdrh4rv8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-card[b-t3sdrh4rv8] {
        padding: 1.75rem;
    }

    .tool-card__icon[b-t3sdrh4rv8] {
        width: 3rem;
        height: 3rem;
    }

    .tool-card__title[b-t3sdrh4rv8] {
        font-size: var(--mkt-text-20);
        line-height: 1.2;
    }

    .tool-card__text[b-t3sdrh4rv8] {
        font-size: var(--mkt-text-16);
        line-height: 1.53125;
    }
}
/* /Components/Home/HomeToolsStrip.razor.rz.scp.css */
.tools[b-6ipq3dodjm] {
    padding: 3rem var(--mkt-section-gutter) 3.1875rem;
    border-block: 1px solid var(--clr-border);
    background: var(--clr-card);
}

.tools__inner[b-6ipq3dodjm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: var(--content-width);
    margin-inline: auto;
}

/* Grey and centred: the design sets this label apart from the purple section eyebrow. */
.tools__label[b-6ipq3dodjm] {
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.tools__grid[b-6ipq3dodjm] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
    list-style: none;
}

.tools__card[b-6ipq3dodjm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 8.75rem;
    padding: var(--space-3);
    border: 1px solid var(--clr-border-light);
    border-radius: 1.25rem;
    background: var(--bg);
    color: var(--clr-white);
    text-align: center;
}

.tools__card[b-6ipq3dodjm]  .icon {
    flex: none;
    color: var(--clr-accent-light);
}

.tools__name[b-6ipq3dodjm] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--mkt-text-16);
    font-weight: 600;
    line-height: 1.2;
}

/* Phone and tablet: two columns, icon left of the label; enlarged text drops to one. */
@media (max-width: 60rem) { /* --bp-lg */
    .tools[b-6ipq3dodjm] {
        padding: 2.25rem var(--mkt-section-gutter) 2.5rem;
    }

    .tools__grid[b-6ipq3dodjm] {
        grid-template-columns: repeat(auto-fit, minmax(max(7.5rem, 45%), 1fr));
        gap: var(--space-3);
    }

    .tools__card[b-6ipq3dodjm] {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-3);
        min-height: 4.5rem;
        padding: var(--space-3) 0.9375rem;
        text-align: left;
    }

    .tools__card[b-6ipq3dodjm]  .icon {
        width: 1rem;
        height: 1rem;
    }

    .tools__name[b-6ipq3dodjm] {
        font-size: var(--mkt-text-14);
    }
}
/* /Components/Integrations/IntegrationCard.razor.rz.scp.css */
.integration-card[b-24juv3ciha] {
    --integration-card-padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: var(--integration-card-padding);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
    overflow-wrap: anywhere;
}

.integration-card__icon[b-24juv3ciha] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1.3rem;
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

/* The design strokes every card icon at 2.2, whatever weight the icon's own file carries. */
.integration-card__icon[b-24juv3ciha]  path {
    stroke-width: 2.2px;
}

/* The design lets a title run on into the card's right padding, so one long title does not push its row's sentences down. */
.integration-card__title[b-24juv3ciha] {
    margin-inline-end: calc(-1 * var(--integration-card-padding));
    color: var(--clr-white);
    font-size: var(--mkt-text-20);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.integration-card__text[b-24juv3ciha] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.53125;
}

.integration-card--compact[b-24juv3ciha] {
    gap: var(--space-3);
}

.integration-card--compact .integration-card__icon[b-24juv3ciha] {
    width: 3rem;
    height: 3rem;
    border-radius: 1.2rem;
}

/* Narrower than the design's 384px cards (the 1200px column and its gutters), a title wraps inside the padding. */
@media (max-width: 77.9375rem) { /* one pixel under the column plus both gutters */
    .integration-card__title[b-24juv3ciha] {
        margin-inline-end: 0;
    }
}
/* /Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-z9sm2chway] {
    padding: 4.5rem 0 var(--space-10);
    border-top: 1px solid var(--clr-border);
    background: var(--clr-dark);
}

.site-footer__inner[b-z9sm2chway] {
    width: calc(100% - 2 * var(--space-8));
    max-width: var(--content-width);
    margin-inline: auto;
}

.site-footer__grid[b-z9sm2chway] {
    display: grid;
    grid-template-columns: minmax(0, min(23.75rem, 33%)) minmax(0, 1fr);
    gap: var(--space-12);
}

.site-footer__brand[b-z9sm2chway] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.site-footer__tagline[b-z9sm2chway] {
    max-width: 20rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5313;
}

.site-footer__columns[b-z9sm2chway] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
}

.site-footer__column[b-z9sm2chway] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.site-footer__column ul[b-z9sm2chway] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
}

/* A flex item takes its link's own line height rather than the body's 1.6 strut. */
.site-footer__column li[b-z9sm2chway] {
    display: flex;
}

.site-footer__column-title[b-z9sm2chway] {
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__link[b-z9sm2chway] {
    display: inline-block;
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.1875;
}

.site-footer__link:hover[b-z9sm2chway],
.site-footer__built:hover[b-z9sm2chway] {
    color: var(--clr-white);
    text-decoration: underline;
}

.site-footer__bottom[b-z9sm2chway] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: 3.5rem;
    padding-top: var(--space-6);
    border-top: 1px solid var(--clr-border);
}

.site-footer__copy[b-z9sm2chway],
.site-footer__built[b-z9sm2chway] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
}

/* Phone and tablet: the brand stacks above the link columns, which wrap two to a row. */
@media (max-width: 60rem) { /* --bp-lg */
    .site-footer[b-z9sm2chway] {
        padding: var(--space-12) 0 var(--space-8);
    }

    .site-footer__inner[b-z9sm2chway] {
        width: calc(100% - 2 * var(--space-6));
    }

    .site-footer__grid[b-z9sm2chway] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .site-footer__tagline[b-z9sm2chway] {
        max-width: none;
    }

    .site-footer__columns[b-z9sm2chway] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8) var(--space-6);
    }

    /* Shrinks only when one column is wider than the row, so an enlarged column never passes the edge. */
    .site-footer__column[b-z9sm2chway] {
        flex: 0 1 9.1875rem;
        min-width: 0;
        gap: 0;
    }

    .site-footer__column ul[b-z9sm2chway] {
        gap: 0;
    }

    .site-footer__column-title[b-z9sm2chway] {
        line-height: 1.75rem;
    }

    /* Rows are the design's 47px targets, 44px wide at least so FAQ is one, so no pointer area. */
    .site-footer__link[b-z9sm2chway] {
        display: flex;
        align-items: center;
        min-width: 2.75rem;
        min-height: 2.9375rem;
        margin: 0;
        padding: 0;
    }

    .site-footer__link[b-z9sm2chway]::after {
        content: none;
    }

    .site-footer__bottom[b-z9sm2chway] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-top: 2.25rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-wrapper[b-qxmk6fwrlq] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content[b-qxmk6fwrlq] {
    flex: 1;
}

/* Parked above the viewport until it takes focus; the shared focus ring paints it, never a rule here. */
.skip-link[b-qxmk6fwrlq] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 200;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--clr-white);
    color: var(--clr-ink);
    font-size: var(--mkt-text-16);
    font-weight: 600;
    line-height: 1.2;
    transform: translateY(calc(-100% - var(--space-6)));
}

.skip-link:focus[b-qxmk6fwrlq] {
    transform: none;
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
.site-header[b-y6xca6rxah] {
    background: var(--bg);
    border-bottom: 1px solid var(--clr-border);
}

.site-nav[b-y6xca6rxah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: calc(100% - 2 * var(--space-8));
    max-width: var(--content-width);
    min-height: calc(4.5rem - 1px);
    margin-inline: auto;
}

.site-nav__links ul[b-y6xca6rxah] {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    list-style: none;
}

.site-nav__link[b-y6xca6rxah] {
    color: var(--clr-off-white);
    font-size: var(--mkt-text-16);
    font-weight: 500;
    line-height: 1.1875;
    text-decoration: none;
}

/* Hover and the current page share one marking so neither depends on colour alone. */
.site-nav__link:hover[b-y6xca6rxah],
.site-menu__link:hover[b-y6xca6rxah],
.site-nav__link[aria-current="page"][b-y6xca6rxah],
.site-menu__link[aria-current="page"][b-y6xca6rxah] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

.site-nav__link:hover[b-y6xca6rxah] {
    color: var(--clr-white);
}

.site-nav__link[aria-current="page"][b-y6xca6rxah],
.site-menu__link[aria-current="page"][b-y6xca6rxah] {
    color: var(--accent-text);
}

/* Wraps so an enlarged pill and the menu button stack inside the bar's width instead of running past it. */
.site-nav__actions[b-y6xca6rxah] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    max-width: 100%;
}

/* The design's small button: 10px by 18px around a 14px label, which never wraps because a flex item may shrink below its text. */
.site-nav__action[b-y6xca6rxah] {
    padding: 0.625rem 1.125rem;
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
    white-space: nowrap;
}

/* The pill stays 37px as drawn; its pointer area reaches 4px above and below, to 45px. */
.site-nav__action[b-y6xca6rxah] {
    position: relative;
}

.site-nav__action[b-y6xca6rxah]::after {
    content: '';
    position: absolute;
    inset: -0.25rem 0;
}

/* The round buttons are 44px circles that never shrink, however tight the row. */
.site-nav__menu-button[b-y6xca6rxah],
.site-menu__close[b-y6xca6rxah] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--clr-white);
    cursor: pointer;
}

.site-nav__menu-button:hover[b-y6xca6rxah],
.site-menu__close:hover[b-y6xca6rxah] {
    border-color: var(--clr-gray-mid);
    background: var(--clr-surface);
}

/* Shown only where the links collapse into the menu; see the phone block below. */
.site-nav__menu-button[b-y6xca6rxah] {
    display: none;
}

/* The closed dialog stays display: none from the browser's own rule; only the open one is styled to fill the screen. */
.site-menu[b-y6xca6rxah] {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--text);
    overscroll-behavior: contain;
}

.site-menu__bar[b-y6xca6rxah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    padding-inline: var(--space-5);
    border-bottom: 1px solid var(--clr-border);
}

.site-menu__links[b-y6xca6rxah] {
    padding: var(--space-4) var(--space-6);
    list-style: none;
}

.site-menu__link[b-y6xca6rxah] {
    display: block;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--clr-border);
    color: var(--text);
    font-size: var(--mkt-text-20);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.site-menu__actions[b-y6xca6rxah] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: var(--space-2) var(--space-6) var(--space-6);
}

/* Phone and tablet: links, Log in and Get started move into the menu; the bar wraps, never squeezes. */
@media (max-width: 60rem) { /* --bp-lg */
    .site-nav[b-y6xca6rxah] {
        flex-wrap: wrap;
        gap: var(--space-6) var(--space-2);
        width: calc(100% - 2 * var(--space-5));
        min-height: calc(4rem - 1px);
    }

    .site-nav__links[b-y6xca6rxah],
    .site-nav__login[b-y6xca6rxah],
    .site-nav__signup[b-y6xca6rxah] {
        display: none;
    }

    .site-nav__actions[b-y6xca6rxah] {
        margin-inline-start: auto;
    }

    .site-nav__action[b-y6xca6rxah] {
        min-height: 2.75rem;
    }

    .site-nav__menu-button[b-y6xca6rxah] {
        display: inline-flex;
    }
}

/* Narrow phone: below 352px the bar tightens so the scriptless pill fits beside the wordmark. */
@media (max-width: 22rem) { /* 352px */
    .site-nav__actions[b-y6xca6rxah] {
        gap: var(--space-2);
    }

    .site-nav__action[b-y6xca6rxah] {
        padding-inline: 0.875rem;
    }

    .site-nav[b-y6xca6rxah]  .wordmark {
        font-size: var(--mkt-text-20);
    }
}

/* Scripts blocked: the menu cannot open, so the links and Get started return to the header. */
@media (max-width: 60rem) and (scripting: none) { /* --bp-lg */
    .site-nav__menu-button[b-y6xca6rxah] {
        display: none;
    }

    .site-nav__signup[b-y6xca6rxah] {
        display: inline-flex;
    }

    .site-nav__links[b-y6xca6rxah] {
        display: block;
        order: 3;
        flex-basis: 100%;
    }

    .site-nav__links ul[b-y6xca6rxah] {
        flex-wrap: wrap;
        gap: 0 var(--space-6);
    }

    .site-nav__link[b-y6xca6rxah] {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* The links are already 44px rows, so their pointer area must not overlap the row beside them. */
    .site-nav__link[b-y6xca6rxah]::after {
        content: none;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* The side padding that centres a 1200px column: the design's 120px at 1440 wide and 24px on a phone. */
.about-section[b-38ucmujned] {
    padding-inline: max(var(--space-6), calc((100% - var(--content-width)) / 2));
}

/* The small uppercase line above a heading; Mission and Values paint it white instead. */
.about-label[b-38ucmujned] {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-label--white[b-38ucmujned] {
    color: var(--clr-white);
}

/* Why INKY.studio */
.about-why[b-38ucmujned] {
    display: grid;
    grid-template-columns: 26.25rem minmax(0, 1fr);
    align-items: start;
    column-gap: 4.5rem;
}

.about-why__heading[b-38ucmujned] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.about-why__title[b-38ucmujned] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.015em;
}

.about-why__body[b-38ucmujned] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.about-why__lead[b-38ucmujned],
.about-why__text[b-38ucmujned] {
    font-size: var(--mkt-text-20);
    line-height: 1.6;
}

.about-why__lead[b-38ucmujned] {
    color: var(--clr-off-white);
}

.about-why__text[b-38ucmujned] {
    color: var(--clr-gray);
}

/* Mission */
/* The design's gradient runs corner to corner and ends at 71.4% of the way, as the closing band's does. */
.about-mission__panel[b-38ucmujned] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 5rem var(--space-24);
    border-radius: var(--radius-2xl);
    background: linear-gradient(to bottom right, var(--clr-accent) 0%, var(--clr-accent-pressed) 71.4%);
}

/* Each sentence is its own line at every width, as the design sets the statement. */
.about-mission__line[b-38ucmujned] {
    display: block;
}

.about-mission__statement[b-38ucmujned] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.015em;
}

/* Values */
.about-values[b-38ucmujned] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.about-values__header[b-38ucmujned] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.about-values__heading[b-38ucmujned] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.015em;
}

.about-values__grid[b-38ucmujned] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
}

.about-value[b-38ucmujned] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: var(--space-8);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
}

.about-value__icon[b-38ucmujned] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--clr-accent) 18%, transparent);
    color: var(--clr-accent-light);
}

.about-value__bolt[b-38ucmujned] {
    flex: none;
}

.about-value__title[b-38ucmujned] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.005em;
}

.about-value__text[b-38ucmujned] {
    color: var(--clr-gray);
    font-size: var(--mkt-text-16);
    line-height: 1.5625;
}

/* Phone and tablet: the sections stack, and the type drops a step. */
@media (max-width: 60rem) { /* --bp-lg */
    .about-why[b-38ucmujned] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.875rem;
    }

    .about-why__title[b-38ucmujned] {
        font-size: var(--mkt-text-32);
    }

    .about-why__lead[b-38ucmujned],
    .about-why__text[b-38ucmujned] {
        font-size: var(--mkt-text-18);
        line-height: 1.5;
    }

    .about-mission__statement[b-38ucmujned],
    .about-values__heading[b-38ucmujned] {
        font-size: var(--mkt-text-28);
        line-height: 1.2143;
    }

    /* The design draws no eyebrow over the values on a phone. */
    .about-values__eyebrow[b-38ucmujned] {
        display: none;
    }

    .about-mission__panel[b-38ucmujned] {
        align-items: center;
        gap: var(--space-5);
        padding: 2.75rem 1.75rem;
        text-align: center;
    }

    .about-values__grid[b-38ucmujned] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: one card to a row, as the design draws it at 390. */
@media (max-width: 40rem) { /* --bp-sm */
    .about-values__grid[b-38ucmujned] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact__layout[b-aedmkq5d6z] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(35rem, 55%));
    column-gap: 5rem;
    row-gap: var(--space-8);
    align-items: start;
    width: calc(100% - 2 * var(--space-8));
    max-width: var(--content-width);
    margin-inline: auto;
}

.contact__intro[b-aedmkq5d6z] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
}

.contact__details[b-aedmkq5d6z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* With no padding above the details, the label's top is level with the card's. */
.contact__label[b-aedmkq5d6z] {
    /* The frame puts 5px between the label and the first fact. */
    margin: 0 0 0.3125rem;
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact__facts[b-aedmkq5d6z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    list-style: none;
}

/* Wraps so an enlarged email address drops under its tile instead of running past the edge. */
.contact__fact[b-aedmkq5d6z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

/* The design rounds an icon tile to four tenths of its size, which no radius token is. */
.contact__tile[b-aedmkq5d6z] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 40%;
}

.contact__tile--large[b-aedmkq5d6z] {
    width: 4rem;
    height: 4rem;
}

.contact__tile--accent[b-aedmkq5d6z] {
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

.contact__tile--success[b-aedmkq5d6z] {
    background: color-mix(in srgb, var(--clr-success) 16%, transparent);
    color: var(--clr-success);
}

.contact__fact-text[b-aedmkq5d6z] {
    display: flex;
    flex: 1 1 8rem;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.contact__fact-label[b-aedmkq5d6z] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
}

.contact__fact-value[b-aedmkq5d6z] {
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    font-weight: 600;
    line-height: 1.2222;
    overflow-wrap: anywhere;
}

/* The card's 28px corner sits between the radius tokens, as the design draws it. */
.contact__card[b-aedmkq5d6z] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-10);
    border: 1px solid var(--clr-border-light);
    border-radius: 1.75rem;
    background: var(--clr-card);
}

.contact__card--sent[b-aedmkq5d6z] {
    padding: 3.5rem var(--space-10);
}

/* The form is EditForm's markup, which is not scoped, hence ::deep. */
.contact__card[b-aedmkq5d6z]  .contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact__submit[b-aedmkq5d6z] {
    width: 100%;
}

.contact__privacy[b-aedmkq5d6z] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.2143;
    text-align: center;
}

/* ⚠️ Accent text, never the frame's accent light, which is for text of 24px and up (ContactPageStylesheetConventionTests). */
.contact__privacy a[b-aedmkq5d6z] {
    color: var(--accent-text);
    text-decoration: underline;
}

.contact__privacy a:hover[b-aedmkq5d6z] {
    color: var(--clr-white);
}

.contact__sent[b-aedmkq5d6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    scroll-margin-top: var(--space-6);
}

.contact__sent-title[b-aedmkq5d6z] {
    color: var(--clr-white);
    font-size: var(--mkt-text-28);
    font-weight: 700;
    line-height: 1.2143;
    letter-spacing: -0.01em;
}

.contact__sent-text[b-aedmkq5d6z] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5625;
}

/* Phone and tablet: one column, and the card sheds its side padding. */
@media (max-width: 60rem) { /* --bp-lg */
    .contact__layout[b-aedmkq5d6z] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        width: calc(100% - 2 * var(--space-6));
        padding-top: var(--space-1); /* The frame sits the label 48px under the line. */
    }

    .contact__intro[b-aedmkq5d6z],
    .contact__card[b-aedmkq5d6z] {
        grid-column: auto;
        grid-row: auto;
    }

    /* The frame leaves the icon row to the footer on a phone. */
    .contact__social[b-aedmkq5d6z] {
        display: none;
    }

    .contact__card[b-aedmkq5d6z] {
        max-width: 35rem;
        padding: var(--space-10) var(--space-6);
    }

    .contact__card--sent[b-aedmkq5d6z] {
        padding: 3.5rem var(--space-6);
    }
}
/* /Components/Pages/DataDeletion.razor.rz.scp.css */
/* The receipt: a card in the contents card's colours and 20px corners, with an accent border to set it apart. */
.legal-callout[b-bhyxwha8fz] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: var(--space-6);
    border: 1px solid var(--clr-accent-light);
    border-radius: 1.25rem;
    background: var(--card-bg);
}
/* /Components/Pages/EarlyAccess/EarlyAccessDone.razor.rz.scp.css */
.done__header[b-89en723j1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

/* The design's title steps down from 40px to 32px on a phone, both scale tokens. */
.done__title[b-89en723j1c] {
    color: var(--clr-white);
    font-size: var(--mkt-text-40);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.done__lead[b-89en723j1c] {
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    line-height: 1.5;
    overflow-wrap: anywhere; /* A long email address breaks rather than widening the page. */
}

.done__note[b-89en723j1c] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5;
}

.done__spot[b-89en723j1c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    background: var(--clr-card);
}

.done__spot-top[b-89en723j1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.done__spot-label[b-89en723j1c] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 600;
}

.done__dot[b-89en723j1c] {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--clr-gold);
}

.done__badge[b-89en723j1c] {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--clr-gold-dark);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--clr-gold) 12%, transparent);
    color: var(--clr-gold);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.done__spot-title[b-89en723j1c] {
    color: var(--clr-white);
    font-size: var(--mkt-text-28);
    font-weight: 700;
    line-height: 1.25;
}

.done__terms[b-89en723j1c] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
}

@media (max-width: 40rem) { /* --bp-sm */
    .done__title[b-89en723j1c] {
        font-size: var(--mkt-text-32);
    }

    .done__spot[b-89en723j1c] {
        padding: var(--space-5);
    }

    .done__spot-title[b-89en723j1c] {
        font-size: var(--mkt-text-24);
    }
}
/* /Components/Pages/EarlyAccess/EarlyAccessEmailLinkSent.razor.rz.scp.css */
.sent[b-1358rjbeve] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-8);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
    text-align: center;
}

.sent__tile[b-1358rjbeve] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-pill);
    background: var(--clr-accent-muted);
    color: var(--accent-text);
}

/* A card title, not a page header: 32px at every width, a scale token. */
.sent__title[b-1358rjbeve] {
    color: var(--clr-white);
    font-size: var(--mkt-text-32);
    font-weight: 700;
    line-height: 1.2;
}

.sent__text[b-1358rjbeve] {
    max-width: 28rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5;
    overflow-wrap: anywhere; /* A long email address breaks rather than widening the page. */
}
/* /Components/Pages/EarlyAccess/EarlyAccessStep.razor.rz.scp.css */
.survey__form[b-z6sd1yksuz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.survey__questions[b-z6sd1yksuz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* The tattoos sit two to a row on a desktop and one under the other on a phone. */
.survey__tattoos[b-z6sd1yksuz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.survey__actions[b-z6sd1yksuz] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Save and next is always the last box on the row, so with no Back it still sits at the end. */
.survey__next[b-z6sd1yksuz] {
    margin-inline-start: auto;
}

.survey__privacy[b-z6sd1yksuz] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
    text-align: center;
}

.survey__privacy a[b-z6sd1yksuz] {
    color: var(--accent-text);
    text-decoration: underline;
}

.survey__later-form[b-z6sd1yksuz] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2);
}

/* A button that reads as a link: underlined words, a 44px target, the shared focus ring. */
.survey__later[b-z6sd1yksuz] {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--clr-gray-light);
    font: inherit;
    font-size: var(--mkt-text-14);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.survey__later:hover[b-z6sd1yksuz] {
    color: var(--clr-white);
}

@media (max-width: 40rem) { /* --bp-sm */
    .survey__tattoos[b-z6sd1yksuz] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The phone draws Back narrow and the main button filling the rest of the row. */
    .survey__next[b-z6sd1yksuz] {
        flex: 1;
    }
}
/* /Components/Pages/Faq.razor.rz.scp.css */
.faq-sections[b-fi2g7v8jkk] {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.faq-section[b-fi2g7v8jkk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The designed heading box is the 29.5px line rounded up to 30px. */
.faq-section__title[b-fi2g7v8jkk] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.008em;
}
/* /Components/Pages/Integrations.razor.rz.scp.css */
.integrations-grid[b-mfby8f6j6c] {
    padding-inline: var(--space-6);
}

.integrations-grid__list[b-mfby8f6j6c],
.integrations-control__list[b-mfby8f6j6c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
}

.integrations-grid__list[b-mfby8f6j6c] {
    max-width: var(--content-width);
    margin-inline: auto;
}

.integrations-control[b-mfby8f6j6c] {
    padding-inline: var(--space-6);
}

.integrations-control__inner[b-mfby8f6j6c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    max-width: var(--content-width);
    margin-inline: auto;
}

.integrations-control__header[b-mfby8f6j6c] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.integrations-control__eyebrow[b-mfby8f6j6c] {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.integrations-control__title[b-mfby8f6j6c] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.02em;
}

/* The design leaves each control card as tall as its own words, so a longer one does not stretch its row. */
.integrations-control__list[b-mfby8f6j6c] {
    align-items: start;
}

/* Phone and tablet: the type steps down and the cards stack. */
@media (max-width: 60rem) { /* --bp-lg */
    .integrations-grid__list[b-mfby8f6j6c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integrations-control__title[b-mfby8f6j6c] {
        font-size: var(--mkt-text-32);
        line-height: 1.125;
    }

    .integrations-control__list[b-mfby8f6j6c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: the integrations stack too, one card a row. */
@media (max-width: 40rem) { /* --bp-sm */
    .integrations-grid__list[b-mfby8f6j6c] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* Two columns like the About band: 96px above and below the 400px photo. */
.not-found[b-7kxm15w0ro] {
    position: relative;
    overflow: hidden;
    padding: 6rem max(var(--space-6), calc((100% - var(--content-width)) / 2));
}

/* Decorative glow, clipped by the band. Over 32% accent the muted line fails 4.5:1. */
.not-found__glow[b-7kxm15w0ro] {
    position: absolute;
    top: -3.75rem;
    left: calc(50% - 28.125rem);
    width: 56.25rem;
    height: 43.75rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--clr-accent) 32%, transparent), transparent);
    pointer-events: none;
}

.not-found__inner[b-7kxm15w0ro] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 616fr) minmax(0, 520fr);
    column-gap: var(--space-16);
    align-items: center;
}

.not-found__copy[b-7kxm15w0ro] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.75rem;
}

.not-found__intro[b-7kxm15w0ro] {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: var(--space-6);
    text-align: start;
}

/* The intro's gap spaces the three lines, so their default margins go. */
.not-found__intro > *[b-7kxm15w0ro] {
    margin: 0;
}

/* The design's title line is taller than the shared 1.1, so the same room goes round it as margin. */
.not-found__intro > .not-found__title[b-7kxm15w0ro] {
    margin-block: 0.15rem;
}

.not-found__text[b-7kxm15w0ro] {
    color: var(--text-muted);
    font-size: var(--mkt-text-20);
    line-height: 1.2;
}

.not-found__actions[b-7kxm15w0ro] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}

.not-found__links[b-7kxm15w0ro] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-6);
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.5;
}

.not-found__link[b-7kxm15w0ro] {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: underline;
}

/* The 24px corner is the radius token the design uses. */
.not-found__photo[b-7kxm15w0ro] {
    aspect-ratio: 520 / 400;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.not-found__image[b-7kxm15w0ro] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Phone and tablet: one column, the intro centred, the button and links left, the photo under them. */
@media (max-width: 60rem) { /* --bp-lg */
    .not-found[b-7kxm15w0ro] {
        padding: 4.5rem var(--space-8) 3.5rem;
    }

    .not-found__glow[b-7kxm15w0ro] {
        left: calc(50% - 24.6875rem);
    }

    .not-found__inner[b-7kxm15w0ro] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.75rem;
    }

    .not-found__intro[b-7kxm15w0ro] {
        align-items: center;
        text-align: center;
    }

    .not-found__text[b-7kxm15w0ro] {
        font-size: var(--mkt-text-18);
    }

    .not-found__photo[b-7kxm15w0ro] {
        aspect-ratio: 326 / 260;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* The plan cards: one equal-height column per tier, the button pinned to the card's foot. */
.pricing-plans[b-217yiip7l6] {
    padding-inline: var(--space-6);
}

.pricing-plans__list[b-217yiip7l6] {
    container: plans / inline-size;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-6);
    max-width: var(--content-width);
    margin-inline: auto;
    list-style: none;
}

.pricing-plan[b-217yiip7l6] {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding: var(--space-8);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
}

/* --accent is the package's contextual tier colour; an unnamed tier keeps its silver default. */
.pricing-plan--bronze[b-217yiip7l6] {
    --accent: var(--clr-bronze);
}

.pricing-plan--silver[b-217yiip7l6] {
    --accent: var(--clr-silver);
}

.pricing-plan--gold[b-217yiip7l6] {
    --accent: var(--clr-gold);
}

.pricing-plan--recommended[b-217yiip7l6] {
    border-width: 2px;
    border-color: var(--clr-accent);
    background: linear-gradient(180deg, var(--mkt-plan-featured-top) 0%, var(--clr-card) 100%);
}

/* Wraps so an enlarged plan name keeps its width and the badge drops under it. */
.pricing-plan__top[b-217yiip7l6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.pricing-plan__dot[b-217yiip7l6] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.pricing-plan__name[b-217yiip7l6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.005em;
}

.pricing-plan__badge[b-217yiip7l6] {
    flex: 0 1 auto;
    min-width: 0;
    padding: var(--space-1) 0.625rem;
    overflow-wrap: break-word;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.pricing-plan__price[b-217yiip7l6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.375rem;
}

.pricing-plan__amount[b-217yiip7l6] {
    color: var(--clr-white);
    font-size: var(--mkt-text-56);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.03em;
}

/* ⚠️ Three cards in a narrow list cannot hold the full-size price beside "/month base", so it steps down; keep this above the phone block. Guards: PricingPageLayoutE2ETests · PricingStylesheetConventionTests. */
@container plans (max-width: 63rem) { /* 1008px, the list's own width and not the viewport's */
    .pricing-plan__amount[b-217yiip7l6] {
        font-size: var(--mkt-text-40);
    }
}

.pricing-plan__period[b-217yiip7l6] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.21;
}

.pricing-plan__features[b-217yiip7l6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: 1.375rem;
    border-top: 1px solid var(--clr-border);
    list-style: none;
}

.pricing-plan__feature[b-217yiip7l6] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--clr-off-white);
    font-size: var(--mkt-text-16);
    line-height: 1.21;
}

/* ::deep reaches the child Icon; the margin aligns the tick to a wrapped bullet's first line. */
.pricing-plan__feature[b-217yiip7l6]  .pricing-plan__tick {
    margin-top: 0.1rem;
    color: var(--clr-accent-light);
}

.pricing-plan__feature-text[b-217yiip7l6] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 37px tall on a desktop and 51px on a phone, as drawn; the label swaps with the layout. */
.pricing-plan__action[b-217yiip7l6] {
    width: 100%;
    min-height: 2.3125rem;
    margin-top: auto;
    padding: 0 var(--space-4);
    font-size: var(--mkt-text-14);
    line-height: 1.2;
}

/* A hidden label leaves the accessible name, so the name starts with the visible words. */
.pricing-plan__action-phone[b-217yiip7l6] {
    display: none;
}

/* The line under the cards: muted, centred, 14px. */
.pricing-footnote[b-217yiip7l6] {
    max-width: var(--content-width);
    margin: var(--space-10) auto 0;
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.21;
    text-align: center;
}

/* The comparison: a heading block over one rounded table. */
.pricing-compare[b-217yiip7l6] {
    padding-inline: var(--space-6);
}

.pricing-compare__inner[b-217yiip7l6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: var(--content-width);
    margin-inline: auto;
}

.pricing-compare__heading[b-217yiip7l6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pricing-compare__label[b-217yiip7l6] {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-compare__title[b-217yiip7l6] {
    color: var(--clr-white);
    font-size: var(--mkt-text-40);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.015em;
}

/* Scrolls inside its own frame, and is the container the narrow-width rule below measures. */
.pricing-compare__table[b-217yiip7l6] {
    container-type: inline-size;
    overflow-x: auto;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-card);
}

/* Plan columns are equal shares of the table whatever their number; the markup sets --plan-count. */
.pricing-compare__grid[b-217yiip7l6] {
    --feature-share: 37.4%;
    --gutter-share: 2.34%;
    --plan-share: calc((100% - var(--feature-share) - var(--gutter-share)) / var(--plan-count));

    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* ⚠️ Measured in rem so it fires on enlarged text, never on a narrow phone at the default size: the table keeps readable columns and scrolls inside its frame instead of overlapping (TextEnlargementReflowE2ETests). */
@container (max-width: 16.5rem) {
    .pricing-compare__grid[b-217yiip7l6] {
        min-width: calc(var(--plan-count) * 7.5rem);
    }
}

.pricing-compare__row[b-217yiip7l6] {
    border-bottom: 1px solid var(--clr-border);
}

.pricing-compare__body .pricing-compare__row:last-child[b-217yiip7l6] {
    border-bottom: 0;
}

.pricing-compare__head[b-217yiip7l6] {
    background: var(--clr-surface);
}

.pricing-compare__corner[b-217yiip7l6],
.pricing-compare__feature[b-217yiip7l6],
.pricing-compare__plan[b-217yiip7l6],
.pricing-compare__cell[b-217yiip7l6] {
    padding: 1.125rem 0;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

/* The first column carries the table's left gutter and the last its right, so a row's rule runs edge to edge. */
.pricing-compare__corner[b-217yiip7l6] {
    width: var(--feature-share);
    padding-left: 1.75rem;
}

.pricing-compare__feature[b-217yiip7l6] {
    padding-left: 1.75rem;
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 500;
    line-height: 1.21;
    text-align: left;
}

.pricing-compare__plan[b-217yiip7l6] {
    width: var(--plan-share);
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 700;
    line-height: 1.21;
    text-align: center;
}

.pricing-compare__plan:last-child[b-217yiip7l6] {
    width: calc(var(--plan-share) + var(--gutter-share));
}

.pricing-compare__plan:last-child[b-217yiip7l6],
.pricing-compare__cell:last-child[b-217yiip7l6] {
    padding-right: 1.75rem;
}

.pricing-compare__cell[b-217yiip7l6] {
    line-height: 1.21;
    text-align: center;
}

.pricing-compare__price[b-217yiip7l6] {
    white-space: nowrap;
    color: var(--clr-off-white);
    font-size: var(--mkt-text-18);
    font-weight: 600;
}

.pricing-compare__cell[b-217yiip7l6]  .pricing-compare__tick {
    vertical-align: middle;
    color: var(--clr-accent-light);
}

.pricing-compare__cell[b-217yiip7l6]  .pricing-compare__dash {
    vertical-align: middle;
    color: var(--clr-border-light);
}

/* The promise under the comparison, in the muted text colour. */
.pricing-promise[b-217yiip7l6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0 var(--space-6) var(--space-16);
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.21;
}

.pricing-promise[b-217yiip7l6]  .pricing-promise__icon {
    color: var(--clr-success);
}

/* Phone and tablet: one column of cards, the phone type sizes and the tighter table. */
@media (max-width: 60rem) { /* --bp-lg */
    .pricing-plans__list[b-217yiip7l6] {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        max-width: 30rem;
    }

    .pricing-plan__amount[b-217yiip7l6] {
        font-size: var(--mkt-text-32);
        line-height: 1.119;
    }

    .pricing-plan__action[b-217yiip7l6] {
        min-height: 3.1875rem;
        font-size: var(--mkt-text-16);
    }

    .pricing-plan__action-desktop[b-217yiip7l6] {
        display: none;
    }

    .pricing-plan__action-phone[b-217yiip7l6] {
        display: inline;
    }

    .pricing-footnote[b-217yiip7l6] {
        max-width: 30rem;
        margin-top: var(--space-12);
        padding-inline: var(--space-2);
    }

    .pricing-promise[b-217yiip7l6] {
        justify-content: flex-start;
    }

    .pricing-compare__title[b-217yiip7l6] {
        font-size: var(--mkt-text-28);
        line-height: 1.214;
    }

    .pricing-compare__corner[b-217yiip7l6],
    .pricing-compare__feature[b-217yiip7l6],
    .pricing-compare__plan[b-217yiip7l6],
    .pricing-compare__cell[b-217yiip7l6] {
        padding-block: 0.875rem;
    }

    .pricing-compare__grid[b-217yiip7l6] {
        --feature-share: 40.6%;
        --gutter-share: 4.12%;
    }

    .pricing-compare__corner[b-217yiip7l6] {
        padding-left: 0.875rem;
    }

    .pricing-compare__feature[b-217yiip7l6] {
        padding-left: 0.875rem;
        font-size: var(--mkt-text-14);
        line-height: 1.357;
    }

    .pricing-compare__plan[b-217yiip7l6] {
        font-size: var(--mkt-text-14);
        line-height: 1.357;
    }

    .pricing-compare__plan:last-child[b-217yiip7l6],
    .pricing-compare__cell:last-child[b-217yiip7l6] {
        padding-right: 0.875rem;
    }

    .pricing-compare__cell[b-217yiip7l6] {
        line-height: 1.357;
    }

    .pricing-compare__price[b-217yiip7l6] {
        font-size: var(--mkt-text-14);
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* The side padding that centres a 1200px column: the design's 120px at 1440 wide and 24px on a phone. */
.support-section[b-6cyft1osdv] {
    padding-inline: max(var(--space-6), calc((100% - var(--content-width)) / 2));
}

.support-help__list[b-6cyft1osdv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
}

.support-card[b-6cyft1osdv] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: var(--space-8);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
}

/* The icon tiles are 0.4 of their width round, a radius the design's scale has no step for. */
.support-card__icon[b-6cyft1osdv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.4rem;
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

.support-card__title[b-6cyft1osdv] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.005em;
}

.support-card__text[b-6cyft1osdv] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.53125;
    overflow-wrap: anywhere;
}

/* The design leaves 8px of spacer between the text and the button, on top of the card's own 14px gaps. */
.support-card__action[b-6cyft1osdv] {
    align-self: stretch;
    margin-top: 1.375rem;
}

/* The small uppercase line above a section heading, and the heading itself. */
.support-header[b-6cyft1osdv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.support-label[b-6cyft1osdv] {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-heading[b-6cyft1osdv] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.02em;
}

/* Browse by topic and Popular questions: a header over its content. */
.support-topics[b-6cyft1osdv],
.support-popular[b-6cyft1osdv] {
    display: flex;
    flex-direction: column;
}

.support-topics[b-6cyft1osdv] {
    gap: 2.5rem;
}

.support-popular[b-6cyft1osdv] {
    gap: 2rem;
}

.support-topics__list[b-6cyft1osdv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    list-style: none;
}

.support-topics__item[b-6cyft1osdv] {
    display: flex;
}

/* Wraps so an enlarged title drops under its icon instead of pushing the card past the window. */
.support-topic[b-6cyft1osdv] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    padding: 1.375rem var(--space-6);
    border: 1px solid var(--card-border);
    border-radius: 1.25rem;
    background: var(--card-bg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

/* Pointing at a topic lightens its card to the second surface colour, as a hovered question does. */
.support-topic:hover[b-6cyft1osdv] {
    background: var(--surface-bg);
}

.support-topic__icon[b-6cyft1osdv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--clr-accent-light) 16%, transparent);
    color: var(--clr-accent-light);
}

.support-topic__text[b-6cyft1osdv] {
    display: flex;
    flex: 1 1 6rem;
    overflow-wrap: anywhere;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.support-topic__title[b-6cyft1osdv] {
    color: var(--clr-white);
    font-size: var(--mkt-text-18);
    font-weight: 600;
    line-height: 1.21;
    overflow-wrap: anywhere;
}

.support-topic__count[b-6cyft1osdv] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.21;
}

/* The chevron is drawn by the shared Icon, whose own element carries none of this page's scope. */
.support-topic[b-6cyft1osdv]  .support-topic__chevron {
    color: var(--text-muted);
}

/* Data requests */
.support-data__panel[b-6cyft1osdv] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 2.75rem var(--space-12);
    border: 1px solid var(--clr-border-light);
    border-radius: 1.75rem;
    background: var(--card-bg);
}

.support-data__icon[b-6cyft1osdv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 1.6rem;
    background: color-mix(in srgb, var(--clr-warning) 16%, transparent);
    color: var(--clr-warning);
}

.support-data__text[b-6cyft1osdv] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.support-data__title[b-6cyft1osdv] {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.008em;
}

.support-data__body[b-6cyft1osdv] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.5625;
}

.support-data__action[b-6cyft1osdv] {
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .support-topic[b-6cyft1osdv] {
        transition: none;
    }
}

/* Phone and tablet: every grid takes one column or two, and the data panel stacks. */
@media (max-width: 60rem) { /* --bp-lg */
    .support-help__list[b-6cyft1osdv] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .support-heading[b-6cyft1osdv] {
        font-size: var(--mkt-text-32);
        line-height: 1.125;
    }

    .support-topics__list[b-6cyft1osdv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-data__panel[b-6cyft1osdv] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);
        padding-inline: var(--space-6);
    }

    .support-data__icon[b-6cyft1osdv] {
        width: auto;
        height: 4rem;
    }
}

/* Phone: one topic to a row, as the design draws it at 390. */
@media (max-width: 40rem) { /* --bp-sm */
    .support-topics__list[b-6cyft1osdv] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/WhoItsFor.razor.rz.scp.css */
/* One role: text and photo share the 1200px column, 568 to 560, 72px apart. */
.role[b-6qoybw1bh9] {
    display: grid;
    grid-template-areas: "text photo";
    grid-template-columns: minmax(0, 568fr) minmax(0, 560fr);
    align-items: center;
    column-gap: 4.5rem;
    padding-inline: max(var(--space-6), calc((100% - var(--content-width)) / 2));
}

/* The second and fourth role swap sides; the markup keeps the text first. */
.role--photo-first[b-6qoybw1bh9] {
    grid-template-areas: "photo text";
    grid-template-columns: minmax(0, 560fr) minmax(0, 568fr);
}

.role__text[b-6qoybw1bh9] {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.role__title[b-6qoybw1bh9] {
    color: var(--clr-white);
    font-size: var(--mkt-text-48);
    font-weight: 700;
    line-height: 1.2083;
    letter-spacing: -0.015em;
}

/* The three lines are plain text: no marker, and 10px between them. */
.role__lines[b-6qoybw1bh9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.25rem;
    list-style: none;
}

.role__lines li[b-6qoybw1bh9] {
    color: var(--clr-off-white);
    font-size: var(--mkt-text-16);
    line-height: 1.5625;
}

.role__photo[b-6qoybw1bh9] {
    grid-area: photo;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.75rem;
    overflow: hidden;
    container-type: inline-size;
}

/* Enlarged text leaves the card no room, so it is dropped; rem so it never fires by default. */
@container (max-width: 16rem) {
    .role__photo[b-6qoybw1bh9]  .role__chip {
        display: none;
    }
}

.role__image[b-6qoybw1bh9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The floating card from HomeFloatingChip: 24px in from the left and 20px up. */
.role__photo[b-6qoybw1bh9]  .role__chip {
    position: absolute;
    bottom: 1.25rem;
    left: var(--space-6);
}

/* Phone and tablet: each role stacks text over photo, and the type steps down. */
@media (max-width: 60rem) { /* --bp-lg */
    .role[b-6qoybw1bh9],
    .role--photo-first[b-6qoybw1bh9] {
        grid-template-areas: "text" "photo";
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.75rem;
    }

    .role__title[b-6qoybw1bh9] {
        font-size: var(--mkt-text-32);
        line-height: 1.1875;
    }

    .role__photo[b-6qoybw1bh9] {
        aspect-ratio: auto;
        height: 16.25rem;
    }

    .role__photo[b-6qoybw1bh9]  .role__chip {
        bottom: var(--space-4);
    }
}
/* /Components/Shared/Accordion.razor.rz.scp.css */
.accordion[b-l8njrc1pp4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Joined: the items share one panel, so the gap goes and the panel draws the border and corners the cards would. */
.accordion--joined[b-l8njrc1pp4] {
    --accordion-joined-inline: 1.75rem;
    gap: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
}

/* Phone: a joined row's side padding steps down so a long question keeps its room. */
@media (max-width: 40rem) { /* --bp-sm */
    .accordion--joined[b-l8njrc1pp4] {
        --accordion-joined-inline: 1.25rem;
    }
}
/* /Components/Shared/AccordionItem.razor.rz.scp.css */
.accordion__item[b-pi92k05gf8] {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* Open is told by a stronger border and a turned accent chevron, never by colour alone. */
.accordion__item:has(> .accordion__heading > .accordion__button[aria-expanded="true"])[b-pi92k05gf8] {
    border-color: var(--clr-border-light);
}

.accordion__item:has(> .accordion__heading > .accordion__button:hover)[b-pi92k05gf8] {
    background: var(--surface-bg);
}

/* The whole row, padding included, is the button, so the target is far taller than 44px. */
.accordion__button[b-pi92k05gf8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: 1.25rem 1.5rem;
    border: 0;
    border-radius: calc(var(--radius-lg) - 1px);
    background: transparent;
    color: var(--clr-white);
    font-family: inherit;
    font-size: var(--mkt-text-18);
    font-weight: 600;
    line-height: 1.4111;
    letter-spacing: normal;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

/* The answer sits 12px under the question, so an open button gives up 8px of bottom padding. */
.accordion__button[aria-expanded="true"][b-pi92k05gf8] {
    padding-bottom: 0.75rem;
}

/* The designed question box is the 25.4px line rounded up to 26px, which makes a one-line row 68px tall. */
.accordion__question[b-pi92k05gf8] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 1.625rem;
    overflow-wrap: anywhere;
}

.accordion__button[b-pi92k05gf8]  .accordion__chevron {
    color: var(--text-muted);
}

.accordion__button[aria-expanded="true"][b-pi92k05gf8]  .accordion__chevron {
    color: var(--clr-accent-light);
    transform: rotate(180deg);
}

.accordion__panel[b-pi92k05gf8] {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.625;
    overflow-wrap: anywhere;
}

/* Joined: the shared panel is the card, so an item is a bare row with a hairline above all but the first. */
.accordion--joined .accordion__item[b-pi92k05gf8] {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.accordion--joined .accordion__item + .accordion__item[b-pi92k05gf8] {
    border-top: 1px solid var(--card-border);
}

/* The base rule that strengthens an open item's border would recolour its hairline. */
.accordion--joined .accordion__item:has(> .accordion__heading > .accordion__button[aria-expanded="true"])[b-pi92k05gf8] {
    border-color: var(--card-border);
}

/* ⚠️ End rows round themselves: a clipping panel cuts off the focus ring (AccordionStylesheetConventionTests). */
.accordion--joined .accordion__item:first-child[b-pi92k05gf8],
.accordion--joined .accordion__item:first-child .accordion__button[b-pi92k05gf8] {
    border-top-left-radius: calc(var(--radius-xl) - 1px);
    border-top-right-radius: calc(var(--radius-xl) - 1px);
}

.accordion--joined .accordion__item:last-child[b-pi92k05gf8],
.accordion--joined .accordion__item:last-child .accordion__button[b-pi92k05gf8] {
    border-bottom-left-radius: calc(var(--radius-xl) - 1px);
    border-bottom-right-radius: calc(var(--radius-xl) - 1px);
}

.accordion--joined .accordion__button[b-pi92k05gf8] {
    gap: 0;
    padding: 1.375rem var(--accordion-joined-inline);
    border-radius: 0;
    line-height: 1.21;
}

.accordion--joined .accordion__button[aria-expanded="true"][b-pi92k05gf8] {
    padding-bottom: 0.75rem;
}

/* The designed question box is the 21.8px line rounded up to 22px, which makes a one-line row 67px tall. */
.accordion--joined .accordion__question[b-pi92k05gf8] {
    min-height: 1.375rem;
}

/* The chevron is the design's right-pointing one: the down chevron turned a quarter, and turned back when open. */
.accordion--joined .accordion__button[b-pi92k05gf8]  .accordion__chevron {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--clr-accent-light);
    transform: rotate(-90deg);
}

.accordion--joined .accordion__button[aria-expanded="true"][b-pi92k05gf8]  .accordion__chevron {
    transform: none;
}

.accordion--joined .accordion__panel[b-pi92k05gf8] {
    padding: 0 var(--accordion-joined-inline) 1.375rem;
}

/* Only a page running scripts hides a closed answer, so with scripts blocked every answer shows. */
@media (scripting: enabled) {
    .accordion__item:has(> .accordion__heading > .accordion__button[aria-expanded="false"]) > .accordion__panel[b-pi92k05gf8],
    .accordion__item:has(> .accordion__heading > .accordion__button[data-accordion-start="closed"]) > .accordion__panel[b-pi92k05gf8] {
        display: none;
    }

    /* The markup calls every button expanded, so until script closes it a marked item is drawn closed here. */
    .accordion__item:has(> .accordion__heading > .accordion__button[data-accordion-start="closed"][aria-expanded="true"])[b-pi92k05gf8] {
        border-color: var(--card-border);
    }

    .accordion__button[data-accordion-start="closed"][aria-expanded="true"][b-pi92k05gf8] {
        padding-bottom: 1.25rem;
    }

    .accordion__button[data-accordion-start="closed"][aria-expanded="true"][b-pi92k05gf8]  .accordion__chevron {
        color: var(--text-muted);
        transform: none;
    }

    /* A joined row drawn closed before script runs: the closed row's padding and its right-pointing accent chevron. */
    .accordion--joined .accordion__button[data-accordion-start="closed"][aria-expanded="true"][b-pi92k05gf8] {
        padding-bottom: 1.375rem;
    }

    .accordion--joined .accordion__button[data-accordion-start="closed"][aria-expanded="true"][b-pi92k05gf8]  .accordion__chevron {
        color: var(--clr-accent-light);
        transform: rotate(-90deg);
    }
}

/* Scripts blocked: the buttons cannot toggle, so nothing advertises that they can. */
@media (scripting: none) {
    .accordion__button[b-pi92k05gf8] {
        cursor: default;
    }

    .accordion__button[b-pi92k05gf8]  .accordion__chevron {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion__item[b-pi92k05gf8] {
        transition: none;
    }
}
/* /Components/Shared/ErrorSummary.razor.rz.scp.css */
/* A tint over the card, not a solid fill: white text on the error red is 3.76:1, under the 4.5:1 AA asks. */
.error-summary[b-e1uk0ldh7q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0.875rem var(--space-4);
    border: 1px solid var(--clr-error);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--clr-error) 12%, transparent);
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
    scroll-margin-top: var(--space-6);
}

.error-summary__heading[b-e1uk0ldh7q] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.4286;
    letter-spacing: normal;
}

/* The icon is a child component's markup, so it is not scoped, hence ::deep. */
.error-summary__heading[b-e1uk0ldh7q]  .error-summary__icon {
    margin-top: 0.125rem;
    color: var(--clr-error);
}

.error-summary__list[b-e1uk0ldh7q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
}

.error-summary__link[b-e1uk0ldh7q] {
    color: var(--clr-white);
    text-decoration: underline;
}

/* Phone and tablet: each link is a 44px row, so a thumb can pick the field to fix. */
@media (max-width: 60rem) { /* --bp-lg */
    .error-summary__list[b-e1uk0ldh7q] {
        gap: 0;
    }

    .error-summary__link[b-e1uk0ldh7q] {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }
}
/* /Components/Shared/Eyebrow.razor.rz.scp.css */
.eyebrow[b-6jdcv75mn8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-pill);
    background: var(--clr-accent-muted);
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* /Components/Shared/FieldMessage.razor.rz.scp.css */
/* The package's message is smaller and sits closer to the control than the design draws it. */
.field-message[b-kcc6ytl4y2] {
    margin-top: 0;
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
}
/* /Components/Shared/FinalCta.razor.rz.scp.css */
.final-cta[b-rwhk32dvk6] {
    padding: 0 var(--space-6) 7.5rem;
}

.final-cta__panel[b-rwhk32dvk6] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--space-10) var(--space-10) var(--space-10) 4.5rem;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: linear-gradient(154deg, var(--clr-accent-deep) 0%, var(--mkt-cta-gradient-end) 71.4%);
}

.final-cta__copy[b-rwhk32dvk6] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/* Balanced on desktop so "Ready to automate your studio?" breaks after "automate" as designed (FinalCtaLayoutE2ETests). */
.final-cta__heading[b-rwhk32dvk6] {
    color: var(--clr-white);
    font-size: var(--mkt-text-56);
    font-weight: 700;
    line-height: 1.077;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.final-cta__text[b-rwhk32dvk6] {
    overflow-wrap: anywhere;
    color: color-mix(in srgb, var(--clr-white) 82%, transparent);
    font-size: var(--mkt-text-20);
    line-height: 1.5;
}

.final-cta__actions[b-rwhk32dvk6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

/* A label wraps inside its button when enlarged text is wider than the band. */
.final-cta__actions .btn[b-rwhk32dvk6] {
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

/* The outline is white at half strength here, not the page's neutral border. */
.final-cta__secondary[b-rwhk32dvk6] {
    border-color: color-mix(in srgb, var(--clr-white) 50%, transparent);
}

.final-cta__photo[b-rwhk32dvk6] {
    position: relative;
    flex: 0 1 26.25rem;
    height: 22.5rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.final-cta__image[b-rwhk32dvk6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkens the photo's top-left corner, where the stand-in photo's lettering sits. */
.final-cta__scrim[b-rwhk32dvk6] {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 42%;
    background: radial-gradient(
        100% 100% at 0 0,
        var(--mkt-cta-scrim) 0%,
        color-mix(in srgb, var(--mkt-cta-scrim) 93%, transparent) 70%,
        transparent 100%
    );
}

/* Phone and tablet: the photo drops under the copy and the buttons stack. */
@media (max-width: 60rem) { /* --bp-lg */
    .final-cta[b-rwhk32dvk6] {
        padding-bottom: 3.5rem;
    }

    .final-cta__panel[b-rwhk32dvk6] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
        padding: var(--space-10) 1.75rem;
        background: linear-gradient(112deg, var(--clr-accent-deep) 0%, var(--mkt-cta-gradient-end) 71.4%);
    }

    .final-cta__copy[b-rwhk32dvk6] {
        flex: none;
    }

    /* ⚠️ Not redundant: the phone design fills each line first, so the desktop balance must not reach it (PageTemplateStylesheetConventionTests). */
    .final-cta__heading[b-rwhk32dvk6] {
        font-size: var(--mkt-text-32);
        line-height: 1.119;
        text-wrap: wrap;
    }

    .final-cta__actions[b-rwhk32dvk6] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .final-cta__photo[b-rwhk32dvk6] {
        flex: none;
        height: 15rem;
    }
}

/* After the phone rules, so the section spacing wins at every width. */
.final-cta--section[b-rwhk32dvk6] {
    padding: var(--mkt-section-space) var(--mkt-section-gutter);
    border-top: var(--mkt-section-line) solid var(--clr-border);
    background: var(--bg);
}

/* Phone: the design starts the band's panel where the section above ends. */
@media (max-width: 60rem) { /* --bp-lg */
    .final-cta--section[b-rwhk32dvk6] {
        padding-top: 0;
    }
}
/* /Components/Shared/FormField.razor.rz.scp.css */
.form-field[b-04zhafx4we] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field__label[b-04zhafx4we] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2143;
}

/* The asterisk is small purple text, so it takes the accent text colour, never the lighter accent. */
.form-field__required[b-04zhafx4we] {
    color: var(--accent-text);
}

.form-field__optional[b-04zhafx4we] {
    color: var(--text-muted);
    font-weight: 400;
}

/* Inky.Design draws the control; only the design's size, corner and fill differ. The markup is not scoped, hence ::deep. */
.form-field[b-04zhafx4we]  .form-input {
    min-height: 3.125rem;
    padding: 0.875rem var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg);
    font-size: var(--mkt-text-16);
    line-height: normal;
}

/* The design sets a one-line value 2px below the middle of its box. */
.form-field[b-04zhafx4we]  input.form-input {
    padding-block: 0.9375rem 0.8125rem;
}

/* The 2px error border takes a pixel back from the padding, so the box stays the design's 50px. */
.form-field[b-04zhafx4we]  input.form-input[aria-invalid="true"] {
    padding-block: 0.875rem 0.75rem;
}

.form-field[b-04zhafx4we]  .form-textarea {
    min-height: 8.75rem;
    line-height: 1.5;
    resize: none; /* The design draws no resize grip; Inky.Design's vertical resize would show one. */
}

.form-field[b-04zhafx4we]  .form-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
/* /Components/Shared/Icon.razor.rz.scp.css */
.icon[b-py7g7axxo1] {
    display: inline-block;
    flex: none;
}

/* The design keeps an icon's stroke weight fixed whatever its size; the markup is not scoped, hence ::deep. */
.icon[b-py7g7axxo1]  path {
    vector-effect: non-scaling-stroke;
}
/* /Components/Shared/LegalBody.razor.rz.scp.css */
.legal-layout[b-kbhleg2w5u] {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
    width: calc(100% - 2 * var(--space-6));
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--space-6) 0 7rem;
}

/* The design's card: 300px wide, 20px corners, which is not a step on the radius scale. */
.legal-layout__contents[b-kbhleg2w5u] {
    flex: 0 0 18.75rem;
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--card-border);
    border-radius: 1.25rem;
    background: var(--card-bg);
}

.legal-layout__contents-title[b-kbhleg2w5u] {
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.21;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-layout__contents-list[b-kbhleg2w5u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    list-style: none;
}

.legal-layout__contents-link[b-kbhleg2w5u] {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: 0.625rem;
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    font-weight: 500;
    line-height: 1.21;
}

.legal-layout__contents-link:hover[b-kbhleg2w5u] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

.legal-layout__contents-link:not([aria-current]):hover[b-kbhleg2w5u] {
    color: var(--clr-white);
}

/* The current section: accent text on a 16% accent tint and one step bolder, never colour alone. */
.legal-layout__contents-link[aria-current][b-kbhleg2w5u] {
    background: color-mix(in srgb, var(--clr-accent) 16%, transparent);
    color: var(--accent-text);
    font-weight: 600;
}

.legal-layout__article[b-kbhleg2w5u] {
    flex: 1 1 0;
    min-width: 0;
}

/* The legal pages' reading column: 640px, about 78 characters a line, left of the empty space the design leaves. */
.legal-layout__article--reading[b-kbhleg2w5u] {
    max-width: 40rem;
}

/* Phone and tablet: the list is hidden and the article takes the full width. */
@media (max-width: 60rem) { /* --bp-lg */
    .legal-layout[b-kbhleg2w5u] {
        padding-bottom: 3.5rem;
    }

    .legal-layout__contents[b-kbhleg2w5u] {
        display: none;
    }
}
/* /Components/Shared/LegalPage.razor.rz.scp.css */
/* The hero sits on the page's 1200px column, left aligned, with the glow clipped by its own box. */
.legal-hero[b-2kysbu7axe] {
    position: relative;
    overflow: hidden;
    padding: 4.5rem var(--space-6) 2.5rem;
}

/* The design's 900px by 500px glow, 28% strong, its corner 200px left of and 300px above the hero. */
.legal-hero[b-2kysbu7axe]::before {
    content: '';
    position: absolute;
    top: -18.75rem;
    left: -12.5rem;
    width: 56.25rem;
    height: 31.25rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--mkt-hero-glow) 28%, transparent), transparent);
    pointer-events: none;
}

.legal-hero__inner[b-2kysbu7axe] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--content-width);
    margin-inline: auto;
}

.legal-hero__title[b-2kysbu7axe] {
    color: var(--clr-white);
    font-size: var(--mkt-text-56);
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: -0.025em;
}

.legal-hero__subtitle[b-2kysbu7axe] {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.21;
}

/* The article's blocks sit 14px apart and a new section opens 40px after the last block. */
.legal-prose[b-2kysbu7axe] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    overflow-wrap: break-word;
}

.legal-prose[b-2kysbu7axe] >  h2:not(:first-child) {
    margin-top: 1.625rem;
}

/* The designed 29.5px line, rounded up to the 30px box a browser draws. */
.legal-prose[b-2kysbu7axe]  h2 {
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.008em;
}

.legal-prose[b-2kysbu7axe]  p,
.legal-prose[b-2kysbu7axe]  li {
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    line-height: 1.625;
}

.legal-prose[b-2kysbu7axe]  strong {
    color: var(--clr-white);
    font-weight: 600;
}

/* A link in a sentence is underlined at rest and on hover, so it never depends on colour. */
.legal-prose[b-2kysbu7axe]  a {
    color: var(--accent-text);
    text-decoration: underline;
}

.legal-prose[b-2kysbu7axe]  a:hover {
    color: var(--clr-white);
}

.legal-prose[b-2kysbu7axe]  ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
}

/* The design's bullet: a 6px accent dot level with the first line, then 12px of space. */
.legal-prose[b-2kysbu7axe]  li {
    position: relative;
    padding-left: 1.125rem;
}

.legal-prose[b-2kysbu7axe]  li::before {
    content: '';
    position: absolute;
    top: 0.625rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--clr-accent-light);
}

/* Phone and tablet: the hero tightens and its heading steps down to 32px. */
@media (max-width: 60rem) { /* --bp-lg */
    .legal-hero[b-2kysbu7axe] {
        padding-top: 2.75rem;
    }

    .legal-hero__title[b-2kysbu7axe] {
        font-size: var(--mkt-text-32);
        line-height: 1.1188;
    }
}
/* /Components/Shared/PageBand.razor.rz.scp.css */
.page-band[b-kgksbwoxdv] {
    padding-block: 6rem;
}

/* The band owns the room around its content, so a section's own vertical room goes. */
.page-band[b-kgksbwoxdv]  .final-cta,
.page-band[b-kgksbwoxdv]  .legal-layout {
    padding-block: 0;
}

/* Phone and tablet: the design's 44px above and 56px below, unless the page sets its gap. */
@media (max-width: 60rem) { /* --bp-lg */
    /* The section above holds 3.5rem of the gap; this band adds the rest, never below zero. */
    .page-band[b-kgksbwoxdv] {
        padding-block: max(0rem, calc(var(--page-band-phone-gap, 6.25rem) - 3.5rem)) 3.5rem;
    }
}
/* /Components/Shared/PageBands.razor.rz.scp.css */
/* Band colour follows position, so a page never states which band it is. */
.page-bands[b-u8ti95duup] >  .inner-hero:nth-child(odd),
.page-bands[b-u8ti95duup] >  .page-band:nth-child(odd) {
    background: var(--clr-black);
}

.page-bands[b-u8ti95duup] >  .inner-hero:nth-child(even),
.page-bands[b-u8ti95duup] >  .page-band:nth-child(even) {
    background: var(--clr-dark);
}

/* The line between two bands is the lower band's top edge. */
.page-bands[b-u8ti95duup] >  .page-band {
    border-top: 1px solid var(--clr-border);
}

/* The footer draws its own 1px, so the last band's 1px makes the page's 2px rule. */
.page-bands--ruled[b-u8ti95duup] >  .page-band:last-child {
    border-bottom: 1px solid var(--clr-border);
}

/* The first band continues the hero's colour with no line; the alternation shifts one place. */
.page-bands--joined[b-u8ti95duup] >  .page-band:nth-child(odd) {
    background: var(--clr-dark);
}

.page-bands--joined[b-u8ti95duup] >  .page-band:nth-child(even) {
    background: var(--clr-black);
}

.page-bands--joined[b-u8ti95duup] >  .page-band:nth-child(2) {
    border-top: 0;
}

/* Phone and tablet: no bands and no lines, except where the page keeps its own. */
@media (max-width: 60rem) { /* --bp-lg */
    /* :nth-child(n) matches every position, so this outranks the alternating colours above. */
    .page-bands[b-u8ti95duup] >  .inner-hero:nth-child(n) {
        background: none;
    }

    .page-bands[b-u8ti95duup] >  .page-band:nth-child(n) {
        background: none;
        border-top: 0;
    }

    /* The ruled page keeps its line and paints the band under it, as the frame does. */
    .page-bands--ruled[b-u8ti95duup] >  .page-band:nth-child(2) {
        background: var(--clr-dark);
        border-top: 1px solid var(--clr-border);
    }
}
/* /Components/Shared/PageHero.razor.rz.scp.css */
/* Not .page-hero: Inky.Design styles that class and would shrink the title (ARCHITECTURE.md). */
/* The band is 592px tall at 1440: 96px above and below the 400px photo, and never shorter. */
.inner-hero[b-r4jjldjdex] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 37rem;
    padding: 6rem max(var(--space-6), calc((100% - var(--content-width)) / 2));
}

/* An element, not a pseudo-element, so a contrast check can tell which text it lies behind. */
.inner-hero__glow[b-r4jjldjdex] {
    position: absolute;
    z-index: -1;
    top: -21.875rem;
    left: calc(50% - 31.25rem);
    width: 62.5rem;
    height: 43.75rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--mkt-hero-glow) 32%, transparent), transparent);
    pointer-events: none;
}

/* About, Features: a 900px circle 490px right of the page centre, behind the photo. */
.inner-hero--behind-photo .inner-hero__glow[b-r4jjldjdex] {
    top: -16.25rem;
    left: calc(50% + 2.5rem);
    width: 56.25rem;
    height: 56.25rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--clr-accent) 35%, transparent), transparent);
}

.inner-hero__inner[b-r4jjldjdex] {
    display: grid;
    grid-template-columns: minmax(0, 616fr) minmax(0, 520fr);
    column-gap: var(--space-16);
    align-items: center;
}

.inner-hero__copy[b-r4jjldjdex] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    text-align: start;
}

/* The copy's gap spaces the title and subline, so their default margins go. */
.inner-hero__title[b-r4jjldjdex] {
    margin: 0;
}

.inner-hero__subline[b-r4jjldjdex] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--mkt-text-20);
    line-height: 1.5;
}

/* The optional line under the subline: white on a desktop, muted on a phone. */
.inner-hero__note[b-r4jjldjdex] {
    margin: 0;
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    line-height: 1.5;
}

/* The 28px corner sits between the radius tokens, as the design draws it. */
.inner-hero__photo[b-r4jjldjdex] {
    position: relative;
    aspect-ratio: 520 / 400;
    border-radius: 1.75rem;
    overflow: hidden;
}

.inner-hero__image[b-r4jjldjdex] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A crop scales about its focal point, which cover also pins, so the frame stays covered. */
.inner-hero__image--cropped[b-r4jjldjdex] {
    object-position: var(--hero-focal-x) var(--hero-focal-y);
    transform: scale(var(--hero-zoom));
    transform-origin: var(--hero-focal-x) var(--hero-focal-y);
}

/* The chip sits 24px in from the photo's left edge, flush with its bottom edge. */
.inner-hero__chip[b-r4jjldjdex] {
    position: absolute;
    bottom: 0;
    left: var(--space-6);
    max-width: calc(100% - 2 * var(--space-6));
}

/* The wrapper's own width limit stands in for the chip's, which would wrap its text early. */
.inner-hero__chip[b-r4jjldjdex]  .chip {
    max-width: 100%;
}

/* Phone and tablet: everything centred, the photo 28px under the subline and inset 32px. */
@media (max-width: 60rem) { /* --bp-lg */
    .inner-hero[b-r4jjldjdex] {
        min-height: 0;
        padding: 4.5rem 2rem 3.5rem;
    }

    .inner-hero--behind-photo .inner-hero__glow[b-r4jjldjdex] {
        left: calc(50% - 24.6875rem);
    }

    .inner-hero__inner[b-r4jjldjdex] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.75rem;
    }

    .inner-hero__copy[b-r4jjldjdex] {
        align-items: center;
        text-align: center;
    }

    .inner-hero__subline[b-r4jjldjdex] {
        font-size: var(--mkt-text-18);
    }

    .inner-hero__note[b-r4jjldjdex] {
        color: var(--text-muted);
    }

    .inner-hero__chip[b-r4jjldjdex] {
        display: none;
    }

    /* Over the purple wash the lighter grey keeps its contrast. */
    .inner-hero--behind-photo .inner-hero__subline[b-r4jjldjdex] {
        color: var(--clr-gray-light);
    }

    .inner-hero__photo[b-r4jjldjdex] {
        aspect-ratio: 326 / 260;
    }
}
/* /Components/Shared/SocialLinks.razor.rz.scp.css */
.social-links[b-3tagb063sv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
}

.social-links li[b-3tagb063sv] {
    display: flex;
}

/* The link is the 44px target; the 38px circle the design draws is its inset ::before. */
.social-links__link[b-3tagb063sv] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.1875rem;
    border-radius: var(--radius-pill);
    color: var(--clr-off-white);
}

.social-links__link[b-3tagb063sv]::before {
    content: '';
    position: absolute;
    inset: 0.1875rem;
    z-index: -1;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    background: var(--clr-card);
}

.social-links__link:hover[b-3tagb063sv]::before {
    border-color: var(--clr-gray-mid);
    background: var(--clr-surface);
}

/* Phone and tablet: the circle fills the whole 44px target, and the target takes its own room. */
@media (max-width: 60rem) { /* --bp-lg */
    .social-links__link[b-3tagb063sv] {
        margin: 0;
    }

    .social-links__link[b-3tagb063sv]::before {
        inset: 0;
    }
}
/* /Components/Shared/Tooltip.razor.rz.scp.css */
/* ⚠️ Inline, shrunk to its words, so the icon follows them: no width, flex or auto margin. */
.tooltip[b-73m4hqsocd] {
    display: inline;
    anchor-scope: --tooltip;
}

/* A 44px target around the 14px glyph; the margins keep line height and add nothing at the end. */
.tooltip__trigger[b-73m4hqsocd] {
    anchor-name: --tooltip;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.75rem 0 -0.75rem -0.375rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-muted);
    vertical-align: middle;
    cursor: help;
    transition: color var(--transition-fast);
}

.tooltip__trigger:hover[b-73m4hqsocd] {
    color: var(--clr-white);
}

.tooltip__glyph[b-73m4hqsocd] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

/* ⚠️ Hide this popup only while closed: author display or visibility beats the open style. */
.tooltip__popup[b-73m4hqsocd] {
    position: fixed;
    inset: auto 1rem 1rem;
    margin: 0 auto;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    z-index: 20;
}

.tooltip__text[b-73m4hqsocd] {
    display: block;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    background: var(--clr-card);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.45);
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: start;
    text-transform: none;
    overflow-wrap: anywhere;
}

/* With anchoring the popup follows its icon and stays on screen; without it, it stays docked. */
@supports (top: anchor(bottom)) {
    .tooltip__popup[b-73m4hqsocd] {
        position-anchor: --tooltip;
        inset: auto;
        top: anchor(bottom);
        left: anchor(left);
        margin: -0.25rem 0 0;
        position-try-fallbacks: --tooltip-end, --tooltip-centred, --tooltip-above-start, --tooltip-above-end, --tooltip-above-centred;
    }

    @position-try --tooltip-end {
        inset: auto;
        top: anchor(bottom);
        right: anchor(right);
        margin: -0.25rem 0 0;
    }

    @position-try --tooltip-centred {
        inset: auto 1rem;
        top: anchor(bottom);
        margin: -0.25rem auto 0;
    }

    @position-try --tooltip-above-start {
        inset: auto;
        bottom: anchor(top);
        left: anchor(left);
        margin: 0 0 -0.25rem;
    }

    @position-try --tooltip-above-end {
        inset: auto;
        bottom: anchor(top);
        right: anchor(right);
        margin: 0 0 -0.25rem;
    }

    @position-try --tooltip-above-centred {
        inset: auto 1rem;
        bottom: anchor(top);
        margin: 0 auto -0.25rem;
    }
}

/* ⚠️ Only without interest invokers; elsewhere the browser opens it and Escape closes it. */
@supports not selector(:interest-source) {
    .tooltip__popup:not(:popover-open)[b-73m4hqsocd] {
        display: block;
    }

    /* Each box sets its own visibility: WebKit does not pass a closed popover's change down. */
    .tooltip__popup:not(:popover-open)[b-73m4hqsocd],
    .tooltip__popup:not(:popover-open) .tooltip__text[b-73m4hqsocd] {
        visibility: hidden;
        transition: visibility 0s 0.3s;
    }

    @media (hover: hover) {
        .tooltip:hover > .tooltip__popup:not(:popover-open)[b-73m4hqsocd],
        .tooltip:hover > .tooltip__popup:not(:popover-open) .tooltip__text[b-73m4hqsocd] {
            visibility: visible;
            transition-delay: 0s;
        }
    }

    .tooltip__trigger:focus-visible + .tooltip__popup:not(:popover-open)[b-73m4hqsocd],
    .tooltip__trigger:focus-visible + .tooltip__popup:not(:popover-open) .tooltip__text[b-73m4hqsocd] {
        visibility: visible;
        transition-delay: 0s;
    }

    /* ⚠️ Escape (site.js) sets the attribute; these must stay after every reveal rule above. */
    .tooltip[data-tooltip-dismissed] > .tooltip__popup:not(:popover-open)[b-73m4hqsocd],
    .tooltip[data-tooltip-dismissed] > .tooltip__popup:not(:popover-open) .tooltip__text[b-73m4hqsocd] {
        visibility: hidden;
        transition-delay: 0s;
    }
}
/* /Components/Shared/Wordmark.razor.rz.scp.css */
.wordmark[b-4gn3bl93zh] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--clr-white);
    font-size: var(--mkt-text-24);
    line-height: 1.2083;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.wordmark__ink[b-4gn3bl93zh] {
    font-weight: 800;
}

.wordmark__studio[b-4gn3bl93zh] {
    color: var(--clr-accent-light);
    font-weight: 600;
}

/* The 29px desktop wordmark keeps its size; its pointer area reaches 8px above and below. */
.wordmark[b-4gn3bl93zh]::after {
    content: '';
    position: absolute;
    inset: -0.5rem 0;
}

/* Phone and tablet: the whole wordmark is a 44px touch target. */
@media (max-width: 60rem) { /* --bp-lg */
    .wordmark[b-4gn3bl93zh] {
        min-height: 2.75rem;
    }

    .wordmark[b-4gn3bl93zh]::after {
        content: none;
    }
}
/* /Components/Survey/SurveyCard.razor.rz.scp.css */
.survey-card[b-ccsgxqzxyq] {
    --survey-card-padding: var(--space-6);

    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--survey-card-padding);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    background: var(--clr-card);
}

/* A 2px error border: it takes a pixel back from the padding so the card keeps its size. */
.survey-card--invalid[b-ccsgxqzxyq] {
    padding: calc(var(--survey-card-padding) - 1px);
    border: 2px solid var(--clr-error);
}

@media (max-width: 40rem) { /* --bp-sm */
    .survey-card[b-ccsgxqzxyq] {
        --survey-card-padding: var(--space-5);
    }
}
/* /Components/Survey/SurveyCheck.razor.rz.scp.css */
.survey-check[b-avm49iqjfr] {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

/* The input covers the whole row, so the box a finger hits, axe measures and the focus ring wraps are one box. */
.survey-check__input[b-avm49iqjfr] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: var(--radius-md);
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.survey-check__face[b-avm49iqjfr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding-block: var(--space-2);
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 500;
    line-height: 1.4286;
}

/* The box is the control's boundary, drawn in the input border colour, which holds 3:1 on the card. */
.survey-check__box[b-avm49iqjfr] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--control-border);
    border-radius: 0.375rem;
    background: var(--bg);
    color: var(--clr-white);
}

/* The tick is the signal; the fill only backs it, so a selected box is never told by colour alone. */
.survey-check__box[b-avm49iqjfr]  .icon {
    display: none;
}

.survey-check__input:checked + .survey-check__face .survey-check__box[b-avm49iqjfr] {
    border-color: var(--clr-accent);
    background: var(--clr-accent);
}

.survey-check__input:checked + .survey-check__face .survey-check__box[b-avm49iqjfr]  .icon {
    display: block;
}

.survey-check__input:hover + .survey-check__face .survey-check__box[b-avm49iqjfr] {
    border-color: var(--text-muted);
}

.survey-check__input:checked:hover + .survey-check__face .survey-check__box[b-avm49iqjfr] {
    border-color: var(--clr-accent-light);
}

.survey-check__text[b-avm49iqjfr] {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* /Components/Survey/SurveyChoiceGroup.razor.rz.scp.css */
.survey-choice__title[b-hv8pdwfy1c] {
    display: block;
}

.survey-choice__hint[b-hv8pdwfy1c] {
    margin-top: calc(var(--space-2) * -1);
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
}

.survey-choice__chips[b-hv8pdwfy1c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.survey-choice__chip[b-hv8pdwfy1c] {
    position: relative;
    display: inline-flex;
}

/* The input lies over its face, so the 44px box a finger hits and the shared focus ring are one box. */
.survey-choice__input[b-hv8pdwfy1c] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: var(--radius-md);
    background: transparent;
    appearance: none;
    cursor: pointer;
}

/* The boundary is the input border colour: 3:1 against the card, as ChoiceChipContrastTests holds. */
.survey-choice__face[b-hv8pdwfy1c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--clr-card);
    color: var(--clr-white);
    font-size: var(--mkt-text-14);
    font-weight: 600;
    line-height: 1.2;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.survey-choice__input:hover + .survey-choice__face[b-hv8pdwfy1c] {
    border-color: var(--text-muted);
    background: var(--clr-surface);
}

/* A chosen chip is filled and carries a tick, so it is never told apart by colour alone. */
.survey-choice__input:checked + .survey-choice__face[b-hv8pdwfy1c] {
    border-color: var(--clr-accent);
    background: var(--clr-accent);
}

.survey-choice__tick[b-hv8pdwfy1c] {
    display: none;
}

.survey-choice__input:checked + .survey-choice__face .survey-choice__tick[b-hv8pdwfy1c] {
    display: inline-flex;
}

.survey-choice__chips--rating .survey-choice__face[b-hv8pdwfy1c] {
    min-width: 3rem;
    min-height: 3rem;
}

@media (prefers-reduced-motion: reduce) {
    .survey-choice__face[b-hv8pdwfy1c] {
        transition: none;
    }
}
/* /Components/Survey/SurveyInput.razor.rz.scp.css */
/* Inky.Design draws the control; only the design's size, corner and fill differ. */
.form-input[b-vr7ghtfh23] {
    min-height: 3.125rem;
    padding: 0.875rem var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg);
    font-size: var(--mkt-text-16);
    line-height: normal;
}

/* The 2px error border takes a pixel back from the padding, so the box stays the same size. */
.form-input[aria-invalid="true"][b-vr7ghtfh23] {
    padding: calc(0.875rem - 1px) calc(var(--space-4) - 1px);
}

.form-input[b-vr7ghtfh23]::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-textarea[b-vr7ghtfh23] {
    min-height: 5.5rem;
    line-height: 1.5;
    resize: none; /* The design draws no resize grip; Inky.Design's vertical resize would show one. */
}

.survey-input__money[b-vr7ghtfh23] {
    position: relative;
}

/* The pound sign sits inside the box, so the typed amount starts after it; it is not part of the answer. */
.survey-input__sign[b-vr7ghtfh23] {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--space-4);
    color: var(--text-muted);
    font-size: var(--mkt-text-16);
    transform: translateY(-50%);
    pointer-events: none;
}

.survey-input__amount[b-vr7ghtfh23] {
    padding-inline-start: calc(var(--space-4) + 1.25rem);
}

.survey-input__amount[aria-invalid="true"][b-vr7ghtfh23] {
    padding-inline-start: calc(var(--space-4) + 1.25rem - 1px);
}
/* /Components/Survey/SurveyPage.razor.rz.scp.css */
/* One column, as wide as the design's 680px, with the page's own gutters. */
.survey[b-kik7k40yfo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: calc(100% - 2 * var(--space-4));
    max-width: 42.5rem;
    margin-inline: auto;
    padding-block: var(--space-12) var(--space-16);
}
/* /Components/Survey/SurveyQuestionTitle.razor.rz.scp.css */
.survey-title[b-jj06gmpyxe] {
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 600;
    line-height: 1.5;
}

/* The asterisk is small purple text, so it takes the accent text colour. It follows a space, never the words. */
.survey-title__required[b-jj06gmpyxe] {
    margin-inline-start: 0.375rem;
    color: var(--accent-text);
}

.survey-title__optional[b-jj06gmpyxe] {
    color: var(--text-muted);
    font-weight: 400;
    font-size: var(--mkt-text-14);
}
/* /Components/Survey/SurveyStepHeader.razor.rz.scp.css */
.survey-header[b-vximo8mrff] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

/* The offer is a sentence in a pill, so unlike the eyebrow chip it keeps its capitals and its tracking. */
.survey-header__offer[b-vximo8mrff] {
    display: inline-flex;
    max-width: 100%;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-pill);
    background: var(--clr-accent-muted);
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
}

.survey-header__progress[b-vximo8mrff] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
}

.survey-header__step[b-vximo8mrff] {
    color: var(--clr-white);
    font-weight: 600;
}

.survey-header__time[b-vximo8mrff] {
    color: var(--text-muted);
}

/* The bar is decoration: the step count above it says the same, so it is hidden from assistive technology. */
.survey-header__bar[b-vximo8mrff] {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--clr-surface);
    overflow: hidden;
}

/* Steps done so far, written as a share of the eight: step 1 is a dot, step 8 is seven eighths. */
.survey-header__fill[b-vximo8mrff] {
    display: block;
    width: calc((var(--survey-step) - 1) / 8 * 100%);
    min-width: 0.375rem;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
}

.survey-header__heading[b-vximo8mrff] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.survey-header__lead[b-vximo8mrff] {
    color: var(--text-muted);
    font-size: var(--mkt-text-18);
    line-height: 1.5;
    overflow-wrap: anywhere; /* A long email address breaks rather than widening the page. */
}
/* /Components/Survey/SurveyTattooCard.razor.rz.scp.css */
/* The file is cropped to the card's box at 2x; the declared size reserves the box before it loads. */
.survey-tattoo__photo[b-snlvm8ngx4] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 539;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.survey-tattoo__title[b-snlvm8ngx4] {
    color: var(--clr-white);
    font-size: var(--mkt-text-16);
    font-weight: 600;
    line-height: 1.5;
}

.survey-tattoo__fields[b-snlvm8ngx4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.survey-tattoo__field[b-snlvm8ngx4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.survey-tattoo__label[b-snlvm8ngx4] {
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    font-weight: 500;
    line-height: 1.4286;
}
/* /Components/Survey/SurveyTextField.razor.rz.scp.css */
.survey-field__title[b-8n44tmi49j] {
    display: block;
}

.survey-field__hint[b-8n44tmi49j] {
    margin-top: calc(var(--space-2) * -1);
    color: var(--text-muted);
    font-size: var(--mkt-text-14);
    line-height: 1.4286;
}