:root {
    color-scheme: light;

    --csa-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    --csa-color-canvas: #ffffff;
    --csa-color-page: #f8fbff;
    --csa-color-ink: #132033;
    --csa-color-muted: #667084;
    --csa-color-subtle: #8a95a6;
    --csa-color-line: #e7edf5;
    --csa-color-blue: #2f80ed;
    --csa-color-blue-strong: #1f6fe0;
    --csa-color-blue-soft: #ebf4ff;
    --csa-color-cyan-soft: #dff1ff;
    --csa-color-aqua: #1fa4dc;
    --csa-color-mint: #6bc8bd;
    --csa-gradient-aqua-mint: linear-gradient(90deg, var(--csa-color-aqua) 0%, var(--csa-color-mint) 100%);
    --csa-color-success: #1f9d6b;
    --csa-bg-section-soft:
        radial-gradient(760px 360px at 18% 12%, rgb(223 241 255 / 0.46), transparent 62%),
        linear-gradient(180deg, #f4f7fb 0%, #eef4fb 100%);
    --csa-bg-section-blue-soft:
        linear-gradient(180deg, rgb(235 244 255 / 0.64), rgb(255 255 255 / 0.96) 76%),
        var(--csa-color-blue-soft);

    --csa-shadow-soft: 0 8px 24px rgb(28 62 111 / 0.08);
    --csa-shadow-lift: 0 18px 40px rgb(28 62 111 / 0.1);

    --csa-radius-sm: 4px;
    --csa-radius-md: 8px;
    --csa-radius-lg: 12px;
    --csa-radius-xl: 20px;
    --csa-radius-pill: 999px;

    --csa-space-2xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem);
    --csa-space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
    --csa-space-sm: clamp(0.75rem, 0.68rem + 0.35vw, 0.9375rem);
    --csa-space-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --csa-space-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --csa-space-xl: clamp(2rem, 1.65rem + 1.75vw, 3rem);
    --csa-space-2xl: clamp(3rem, 2.3rem + 3.5vw, 5rem);
    --csa-space-3xl: clamp(4.5rem, 3.5rem + 5vw, 7rem);

    --csa-container: 1120px;
    --csa-container-narrow: 736px;
    --csa-container-wide: 1280px;
    --csa-gutter: clamp(16px, 4vw, 32px);

    --csa-font-size-xs: 13px;
    --csa-font-size-sm: 14px;
    --csa-font-size-p: 16px;
    --csa-font-size-lead: clamp(17px, 1.2vw, 20px);
    --csa-font-size-h1: clamp(40px, 7vw, 92px);
    --csa-font-size-h2: clamp(32px, 4vw, 56px);
    --csa-font-size-h3: clamp(22px, 2vw, 28px);
    --csa-font-size-h4: clamp(19px, 1.5vw, 22px);
    --csa-font-size-h5: 18px;
    --csa-font-size-h6: 16px;
    --csa-font-size-button: 16px;

    --csa-leading-none: 0.98;
    --csa-leading-tight: 1.08;
    --csa-leading-normal: 1.18;
    --csa-leading-relaxed: 1.45;
    --csa-leading-loose: 1.78;
    --csa-leading-title: 1.12;
    --csa-leading-body: 1.65;

    --csa-duration: 180ms;
    --csa-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    min-block-size: 100vh;
}

:where(img, picture, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
}

:where(img) {
    block-size: auto;
}

:where(input, button, textarea, select) {
    font: inherit;
}

:where(button) {
    cursor: pointer;
}

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

:where(a) {
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--csa-color-blue), white 25%);
    outline-offset: 3px;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    background: linear-gradient(180deg, var(--csa-color-canvas) 0%, var(--csa-color-page) 100%);
    color: var(--csa-color-ink);
    font-family: var(--csa-font-sans);
    font-size: var(--csa-font-size-p);
    line-height: var(--csa-leading-body);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote) {
    margin-block: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
    color: var(--csa-color-ink);
    font-weight: 800;
    line-height: var(--csa-leading-title);
}

:where(h1) {
    font-size: var(--csa-font-size-h1);
}

:where(h2) {
    font-size: var(--csa-font-size-h2);
}

:where(h3) {
    font-size: var(--csa-font-size-h3);
    letter-spacing: -0.06em;
}

:where(h4) {
    font-size: var(--csa-font-size-h4);
}

:where(h5) {
    font-size: var(--csa-font-size-h5);
}

:where(h6) {
    font-size: var(--csa-font-size-h6);
}

:where(p) {
    color: inherit;
    font-size: var(--csa-font-size-p);
}

:where(a) {
    color: var(--csa-color-blue-strong);
}

:where(a:hover) {
    color: var(--csa-color-blue);
}

:where(hr) {
    border: 0;
    border-block-start: 1px solid var(--csa-color-line);
    margin-block: var(--csa-space-xl);
}

:where(.wp-block-image, .wp-block-embed, .wp-block-video) {
    margin-block: var(--csa-space-lg);
}

:where(.alignwide) {
    max-inline-size: var(--csa-container-wide);
}

:where(.alignfull) {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    max-inline-size: 100vw;
}

.csa-container {
    inline-size: min(calc(100% - (var(--csa-gutter) * 2)), var(--csa-container));
    margin-inline: auto;
}

.csa-container--narrow {
    --csa-container: var(--csa-container-narrow);
}

.csa-container--wide {
    --csa-container: var(--csa-container-wide);
}

.csa-section {
    padding-block: var(--csa-space-3xl);
}

.csa-section--compact {
    padding-block: var(--csa-space-2xl);
}

.csa-section--spacious {
    padding-block: clamp(6rem, 10vw, 10rem);
}

