/* Product meaning and reading comfort take priority over decorative microtype. */
body {
    font-size: 18px
}

.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #b99dc71a;
    font-size: 15px;
    line-height: 1.8;
    color: #cbb9de
}

.footer-legal>a {
    padding: 6px 3px;
    transition: color .2s
}

.footer-legal>a:hover {
    color: #f1e8ff
}

.footer-legal>a:focus-visible {
    outline: 2px solid #b4a0f7;
    outline-offset: 4px;
    border-radius: 3px
}

.footer-legal>span {
    width: 1px;
    height: 15px;
    background: #b99dc738
}

.balance-row {
    grid-template-columns: 1.1fr .9fr
}

.balance-row strong {
    white-space: nowrap;
    font-size: clamp(26px, 2.4vw, 36px)
}

@media(max-width:560px) {
    .balance-row {
        grid-template-columns: 1fr
    }
}

.desktop-nav a,
.login-link,
.nav-cta {
    font-size: 16px
}

.desktop-nav {
    gap: 25px
}

.nav-cta {
    height: 46px
}

.brand-suffix {
    font-size: 11px
}

.language-btn {
    font-size: 14px
}

.nav-actions {
    gap: 14px
}

.hero .eyebrow {
    font-size: 16px;
    letter-spacing: .015em;
    color: #dfd7eb;
    line-height: 1.7
}

.eyebrow b {
    font-weight: 500
}

.hero .art-kicker {
    font-size: 22px;
    margin: 20px 0 25px;
    color: #ac9fc4
}