.csa-section--tint {
    background: var(--csa-color-blue-soft);
}

.csa-section--inverse {
    background: var(--csa-color-ink);
    color: var(--csa-color-canvas);
}

.csa-section__header {
    display: grid;
    gap: var(--csa-space-sm);
    max-inline-size: 48rem;
    margin-block-end: var(--csa-space-xl);
}

.csa-section__header--center {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}

.csa-stack {
    display: grid;
    gap: var(--csa-stack-gap, var(--csa-space-md));
}

.csa-flow>*+* {
    margin-block-start: var(--csa-flow-space, 1em);
}

.csa-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--csa-space-sm);
}

.csa-grid {
    --csa-grid-min: 16rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--csa-grid-min)), 1fr));
    gap: var(--csa-grid-gap, var(--csa-space-lg));
}

.csa-grid--cards {
    --csa-grid-min: 18rem;
}

.csa-split {
    display: grid;
    align-items: center;
    gap: var(--csa-space-xl);
}

@media (width >=860px) {
    .csa-split {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.88fr);
    }
}

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: rgb(255 255 255 / 0.88);
    border-block-end: 1px solid var(--csa-color-line);
    backdrop-filter: blur(14px);
}

.site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-block-size: 4.5rem;
}

.site-branding {
    display: inline-flex;
    align-items: center;
}

.site-branding__link,
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--csa-space-xs);
    color: var(--csa-color-ink);
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 850;
    line-height: 1.1;
    text-decoration: none;
}

.site-branding__name {
    display: inline-flex;
    align-items: baseline;
    gap: 0.16em;
    color: #2a2f36;
    font-size: clamp(19px, 1.8vw, 27px);
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 1;
    white-space: nowrap;
}

.site-branding__name span:last-child {
    color: var(--csa-color-blue);
    font-size: 0.86em;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
}

.site-branding__mark {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.25rem;
    block-size: 2.25rem;
    padding-inline: 0.4rem;
    background: var(--csa-color-blue);
    border-radius: var(--csa-radius-md);
    color: var(--csa-color-canvas);
    font-size: var(--csa-font-size-xs);
    letter-spacing: 0;
}

.custom-logo {
    max-block-size: 3rem;
    inline-size: auto;
}

.site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 28px);
}

.site-nav a {
    color: var(--csa-color-muted);
    font-size: var(--csa-font-size-sm);
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    transition: color var(--csa-duration) var(--csa-ease);
}

.site-nav a:hover,
.site-nav .current-menu-item>a {
    color: var(--csa-color-ink);
}

.site-nav--desktop,
.site-header__cta {
    display: none;
}

.site-header__cta,
.site-mobile-nav__cta {
    align-items: center;
    justify-content: center;
    min-block-size: 42px;
    padding: 12px 16px;
    background: var(--csa-color-blue);
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 12px 22px rgb(47 128 237 / 0.18);
    color: var(--csa-color-canvas);
    font-size: var(--csa-font-size-sm);
    font-weight: 820;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--csa-duration) var(--csa-ease),
        border-color var(--csa-duration) var(--csa-ease),
        color var(--csa-duration) var(--csa-ease),
        box-shadow var(--csa-duration) var(--csa-ease);
}

.site-header__cta:visited,
.site-mobile-nav__cta:visited {
    color: var(--csa-color-canvas);
}

.site-header__cta:hover,
.site-mobile-nav__cta:hover {
    background: var(--csa-color-blue-strong);
    border-color: var(--csa-color-blue-strong);
    box-shadow: 0 12px 22px rgb(31 111 224 / 0.24);
    color: var(--csa-color-canvas);
}

.site-mobile-nav {
    position: relative;
}

.site-mobile-nav summary {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    background: rgb(235 244 255 / 0.78);
    border: 1px solid rgb(213 231 251 / 0.95);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.9) inset,
        0 12px 24px rgb(28 62 111 / 0.1);
    cursor: pointer;
    list-style: none;
    transition:
        background-color var(--csa-duration) var(--csa-ease),
        border-color var(--csa-duration) var(--csa-ease),
        box-shadow var(--csa-duration) var(--csa-ease);
}

.site-mobile-nav[open] summary {
    background: var(--csa-color-canvas);
    border-color: rgb(153 185 226 / 0.95);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.95) inset,
        0 14px 28px rgb(28 62 111 / 0.14);
}

.site-mobile-nav summary::-webkit-details-marker {
    display: none;
}

.site-mobile-nav summary span {
    grid-area: 1 / 1;
    inline-size: 16px;
    block-size: 2px;
    background: var(--csa-color-ink);
    border-radius: var(--csa-radius-pill);
    transition:
        opacity var(--csa-duration) var(--csa-ease),
        transform var(--csa-duration) var(--csa-ease);
}

.site-mobile-nav summary span:nth-child(1) {
    transform: translateY(-6px);
}

.site-mobile-nav summary span:nth-child(3) {
    transform: translateY(6px);
}

.site-mobile-nav[open] summary span:nth-child(1) {
    transform: rotate(45deg);
}

.site-mobile-nav[open] summary span:nth-child(2) {
    opacity: 0;
}

.site-mobile-nav[open] summary span:nth-child(3) {
    transform: rotate(-45deg);
}

.site-mobile-nav__panel {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + 14px);
    inset-inline-end: 0;
    display: grid;
    gap: 6px;
    inline-size: min(calc(100vw - 32px), 340px);
    padding: 14px;
    background: var(--csa-color-canvas);
    border: 1px solid rgb(213 225 240 / 0.98);
    border-radius: 18px;
    box-shadow: 0 24px 54px rgb(28 62 111 / 0.18);
}

.site-mobile-nav__panel a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--csa-color-ink);
    font-size: var(--csa-font-size-sm);
    font-weight: 780;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--csa-duration) var(--csa-ease),
        color var(--csa-duration) var(--csa-ease);
}

.site-mobile-nav__panel a:hover {
    background: var(--csa-color-blue-soft);
}

.site-mobile-nav__panel .site-mobile-nav__cta {
    display: inline-flex;
    margin-block-start: 6px;
    color: var(--csa-color-canvas);
}

.site-mobile-nav__panel .site-mobile-nav__cta:hover {
    background: var(--csa-color-blue-strong);
    color: var(--csa-color-canvas);
}

@media (width >= 920px) {
    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: clamp(26px, 4vw, 56px);
    }

    .site-nav--desktop {
        display: block;
    }

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

    .site-mobile-nav {
        display: none;
    }
}

.site-footer-cta {
    padding-block: clamp(58px, 7vw, 86px);
    background: var(--csa-bg-section-blue-soft);
    border-block-start: 1px solid rgb(213 231 251 / 0.8);
}

.site-footer-cta__inner {
    display: grid;
    gap: 22px;
    justify-items: center;
    max-inline-size: 900px;
    text-align: center;
}

.site-footer-cta__content {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-inline-size: 780px;
}

.site-footer-cta__content h2 {
    margin: 0;
    color: var(--csa-color-ink);
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.site-footer-cta__content p {
    max-inline-size: 620px;
    margin: 0;
    color: #536176;
    font-size: var(--csa-font-size-lead);
    font-weight: 560;
    line-height: var(--csa-leading-relaxed);
}

.site-footer-cta__action {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.site-footer-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 52px;
    padding: 15px 22px;
    background: var(--csa-color-blue);
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 14px 24px rgb(47 128 237 / 0.2);
    color: var(--csa-color-canvas);
    font-size: var(--csa-font-size-button);
    font-weight: 820;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--csa-duration) var(--csa-ease),
        border-color var(--csa-duration) var(--csa-ease),
        color var(--csa-duration) var(--csa-ease),
        box-shadow var(--csa-duration) var(--csa-ease);
}

.site-footer-cta__button:visited {
    color: var(--csa-color-canvas);
}

.site-footer-cta__button:hover {
    background: var(--csa-color-blue-strong);
    border-color: var(--csa-color-blue-strong);
    box-shadow: 0 14px 24px rgb(31 111 224 / 0.26);
    color: var(--csa-color-canvas);
}

.site-footer-cta__action p {
    margin: 0;
    color: #65748a;
    font-size: var(--csa-font-size-sm);
    font-weight: 760;
    line-height: 1.35;
}

.site-footer {
    background:
        radial-gradient(820px 360px at 18% 0%, rgb(47 128 237 / 0.16), transparent 62%),
        linear-gradient(180deg, #111a28 0%, #0d1420 100%);
    color: rgb(203 213 225 / 0.78);
}

.site-footer__inner {
    display: grid;
    gap: clamp(34px, 6vw, 80px);
    padding-block: clamp(52px, 7vw, 84px);
}

.site-footer__brand {
    max-inline-size: 420px;
}

.site-footer__logo-link {
    display: inline-flex;
    align-items: center;
    margin-block-end: 18px;
}

.site-footer__logo {
    inline-size: 82px;
    block-size: 82px;
    border-radius: 18px;
    box-shadow: 0 18px 32px rgb(0 0 0 / 0.18);
}

.site-footer__description {
    margin: 0;
    max-inline-size: 48ch;
    color: rgb(203 213 225 / 0.74);
    font-size: 15px;
    font-weight: 520;
    line-height: 1.7;
}

.site-footer__nav h2,
.site-footer__contact h2 {
    margin: 0 0 18px;
    color: var(--csa-color-canvas);
    font-size: 15px;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.2;
}

.site-footer__nav ul,
.site-footer__bottom ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: rgb(203 213 225 / 0.72);
    text-decoration: none;
    transition: color var(--csa-duration) var(--csa-ease);
}

.site-footer a:hover {
    color: var(--csa-color-canvas);
}

.site-footer__nav a {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
}

.site-footer__contact address {
    display: grid;
    gap: 12px;
    margin: 0;
    color: inherit;
    font-style: normal;
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 18px;
}

.site-footer__social a {
    display: inline-grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.09);
    border-radius: 50%;
    color: rgb(255 255 255 / 0.78);
    font-size: 11px;
    font-weight: 820;
    line-height: 1;
}

.site-footer__social svg {
    inline-size: 16px;
    block-size: 16px;
    fill: currentColor;
}

.site-footer__social a:hover {
    background: var(--csa-color-blue);
    border-color: var(--csa-color-blue);
    color: var(--csa-color-canvas);
}