.hero .hero-lead {
    max-width: 560px;
    font-size: 18px;
    line-height: 1.65;
    color: #ded6e9;
    border-left: 2px solid #b1e3d588;
    padding-left: 18px;
    background: linear-gradient(90deg, #08091880, transparent)
}

.hero-service {
    display: grid;
    /* grid-template-columns: 125px 1fr; */
    gap: 10px;
    margin: 12px 0
}

.hero-service strong {
    font-size: 19px;
    font-weight: 600;
    color: #f5edf9
}

.hero-service>span {
    color: #d5cbdf;
    font-size: 18px
}

.hero-actions .button,
.hero-actions .text-link,
.button,
.product-link {
    font-size: 17px
}

.button {
    min-width: 215px;
    height: 58px
}

.hero-tags span {
    font-size: 12px;
    color: #b3a5c5
}

.hero-tags b {
    font-size: 12px
}

.hero .hero-shell {
    min-height: 735px
}

.hero-art::after {
    background: linear-gradient(90deg, #080918 0%, #080918bf 15%, #08091833 37%, transparent 51%), linear-gradient(0deg, #080918 0%, transparent 23%)
}

.float-product {
    min-width: 255px;
    padding: 18px 20px
}

.float-product small {
    font-size: 12px;
    color: #c5bad5;
    letter-spacing: .025em
}

.float-product b {
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px
}

.float-product>i {
    font-size: 17px
}

.float-icon {
    font-size: 30px
}

.art-caption {
    font-size: 11px;
    line-height: 1.8;
    color: #b0a5c1
}

.hero-bottom {
    font-size: 13px
}

.hero-bottom p {
    font-size: 14px
}

.motion-toggle {
    font-size: 12px;
    padding: 8px 12px
}

.motion-toggle-icon {
    font-size: 13px
}

.section-index {
    font-size: 14px;
    letter-spacing: .06em;
    color: #b9a8cd
}

.editorial-script {
    font-size: 48px
}

.statement-aside {
    font-size: 13px;
    color: #cabbdd
}

.product-copy .product-no {
    font-size: 22px;
    font-weight: 600;
    color: #bce6dd;
    letter-spacing: -.02em;
    margin-bottom: 24px
}

.product-ai .product-no {
    color: #d6b6f6
}

.product-browser .product-no {
    color: #cbc2f4
}

.product-copy h2 {
    font-size: clamp(29px, 2.75vw, 40px);
    line-height: 1.45;
    font-weight: 500
}

.product-copy h2 em {
    font-size: clamp(37px, 3.6vw, 54px);
    line-height: 1.4;
    letter-spacing: -.055em
}

.product-copy>p:not(.product-no) {
    font-size: 19px;
    line-height: 1.85;
    color: #d0c4dd;
    max-width: 500px
}

.product-copy li b {
    font-size: 17px;
    color: #ddd1e8;
    line-height: 1.7
}

.product-copy li span {
    font-size: 15px
}

.product-copy li {
    padding: 11px 0;
    gap: 15px
}

.product-link {
    gap: 23px;
    color: #f0e4fb
}

.statement-copy p,
.browser-intro p,
.security-copy>p:not(.section-index) {
    font-size: 20px;
    line-height: 1.85;
    color: #d2c6dd;
    max-width: 720px
}

.statement-copy h2,
.section-head h2,
.security-copy h2,
.cta h2 {
    font-size: clamp(27px, 2.6vw, 38px);
    line-height: 1.5
}

.statement-copy h2 em,
.section-head h2 em,
.security-copy h2 em {
    font-size: clamp(35px, 3.7vw, 56px);
    line-height: 1.4;
    letter-spacing: -.04em
}

.browser-copy-row {
    grid-template-columns: 1fr .65fr;
    gap: 7vw
}

.browser-overlay small {
    font-size: 17px
}

.browser-overlay b {
    font-size: 20px
}

.browser-chrome b,
.browser-chrome em {
    font-size: 12px
}

.flow-line small {
    font-size: 13px;
    color: #b7a5cb;
    letter-spacing: .05em
}

.flow-line article>span {
    font-size: 29px
}

.flow-line h3 {
    font-size: 25px;
    line-height: 1.5;
    margin-top: 28px
}

.flow-line p {
    font-size: 18px;
    line-height: 1.85;
    color: #cbbbdb;
    max-width: 360px
}

.flow-line article {
    min-height: 280px
}

.security-list i {
    font-size: 18px;
    line-height: 1.7;
    color: #d9cbe4
}

.security-list b {
    font-size: 19px
}

.security-orbit>b {
    font-size: 12px;
    letter-spacing: .08em
}

.cta-action p {
    font-size: 20px;
    line-height: 1.8;
    color: #d4c6e1;
    max-width: 460px
}

.cta-inner>div>p:first-child {
    font-size: 14px
}

.footer-main>div>p {
    font-size: 17px;
    line-height: 1.85;
    max-width: 410px;
    color: #c0afcf
}

.footer-links b {
    font-size: 14px;
    color: #ab95bd
}

.footer-links a {
    font-size: 17px;
    color: #d5c7e2
}

.footer-bottom {
    font-size: 12px;
    letter-spacing: 0;
    gap: 20px
}

.footer-bottom button {
    font-size: 14px
}

.footer-links {
    gap: 36px
}

html:lang(en) .hero-service {
    /* grid-template-columns: 155px 1fr */
}

html:lang(en) .hero-service strong {
    font-size: 17px
}

html:lang(en) .hero-service>span {
    font-size: 17px
}

html:lang(en) .product-copy h2,
html:lang(en) .statement-copy h2,
html:lang(en) .section-head h2,
html:lang(en) .security-copy h2,
html:lang(en) .cta h2 {
    font-size: clamp(26px, 2.4vw, 34px)
}

html:lang(en) .product-copy h2 em {
    font-size: clamp(43px, 4.1vw, 60px)
}

@media(max-width:1180px) {
    .desktop-nav {
        gap: 18px;
        margin-right: 20px
    }

    .desktop-nav a,
    .login-link,
    .nav-cta {
        font-size: 14px
    }

    .brand-suffix {
        display: none
    }

    .hero .hero-lead {
        font-size: 18px
    }

    .hero-service {
        grid-template-columns: 105px 1fr;
        gap: 8px
    }

    .hero-service strong {
        font-size: 18px
    }

    .hero-service>span {
        font-size: 18px
    }

    .float-product {
        min-width: 225px;
        padding: 16px
    }

    .float-product b {
        font-size: 18px
    }

    .float-product small {
        font-size: 11px
    }

    .product-copy .product-no {
        font-size: 20px
    }

    .product-copy h2 {
        font-size: 29px
    }

    .product-copy h2 em {
        font-size: 42px
    }

    .product-copy>p:not(.product-no) {
        font-size: 18px
    }

    .product-copy li b {
        font-size: 16px
    }

    .statement-copy p,
    .browser-intro p,
    .security-copy>p:not(.section-index) {
        font-size: 18px
    }

    .browser-copy-row {
        grid-template-columns: 1fr .7fr;
        gap: 5vw
    }

    .flow-line article {
        padding-right: 20px
    }

    .flow-line article:not(:first-child) {
        padding-left: 20px
    }

    .flow-line h3 {
        font-size: 22px
    }

    .flow-line p {
        font-size: 17px
    }

    html:lang(en) .hero-service {
        /* grid-template-columns: 125px 1fr */
    }

    html:lang(en) .hero-service strong,
    html:lang(en) .hero-service>span {
        font-size: 16px
    }
}

@media(max-width:820px) {
    .hero .hero-shell {
        min-height: auto
    }

    .hero-copy {
        max-width: 650px
    }

    .hero .hero-lead {
        max-width: 570px
    }

    .hero-service {
        grid-template-columns: 120px 1fr
    }

    .hero-art {
        inset: 440px -30% 30px -10%
    }

    .product-copy h2 {
        font-size: 34px
    }

    .product-copy h2 em {
        font-size: 50px
    }

    .product-copy>p:not(.product-no) {
        font-size: 19px;
        max-width: 600px
    }

    .product-copy li b {
        font-size: 18px
    }

    .browser-copy-row {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .browser-intro p {
        max-width: 600px
    }

    .statement-copy p,
    .security-copy>p:not(.section-index) {
        font-size: 19px
    }

    .desktop-nav {
        display: none
    }

    .hero .eyebrow {
        font-size: 15px
    }

    .hero-bottom p {
        font-size: 12px
    }

    .cta-action p {
        font-size: 19px
    }

    .footer-main {
        gap: 45px
    }
}

@media(max-width:560px) {
    body {
        font-size: 16px
    }

    .nav-shell {
        height: 72px
    }

    .login-link,
    .language-btn {
        font-size: 13px
    }

    .brand-word {
        font-size: 19px
    }

    .nav-actions {
        gap: 9px
    }

    .hero .eyebrow {
        font-size: 13px;
        line-height: 1.7;
        letter-spacing: 0
    }

    .hero .art-kicker {
        font-size: 20px;
        margin: 20px 0 24px
    }

    .hero .hero-lead {
        font-size: 16px;
        line-height: 1.65;
        padding-left: 13px;
        max-width: 100%;
        background: #08091833
    }

    .hero-service {
        display: block;
        margin: 14px 0
    }

    .hero-service strong {
        display: block;
        font-size: 17px;
        line-height: 1.7
    }

    .hero-service>span {
        display: block;
        font-size: 16px;
        line-height: 1.6
    }

    .hero-actions {
        gap: 20px;
        margin-top: 24px
    }

    .hero-actions .button,
    .hero-actions .text-link,
    .button {
        font-size: 15px
    }

    .button {
        min-width: 185px;
        height: 55px
    }

    .hero-tags span,
    .hero-tags b {
        font-size: 11px
    }

    .hero-tags {
        gap: 20px
    }

    .hero-art {
        inset: 530px -36% 8px -21%
    }

    .float-product {
        min-width: 210px;
        padding: 14px 16px
    }

    .float-product b {
        font-size: 17px
    }

    .float-product small {
        font-size: 11px
    }

    .float-product>i {
        font-size: 14px
    }

    .float-icon {
        font-size: 25px
    }

    .floating-products {
        height: 390px;
        margin-top: 38px
    }

    .hero-bottom {
        font-size: 12px;
        height: 67px
    }

    .motion-toggle {
        font-size: 11px
    }

    .hero-bottom>span {
        font-size: 12px
    }

    .hero-bottom p {
        display: none
    }

    .section-index {
        font-size: 12px
    }

    .editorial-script {
        font-size: 30px
    }

    .product-copy .product-no {
        font-size: 20px;
        line-height: 1.7;
        margin-bottom: 18px
    }

    .product-copy h2 {
        font-size: 26px;
        line-height: 1.5
    }

    .product-copy h2 em {
        font-size: 34px;
        line-height: 1.5;
        margin-top: 8px
    }

    .product-copy>p:not(.product-no) {
        font-size: 16px;
        line-height: 1.85;
        margin-top: 23px
    }

    .product-copy li b {
        font-size: 16px;
        line-height: 1.75
    }

    .product-copy li span {
        font-size: 14px
    }

    .product-link {
        font-size: 16px
    }

    .statement-copy h2,
    .section-head h2,
    .security-copy h2,
    .cta h2 {
        font-size: 25px;
        line-height: 1.6
    }

    .statement-copy h2 em,
    .section-head h2 em,
    .security-copy h2 em {
        font-size: 32px;
        line-height: 1.5
    }

    .statement-copy p,
    .browser-intro p,
    .security-copy>p:not(.section-index) {
        font-size: 16px;
        line-height: 1.85
    }

    .browser-chrome b {
        font-size: 10px
    }

    .browser-overlay small {
        font-size: 12px
    }

    .browser-overlay b {
        font-size: 18px
    }

    .browser-overlay span {
        padding: 13px 7px;
        gap: 5px
    }

    .flow-line small {
        font-size: 12px
    }

    .flow-line h3 {
        font-size: 23px;
        margin-top: 20px
    }

    .flow-line p {
        font-size: 16px;
        line-height: 1.85
    }

    .flow-line article,
    .flow-line article:not(:first-child) {
        padding: 28px 0;
        min-height: 215px
    }

    .security-list i {
        font-size: 16px
    }

    .security-orbit>b {
        font-size: 10px
    }

    .cta-action p {
        font-size: 17px
    }

    .cta-inner>div>p:first-child {
        font-size: 12px
    }

    .footer-main>div>p {
        font-size: 16px
    }

    .footer-links b {
        font-size: 13px
    }

    .footer-links a {
        font-size: 16px
    }

    .footer-bottom {
        font-size: 11px;
        line-height: 1.7
    }

    .footer-bottom button {
        font-size: 13px
    }

    html:lang(en) .hero-service {
        display: block
    }

    html:lang(en) .hero-service strong {
        font-size: 17px
    }

    html:lang(en) .hero-service>span {
        font-size: 16px
    }

    html:lang(en) .product-copy h2,
    html:lang(en) .statement-copy h2,
    html:lang(en) .section-head h2,
    html:lang(en) .security-copy h2,
    html:lang(en) .cta h2 {
        font-size: 25px
    }

    html:lang(en) .product-copy h2 em {
        font-size: 40px
    }
}