.site-footer__bottom {
    display: grid;
    gap: 18px;
    padding-block: 22px;
    border-block-start: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer__bottom p {
    margin: 0;
    color: rgb(203 213 225 / 0.56);
    font-size: var(--csa-font-size-xs);
    font-weight: 560;
    line-height: 1.5;
}

.site-footer__bottom ul {
    gap: 12px 24px;
}

.site-footer__bottom a {
    color: rgb(203 213 225 / 0.58);
    font-size: var(--csa-font-size-xs);
    font-weight: 650;
}

@media (width >= 760px) {
    .site-footer__inner {
        grid-template-columns: minmax(280px, 1.35fr) minmax(150px, 0.55fr) minmax(230px, 0.75fr);
        align-items: start;
    }

    .site-footer__bottom {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .site-footer__bottom ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.csa-eyebrow {
    color: var(--csa-color-blue-strong);
    font-size: var(--csa-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.csa-title {
    max-inline-size: 14ch;
    letter-spacing: 0;
}

.csa-title--page {
    font-size: var(--csa-font-size-h1);
    line-height: var(--csa-leading-tight);
}

.csa-title--section {
    font-size: var(--csa-font-size-h2);
}

.csa-title--feature {
    font-size: var(--csa-font-size-h3);
}

.csa-title a {
    color: inherit;
    text-decoration: none;
}

.csa-title a:hover {
    color: var(--csa-color-blue-strong);
}

.csa-description {
    max-inline-size: 62ch;
    color: var(--csa-color-muted);
    font-size: var(--csa-font-size-lead);
}

.csa-surface {
    padding: var(--csa-space-lg);
    background: var(--csa-color-canvas);
    border: 1px solid var(--csa-color-line);
    border-radius: var(--csa-radius-md);
    box-shadow: var(--csa-shadow-soft);
}

.csa-entry {
    display: grid;
    gap: var(--csa-space-md);
}

.csa-entry__media {
    overflow: hidden;
    border-radius: var(--csa-radius-md);
}

.csa-entry__media img {
    inline-size: 100%;
}

.csa-entry__content {
    color: var(--csa-color-muted);
}

.csa-button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--csa-radius-md);
    background: var(--csa-color-blue);
    color: var(--csa-color-canvas);
    font-size: var(--csa-font-size-button);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--csa-duration) var(--csa-ease),
        border-color var(--csa-duration) var(--csa-ease),
        color var(--csa-duration) var(--csa-ease),
        transform var(--csa-duration) var(--csa-ease);
}

.csa-button:hover,
.wp-block-button__link:hover {
    background: var(--csa-color-blue-strong);
    color: var(--csa-color-canvas);

}

.csa-button--secondary {
    background: var(--csa-color-blue-soft);
    color: var(--csa-color-blue-strong);
}

.csa-button--secondary:hover {
    background: var(--csa-color-cyan-soft);
    color: var(--csa-color-blue-strong);
}

.csa-button--ghost {
    background: transparent;
    border-color: var(--csa-color-line);
    color: var(--csa-color-ink);
}

.csa-button--ghost:hover {
    background: var(--csa-color-blue-soft);
    border-color: var(--csa-color-blue-soft);
    color: var(--csa-color-ink);
}

.csa-hero {
    min-block-size: calc(100vh - 72px);
    display: grid;
    align-items: center;
    padding-block: clamp(56px, 8vw, 96px);
    background:
        radial-gradient(760px 380px at 86% 8%, rgb(223 241 255 / 0.72), transparent 60%),
        linear-gradient(180deg, var(--csa-color-canvas) 0%, #fbfdff 100%);
}

.csa-hero__layout {
    display: grid;
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
}

.csa-hero__content {
    display: grid;
    gap: 22px;
    max-inline-size: 680px;
}

.csa-hero__title {
    margin: 0;
    color: var(--csa-color-ink);
    max-inline-size: 660px;
    font-size: clamp(48px, 5.1vw, 80px);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: var(--csa-leading-none);
}

.csa-hero__title span {

    color: var(--csa-color-blue);
}

.csa-hero__description {
    max-inline-size: 600px;
    color: #5f6d83;
    font-size: var(--csa-font-size-lead);
    line-height: 1.5;
    text-wrap: pretty;
}

.csa-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 4px;
}

.csa-button--hero {
    min-block-size: 50px;
    padding-inline: 22px;
    border-radius: 10px;
    background: var(--csa-color-blue);
    color: var(--csa-color-canvas);
    box-shadow: 0 14px 24px rgb(47 128 237 / 0.24);
}

.csa-button--hero span {
    margin-inline-start: 8px;
}

.csa-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    color: #7a8798;
    font-size: var(--csa-font-size-sm);
    font-weight: 800;
    line-height: 1.3;
}

.csa-hero__proof li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.csa-hero__proof li::before {
    content: "";
    inline-size: 14px;
    block-size: 14px;
    background: var(--csa-color-success);
    clip-path: polygon(14% 54%, 36% 76%, 86% 22%, 95% 31%, 36% 91%, 5% 62%);
}

.csa-hero__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    padding: 14px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(237 246 255 / 0.84));
    border: 1px solid #d5e7fb;
    border-radius: 24px;
    box-shadow: 0 28px 54px rgb(28 62 111 / 0.14);
}

@media (width >=1248px) {
    .csa-hero__media {
        width: 115%;
    }
}


.csa-hero__media::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgb(255 255 255 / 0.82);
    border-radius: 18px;
}

.csa-hero__media img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
}

.csa-hero__media figcaption {
    position: absolute;
    inset-block-end: 34px;
    inset-inline-start: 34px;
    z-index: 2;
    padding: 10px 16px;
    background: rgb(255 255 255 / 0.94);
    border-radius: var(--csa-radius-pill);
    box-shadow: 0 12px 22px rgb(19 32 51 / 0.12);
    color: #2c3646;
    font-size: var(--csa-font-size-sm);
    font-weight: 850;
    line-height: 1;
}

@media (width >=920px) {
    .csa-hero__layout {
        grid-template-columns: 7fr 6fr;
    }
}

@media (width < 720px) {
    .csa-hero {
        min-block-size: auto;
        padding-block: 48px 64px;
    }

    .csa-hero__content {
        gap: 20px;
    }

    .csa-hero__title {
        font-size: 42px;
    }

    .csa-hero__proof {
        align-items: flex-start;
        flex-direction: column;
    }

    .csa-hero__media {
        padding: 10px;
        border-radius: 18px;
    }

    .csa-hero__media::before {
        inset: 10px;
        border-radius: 12px;
    }

    .csa-hero__media img {
        border-radius: 12px;
    }

    .csa-hero__media figcaption {
        inset-block-end: 22px;
        inset-inline-start: 22px;
        max-inline-size: calc(100% - 44px);
        padding: 9px 12px;
    }
}

.pagination {
    margin-block-start: var(--csa-space-xl);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--csa-space-xs);
}

.page-numbers {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--csa-color-line);
    border-radius: var(--csa-radius-md);
    color: var(--csa-color-muted);
    font-weight: 700;
    text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--csa-color-blue);
    border-color: var(--csa-color-blue);
    color: var(--csa-color-canvas);
}

.u-text-center {
    text-align: center;
}

.u-muted {
    color: var(--csa-color-muted);
}

.u-subtle {
    color: var(--csa-color-subtle);
}

.u-bg-soft {
    background: var(--csa-color-blue-soft);
}

.u-max-readable {
    max-inline-size: 62ch;
}

.u-full-bleed {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
}

.u-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.csa-hero .csa-button.csa-button--hero,
.csa-hero .csa-button.csa-button--hero:visited {
    background: var(--csa-color-blue);
    color: var(--csa-color-canvas);
}

.csa-hero .csa-button.csa-button--hero:hover {
    background: var(--csa-color-blue-strong);
    color: var(--csa-color-canvas);
}

.csa-problem {
    position: relative;
    padding-block: clamp(72px, 8vw, 112px);
    background: var(--csa-bg-section-blue-soft);
    border-block: 1px solid rgb(213 231 251 / 0.8);
}

.csa-problem::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgb(47 128 237 / 0.24), transparent);
}

.csa-problem__layout {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
}

.csa-problem__header {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-inline-size: 820px;
    margin-inline: auto;
    text-align: center;
}

.csa-problem__title {
    max-inline-size: 800px;
    color: var(--csa-color-ink);
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-problem__description {
    max-inline-size: 760px;
    color: #5f6d83;
    font-size: var(--csa-font-size-lead);
    line-height: var(--csa-leading-relaxed);
    text-wrap: balance;
}

.csa-problem__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(18px, 3vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.csa-problem__stats li {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    padding: 40px 15px;
    background: rgb(255 255 255 / 0.82);
    border: 1px solid rgb(213 231 251 / 0.9);
    border-radius: var(--csa-radius-xl);
    box-shadow: 0 18px 38px rgb(28 62 111 / 0.08);
    text-align: center;
}

.csa-problem__stats strong {
    color: var(--csa-color-blue);
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 820;
    letter-spacing: -0.035em;
    line-height: var(--csa-leading-normal);
}

.csa-problem__stats span {
    max-inline-size: 35ch;
    color: #475569;
    font-size: clamp(16px, 1.35vw, 18px);
    font-weight: 720;
    line-height: 1.45;
    text-wrap: pretty;
}

.csa-how {
    padding-block: clamp(76px, 8vw, 120px);
    background: var(--csa-bg-section-soft);
    border-block: 1px solid rgb(213 231 251 / 0.82);
}

.csa-how__header {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-inline-size: 850px;
    margin-inline: auto;
    margin-block-end: clamp(42px, 6vw, 72px);
    text-align: center;
}

.csa-how__title {
    max-inline-size: 820px;
    color: var(--csa-color-ink);
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-how__description {
    max-inline-size: 720px;
    color: #5f6d83;
    font-size: var(--csa-font-size-lead);
    line-height: var(--csa-leading-relaxed);
    text-wrap: balance;
}

.csa-how__steps {
    display: grid;
    gap: clamp(22px, 4vw, 34px);
    max-inline-size: 920px;
    margin: 0;
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.csa-how__steps li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(72px, 0.22fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(22px, 4vw, 42px);
    padding: clamp(28px, 4vw, 42px);
    background: rgb(255 255 255 / 0.78);
    border: 1px solid var(--csa-color-line);
    border-radius: var(--csa-radius-xl);
    box-shadow: 0 16px 34px rgb(28 62 111 / 0.07);
    backdrop-filter: blur(10px);
}

.csa-how__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100%;
    padding-inline-end: clamp(18px, 3vw, 34px);
    border-inline-end: 1px solid rgb(213 231 251 / 0.95);
    color: rgb(47 128 237 / 0.82);
    font-size: clamp(44px, 6vw, 76px);
    font-weight: 760;
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.csa-how__step-content {
    display: grid;
    align-content: center;
    gap: 14px;
    max-inline-size: 680px;
}

.csa-how__step-content h3 {
    color: var(--csa-color-ink);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 780;
    letter-spacing: -0.06em;
    line-height: var(--csa-leading-normal);
    text-wrap: balance;
}

.csa-how__step-content p {
    color: #5f6d83;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 560;
    line-height: var(--csa-leading-relaxed);
    text-wrap: pretty;
}

@media (width < 640px) {
    .csa-how__steps {
        gap: 28px;
    }

    .csa-how__steps li {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 20px;
    }

    .csa-how__number {
        justify-content: flex-start;
        min-block-size: auto;
        padding-inline-end: 0;
        padding-block-end: 14px;
        border-inline-end: 0;
        border-block-end: 1px solid rgb(213 231 251 / 0.95);
        font-size: 42px;
    }
}

.csa-included {
    padding-block: clamp(76px, 8vw, 120px);
    background:
        linear-gradient(180deg, var(--csa-color-canvas) 0%, #fbfdff 100%);
    border-block-start: 1px solid rgb(231 237 245 / 0.9);
}

.csa-included__header {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-inline-size: 900px;
    margin-inline: auto;
    margin-block-end: clamp(42px, 6vw, 72px);
    text-align: center;
}

.csa-included__title {
    max-inline-size: 840px;
    color: var(--csa-color-ink);
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-included__description {
    max-inline-size: 780px;
    color: #5f6d83;
    font-size: var(--csa-font-size-lead);
    line-height: var(--csa-leading-relaxed);
    text-wrap: balance;
}

.csa-included__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(20px, 3vw, 30px);
}

.csa-included-card {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: clamp(28px, 4vw, 40px);
    background: var(--csa-color-canvas);
    border: 1px solid var(--csa-color-line);
    border-radius: var(--csa-radius-xl);
    box-shadow: 0 16px 34px rgb(28 62 111 / 0.07);
}

.csa-included-card__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 64px;
    block-size: 64px;
    background:
        linear-gradient(180deg, rgb(235 244 255 / 0.96), rgb(223 241 255 / 0.82));
    border: 1px solid rgb(213 231 251 / 0.95);
    border-radius: 18px;
    color: var(--csa-color-blue-strong);
    box-shadow: 0 12px 24px rgb(47 128 237 / 0.12);
}

.csa-included-card__icon svg {
    inline-size: 40px;
    block-size: 40px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.csa-included-card__icon--video svg {
    stroke-width: 3;
}

.csa-included-card__icon--video path:nth-of-type(1) {
    fill: currentColor;
    stroke: none;
}

.csa-included-card h3 {
    max-inline-size: initial;
    color: var(--csa-color-ink);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 780;
    letter-spacing: -0.06em;
    line-height: var(--csa-leading-normal);
    text-wrap: balance;
}

.csa-included-card p {
    max-inline-size: 58ch;
    color: #5f6d83;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 560;
    line-height: var(--csa-leading-relaxed);
    text-wrap: pretty;
}

.csa-included-card--featured {
    max-inline-size: 720px;
    margin-block-start: clamp(20px, 3vw, 32px);
    margin-inline: auto;
    border-color: rgb(47 128 237 / 0.26);
    text-align: left;
}

.csa-language {
    padding-block: clamp(88px, 10vw, 136px);
    background:
        radial-gradient(760px 360px at 50% 0%, rgb(255 255 255 / 0.14), transparent 64%),
        linear-gradient(180deg, #347be8 0%, #2f74dc 100%);
    color: var(--csa-color-canvas);
    text-align: center;
}

.csa-language__flags {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-block-end: 24px;
    color: rgb(255 255 255 / 0.88);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    line-height: 1;
}

.csa-language__title {
    max-inline-size: 715px;
    margin-inline: auto;
    color: var(--csa-color-canvas);
    font-size: clamp(42px, 5.4vw, 70px);
    font-weight: 760;
    letter-spacing: -0.06em;
    line-height: 0.98;
    /*text-wrap: balance;*/
}

.csa-language__description {
    max-inline-size: 760px;
    margin: 24px auto 0;
    color: rgb(255 255 255 / 0.86);
    font-size: clamp(18px, 1.55vw, 22px);
    font-weight: 520;
    line-height: 1.55;
    text-wrap: balance;
}

.csa-pricing {
    padding-block: clamp(76px, 8vw, 120px);
    background:
        linear-gradient(180deg, #f8fbff 0%, var(--csa-color-canvas) 100%);
    border-block-start: 1px solid rgb(231 237 245 / 0.9);
}

.csa-pricing__header {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-inline-size: 900px;
    margin-inline: auto;
    margin-block-end: clamp(42px, 6vw, 72px);
    text-align: center;
}

.csa-pricing__title {
    max-inline-size: 820px;
    color: var(--csa-color-ink);
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 760;
    letter-spacing: 0;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-pricing__description {
    max-inline-size: 760px;
    color: #5f6d83;
    font-size: var(--csa-font-size-lead);
    line-height: var(--csa-leading-relaxed);
    text-wrap: balance;
}

.csa-pricing__group + .csa-pricing__group {
    margin-block-start: clamp(44px, 6vw, 80px);
}

.csa-pricing__group > h3 {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-block: 0 clamp(24px, 3vw, 34px);
    color: var(--csa-color-ink);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 820;
    letter-spacing: -0.06em;
    line-height: var(--csa-leading-normal);
    text-align: center;
}

.csa-pricing__group > h3::before,
.csa-pricing__group > h3::after {
    content: "";
    flex: 1 1 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgb(190 205 224 / 0.95));
}

.csa-pricing__group > h3::after {
    background: linear-gradient(90deg, rgb(190 205 224 / 0.95), transparent);
}

.csa-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(20px, 3vw, 28px);
}

.csa-pricing__grid--monthly {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.csa-price-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 16px;
    min-block-size: 100%;
    padding: clamp(26px, 3vw, 34px);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.98) 0%, #fbfdff 100%);
    border: 1px solid rgb(215 225 238 / 0.9);
    border-radius: var(--csa-radius-xl);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.9) inset,
        0 18px 44px rgb(28 62 111 / 0.08);
    transition:
        border-color var(--csa-duration) var(--csa-ease),
        box-shadow var(--csa-duration) var(--csa-ease);
}

.csa-price-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 5px;
    background: linear-gradient(90deg, var(--csa-color-cyan-soft), var(--csa-color-blue));
    opacity: 0.7;
}

.csa-price-card:hover {
    border-color: rgb(153 185 226 / 0.95);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.95) inset,
        0 24px 54px rgb(28 62 111 / 0.12);
}

.csa-price-card--featured {
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
    border-color: rgb(47 128 237 / 0.42);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.95) inset,
        0 24px 58px rgb(47 128 237 / 0.15);
}

.csa-price-card--featured::before {
    opacity: 1;
}

.csa-price-card__name,
.csa-price-card__price,
.csa-price-card__term,
.csa-price-card__summary,
.csa-price-card__trial {
    margin: 0;
}

.csa-price-card__rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-block-start: 2px;
}

.csa-price-card__name {
    color: var(--csa-color-ink);
    font-size: clamp(21px, 1.9vw, 28px);
    font-weight: 820;
    letter-spacing: 0;
    line-height: var(--csa-leading-normal);
}

.csa-price-card__price {
    color: var(--csa-color-ink);
    font-size: clamp(42px, 4.6vw, 64px);
    font-weight: 820;
    letter-spacing: 0;
    line-height: 0.95;
}

.csa-price-card__slash {
    color: #b5c0cf;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 680;
    line-height: 1;
}

.csa-price-card__term {
    color: var(--csa-color-blue-strong);
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 820;
    line-height: 1;
}

.csa-price-card__summary {
    color: #5f6d83;
    font-size: 16px;
    font-weight: 560;
    line-height: var(--csa-leading-relaxed);
    text-wrap: pretty;
}

.csa-price-card__features {
    display: grid;
    gap: 11px;
    margin: 2px 0 0;
    padding: 18px 0 0;
    border-block-start: 1px solid rgb(231 237 245 / 0.95);
    list-style: none;
}

.csa-price-card__features li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    color: #475569;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
}

.csa-price-card__features li::before {
    content: "";
    inline-size: 18px;
    block-size: 18px;
    margin-block-start: 2px;
    background:
        linear-gradient(180deg, #27b981 0%, var(--csa-color-success) 100%);
    clip-path: polygon(14% 54%, 36% 76%, 86% 22%, 95% 31%, 36% 91%, 5% 62%);
}

.csa-price-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 46px;
    margin-block-start: auto;
    padding: 12px 16px;
    background: var(--csa-color-blue);
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 14px 24px rgb(47 128 237 / 0.2);
    color: var(--csa-color-canvas);
    font-size: var(--csa-font-size-sm);
    font-weight: 820;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--csa-duration) var(--csa-ease),
        border-color var(--csa-duration) var(--csa-ease),
        color var(--csa-duration) var(--csa-ease),
        box-shadow var(--csa-duration) var(--csa-ease);
}

.csa-price-card__button:visited {
    color: var(--csa-color-canvas);
}

.csa-price-card__button:hover {
    background: var(--csa-color-blue-strong);
    border-color: var(--csa-color-blue-strong);
    box-shadow: 0 14px 24px rgb(31 111 224 / 0.26);
    color: var(--csa-color-canvas);
}

.csa-price-card__trial {
    color: #6d7b91;
    font-size: var(--csa-font-size-xs);
    font-weight: 760;
    line-height: 1.35;
    text-align: center;
}

.csa-testimonials {
    padding-block: clamp(76px, 8vw, 116px);
    background: var(--csa-bg-section-soft);
    border-block-start: 1px solid rgb(231 237 245 / 0.9);
}

.csa-testimonials__header {
    display: grid;
    gap: 14px;
    justify-items: center;
    max-inline-size: 760px;
    margin-inline: auto;
    margin-block-end: clamp(34px, 5vw, 56px);
    text-align: center;
}

.csa-testimonials__title {
    margin: 0;
    color: var(--csa-color-ink);
    font-size: var(--csa-font-size-h2);
    font-weight: 780;
    letter-spacing: 0;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-testimonials__grid {
    display: grid;
    gap: clamp(22px, 3vw, 32px);
    max-inline-size: 1040px;
    margin-inline: auto;
}

.csa-testimonial-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-areas:
        "quote"
        "person";
    gap: clamp(24px, 4vw, 34px);
    align-content: start;
    min-block-size: 100%;
    padding: clamp(30px, 5vw, 56px);
    background: #ffffff;
    border: 1px solid rgb(213 225 240 / 0.95);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgb(28 62 111 / 0.055);
}

.csa-testimonial-card::before {
    content: none;
}

.csa-testimonial-card--featured {
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-color: rgb(199 216 235 / 0.98);
}

.csa-testimonial-card__quote {
    grid-area: quote;
    position: relative;
    z-index: 1;
    margin: 0;
    max-inline-size: 76ch;
    padding: 0;
    color: #435066;
    font-size: clamp(16px, 1.2vw, 16px);
    font-style: normal;
    font-weight: 520;
    line-height: 1.74;
    text-wrap: pretty;
}

.csa-testimonial-card__quote::before {
    content: open-quote;
}

.csa-testimonial-card__quote::after {
    content: close-quote;
}

.csa-testimonial-card__person {
    grid-area: person;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 0;
    padding: 0;
    text-align: center;
}

.csa-testimonial-card__avatar {
    display: block;
    overflow: hidden;
    inline-size: 132px;
    block-size: 132px;
    margin-block-end: 8px;
    background: #eef6ff;
    border: 3px solid var(--csa-color-canvas);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgb(213 231 251 / 0.98),
        0 12px 22px rgb(28 62 111 / 0.12);
}

.csa-testimonial-card__avatar img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.csa-testimonial-card__name,
.csa-testimonial-card__company {
    display: block;
}

.csa-testimonial-card__name {
    color: var(--csa-color-ink);
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 820;
    line-height: 1.18;
}

.csa-testimonial-card__company {
    color: #65748a;
    font-size: var(--csa-font-size-sm);
    font-weight: 720;
    line-height: 1.35;
}

@media (width >= 920px) {
    .csa-testimonial-card {
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-areas:
            "person quote";
        gap: clamp(36px, 5vw, 64px);
        align-items: center;
    }

    .csa-testimonial-card__person {
        padding-inline-end: clamp(26px, 3vw, 42px);
        border-inline-end: 1px solid rgb(231 237 245 / 0.95);
    }

    .csa-testimonial-card__avatar {
        inline-size: 156px;
        block-size: 156px;
    }
}

.csa-about {
    padding-block: clamp(78px, 9vw, 128px);
    background: var(--csa-color-canvas);
    border-block-start: 1px solid rgb(231 237 245 / 0.9);
}

.csa-about__header {
    display: grid;
    gap: 16px;
    justify-items: center;
    max-inline-size: 840px;
    margin-inline: auto;
    margin-block-end: clamp(44px, 6vw, 76px);
    text-align: center;
}

.csa-about__title {
    margin: 0;
    color: var(--csa-color-ink);
    font-size: var(--csa-font-size-h2);
    font-weight: 780;
    letter-spacing: 0;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-about__description {
    max-inline-size: 720px;
    margin: 0;
    color: #5f6d83;
    font-size: var(--csa-font-size-lead);
    font-weight: 520;
    line-height: var(--csa-leading-relaxed);
    text-wrap: balance;
}

.csa-about__layout {
    display: grid;
    gap: clamp(36px, 6vw, 76px);
    align-items: center;
}

.csa-about__content {
    max-inline-size: 760px;
}

.csa-about__content h3 {
    margin: 0 0 22px;
    color: var(--csa-color-ink);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 780;
    letter-spacing: -0.06em;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-about__content p {
    margin: 0;
    color: #536176;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 520;
    line-height: 1.78;
}

.csa-about__content p + p {
    margin-block-start: 18px;
}

.csa-about__media {
    position: relative;
    inline-size: min(100%, 420px);
    margin: 0;
    justify-self: center;
}

.csa-about__media::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: 0;
    background: var(--csa-gradient-aqua-mint);
    border-radius: 22px;
    opacity: 0.22;
}

.csa-about__media img {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid rgb(213 225 240 / 0.95);
    border-radius: 22px;
    box-shadow: 0 24px 48px rgb(28 62 111 / 0.12);
}

@media (width >= 920px) {
    .csa-about__layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    }

    .csa-about__content h3 span {
        display: block;
    }
}

@media (width < 720px) {
    .csa-about__header {
        justify-items: start;
        text-align: left;
    }

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

    .csa-about__media::before {
        inset: 12px -10px -10px 12px;
        border-radius: 18px;
    }

    .csa-about__media img {
        border-radius: 18px;
    }
}

.csa-404 {
    display: grid;
    align-items: center;
    min-block-size: calc(100vh - 72px);
    padding-block: var(--csa-space-3xl);
    background:
        linear-gradient(180deg, #ffffff 0%, rgb(235 244 255 / 0.72) 52%, #f8fbff 100%);
}

.csa-404__layout {
    display: grid;
    align-items: center;
    gap: var(--csa-space-2xl);
}

.csa-404__content {
    display: grid;
    gap: 20px;
    max-inline-size: 680px;
}

.csa-404__code {
    color: var(--csa-color-blue);
    font-size: 64px;
    font-weight: 860;
    letter-spacing: 0;
    line-height: 0.92;
}

.csa-404__title {
    max-inline-size: 12ch;
    margin: 0;
    font-size: 44px;
    font-weight: 790;
    letter-spacing: 0;
    line-height: var(--csa-leading-tight);
    text-wrap: balance;
}

.csa-404__description {
    max-inline-size: 56ch;
    color: #536176;
    font-size: var(--csa-font-size-lead);
    font-weight: 520;
    line-height: var(--csa-leading-relaxed);
    text-wrap: pretty;
}

.csa-404__actions,
.csa-404__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.csa-404__links {
    max-inline-size: 560px;
    padding-block-start: 18px;
    border-block-start: 1px solid rgb(213 225 240 / 0.95);
}

.csa-404__links a {
    color: var(--csa-color-muted);
    font-size: var(--csa-font-size-sm);
    font-weight: 780;
    line-height: 1.2;
    text-decoration: none;
}

.csa-404__links a:hover {
    color: var(--csa-color-blue-strong);
}

.csa-404__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    padding: 14px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(239 248 255 / 0.86));
    border: 1px solid #d5e7fb;
    border-radius: 24px;
    box-shadow: 0 28px 54px rgb(28 62 111 / 0.14);
}

.csa-404__media img {
    inline-size: 100%;
    border-radius: 16px;
}

.csa-404__media figcaption {
    position: absolute;
    inset-inline: 26px;
    inset-block-end: 26px;
    padding: 10px 14px;
    background: rgb(255 255 255 / 0.9);
    border: 1px solid rgb(213 225 240 / 0.86);
    border-radius: 10px;
    box-shadow: 0 14px 24px rgb(28 62 111 / 0.12);
    color: var(--csa-color-ink);
    font-size: var(--csa-font-size-sm);
    font-weight: 820;
    line-height: 1.3;
}

@media (width >= 760px) {
    .csa-404__code {
        font-size: 96px;
    }

    .csa-404__title {
        font-size: 64px;
    }
}

@media (width >= 980px) {
    .csa-404__layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
    }
}

@media (width < 640px) {
    .csa-404__actions .csa-button {
        inline-size: 100%;
    }

    .csa-404__media {
        padding: 10px;
        border-radius: 18px;
    }

    .csa-404__media img {
        border-radius: 12px;
    }

    .csa-404__media figcaption {
        position: static;
        margin-block-start: 10px;
    }
}