:root {
    --ink: #101728;
    --muted: #637088;
    --blue: #3769ff;
    --blue-hover: #2554e5;
    --navy: #090f20;
    --surface: #f4f6fa;
    --line: #dfe5ee;
    --lime: #d4fa83;
    --white: #fff;
    --radius: 20px;
    --container-width: min(1320px, calc(100% - 80px))
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased
}

body.modal-open {
    overflow: hidden
}

button, input {
    font: inherit
}

button, summary {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

button, a, summary {
    touch-action: manipulation
}

button {
    color: inherit
}

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid #7198ff;
    outline-offset: 5px
}

h1, h2, h3, p {
    margin-top: 0
}

h1, h2, h3 {
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.045em
}

h1 {
    font-size: clamp(42px, 5.1vw, 74px)
}

h2 {
    font-size: clamp(34px, 3.65vw, 52px);
    margin-bottom: 22px
}

h3 {
    font-size: 25px
}

em {
    font-style: normal;
    color: var(--blue)
}

.container {
    width: var(--container-width);
    margin-inline: auto
}

.section {
    padding-block: 108px
}

.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.btn {
    min-height: 54px;
    padding: 15px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--blue);
    color: white;
    font-size: 15px;
    font-weight: 650;
    border: 1px solid transparent;
    border-radius: 9px;
    transition: background .2s, transform .2s, box-shadow .2s;
    line-height: 1.45;
    text-align: center
}

.btn:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 9px 25px #3469ff30
}

.btn-small {
    min-height: 43px;
    padding: 11px 18px;
    font-size: 14px
}

.btn-ghost {
    background: transparent;
    border-color: #ffffff35;
    color: #e3eaff
}

.btn-ghost:hover {
    background: #ffffff0c;
    border-color: #ffffff60;
    box-shadow: none
}

.btn-light {
    background: #fff;
    color: var(--ink)
}

.btn-light:hover {
    background: #e9f0ff
}

.btn-dark {
    background: var(--ink)
}

.btn-dark:hover {
    background: #263451
}

.text-link {
    font-size: 15px;
    font-weight: 650;
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: #9bb6ff;
    text-underline-offset: 6px
}

.text-link:hover {
    text-decoration-color: var(--blue)
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    color: #566782;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.5px
}

.eyebrow > span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--blue)
}

.tint {
    background: var(--surface)
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 48px
}

.section-head h2 {
    margin: 0
}

.section-head > p {
    max-width: 380px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
    margin: 0
}

.section-head .eyebrow {
    margin-bottom: 19px
}

.reading-progress {
    height: 2px;
    background: var(--blue);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 0;
    pointer-events: none
}

.header {
    position: sticky;
    top: 0;
    background: #fffefefa;
    backdrop-filter: blur(20px);
    z-index: 40;
    border-bottom: 1px solid #e4e9f2
}

.nav {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px
}

.brand {
    display: inline-flex;
    align-items: center;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1.1px;
    white-space: nowrap;
    line-height: 1
}

.brand-symbol {
    background: var(--blue);
    color: white;
    width: 35px;
    height: 37px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 26px;
    letter-spacing: -4px;
    padding-right: 4px;
    margin-right: 10px;
    transform: skew(-5deg)
}

.brand-period {
    color: var(--blue);
    font-size: 32px;
    margin-left: 1px
}

.brand-last {
    font-weight: 500
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 14px;
    font-weight: 550
}

.desktop-nav > a:hover {
    color: var(--blue)
}

.nav-end {
    display: flex;
    align-items: center;
    gap: 24px
}

.language {
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    border: 1px solid #e1e6ef;
    padding: 3px 8px;
    border-radius: 5px
}

.nav-dropdown summary {
    display: flex;
    gap: 9px;
    align-items: center;
    list-style: none
}

.nav-dropdown summary::-webkit-details-marker {
    display: none
}

.nav-dropdown[open] summary {
    color: var(--blue)
}

.mega {
    position: absolute;
    left: 50%;
    top: 81px;
    transform: translateX(-50%);
    width: min(1000px, calc(100% - 60px));
    background: white;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    padding: 28px;
    box-shadow: 0 30px 60px #08153120
}

.mega-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
    margin-bottom: 16px;
    font-size: 15px
}

.mega-heading > a {
    color: var(--blue);
    font-size: 14px
}

.mega-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px
}

.mega-grid > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 12px;
    border-radius: 8px;
    color: #334766;
    font-size: 14px
}

.mega-grid > a:hover {
    background: #edf3ff;
    color: var(--blue)
}

.mega-grid .icon {
    color: var(--blue);
    width: 21px;
    height: 21px
}

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    padding: 10px
}

.menu-toggle > span {
    display: block;
    height: 2px;
    width: 18px;
    background: var(--ink);
    margin: 4px 0
}

.mobile-menu {
    background: white;
    max-height: calc(100dvh - 74px);
    overflow: auto;
    border-top: 1px solid var(--line);
    padding: 14px 24px 24px
}

.mobile-menu > a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f6;
    font-size: 15px
}

.mobile-menu .icon {
    width: 20px;
    height: 20px;
    color: var(--blue)
}

[hidden] {
    display: none !important
}

.hero {
    background: var(--navy);
    color: #fff;
    overflow: hidden;
    position: relative
}

.hero:before {
    content: '';
    position: absolute;
    width: 700px;
    height: 600px;
    right: -130px;
    top: -70px;
    background: radial-gradient(ellipse, #244bce32, transparent 70%);
    pointer-events: none
}

.hero-top {
    padding-block: 85px 100px;
    display: grid;
    grid-template-columns:1fr 1.15fr;
    align-items: center;
    gap: 55px;
    position: relative
}

.hero-copy {
    position: relative;
    z-index: 2
}

.hero .eyebrow {
    color: #a8b9db;
    font-size: 11px;
    letter-spacing: 1.4px
}

.hero .eyebrow > span {
    background: #8badff
}

.hero h1 {
    font-size: clamp(46px, 4.75vw, 69px);
    line-height: 1.065;
    letter-spacing: -.045em;
    margin: 0 0 27px
}

.hero h1 em {
    color: #91adff
}

.hero-copy > p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.8;
    color: #aebbd2;
    max-width: 510px;
    margin-bottom: 30px
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.hero-notes {
    display: flex;
    gap: 22px;
    margin-top: 27px;
    color: #9dacca;
    font-size: 12px
}

.hero-notes > span {
    display: flex;
    align-items: center;
    gap: 7px
}

.hero-notes .icon {
    width: 17px;
    height: 17px;
    color: #7599ec
}

.hero-product {
    position: relative;
    min-width: 0;
    padding: 0 0 30px;
    margin-right: -70px;
    animation: enterProduct .85s ease both
}

.product-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 1.1px;
    color: #7893bb;
    padding: 0 0 13px
}

.product-label > span:last-child {
    color: #bdcce4;
    letter-spacing: 0;
    font-size: 12px
}

.hero-desktop {
    border: 1px solid #3a4e73;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 90px #0007;
    transform: perspective(1600px) rotateY(-5deg) rotateX(2deg)
}

.hero-desktop img {
    width: 100%;
    height: auto
}

.hero-phone {
    position: absolute;
    right: 38px;
    bottom: -48px;
    width: 162px;
    height: 321px;
    overflow: hidden;
    border: 6px solid #202d47;
    border-radius: 25px;
    box-shadow: 0 22px 45px #0006;
    background: #091222;
    transform: rotate(7deg)
}

.hero-phone img {
    width: 100%;
    height: auto
}

.hero-card {
    position: absolute;
    left: -22px;
    bottom: -9px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #465575;
    border-radius: 12px;
    background: #14223cf2;
    backdrop-filter: blur(15px);
    padding: 17px 22px;
    box-shadow: 0 15px 50px #0004;
    animation: enterProduct 1.1s ease both
}

.hero-card-icon {
    display: grid;
    place-items: center;
    background: #bce59a;
    color: #234c37;
    width: 39px;
    height: 39px;
    border-radius: 50%
}

.hero-card b {
    display: block;
    font-size: 13px;
    font-weight: 600
}

.hero-card div > span {
    display: block;
    font-size: 11px;
    color: #9aaccc;
    margin-top: 3px
}

.hero-bottom {
    border-top: 1px solid #ffffff16;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 24px;
    gap: 20px
}

.hero-bottom > span {
    font-size: 10px;
    letter-spacing: 1.3px;
    color: #7890b1
}

.hero-bottom > div {
    display: flex;
    gap: 27px;
    align-items: center;
    font-size: 14px;
    color: #c4d0e6
}

.hero-bottom i {
    color: #344665;
    font-style: normal
}

.hero-bottom a:hover {
    color: white
}

.screen-button {
    border: 0;
    background: #0b1427;
    display: block;
    padding: 0;
    width: 100%;
    position: relative;
    cursor: zoom-in;
    overflow: hidden
}

.screen-button > img {
    width: 100%;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1)
}

.screen-button:hover > img {
    transform: scale(1.015)
}

.zoom-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: #f7faffef;
    color: #243955;
    border: 1px solid #ccd8ec;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    font-size: 12px;
    border-radius: 7px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s, transform .2s
}

.screen-button:hover .zoom-badge, .screen-button:focus-visible .zoom-badge {
    opacity: 1;
    transform: none
}

.zoom-badge .icon {
    width: 15px;
    height: 15px
}

.hero-desktop .zoom-badge {
    display: none
}

.owner-bento {
    display: grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap: 20px
}

.bento {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: transform .25s, border-color .25s
}

.bento:hover {
    transform: translateY(-5px);
    border-color: #97b1ef
}

.bento-kicker {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #7d8ba1;
    font-weight: 600
}

.bento h3 {
    margin: 38px 0 18px;
    font-size: 29px;
    line-height: 1.18;
    letter-spacing: -1px
}

.bento p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75
}

.bento > .icon {
    position: absolute;
    right: 27px;
    top: 29px;
    color: var(--blue);
    width: 24px;
    height: 24px
}

.bento-blue {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.bento-blue .bento-kicker {
    color: #b6cdff
}

.bento-blue h3 {
    font-size: 34px;
    margin-top: 30px
}

.bento-blue p {
    color: #dce7ff;
    max-width: 370px
}

.card-link {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e3e8f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 650
}

.card-link > span {
    font-size: 24px;
    font-weight: 350;
    color: var(--blue);
    line-height: 1
}

.bento-blue .card-link {
    border-color: #ffffff30
}

.bento-blue .card-link > span {
    color: white
}

.bento-equation {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    font-size: 12px;
    margin: 9px 0 28px
}

.bento-equation > span {
    padding: 5px 9px;
    background: #ffffff13;
    border: 1px solid #ffffff25;
    border-radius: 5px
}

.bento-equation > b {
    font-weight: 400;
    color: #b0c7ff
}

.bento-equation strong {
    background: var(--lime);
    color: #193221;
    padding: 5px 9px;
    border-radius: 5px
}

.journey {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 55px
}

.journey > a {
    position: relative;
    border-top: 1px solid #c7d2e4;
    padding: 27px 0 0;
    transition: border-color .2s
}

.journey > a:hover {
    border-color: var(--blue)
}

.journey > a > span {
    position: absolute;
    right: 0;
    top: 25px;
    font-size: 12px;
    color: #8e9ab0
}

.journey .icon {
    color: var(--blue);
    width: 29px;
    height: 29px;
    margin-bottom: 22px
}

.journey h3 {
    font-size: 21px;
    margin-bottom: 12px
}

.journey p {
    font-size: 15px;
    color: var(--muted);
    margin: 0;
    max-width: 240px
}

.split-panel {
    border: 1px solid #d7dfed;
    border-radius: 20px;
    background: #fff;
    display: grid;
    grid-template-columns:1fr 1.1fr;
    gap: 60px;
    padding: 50px
}

.split-panel h3 {
    font-size: 42px;
    margin-bottom: 25px
}

.split-panel > div > p:not(.eyebrow) {
    font-size: 16px;
    color: var(--muted);
    max-width: 430px
}

.booking-flow {
    background: #f3f6fc;
    border: 1px solid #dfe7f6;
    border-radius: 14px;
    padding: 30px;
    align-self: center
}

.visual-caption {
    font-size: 11px;
    letter-spacing: 1.3px;
    font-weight: 650;
    color: #73839d;
    display: block
}

.booking-flow > div {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #d9e3f2;
    border-radius: 9px;
    padding: 18px;
    margin-top: 15px;
    box-shadow: 0 4px 6px #27436604
}

.booking-flow > div > span {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #edf3ff;
    color: var(--blue);
    border-radius: 50%;
    font-size: 12px
}

.booking-flow p {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.7
}

.booking-flow b {
    font-size: 14px;
    font-weight: 600;
    color: #273a56;
    display: block
}

.booking-flow .icon {
    margin-left: auto;
    width: 20px;
    height: 20px;
    color: #91a8d3
}

.booking-flow > a {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: var(--blue);
    margin: 20px 0 0;
    text-decoration: underline;
    text-underline-offset: 4px
}

.showcase-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px
}

.showcase-heading .section-head {
    margin-bottom: 0
}

.showcase-heading > .text-link {
    margin-bottom: 5px;
    white-space: nowrap
}

.product-tabs {
    margin: 35px 0 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px;
    background: #edf1f8;
    border-radius: 12px 12px 0 0;
    border: 1px solid #d9e1ef;
    border-bottom: 0
}

.product-tabs button {
    padding: 12px 25px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    color: #6a7990
}

.product-tabs button[aria-selected=true] {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 3px 7px #283f6610;
    font-weight: 650
}

.product-stage {
    border: 1px solid #d9e1ef;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background: #fff
}

.stage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 25px 35px
}

.stage-top h3 {
    font-size: 20px;
    margin: 0 0 7px;
    letter-spacing: -.5px
}

.stage-top p {
    font-size: 14px;
    color: var(--muted);
    margin: 0
}

.stage-top > a {
    font-size: 13px;
    color: var(--blue);
    white-space: nowrap;
    font-weight: 600
}

.stage-screen {
    padding: 24px 24px 0;
    background: #e4ebf8
}

.stage-screen > img {
    width: 100%;
    height: 540px;
    object-fit: contain;
    object-position: top;
    background: #091326;
    border-radius: 8px 8px 0 0
}

.stage-screen.changing > img {
    animation: screenFade .35s ease
}

.money-section {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden
}

.money-layout {
    display: grid;
    grid-template-columns:1.1fr .85fr;
    gap: 120px;
    align-items: center
}

.money-section .eyebrow {
    color: #8fa5c9
}

.money-section h2 {
    font-size: clamp(36px, 3.4vw, 49px);
    line-height: 1.18
}

.money-section em {
    color: var(--lime)
}

.money-section p {
    color: #9baecb;
    font-size: 16px;
    max-width: 520px
}

.money-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    margin-top: 30px
}

.money-links > a {
    border-bottom: 1px solid #3d526f;
    color: #cbd8ed;
    font-size: 14px
}

.money-links > a:hover {
    color: var(--lime)
}

.money-example {
    padding: 34px;
    background: #fff;
    color: var(--ink);
    border-radius: 17px;
    box-shadow: 18px 18px 0 #ffffff09;
    transform: rotate(1deg)
}

.money-example > .visual-caption {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 13px
}

.money-example > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-size: 15px;
    gap: 20px
}

.money-example > div > span {
    color: var(--muted)
}

.money-example > div > b {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap
}

.money-example .money-total {
    background: var(--lime);
    border-radius: 10px;
    display: block;
    margin-top: 20px;
    padding: 20px 24px
}

.money-total > span {
    font-size: 13px !important;
    color: #35562b !important
}

.money-total > strong {
    display: block;
    line-height: 1.2;
    font-size: 68px;
    letter-spacing: -4px;
    color: #143022;
    margin-top: 7px;
    font-weight: 600
}

.money-total > strong > span {
    font-size: 37px;
    letter-spacing: -1px
}

.money-example > p {
    font-size: 12px;
    color: var(--muted);
    margin: 22px 0 0;
    line-height: 1.7
}

.feature-editorial {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 100px;
    align-items: center
}

.feature-editorial + .feature-editorial {
    margin-top: 110px;
    padding-top: 95px;
    border-top: 1px solid var(--line)
}

.feature-editorial.reverse .editorial-copy {
    order: 2
}

.editorial-copy > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8
}

.editorial-copy h2 {
    font-size: 43px;
    line-height: 1.15
}

.check-list {
    padding: 0;
    list-style: none;
    margin: 26px 0 30px
}

.check-list li {
    position: relative;
    padding: 12px 0 12px 27px;
    border-bottom: 1px solid #e4e9f1;
    color: #53617b;
    font-size: 14px
}

.check-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--blue);
    font-weight: 600
}

.editorial-image {
    border: 1px solid #d5dfef;
    border-radius: 18px;
    background: #eaf0fa;
    padding: 30px;
    overflow: hidden
}

.editorial-image .screen-button {
    border-radius: 11px;
    box-shadow: 0 15px 35px #0d1b3220
}

.editorial-image.narrow {
    padding: 30px 60px;
    height: 620px;
    position: relative
}

.editorial-image.narrow .screen-button {
    max-height: 580px
}

.editorial-image img {
    width: 100%;
    height: auto
}

.editorial-image.narrow img {
    object-position: top
}

.feature-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px
}

.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.feature-card:hover {
    border-color: #96b0ef;
    transform: translateY(-4px);
    box-shadow: 0 16px 26px #14356108
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--blue);
    background: #eef3ff;
    margin-bottom: 24px
}

.feature-card h3 {
    font-size: 22px;
    margin-bottom: 14px;
    letter-spacing: -.6px
}

.feature-card p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 25px
}

.feature-card .card-link {
    font-size: 13px
}

.remote-panel {
    background: #101b34;
    border: 1px solid #25375a;
    border-radius: 23px;
    display: grid;
    grid-template-columns:.85fr 1fr;
    gap: 90px;
    align-items: center;
    padding: 60px 70px 0;
    color: #fff;
    overflow: hidden;
    position: relative
}

.remote-panel > div:last-child {
    padding-bottom: 60px;
    position: relative
}

.remote-panel .eyebrow {
    color: #9cadcf
}

.remote-panel h2 {
    font-size: 46px;
    line-height: 1.14
}

.remote-panel em {
    color: #9ab7ff
}

.remote-panel p {
    color: #abbcd6;
    font-size: 16px
}

.remote-phone {
    border: 8px solid #42516b;
    max-width: 300px;
    border-radius: 34px 34px 0 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px #a4b3ce35, 0 20px 60px #0005;
    margin: auto;
    align-self: end;
    max-height: 570px;
    transform: rotate(-5deg) translateY(25px)
}

.remote-phone img {
    width: 100%
}

.remote-details {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px 20px;
    border-block: 1px solid #ffffff15;
    padding: 20px 0;
    margin: 25px 0;
    color: #c4d2e8;
    font-size: 14px
}

.start-section {
    padding-top: 0
}

.start-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 28px
}

.start-grid article {
    border-top: 1px solid #bdcbe0;
    padding-top: 23px
}

.start-grid article > span {
    display: block;
    font-size: 42px;
    letter-spacing: -2px;
    color: #b2bfda;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 27px
}

.start-grid h3 {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 13px;
    letter-spacing: -.5px
}

.start-grid p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75
}












.faq-section {
    display: grid;
    grid-template-columns:.85fr 1.15fr;
    gap: 95px;
    align-items: start
}

.faq-list details {
    padding: 22px 0;
    border-bottom: 1px solid var(--line)
}

.faq-list details:first-child {
    padding-top: 0
}

.faq-list summary {
    font-size: 17px;
    font-weight: 550;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    line-height: 1.55
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary > span {
    font-size: 24px;
    line-height: 1;
    color: var(--blue);
    font-weight: 300;
    transition: transform .2s
}

.faq-list details[open] summary > span {
    transform: rotate(45deg)
}

.faq-list details > p {
    margin: 18px 25px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85
}

.closing {
    background: var(--blue);
    border-radius: 20px;
    padding: 55px 55px;
    margin-bottom: 85px;
    color: #fff;
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between
}

.closing .eyebrow {
    color: #c6d8ff;
    margin-bottom: 20px;
    font-size: 11px
}

.closing h2 {
    font-size: 38px;
    line-height: 1.22;
    letter-spacing: -1.4px;
    margin-bottom: 20px
}

.closing h2 em {
    color: #bcd1ff
}

.closing p {
    font-size: 15px;
    color: #dae5ff;
    margin-bottom: 0
}

.closing > .btn {
    flex-shrink: 0;
    max-width: 240px
}

.footer {
    background: #090f20;
    color: #c4cede;
    padding: 65px 0 0
}

.footer .brand {
    color: white
}

.footer-grid {
    display: grid;
    grid-template-columns:1.15fr 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 55px
}

.footer-grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
}

.footer-grid p {
    font-size: 14px;
    color: #7589a9;
    line-height: 1.8;
    margin: 12px 0
}

.footer-grid b {
    font-size: 13px;
    font-weight: 600;
    color: #e0e7f3;
    margin-bottom: 9px
}

.footer-grid a:not(.brand) {
    font-size: 13px;
    color: #8a9ab6;
    transition: color .2s
}

.footer-grid a:not(.brand):hover {
    color: white
}

.footer-language {
    border-bottom: 1px solid #334462
}

.footer-bottom {
    border-top: 1px solid #ffffff12;
    padding-block: 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #6f82a1;
    font-size: 12px
}

.footer-bottom .brand {
    font-size: 22px
}

.footer.site-footer {
    --container-width: calc(100% - clamp(36px, 5vw, 112px));
    position: relative;
    padding-top: 56px;
    border-top: 1px solid #243852;
    background: radial-gradient(ellipse at 95% 0, #173256, transparent 50%), #0c1728;
    color: #b4c2d6;
}

.site-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 60px;
    padding-bottom: 42px;
    border-bottom: 1px solid #ffffff1c;
}

.site-footer .brand {
    width: fit-content;
    color: #f5f8ff;
    font-size: 36px;
    letter-spacing: -.04em;
}

.site-footer .brand-symbol {
    width: 46px;
    height: 48px;
    margin-right: 12px;
    border-radius: 14px;
    font-size: 29px;
}

.site-footer-top > div > p {
    margin: 18px 0 0;
    color: #a0b2cb;
    font-size: 17px;
    line-height: 1.7;
}

.site-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.site-footer-contact > span {
    color: #8baddb;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .11em;
}

.site-footer-contact > a:first-of-type {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 56px;
    color: #f5f8ff;
    font-size: clamp(26px, 2.6vw, 42px);
    font-weight: 550;
    letter-spacing: -.045em;
    line-height: 1.2;
}

.site-footer-contact > a:first-of-type > span {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1px solid #77a7ff66;
    border-radius: 50%;
    background: #3769ff;
    color: #fff;
    font-size: 28px;
    transition: background .2s, transform .2s;
}

.site-footer-contact > a:first-of-type:hover > span {
    background: #5183ff;
    transform: translate(2px, -2px);
}

.site-footer-contact .site-footer-email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #b7ccef;
    font-size: 16px;
    text-decoration: underline;
    text-decoration-color: #7da5d74d;
    text-underline-offset: 6px;
}

.site-footer-navigation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 72px);
    padding-block: 42px;
}

.site-footer-navigation > div {
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid #b9d0f026;
}

.site-footer-navigation > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.site-footer-navigation h2 {
    margin: 0 0 18px;
    color: #f3f7ff;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.5;
}

.site-footer-navigation a {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding-block: 9px;
    color: #a4b6d0;
    font-size: 15px;
    line-height: 1.5;
    transition: color .2s, transform .2s;
}

.site-footer-navigation a:hover {
    color: #fff;
    transform: translateX(3px);
    text-decoration: underline;
    text-decoration-color: #91b6f180;
    text-underline-offset: 5px;
}

.site-footer a:focus-visible {
    outline: 2px solid #97bfff;
    outline-offset: 5px;
    border-radius: 4px;
}

.site-footer-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-block: 24px;
    border-top: 1px solid #ffffff1c;
}

.site-footer-service > p {
    max-width: 65ch;
    margin: 0;
    color: #8da3c1;
    font-size: 14px;
    line-height: 1.7;
}

.site-footer-offer {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid #7299cf3d;
    border-radius: 10px;
    background: #ffffff05;
    color: #dce9ff;
    font-size: 14px;
    transition: border-color .2s, background .2s;
}

.site-footer-offer:hover {
    border-color: #8baff38c;
    background: #ffffff0c;
}

.site-footer-offer small {
    color: #95accb;
    font-size: 12px;
}

.site-footer-offer > span {
    margin-left: 6px;
    color: #93b8f4;
    font-size: 18px;
}

.site-footer .footer-bottom {
    align-items: center;
    gap: 24px;
    padding-block: 18px;
    border-top-color: #ffffff1c;
    color: #8ca1bf;
    font-size: 13px;
    line-height: 1.6;
}

.site-footer-development {
    margin-left: auto;
    color: #8ca1bf;
    font-size: 13px;
}

.site-footer .footer-language {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    margin-left: 20px;
    padding-inline: 14px;
    border: 1px solid #94b9ec33;
    border-radius: 9px;
    color: #c6d9f6;
    font-size: 14px;
}

.site-footer .footer-language:hover {
    background: #ffffff08;
    border-color: #94b9ec70;
}

@media (max-width: 1000px) {
    .site-footer-navigation {
        gap: 24px;
    }

    .site-footer-navigation > div {
        padding-left: 18px;
    }

    .site-footer-navigation a {
        font-size: 14px;
    }

    .site-footer-service {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
}

@media (max-width: 760px) {
    .site-footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .site-footer-contact {
        align-items: flex-start;
        padding: 24px;
        border: 1px solid #81a8df33;
        border-radius: 18px;
        background: #203b602e;
    }

    .site-footer-contact > a:first-of-type {
        justify-content: space-between;
        width: 100%;
        font-size: 30px;
    }

    .site-footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 26px;
    }

    .site-footer-navigation > div {
        padding-left: 0;
        border-left: 0;
    }

    .site-footer-navigation h2 {
        margin-bottom: 12px;
    }

    .site-footer .footer-bottom {
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .site-footer .footer-bottom > span:first-child {
        flex-basis: 100%;
    }

    .site-footer-development {
        margin-left: 0;
    }

    .site-footer .footer-language {
        margin-left: auto;
    }
}

@media (max-width: 420px) {
    .footer.site-footer {
        padding-top: 38px;
    }

    .site-footer .brand {
        font-size: 32px;
    }

    .site-footer-top > div > p {
        font-size: 16px;
    }

    .site-footer-contact {
        padding: 20px;
    }

    .site-footer-contact > a:first-of-type {
        gap: 12px;
        font-size: 26px;
    }

    .site-footer-contact > a:first-of-type > span {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .site-footer-navigation {
        gap: 28px 18px;
        padding-block: 32px;
    }

    .site-footer-navigation h2 {
        font-size: 14px;
    }

    .site-footer-offer {
        gap: 8px;
        width: 100%;
        padding-inline: 12px;
        font-size: 13px;
    }

    .site-footer-offer small {
        font-size: 11px;
    }

    .site-footer-offer > span {
        margin-left: auto;
    }

    .site-footer .footer-bottom {
        font-size: 12px;
    }

    .site-footer-development {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer-navigation a,
    .site-footer-contact > a:first-of-type > span,
    .site-footer-offer {
        transition: none;
    }

    .site-footer-navigation a:hover,
    .site-footer-contact > a:first-of-type:hover > span {
        transform: none;
    }
}

.skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: white;
    padding: 12px 20px;
    border: 1px solid var(--blue)
}

.skip:focus {
    top: 10px
}

/* Detailed product pages */
.feature-hero {
    background: var(--navy);
    color: #fff;
    padding: 30px 0 0;
    overflow: hidden
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #8b9ab3;
    margin-bottom: 45px;
    align-items: center
}

.breadcrumbs a {
    color: #879bd3
}

.breadcrumbs a:hover {
    color: var(--blue)
}

.feature-hero-grid {
    display: grid;
    grid-template-columns:1fr 1.05fr;
    gap: 65px;
    align-items: center;
    padding-bottom: 55px
}

.feature-hero .eyebrow {
    color: #8aa1c9;
    font-size: 11px;
    letter-spacing: 1.3px
}

.feature-hero h1 {
    font-size: clamp(35px, 3.65vw, 53px);
    line-height: 1.13;
    margin-bottom: 25px;
    letter-spacing: -1.8px
}

.feature-hero-grid > div > p:not(.eyebrow) {
    color: #a9b9d2;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 30px
}

.feature-hero-visual {
    border-radius: 15px;
    border: 1px solid #354768;
    background: #14213a;
    padding: 15px;
    box-shadow: 0 25px 70px #0004
}

.feature-hero-visual .screen-button {
    border-radius: 7px
}

.feature-hero-visual img {
    max-height: 390px;
    object-fit: contain;
    object-position: center
}

.feature-outcomes {
    border-top: 1px solid #ffffff19;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    padding-block: 25px;
    gap: 25px;
    color: #adbed9;
    font-size: 14px
}

.feature-outcomes > span {
    display: flex;
    align-items: center;
    gap: 10px
}

.feature-outcomes .icon {
    width: 19px;
    height: 19px;
    color: var(--lime)
}

.feature-process {
    padding: 17px
}

.feature-process > .visual-caption {
    margin-bottom: 25px;
    color: #8c9fbe
}

.feature-process > div {
    display: flex;
    align-items: center;
    gap: 17px;
    border-top: 1px solid #ffffff13;
    padding: 22px 0
}

.feature-process > div > span {
    font-size: 12px;
    color: #657ea8
}

.feature-process > div > .icon {
    color: #8baaff;
    width: 22px;
    height: 22px
}

.feature-process > div > b {
    font-size: 16px;
    font-weight: 550
}

.article-layout {
    display: grid;
    grid-template-columns:265px minmax(0, 1fr);
    gap: 95px;
    align-items: start;
    padding-top: 75px;
    padding-bottom: 40px
}

.toc {
    position: sticky;
    top: 115px;
    border-left: 1px solid #d9e2f0;
    display: flex;
    flex-direction: column;
    font-size: 14px
}

.toc > span {
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 650;
    color: #8391a8;
    padding: 0 21px 18px
}

.toc > a {
    padding: 12px 20px;
    margin-left: -1px;
    line-height: 1.6;
    color: #6b7890;
    border-left: 2px solid transparent
}

.toc > a:hover, .toc > a.active {
    background: #eff4ff;
    border-left-color: var(--blue);
    color: var(--blue)
}

.toc .toc-all {
    font-size: 13px;
    border-top: 1px solid var(--line);
    margin: 17px 20px 0;
    padding: 15px 0 0;
    color: var(--blue)
}

.prose {
    min-width: 0;
    max-width: 850px
}

.prose-section {
    position: relative;
    padding: 0 0 43px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e4e9f1;
    scroll-margin-top: 118px
}

.prose-section:last-child {
    border-bottom: 0
}

.section-index {
    display: block;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 17px
}

.prose h2 {
    font-size: 33px;
    line-height: 1.25;
    letter-spacing: -1px
}

.prose p, .prose li {
    font-size: 17px;
    line-height: 1.95;
    color: #57677e
}

.prose p {
    margin-bottom: 21px
}

.prose strong {
    font-weight: 650;
    color: #233653
}

.prose ul, .prose ol {
    padding-left: 22px
}

.prose li {
    padding: 4px 0 4px 5px
}

.prose a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #b0c4f5
}

/* Detailing page: illustrated stories echo the visual rhythm of the supplied reference. */
.services-page .article-layout {
    grid-template-columns:245px minmax(0, 1fr);
    gap:38px;
    max-width:1500px
}

.services-page .prose {
    max-width:none
}

.services-page .detail-story {
    display:grid;
    grid-template-columns:minmax(300px, .82fr) minmax(430px, 1.18fr);
    column-gap:42px;
    align-items:center;
    padding:42px;
    margin-bottom:18px;
    border:1px solid #dfe9f8;
    border-radius:8px;
    background:linear-gradient(135deg, #fff 0%, #f6faff 68%, #edf5ff 100%);
    overflow:hidden
}

.services-page .detail-story:nth-of-type(even) {
    grid-template-columns:minmax(430px, 1.18fr) minmax(300px, .82fr)
}

.services-page .detail-story .section-index,
.services-page .detail-story h2,
.services-page .detail-story p {
    grid-column:1
}

.services-page .detail-story:nth-of-type(even) .section-index,
.services-page .detail-story:nth-of-type(even) h2,
.services-page .detail-story:nth-of-type(even) p {
    grid-column:2
}

.detail-story-media {
    grid-column:2;
    grid-row:1 / span 6;
    margin:0 -42px 0 0;
    min-height:360px;
    align-self:stretch;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf3ff
}

.services-page .detail-story:nth-of-type(even) .detail-story-media {
    grid-column:1;
    grid-row:1 / span 6;
    margin:0 0 0 -42px
}

.detail-story-media img {
    display:block;
    width:100%;
    height:100%;
    min-height:360px;
    object-fit:cover
}

.detail-story-ui img { object-position:22% center }
.detail-story-cars img { object-position:center }
.detail-story-photo img { object-position:center }

.detail-story-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:22px
}

.detail-story-pair img {
    min-height:290px;
    border-radius:6px;
    box-shadow:0 18px 42px rgba(37, 82, 153, .18)
}

.detail-story-pair img:first-child { transform:translateY(-18px) }
.detail-story-pair img:last-child { transform:translateY(18px) }

.motion-ready .detail-story.reveal {
    transform:translateY(42px) scale(.985)
}

.motion-ready .detail-story.reveal.is-visible {
    transform:none
}

@media (max-width:1100px) {
    .services-page .detail-story,
    .services-page .detail-story:nth-of-type(even) {
        grid-template-columns:1fr;
        padding:34px
    }

    .services-page .detail-story .section-index,
    .services-page .detail-story h2,
    .services-page .detail-story p,
    .services-page .detail-story:nth-of-type(even) .section-index,
    .services-page .detail-story:nth-of-type(even) h2,
    .services-page .detail-story:nth-of-type(even) p,
    .services-page .detail-story .detail-story-media,
    .services-page .detail-story:nth-of-type(even) .detail-story-media {
        grid-column:1
    }

    .services-page .detail-story .detail-story-media,
    .services-page .detail-story:nth-of-type(even) .detail-story-media {
        grid-row:auto;
        margin:20px -34px -34px;
        min-height:320px
    }
}

@media (max-width:600px) {
    .services-page .detail-story,
    .services-page .detail-story:nth-of-type(even) {
        padding:25px 22px
    }

    .services-page .detail-story .detail-story-media,
    .services-page .detail-story:nth-of-type(even) .detail-story-media {
        margin:15px -22px -25px;
        min-height:220px
    }

    .detail-story-media img { min-height:220px }
    .detail-story-pair { padding:16px; gap:8px }
    .detail-story-pair img { min-height:185px }
}

.prose .article-callout {
    background: #edf3ff;
    border-left: 3px solid var(--blue);
    padding: 25px 30px;
    border-radius: 0 12px 12px 0;
    margin: 30px 0
}

.article-callout > b {
    font-size: 14px;
    font-weight: 650;
    color: var(--blue)
}

.article-callout p {
    font-size: 16px;
    line-height: 1.85;
    margin: 10px 0 0
}

.page-intro {
    padding: 75px 0 45px
}

.page-intro h1 {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -2.6px;
    margin-bottom: 25px
}

.page-intro > p:not(.eyebrow) {
    max-width: 740px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.85
}

.hub-grid {
    padding-top: 15px
}

.detail-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 35px 45px
}

.detail-grid article {
    border-top: 1px solid #bbcbe4;
    padding-top: 23px
}

.detail-grid h3 {
    font-size: 23px;
    line-height: 1.3;
    margin-bottom: 13px
}

.detail-grid p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8
}

.detail-grid a {
    font-size: 14px;
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px
}

.gallery-section {
    padding-top: 0
}

.gallery-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--line)
}

.gallery-filters button {
    border: 1px solid #dce4f0;
    background: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5
}

.gallery-filters button[aria-pressed=true] {
    background: var(--ink);
    border-color: var(--ink);
    color: white
}

.gallery-filters button > span {
    font-size: 12px;
    background: #ffffff20;
    border-radius: 12px;
    padding: 1px 7px;
    margin-left: 5px
}

.gallery-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 35px 25px
}

.gallery-item {
    min-width: 0;
    animation: screenFade .3s ease
}

.gallery-item > .screen-button {
    background: #e7edf7;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    padding: 20px;
    height: 335px
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #091323;
    border-radius: 6px
}

.gallery-item > div {
    position: relative;
    padding: 20px 30px 0 0
}

.gallery-item h2 {
    font-size: 22px;
    letter-spacing: -.5px;
    line-height: 1.3;
    margin: 0 0 8px
}

.gallery-item p {
    font-size: 14px;
    color: var(--muted);
    margin: 0
}

.gallery-item > div > span {
    position: absolute;
    right: 0;
    top: 20px;
    font-size: 12px;
    color: #8b9ab0
}

.guide-intro h1 {
    max-width: 1000px;
    font-size: 56px
}

.guide-intro + .article-layout {
    padding-top: 10px
}

/* Lightbox and interaction states */
dialog#viewer {
    width: min(1560px, 96vw);
    max-width: 96vw;
    height: min(940px, 95dvh);
    max-height: 95dvh;
    border: 1px solid #405573;
    border-radius: 13px;
    background: #0a1425;
    color: #dce7f7;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 30px 100px #0008
}

dialog::backdrop {
    background: #030916e8;
    backdrop-filter: blur(8px)
}

.viewer-top, .viewer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 20px;
    height: 62px;
    border-bottom: 1px solid #ffffff15;
    font-size: 14px
}

.viewer-top > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.viewer-close {
    border: 1px solid #314461;
    background: #14233b;
    color: #b5c9e9;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.viewer-close .icon {
    width: 19px;
    height: 19px
}

#viewer-img {
    width: 100%;
    height: calc(100% - 122px);
    object-fit: contain;
    padding: 12px
}

.viewer-bottom {
    height: 60px;
    border-bottom: 0;
    border-top: 1px solid #ffffff15
}

.viewer-bottom button {
    border: 1px solid #314461;
    background: #14233b;
    color: #c4d5ee;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 6px
}

.viewer-bottom button:disabled {
    opacity: .35;
    cursor: default
}

#viewer-count {
    color: #768db2;
    font-size: 12px
}

.motion-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1)
}

.motion-ready .reveal.is-visible {
    opacity: 1;
    transform: none
}

.feature-grid .reveal:nth-child(3n+2) {
    transition-delay: .07s
}

.feature-grid .reveal:nth-child(3n) {
    transition-delay: .13s
}

@keyframes enterProduct {
    from {
        opacity: 0;
        transform: translateY(18px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes screenFade {
    from {
        opacity: .35;
        transform: translateY(5px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (min-width: 1600px) {
    .hero-top {
        padding-block: 105px 120px
    }

    .hero-product {
        margin-right: -90px
    }

    .hero-phone {
        width: 180px;
        height: 355px;
        bottom: -55px
    }

    .hero h1 {
        font-size: 72px
    }
}

@media (max-width: 1150px) {
    :root {
        --container-width: calc(100% - 56px)
    }

    .nav {
        gap: 20px
    }

    .desktop-nav {
        gap: 23px
    }

    .nav-end {
        gap: 16px
    }

    .hero-top {
        gap: 35px;
        grid-template-columns:1fr 1fr;
        padding-block: 65px 85px
    }

    .hero h1 {
        font-size: 54px
    }

    .hero-copy > p:not(.eyebrow) {
        font-size: 16px
    }

    .hero-product {
        margin-right: -60px
    }

    .hero-card {
        left: -10px;
        padding: 12px 14px;
        bottom: -30px
    }

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

    .hero-card div > span {
        font-size: 10px
    }

    .hero-phone {
        right: 25px;
        width: 130px;
        height: 255px;
        bottom: -60px
    }

    .hero-notes {
        flex-direction: column;
        gap: 8px
    }

    .hero-bottom > div {
        gap: 19px;
        font-size: 13px
    }

    .hero-bottom > span {
        display: none
    }

    .hero-bottom {
        justify-content: center
    }

    .section {
        padding-block: 85px
    }

    .section-head {
        gap: 35px
    }

    .section-head > p {
        max-width: 310px;
        font-size: 16px
    }

    .owner-bento {
        grid-template-columns:1.25fr 1fr 1fr;
        gap: 15px
    }

    .bento {
        padding: 25px
    }

    .bento h3 {
        font-size: 25px
    }

    .bento-blue h3 {
        font-size: 28px
    }

    .bento-equation {
        gap: 6px;
        font-size: 10px
    }

    .split-panel {
        gap: 35px;
        padding: 35px
    }

    .split-panel h3 {
        font-size: 37px
    }

    .booking-flow {
        padding: 22px
    }

    .product-tabs button {
        padding-inline: 20px
    }

    .stage-screen > img {
        height: 460px
    }

    .money-layout {
        gap: 60px
    }

    .money-section h2 {
        font-size: 40px
    }

    .feature-editorial {
        gap: 60px
    }

    .editorial-copy h2 {
        font-size: 37px
    }

    .editorial-image.narrow {
        padding: 25px 40px;
        height: 560px
    }

    .feature-card {
        padding: 25px
    }

    .remote-panel {
        gap: 60px;
        padding: 45px 50px 0
    }

    .remote-panel h2 {
        font-size: 39px
    }

    .remote-phone {
        max-width: 260px
    }

    .faq-section {
        gap: 60px
    }

    .closing {
        padding: 40px
    }

    .closing h2 {
        font-size: 34px
    }

    .footer-grid {
        gap: 35px
    }

    .article-layout {
        gap: 55px;
        grid-template-columns:230px minmax(0, 1fr)
    }

    .feature-hero-grid {
        gap: 40px
    }

    .feature-hero h1 {
        font-size: 42px
    }

    .feature-hero-grid > div > p:not(.eyebrow) {
        font-size: 16px
    }

    .feature-outcomes {
        font-size: 13px
    }

    .gallery-item > .screen-button {
        height: 290px
    }

    .page-intro h1 {
        font-size: 56px
    }

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

@media (max-width: 900px) {
    .desktop-nav {
        gap: 20px
    }

    .nav-end .btn {
        display: none
    }

    .hero-top {
        grid-template-columns:1fr;
        padding-top: 58px;
        padding-bottom: 90px;
        gap: 45px
    }

    .hero-copy {
        text-align: center
    }

    .hero .eyebrow {
        justify-content: center
    }

    .hero h1 {
        font-size: 64px
    }

    .hero-copy > p:not(.eyebrow) {
        max-width: 620px;
        margin-inline: auto
    }

    .hero-actions {
        justify-content: center
    }

    .hero-notes {
        flex-direction: row;
        justify-content: center
    }

    .hero-product {
        width: 85%;
        margin: 0 auto
    }

    .hero-phone {
        right: -30px;
        width: 150px;
        height: 295px;
        bottom: -30px
    }

    .hero-card {
        left: -30px;
        bottom: 8px
    }

    .hero-bottom > div {
        gap: 22px
    }

    .section-head {
        display: block
    }

    .section-head > p {
        max-width: 600px;
        margin-top: 22px
    }

    .owner-bento {
        grid-template-columns:1fr 1fr
    }

    .bento-blue {
        grid-column: 1/-1
    }

    .bento-blue h3 {
        font-size: 34px
    }

    .bento-blue p {
        max-width: 500px
    }

    .bento-equation {
        font-size: 13px;
        margin-top: 4px
    }

    .journey {
        grid-template-columns:1fr 1fr;
        gap: 30px
    }

    .journey p {
        max-width: 300px
    }

    .split-panel {
        grid-template-columns:1fr 1fr;
        gap: 25px;
        padding: 30px
    }

    .split-panel h3 {
        font-size: 35px
    }

    .booking-flow {
        padding: 20px
    }

    .booking-flow .icon {
        display: none
    }

    .booking-flow > div {
        padding: 13px;
        gap: 10px
    }

    .money-layout {
        gap: 40px
    }

    .money-example {
        padding: 27px
    }

    .money-section h2 {
        font-size: 34px
    }

    .money-example > div {
        font-size: 14px
    }

    .money-total > strong {
        font-size: 58px
    }

    .feature-editorial {
        gap: 35px
    }

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

    .editorial-image {
        padding: 20px
    }

    .editorial-image.narrow {
        padding: 20px 25px;
        height: 530px
    }

    .feature-grid {
        grid-template-columns:1fr 1fr
    }

    .remote-panel {
        gap: 35px;
        padding: 40px 35px 0
    }

    .remote-panel h2 {
        font-size: 35px
    }

    .remote-phone {
        max-width: 230px
    }

    .remote-details {
        font-size: 12px
    }

    .remote-panel > div:last-child {
        padding-bottom: 40px
    }

    .start-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 25px
    }




    .faq-section {
        grid-template-columns:1fr;
        gap: 25px
    }

    .faq-section h2 br {
        display: none
    }

    .closing {
        display: block
    }

    .closing > .btn {
        margin-top: 28px;
        max-width: none
    }

    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap: 40px
    }

    .feature-hero-grid {
        grid-template-columns:1fr;
        gap: 35px
    }

    .feature-hero h1 {
        font-size: 48px
    }

    .feature-hero-visual {
        width: 100%;
        max-width: 750px;
        margin: auto
    }

    .feature-hero-visual img {
        max-height: 410px
    }

    .feature-outcomes {
        gap: 20px
    }

    .article-layout {
        grid-template-columns:1fr;
        gap: 35px;
        padding-top: 45px
    }

    .toc {
        position: static;
        display: grid;
        grid-template-columns:1fr 1fr;
        background: #f6f8fc;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 18px
    }

    .toc > span {
        grid-column: 1/-1;
        padding: 0 10px 12px
    }

    .toc > a {
        padding: 8px 10px;
        border: 0;
        font-size: 13px
    }

    .toc .toc-all {
        margin: 10px;
        padding-top: 10px
    }

    .prose {
        max-width: none
    }

    .prose-section {
        padding-bottom: 32px;
        margin-bottom: 28px
    }

    .detail-grid {
        grid-template-columns:1fr 1fr
    }

    .guide-intro h1 {
        font-size: 48px
    }

    .page-intro {
        padding-top: 55px
    }

    .hero-desktop {
        transform: none
    }
}

@media (max-width: 600px) {
    :root {
        --container-width: calc(100% - 36px)
    }

    .nav {
        height: 72px;
        gap: 10px
    }

    .brand {
        font-size: 23px
    }

    .brand-symbol {
        width: 31px;
        height: 33px;
        font-size: 23px;
        margin-right: 8px
    }

    .brand-period {
        font-size: 27px
    }

    .desktop-nav {
        display: none
    }

    .nav-end {
        gap: 12px
    }

    .menu-toggle {
        display: block
    }

    .language {
        font-size: 11px;
        padding: 3px 7px
    }

    .header:has(.mobile-menu:not([hidden])) {
        border-bottom: 0
    }

    .hero-top {
        padding-top: 45px;
        padding-bottom: 70px;
        gap: 33px
    }

    .hero h1 {
        font-size: 43px;
        letter-spacing: -1.9px;
        line-height: 1.09;
        margin-bottom: 25px
    }

    .hero .eyebrow {
        font-size: 10px;
        letter-spacing: .7px;
        margin-bottom: 22px;
        gap: 8px
    }

    .hero .eyebrow > span {
        width: 12px
    }

    .hero-copy > p:not(.eyebrow) {
        font-size: 15px;
        line-height: 1.85;
        margin-bottom: 25px
    }

    .hero-actions {
        gap: 9px
    }

    .hero-actions .btn {
        font-size: 13px;
        min-height: 49px;
        padding: 12px 17px
    }

    .hero-notes {
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 22px;
        font-size: 11px
    }

    .hero-notes .icon {
        width: 15px;
        height: 15px
    }

    .hero-product {
        width: 94%;
        padding-bottom: 20px
    }

    .product-label {
        font-size: 8px;
        letter-spacing: .7px;
        padding-bottom: 9px
    }

    .product-label > span:last-child {
        font-size: 10px
    }

    .hero-desktop {
        border-radius: 7px
    }

    .hero-phone {
        right: -10px;
        width: 84px;
        height: 169px;
        border-width: 4px;
        border-radius: 16px;
        bottom: -30px;
        transform: rotate(5deg)
    }

    .hero-card {
        left: -8px;
        bottom: -18px;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 9px;
        max-width: 265px
    }

    .hero-card-icon {
        width: 27px;
        height: 27px
    }

    .hero-card-icon .icon {
        width: 17px;
        height: 17px
    }

    .hero-card b {
        font-size: 10px
    }

    .hero-card div > span {
        font-size: 9px;
        margin-top: 1px
    }

    .hero-bottom {
        padding-block: 20px
    }

    .hero-bottom > div {
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px 14px;
        font-size: 11px
    }

    .section {
        padding-block: 59px
    }

    h2 {
        font-size: 33px;
        letter-spacing: -1.1px
    }

    .eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 17px
    }

    .eyebrow > span {
        width: 15px
    }

    .section-head {
        margin-bottom: 30px
    }

    .section-head .eyebrow {
        margin-bottom: 17px
    }

    .section-head > p {
        font-size: 15px;
        line-height: 1.8;
        margin-top: 20px
    }

    .owner-bento {
        grid-template-columns:1fr;
        gap: 15px
    }

    .bento-blue {
        grid-column: auto
    }

    .bento {
        padding: 26px
    }

    .bento h3 {
        font-size: 27px;
        margin-top: 28px
    }

    .bento-blue h3 {
        font-size: 31px
    }

    .bento-kicker {
        font-size: 10px
    }

    .bento p {
        font-size: 15px
    }

    .bento-equation {
        font-size: 11px;
        margin-top: 5px;
        margin-bottom: 25px;
        gap: 7px
    }

    .card-link {
        font-size: 13px
    }

    .journey {
        gap: 25px 23px;
        margin-bottom: 35px
    }

    .journey > a {
        padding-top: 20px
    }

    .journey .icon {
        width: 26px;
        height: 26px;
        margin-bottom: 18px
    }

    .journey h3 {
        font-size: 18px;
        letter-spacing: -.5px;
        line-height: 1.25
    }

    .journey p {
        font-size: 14px;
        line-height: 1.8
    }

    .journey > a > span {
        font-size: 10px;
        top: 20px
    }

    .split-panel {
        display: block;
        padding: 26px;
        border-radius: 14px
    }

    .split-panel h3 {
        font-size: 34px
    }

    .split-panel > div > p:not(.eyebrow) {
        font-size: 15px
    }

    .booking-flow {
        margin-top: 30px;
        padding: 19px
    }

    .visual-caption {
        font-size: 10px;
        letter-spacing: 1px
    }

    .booking-flow > div {
        padding: 13px;
        margin-top: 12px
    }

    .booking-flow b {
        font-size: 13px
    }

    .booking-flow p {
        font-size: 11px
    }

    .booking-flow > a {
        font-size: 11px
    }

    .showcase-heading {
        display: block
    }

    .showcase-heading > .text-link {
        display: inline-block;
        margin-top: 20px
    }

    .product-tabs {
        margin-top: 25px;
        gap: 3px;
        padding: 6px;
        justify-content: flex-start
    }

    .product-tabs button {
        padding: 10px 12px;
        font-size: 12px;
        flex: 1 0 28%
    }

    .stage-top {
        padding: 20px;
        display: block
    }

    .stage-top h3 {
        font-size: 18px;
        line-height: 1.4
    }

    .stage-top p {
        font-size: 13px
    }

    .stage-top > a {
        display: inline-block;
        margin-top: 13px;
        font-size: 12px
    }

    .stage-screen {
        padding: 10px 10px 0
    }

    .stage-screen > img {
        height: 235px
    }

    .zoom-badge {
        opacity: 1;
        transform: none;
        padding: 5px 8px;
        bottom: 10px;
        right: 10px;
        font-size: 10px
    }

    .zoom-badge .icon {
        width: 12px;
        height: 12px
    }

    .money-layout {
        grid-template-columns:1fr;
        gap: 32px
    }

    .money-section h2 {
        font-size: 35px;
        line-height: 1.15
    }

    .money-section p {
        font-size: 15px
    }

    .money-links {
        gap: 12px;
        margin-top: 25px
    }

    .money-links a {
        font-size: 13px
    }

    .money-example {
        padding: 27px;
        transform: none;
        box-shadow: 8px 8px 0 #ffffff09
    }

    .money-example > div {
        font-size: 14px;
        padding: 12px 0
    }

    .money-example > div > b {
        font-size: 17px
    }

    .money-example .money-total {
        padding: 18px 22px;
        margin-top: 17px
    }

    .money-total > strong {
        font-size: 61px;
        letter-spacing: -3px
    }

    .money-example > p {
        font-size: 11px;
        margin-top: 19px
    }

    .feature-editorial {
        grid-template-columns:1fr;
        gap: 30px
    }

    .feature-editorial.reverse .editorial-copy {
        order: 0
    }

    .editorial-copy h2 {
        font-size: 33px
    }

    .editorial-copy > p:not(.eyebrow) {
        font-size: 15px
    }

    .check-list {
        margin-top: 21px;
        margin-bottom: 26px
    }

    .check-list li {
        font-size: 13px;
        padding-block: 11px
    }

    .editorial-image {
        padding: 23px;
        border-radius: 15px
    }

    .editorial-image.narrow {
        padding: 24px 45px;
        height: 480px
    }

    .feature-editorial + .feature-editorial {
        margin-top: 55px;
        padding-top: 50px
    }

    .feature-grid {
        grid-template-columns:1fr;
        gap: 15px
    }

    .feature-card {
        padding: 26px
    }

    .feature-card h3 {
        font-size: 22px;
        margin-bottom: 12px
    }

    .feature-card p {
        font-size: 15px
    }

    .feature-icon {
        width: 41px;
        height: 41px;
        margin-bottom: 20px
    }

    .feature-icon .icon {
        width: 22px;
        height: 22px
    }

    .remote-panel {
        grid-template-columns:1fr;
        padding: 30px 27px 0;
        gap: 20px;
        border-radius: 17px
    }

    .remote-panel > div:last-child {
        order: -1;
        padding-bottom: 0
    }

    .remote-panel h2 {
        font-size: 33px
    }

    .remote-panel p {
        font-size: 15px
    }

    .remote-phone {
        max-height: 360px;
        width: 210px;
        transform: rotate(-4deg) translateY(20px);
        margin-top: 0;
        border-width: 6px
    }

    .remote-details {
        font-size: 12px;
        gap: 9px 15px;
        margin-block: 20px;
        padding-block: 18px
    }

    .remote-panel .eyebrow {
        font-size: 9px;
        letter-spacing: .8px
    }

    .remote-panel .btn {
        font-size: 14px
    }

    .start-section {
        padding-top: 0
    }

    .start-grid {
        gap: 22px
    }

    .start-grid article {
        padding-top: 19px
    }

    .start-grid article > span {
        font-size: 34px;
        margin-bottom: 20px
    }

    .start-grid h3 {
        font-size: 18px;
        line-height: 1.3
    }

    .start-grid p {
        font-size: 14px
    }








    .faq-section {
        gap: 25px
    }

    .faq-list summary {
        font-size: 15px;
        gap: 20px
    }

    .faq-list details {
        padding-block: 20px
    }

    .faq-list summary > span {
        font-size: 21px
    }

    .faq-list details > p {
        font-size: 14px;
        line-height: 1.9;
        margin-right: 10px
    }

    .closing {
        padding: 30px 27px;
        border-radius: 15px;
        margin-bottom: 50px
    }

    .closing .eyebrow {
        font-size: 9px;
        letter-spacing: .8px
    }

    .closing h2 {
        font-size: 30px;
        letter-spacing: -1px;
        line-height: 1.25
    }

    .closing p {
        font-size: 14px
    }

    .closing > .btn {
        font-size: 14px;
        width: 100%;
        margin-top: 25px
    }

    .footer {
        padding-top: 45px
    }

    .footer-grid {
        gap: 35px 23px;
        padding-bottom: 35px
    }

    .footer-grid > div:first-child {
        grid-column: 1/-1
    }

    .footer-grid b {
        font-size: 12px;
        margin-bottom: 5px
    }

    .footer-grid a:not(.brand) {
        font-size: 12px;
        line-height: 1.6
    }

    .footer-grid > div {
        gap: 10px
    }

    .footer-grid p {
        font-size: 13px;
        margin: 6px 0
    }

    .footer-bottom {
        flex-direction: column;
        gap: 7px;
        font-size: 10px;
        padding-block: 20px
    }

    .feature-hero {
        padding-top: 24px
    }

    .breadcrumbs {
        font-size: 11px;
        gap: 8px;
        margin-bottom: 30px;
        line-height: 1.6
    }

    .feature-hero-grid {
        gap: 30px;
        padding-bottom: 30px
    }

    .feature-hero .eyebrow {
        font-size: 10px;
        letter-spacing: 1px
    }

    .feature-hero h1 {
        font-size: 36px;
        letter-spacing: -1.5px;
        line-height: 1.15;
        margin-bottom: 22px
    }

    .feature-hero-grid > div > p:not(.eyebrow) {
        font-size: 15px;
        margin-bottom: 25px
    }

    .feature-hero-visual {
        padding: 10px;
        border-radius: 11px
    }

    .feature-hero-visual img {
        max-height: 310px
    }

    .feature-outcomes {
        grid-template-columns:1fr;
        gap: 12px;
        padding-block: 23px;
        font-size: 13px
    }

    .feature-outcomes .icon {
        width: 16px;
        height: 16px
    }

    .feature-process {
        padding: 13px
    }

    .feature-process > div {
        gap: 12px;
        padding-block: 18px
    }

    .feature-process > div > b {
        font-size: 14px
    }

    .feature-process > div > .icon {
        width: 19px;
        height: 19px
    }

    .feature-process > div > span {
        font-size: 10px
    }

    .feature-process > .visual-caption {
        margin-bottom: 15px
    }

    .article-layout {
        padding-top: 35px;
        gap: 30px;
        padding-bottom: 10px
    }

    .toc {
        display: flex;
        padding: 17px
    }

    .toc > a {
        font-size: 13px;
        padding: 8px
    }

    .toc > span {
        font-size: 10px;
        padding-left: 8px
    }

    .prose h2 {
        font-size: 27px;
        line-height: 1.3;
        letter-spacing: -.8px
    }

    .prose p, .prose li {
        font-size: 16px;
        line-height: 1.9
    }

    .prose p {
        margin-bottom: 18px
    }

    .prose ul, .prose ol {
        padding-left: 19px
    }

    .prose li {
        padding-left: 2px
    }

    .section-index {
        font-size: 11px;
        margin-bottom: 14px
    }

    .prose-section {
        margin-bottom: 25px;
        padding-bottom: 26px
    }

    .prose .article-callout {
        padding: 21px;
        border-radius: 0 9px 9px 0;
        margin-block: 25px
    }

    .article-callout p {
        font-size: 15px
    }

    .page-intro {
        padding-top: 42px;
        padding-bottom: 30px
    }

    .page-intro h1 {
        font-size: 39px;
        line-height: 1.14;
        letter-spacing: -1.7px;
        margin-bottom: 23px
    }

    .page-intro > p:not(.eyebrow) {
        font-size: 16px;
        line-height: 1.85
    }

    .hub-grid {
        padding-top: 5px
    }

    .detail-grid {
        grid-template-columns:1fr;
        gap: 25px
    }

    .detail-grid h3 {
        font-size: 23px
    }

    .detail-grid p {
        font-size: 15px
    }

    .gallery-section {
        padding-top: 0
    }

    .gallery-filters {
        gap: 8px;
        margin-bottom: 25px;
        padding-bottom: 23px
    }

    .gallery-filters button {
        font-size: 12px;
        padding: 9px 14px
    }

    .gallery-filters button > span {
        font-size: 11px
    }

    .gallery-grid {
        grid-template-columns:1fr;
        gap: 29px
    }

    .gallery-item > .screen-button {
        height: 270px;
        padding: 14px
    }

    .gallery-item h2 {
        font-size: 21px
    }

    .gallery-item p {
        font-size: 13px
    }

    .gallery-item > div {
        padding-top: 17px
    }

    .gallery-item > div > span {
        top: 17px;
        font-size: 11px
    }

    .guide-intro h1 {
        font-size: 36px
    }

    .guide-intro + .article-layout {
        padding-top: 0
    }

    .viewer-top {
        font-size: 12px;
        padding-inline: 13px;
        gap: 10px
    }

    .viewer-bottom {
        padding-inline: 13px
    }

    .viewer-bottom button {
        font-size: 12px;
        padding-inline: 10px
    }

    #viewer-img {
        padding: 5px
    }

    dialog#viewer {
        width: 97vw;
        max-width: 97vw
    }

    .motion-ready .reveal {
        transform: translateY(16px)
    }
}

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

    *, *:before, *:after {
        animation: none !important;
        transition: none !important
    }

    .motion-ready .reveal {
        opacity: 1;
        transform: none
    }
}

@media print {
    .header, .footer, .closing, .reading-progress, .hero-phone, .hero-card, .toc, .btn, .zoom-badge {
        display: none !important
    }

    .hero, .money-section, .feature-hero {
        background: #fff !important;
        color: #111 !important
    }

    .hero p, .feature-hero p, .money-section p {
        color: #333 !important
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important
    }

    .container {
        width: 100%
    }

    .section {
        padding-block: 25px
    }

    .hero-top, .feature-hero-grid, .article-layout {
        display: block
    }

    .hero-product {
        display: none
    }

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

    .prose {
        max-width: 100%
    }
}

/* The feature menu mirrors all twelve panorama points. */
.zone-menu-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
    min-width: 24px
}

.mega {
    max-height: calc(100svh - 105px);
    overflow: auto
}

.mobile-menu {
    max-height: calc(100svh - 80px);
    overflow: auto
}

.mobile-menu[hidden] {
    display: none
}

.mega-grid a {
    align-items: center
}

.mega-grid a span:last-child {
    line-height: 1.35
}

.mega-grid a[aria-current="page"],
.mobile-capability-links a[aria-current="page"] {
    color: #08783f;
    background: #e9fbf1;
    box-shadow: inset 3px 0 #0bbf63
}

.mega-grid a[aria-current="page"] .mega-marker,
.mobile-capability-links a[aria-current="page"] .mega-marker {
    color: #fff;
    background: #0bbf63;
    border-color: #0bbf63
}

.feature-icon.feature-number {
    display: grid;
    place-items: center;
    color: #fff;
    background: #236de2;
    font-size: 13px;
    font-weight: 800;
    line-height: 1
}

.proof-strip {
    background: #f4f6fa;
    padding: 50px 0
}

.proof-strip h2 {
    font-size: clamp(28px, 3vw, 40px)
}

.proof-strip .detail-grid {
    margin-top: 25px
}

.proof-strip p {
    color: var(--muted)
}

/* Detailing overview: compact four-row composition from the supplied layout. */
.services-page {
    background:#f4f8ff
}

.services-page .feature-hero,
.services-page .zone-product {
    display:none
}

.services-page .article-layout {
    width:calc(100% - 80px);
    max-width:1600px;
    grid-template-columns:198px minmax(0, 1fr);
    gap:28px;
    padding:20px 0 34px
}

.services-page .toc {
    top:86px;
    padding:18px 14px 16px;
    border:1px solid #dce7f6;
    border-radius:8px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 34px rgba(38, 82, 145, .08);
    backdrop-filter:blur(12px)
}

.services-page .toc > span {
    padding:0 8px 14px;
    color:#5b78a4;
    font-size:10px;
    letter-spacing:.04em
}

.services-page .toc > a {
    padding:10px 9px;
    margin:0;
    border:0;
    border-radius:4px;
    color:#6d83a7;
    font-size:11px;
    line-height:1.45
}

.services-page .toc > a:hover,
.services-page .toc > a.active {
    border:0;
    background:#eaf2ff;
    color:#246ce0
}

.services-page .toc .toc-all {
    position:relative;
    margin:12px 0 0;
    padding:15px 22px 1px 9px;
    border-top:1px solid #e3ebf6;
    border-radius:0;
    color:#1764df
}

.services-page .toc .toc-all:after {
    content:'›';
    position:absolute;
    right:8px;
    bottom:-2px;
    font-size:20px
}

.services-page .prose {
    display:grid;
    gap:12px;
    max-width:none
}

.services-page .detail-story,
.services-page .detail-story:nth-of-type(even) {
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:44% 56%;
    column-gap:0;
    min-height:244px;
    margin:0;
    padding:30px 36px;
    border:1px solid #dce9f9;
    border-radius:8px;
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,255,.96));
    box-shadow:0 10px 32px rgba(53, 103, 168, .055);
    overflow:hidden
}

.services-page .detail-story:before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:0;
    background:radial-gradient(70% 150% at 93% 48%, rgba(105,174,255,.17), transparent 68%), radial-gradient(40% 100% at 73% 108%, rgba(89,154,242,.13), transparent 72%);
    pointer-events:none
}

.services-page .detail-story:nth-of-type(even):before {
    transform:scaleX(-1)
}

.services-page .detail-story .section-index,
.services-page .detail-story h2,
.services-page .detail-story p {
    position:relative;
    z-index:4;
    grid-column:1;
    align-self:start
}

.services-page .detail-story:nth-of-type(even) .section-index,
.services-page .detail-story:nth-of-type(even) h2,
.services-page .detail-story:nth-of-type(even) p {
    grid-column:2;
    padding-left:34px
}

.services-page .detail-story .section-index {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    margin:0 0 0 -2px;
    border-radius:8px;
    background:#e9f1ff;
    color:#236ae5;
    font-size:15px;
    letter-spacing:0;
    font-weight:750
}

.services-page .detail-story:nth-of-type(even) .section-index {
    margin-left:32px;
    padding-left:0
}

.services-page .detail-story h2 {
    margin:-38px 0 13px 62px;
    font-size:25px;
    line-height:1.14;
    letter-spacing:0;
    color:#0d1937
}

.services-page .detail-story:nth-of-type(even) h2 {
    margin:-38px 0 13px 96px;
    padding-left:0
}

.services-page .detail-story p,
.services-page .detail-story:nth-of-type(even) p {
    margin:0 0 10px;
    padding-right:24px;
    color:#53647f;
    font-size:12px;
    line-height:1.48
}

.services-page .detail-story:nth-of-type(even) p {
    padding-right:0
}

.services-page .detail-story-media,
.services-page .detail-story:nth-of-type(even) .detail-story-media {
    position:relative;
    z-index:2;
    grid-column:2;
    grid-row:1 / span 8;
    align-self:stretch;
    min-height:0;
    margin:-30px -36px;
    overflow:hidden;
    background:transparent
}

.services-page .detail-story:nth-of-type(even) .detail-story-media {
    grid-column:1;
    margin:-30px 0 -30px -36px
}

.services-page .detail-story-media > img {
    position:absolute;
    display:block;
    max-width:none;
    min-height:0;
    object-fit:contain
}

.services-page #services {
    min-height:264px
}

.services-page #services .detail-story-ui {
    mask-image:linear-gradient(to right, transparent, #000 12%)
}

.services-page #services .detail-story-ui > img {
    z-index:1;
    top:-2.1%;
    left:-75.89%;
    bottom:auto;
    width:177.59%;
    height:103.95%;
    object-fit:fill
}

.catalog-panel {
    position:absolute;
    z-index:3;
    border:1px solid rgba(205,220,243,.95);
    border-radius:10px;
    background:rgba(255,255,255,.95);
    box-shadow:0 14px 34px rgba(47,91,154,.14);
    color:#17233d
}

.catalog-categories {
    left:10%;
    top:23px;
    width:49%;
    padding:10px
}

.catalog-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 2px 9px;
    font-size:9px
}

.catalog-panel-head > span {
    padding:7px 9px;
    border-radius:4px;
    color:#fff;
    background:#246fe9;
    font-size:8px
}

.catalog-category-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:6px
}

.catalog-category-grid > span {
    min-width:0;
    height:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:6px;
    background:#f8fbff;
    color:#236fe6;
    font-size:16px;
    text-align:center
}

.catalog-category-grid > span b {
    color:#17233d;
    font-size:7px;
    white-space:nowrap
}

.catalog-category-grid > span small {
    color:#7184a3;
    font-size:6px
}

.catalog-category-grid > span.is-active {
    color:#fff;
    background:linear-gradient(145deg, #4e8dff, #2169ec)
}

.catalog-category-grid > span.is-active b,
.catalog-category-grid > span.is-active small {
    color:#fff
}

.catalog-services {
    top:11px;
    right:3%;
    width:32%;
    padding:11px
}

.catalog-services > span {
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    min-height:48px;
    border-top:1px solid #eaf0f8;
    font-size:7px
}

.catalog-services i {
    grid-row:1 / span 2;
    width:25px;
    height:25px;
    border-radius:4px;
    background:linear-gradient(135deg, #a9c9ed, #244d7d)
}

.catalog-services small {
    color:#607491;
    font-size:6px
}

.services-page #categories {
    grid-template-columns:58% 42%;
    min-height:224px
}

.services-page #categories .detail-story-cars {
    -webkit-mask-image:linear-gradient(to left, transparent, #000 20%);
    mask-image:linear-gradient(to left, transparent, #000 20%)
}

.services-page #categories .detail-story-cars > svg {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%
}

.services-page #detailing {
    grid-template-columns:44% 56%;
    min-height:184px
}

.services-page #detailing .detail-story-photo {
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14%);
    mask-image:linear-gradient(to right, transparent, #000 14%)
}

.services-page #detailing .detail-story-photo > svg {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%
}

.detailing-list {
    position:absolute;
    z-index:3;
    top:17px;
    left:38%;
    width:29%;
    padding:10px;
    border:1px solid #d8e4f5;
    border-radius:9px;
    background:rgba(255,255,255,.95);
    box-shadow:0 13px 30px rgba(35,80,141,.14);
    color:#162440;
    font-size:8px
}

.detailing-list > b {
    display:block;
    padding-bottom:5px
}

.detailing-list > span {
    display:block;
    padding:6px 4px;
    border-top:1px solid #edf2f8;
    font-weight:650
}

.detailing-list small {
    display:block;
    margin-top:2px;
    color:#5d7192;
    font-size:7px;
    font-weight:400
}

.services-page #accounting {
    grid-template-columns:54% 46%;
    min-height:184px
}

.services-page #accounting .detail-story-accounting > img {
    top:-2.46%;
    left:-1.66%;
    width:178.86%;
    height:106.37%;
    object-fit:fill
}

.services-page .detail-story-pair {
    display:block;
    padding:0
}

.accounting-card {
    position:absolute;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px;
    border:1px solid #d8e4f4;
    border-radius:8px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 28px rgba(42,84,144,.12);
    color:#526781;
    font-size:8px;
    font-style:normal
}

.accounting-card b {
    color:#12213d;
    font-size:10px
}

.accounting-card span {
    display:flex;
    justify-content:space-between;
    gap:8px
}

.accounting-card i {
    min-width:105px;
    padding:2px 6px;
    border-radius:4px;
    background:#f2f6fc;
    color:#667b99;
    font-style:normal
}

.accounting-card strong {
    margin-left:auto;
    color:#243654;
    font-size:8px
}

.accounting-card em {
    display:flex;
    justify-content:space-between;
    padding-top:4px;
    border-top:1px solid #e6edf6;
    color:#15243f;
    font-style:normal;
    font-weight:700
}

.accounting-order {
    left:7%;
    top:12px;
    width:37%
}

.accounting-result {
    left:54%;
    top:19px;
    width:31%
}

.accounting-result em strong {
    color:#0aa56b
}

.accounting-client {
    left:48%;
    bottom:10px;
    width:40%
}

.services-page .prose > .prose-section:not(.detail-story) {
    margin:34px 0 0;
    padding:34px;
    border:1px solid #dfe7f2;
    border-radius:8px;
    background:#fff
}

.motion-ready .services-page .detail-story.reveal {
    transform:translateY(24px);
    transition:opacity .6s ease, transform .7s cubic-bezier(.2,.75,.25,1)
}

.motion-ready .services-page .detail-story.reveal.is-visible {
    transform:none
}

@media (max-width:1100px) {
    .services-page .article-layout {
        width:calc(100% - 40px);
        grid-template-columns:1fr;
        gap:16px
    }

    .services-page .toc {
        position:static;
        display:grid;
        grid-template-columns:repeat(2, 1fr)
    }

    .services-page .toc > span,
    .services-page .toc .toc-all {
        grid-column:1 / -1
    }
}

@media (max-width:720px) {
    .services-page .article-layout {
        width:calc(100% - 24px);
        padding-top:12px
    }

    .services-page .toc {
        grid-template-columns:1fr;
        padding:12px
    }

    .services-page .detail-story,
    .services-page .detail-story:nth-of-type(even),
    .services-page #categories,
    .services-page #detailing,
    .services-page #accounting {
        display:flex;
        flex-direction:column;
        min-height:0;
        padding:24px 20px
    }

    .services-page .detail-story .section-index,
    .services-page .detail-story:nth-of-type(even) .section-index {
        margin:0
    }

    .services-page .detail-story h2,
    .services-page .detail-story:nth-of-type(even) h2 {
        margin:-38px 0 18px 54px;
        padding:0;
        font-size:22px
    }

    .services-page .detail-story p,
    .services-page .detail-story:nth-of-type(even) p {
        padding:0;
        font-size:14px;
        line-height:1.65
    }

    .services-page .detail-story .detail-story-media,
    .services-page .detail-story:nth-of-type(even) .detail-story-media {
        width:auto;
        height:240px;
        min-height:240px;
        margin:14px -20px -24px
    }

    .catalog-categories { left:4%; width:58% }
    .catalog-services { right:2%; width:37% }
    .services-page #services .detail-story-ui { mask-image:none }
    .services-page #detailing .detail-story-photo {
        -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%);
        mask-image:linear-gradient(to bottom, transparent, #000 16%)
    }
    .services-page #categories .detail-story-cars {
        -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%);
        mask-image:linear-gradient(to bottom, transparent, #000 16%)
    }
    .detailing-list { left:43%; width:38% }
    .accounting-order { left:3%; width:42% }
    .accounting-result { left:51%; width:43% }
    .accounting-client { left:47%; width:48% }
}

/* Stock and chemistry page: eight illustrated rows based on the supplied reference. */
.stock-page {
    background:#f4f8ff
}

.stock-page .feature-hero,
.stock-page .zone-product {
    display:none
}

.stock-page .article-layout {
    width:calc(100% - 48px);
    max-width:1680px;
    display:grid;
    grid-template-columns:210px minmax(0, 1fr);
    gap:28px;
    align-items:start;
    padding:18px 0 40px
}

.stock-page .article-layout > .toc {
    position:sticky;
    top:100px;
    display:flex;
    padding:18px 14px 16px;
    border:1px solid #d4e2f3;
    border-radius:8px;
    background:rgba(255,255,255,.95);
    box-shadow:0 13px 34px rgba(38,82,145,.08);
    backdrop-filter:blur(12px)
}

.stock-page .toc > span {
    padding:0 8px 13px;
    color:#5977a2;
    font-size:10px;
    letter-spacing:.05em
}

.stock-page .toc > a {
    margin:0;
    padding:8px 9px;
    border:0;
    border-radius:4px;
    color:#6c82a5;
    font-size:10px;
    line-height:1.35
}

.stock-page .toc > a:hover,
.stock-page .toc > a.active {
    border:0;
    background:#e8f1ff;
    color:#1767e2
}

.stock-page .toc .toc-all {
    position:relative;
    margin:10px 0 0;
    padding:14px 24px 1px 9px;
    border-top:1px solid #e0e9f4;
    border-radius:0;
    color:#1764df
}

.stock-page .toc .toc-all:after {
    content:'›';
    position:absolute;
    right:8px;
    bottom:-2px;
    font-size:20px
}

.stock-page .prose {
    display:grid;
    gap:14px;
    max-width:none
}

.stock-page .stock-story {
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:45% 55%;
    align-content:start;
    min-height:320px;
    margin:0;
    padding:32px 38px;
    border:1px solid #cfe0f5;
    border-radius:8px;
    background:linear-gradient(135deg, #fff 0%, #f7fbff 64%, #edf6ff 100%);
    box-shadow:0 10px 30px rgba(48, 92, 153, .055);
    overflow:hidden
}

.stock-page .stock-story:before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(116deg, transparent 0 54%, rgba(83,157,246,.08) 54.2% 69%, transparent 69.2%), radial-gradient(65% 130% at 95% 50%, rgba(74,155,247,.13), transparent 70%);
    pointer-events:none
}

.stock-page .stock-story:nth-of-type(even) {
    grid-template-columns:55% 45%
}

.stock-page .stock-story:nth-of-type(even):before {
    transform:scaleX(-1)
}

.stock-page .stock-story > :not(.stock-story-media) {
    position:relative;
    z-index:4;
    grid-column:1
}

.stock-page .stock-story:nth-of-type(even) > :not(.stock-story-media) {
    grid-column:2;
    padding-left:32px
}

.stock-page .stock-story .section-index {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin:0;
    padding:0;
    border-radius:8px;
    background:#e5f0ff;
    color:#1469ed;
    font-size:15px;
    font-weight:750;
    letter-spacing:0
}

.stock-page .stock-story h2 {
    margin:-42px 0 16px 66px;
    padding:0;
    color:#0c1936;
    font-size:28px;
    line-height:1.14;
    letter-spacing:0
}

.stock-page .stock-story p,
.stock-page .stock-story li {
    margin:0 0 10px;
    padding:0 24px 0 0;
    color:#4f617c;
    font-size:14px;
    line-height:1.5
}

.stock-page .stock-story strong {
    color:#243752
}

.stock-page .stock-story-media {
    position:relative;
    z-index:2;
    grid-column:2;
    grid-row:1 / span 30;
    align-self:stretch;
    min-height:260px;
    margin:-32px -38px;
    overflow:hidden;
    background:transparent
}

.stock-page .stock-story:nth-of-type(even) .stock-story-media {
    grid-column:1;
    margin:-32px 0 -32px -38px
}

.stock-page .stock-story-media > img {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 100%)
}

.stock-page .stock-story:nth-of-type(even) .stock-story-media > img {
    -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 18%, #000 100%);
    mask-image:linear-gradient(270deg, transparent 0%, #000 18%, #000 100%)
}

.stock-page #warehouse {
    min-height:390px
}

.stock-warehouse-hero .stock-car {
    z-index:1;
    left:5%;
    bottom:-7%;
    width:93%;
    height:auto;
    object-fit:contain;
    -webkit-mask-image:none !important;
    mask-image:none !important
}

.stock-warehouse-hero .stock-products {
    z-index:2;
    right:-3%;
    bottom:-8%;
    width:40%;
    height:auto;
    object-fit:contain;
    -webkit-mask-image:none !important;
    mask-image:none !important
}

.stock-direction-card {
    position:absolute;
    z-index:4;
    top:22px;
    width:28%;
    min-height:96px;
    padding:16px;
    border:1px solid #d3e0f2;
    border-radius:9px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 34px rgba(37,78,137,.15);
    color:#526786;
    font-size:9px
}

.stock-direction-card:nth-of-type(1) { left:38% }
.stock-direction-card:nth-of-type(2) { right:2% }

.stock-direction-card b {
    display:block;
    margin-bottom:5px;
    color:#13213d;
    font-size:13px
}

.stock-direction-card span {
    display:block;
    margin-bottom:8px;
    color:#546b8d;
    font-size:9px
}

.stock-direction-card small {
    display:block;
    color:#657897;
    font-size:8px;
    line-height:1.4
}

.stock-page #norms {
    min-height:350px
}

.stock-norms-visual > img {
    left:24%;
    bottom:-12%;
    width:84%;
    height:auto;
    object-fit:contain !important;
    -webkit-mask-image:none !important;
    mask-image:none !important
}

.stock-norm-card {
    position:absolute;
    z-index:4;
    left:6%;
    top:38px;
    width:38%;
    padding:17px;
    border:1px solid #d1e0f3;
    border-radius:9px;
    background:rgba(255,255,255,.97);
    box-shadow:0 15px 35px rgba(39,81,141,.15);
    color:#4d6382;
    font-size:10px
}

.stock-norm-card > b {
    display:block;
    margin-bottom:12px;
    color:#12213d;
    font-size:13px
}

.stock-norm-card > span {
    display:block;
    margin-bottom:8px;
    padding:8px 9px;
    border:1px solid #dce6f3;
    border-radius:5px;
    background:#f8fbff;
    color:#1e3150
}

.stock-norm-card > small {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:7px 2px;
    border-top:1px solid #edf2f8;
    font-size:9px
}

.stock-page #norms > .article-callout {
    box-sizing:border-box;
    width:100%;
    max-width:560px;
    padding:24px clamp(18px, 4vw, 30px);
    margin:24px auto 0;
    border:1px solid #b9d1ff;
    border-radius:14px;
    background:linear-gradient(135deg, #f6f9ff, #edf5ff);
    box-shadow:0 8px 24px rgba(39,81,141,.07);
    text-align:center
}

.stock-page #norms > .article-callout > b {
    display:block;
    font-size:16px;
    line-height:1.45
}

.stock-page #norms > .article-callout p {
    margin:10px 0 0;
    font-size:14px;
    line-height:1.65
}

.stock-page #cost {
    min-height:360px
}

.stock-cost-visual > img {
    left:2%;
    bottom:-18%;
    width:53%;
    height:auto;
    object-fit:contain !important;
    -webkit-mask-image:none !important;
    mask-image:none !important
}

.stock-page #cost > .article-callout {
    position:absolute;
    z-index:5;
    right:2.5%;
    top:35px;
    width:36%;
    margin:0;
    padding:17px 20px;
    border:1px solid #d4e2f4;
    border-left:0;
    border-radius:8px;
    background:rgba(255,255,255,.96);
    box-shadow:0 13px 30px rgba(37,78,137,.13)
}

.stock-page #cost > .article-callout + .article-callout {
    top:132px
}

.stock-page #cost > .article-callout p {
    margin:5px 0 0;
    padding:0;
    font-size:16px
}

.stock-page #inventory {
    min-height:410px
}

.stock-inventory-visual > img {
    inset:0;
    object-position:left center
}

.stock-page #inventory > .stock-figures {
    position:absolute;
    z-index:5;
    left:3%;
    top:42px;
    width:43%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:9px;
    margin:0;
    padding:16px;
    border:1px solid #d5e2f3;
    border-radius:9px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 34px rgba(35,76,136,.14);
    backdrop-filter:blur(8px)
}

.stock-page #inventory > .stock-figures > span {
    min-width:0;
    padding:12px 8px;
    border:1px solid #dce6f3;
    border-radius:6px;
    background:#f9fbff;
    color:#607391;
    font-size:8px
}

.stock-page #inventory > .stock-figures strong {
    font-size:17px
}

.stock-page #differences {
    min-height:340px
}

.stock-difference-visual > img {
    inset:0;
    object-position:48% 55%;
    filter:saturate(.75) brightness(1.24)
}

.stock-page #differences > .article-callout {
    position:absolute;
    z-index:5;
    right:2.5%;
    bottom:28px;
    width:35%;
    margin:0;
    padding:20px;
    border:1px solid #d1dff1;
    border-left:0;
    border-radius:8px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 34px rgba(35,76,136,.15)
}

.stock-page #differences > .article-callout p {
    margin:7px 0 0;
    padding:0;
    font-size:11px
}

.stock-page #goods {
    min-height:315px
}

.stock-goods-visual > img {
    inset:0;
    object-position:left center
}

.stock-goods-card {
    position:absolute;
    z-index:4;
    top:30px;
    right:4%;
    width:39%;
    padding:16px;
    border:1px solid #d2e0f1;
    border-radius:9px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 34px rgba(36,77,137,.15);
    color:#526783;
    font-size:9px
}

.stock-goods-card b {
    display:block;
    margin-bottom:7px;
    color:#12213d;
    font-size:12px
}

.stock-goods-card span {
    display:flex;
    justify-content:space-between;
    gap:9px;
    padding:9px 1px;
    border-top:1px solid #e8eef6
}

.stock-goods-card strong {
    color:#18304f
}

.stock-page #consignment {
    min-height:350px
}

.stock-consignment-visual > img {
    inset:0;
    object-position:center;
    filter:saturate(.65) brightness(1.08)
}

.stock-type-card {
    position:absolute;
    z-index:4;
    top:55px;
    width:41%;
    min-height:185px;
    padding:20px;
    border:1px solid #cbdbee;
    border-radius:9px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 34px rgba(35,76,136,.15);
    color:#536985;
    backdrop-filter:blur(8px)
}

.stock-type-card:nth-of-type(1) { left:8% }
.stock-type-card:nth-of-type(2) { right:4% }

.stock-type-card b {
    display:block;
    margin-bottom:18px;
    color:#1265df;
    font-size:14px
}

.stock-type-card span {
    display:block;
    margin:11px 0;
    font-size:10px
}

.stock-page #finance {
    min-height:390px
}

.stock-finance-visual {
    background:linear-gradient(145deg, #dbeeff, #f7fbff)
}

.stock-finance-panel {
    position:absolute;
    z-index:3;
    left:7%;
    top:36px;
    width:74%;
    height:260px;
    padding:19px;
    border:1px solid #cbdcf0;
    border-radius:9px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 36px rgba(35,76,136,.13);
    color:#14223d
}

.stock-finance-panel > b {
    display:block;
    margin-bottom:18px;
    font-size:13px
}

.stock-finance-panel > div {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px
}

.stock-finance-panel span {
    padding:10px;
    border:1px solid #dce7f4;
    border-radius:6px;
    color:#647793;
    font-size:8px
}

.stock-finance-panel strong {
    display:block;
    margin-top:5px;
    color:#172a47;
    font-size:14px
}

.stock-finance-panel i {
    position:absolute;
    left:25px;
    right:25px;
    bottom:24px;
    height:92px;
    border-bottom:2px solid #b9d3f5;
    background:linear-gradient(168deg, transparent 0 44%, #3a84ec 45% 46%, transparent 47%), repeating-linear-gradient(90deg, transparent 0 9%, rgba(51,126,231,.3) 9.5% 13%)
}

.stock-calculator {
    position:absolute;
    z-index:5;
    right:4%;
    bottom:20px;
    width:108px;
    height:142px;
    padding:21px;
    border-radius:13px;
    color:#476485;
    background:linear-gradient(145deg, #eff5fb, #abbfd6);
    box-shadow:0 17px 35px rgba(35,76,136,.22);
    font-size:22px;
    line-height:1.55;
    text-align:center;
    transform:rotate(7deg)
}

.stock-page .prose > #faq {
    margin:32px 0 0;
    padding:36px;
    border:1px solid #dce6f2;
    border-radius:8px;
    background:#fff
}

.motion-ready .stock-page .stock-story.reveal {
    transform:translateY(24px);
    transition:opacity .6s ease, transform .7s cubic-bezier(.2,.75,.25,1)
}

.motion-ready .stock-page .stock-story.reveal.is-visible {
    transform:none
}

@media (max-width:1100px) {
    .stock-page .article-layout {
        width:calc(100% - 28px);
        grid-template-columns:1fr;
        gap:16px
    }

    .stock-page .article-layout > .toc {
        position:static;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:2px
    }

    .stock-page .toc > span,
    .stock-page .toc .toc-all {
        grid-column:1 / -1
    }

    .stock-page .stock-story,
    .stock-page .stock-story:nth-of-type(even) {
        display:flex;
        flex-direction:column;
        min-height:0;
        padding:27px 24px
    }

    .stock-page .stock-story:nth-of-type(even) > :not(.stock-story-media) {
        padding-left:0
    }

    .stock-page .stock-story h2 {
        margin:-42px 0 18px 58px;
        font-size:24px
    }

    .stock-page .stock-story p,
    .stock-page .stock-story li {
        padding-right:0;
        font-size:14px;
        line-height:1.65
    }

    .stock-page .stock-story .stock-story-media,
    .stock-page .stock-story:nth-of-type(even) .stock-story-media {
        width:auto;
        height:300px;
        min-height:300px;
        margin:16px -24px -27px
    }

    .stock-page #cost > .article-callout,
    .stock-page #differences > .article-callout {
        position:relative;
        inset:auto;
        width:auto;
        margin:7px 0;
        border-left:3px solid var(--blue)
    }

    .stock-page #inventory > .stock-figures {
        position:relative;
        inset:auto;
        width:auto;
        margin:10px 0
    }
}

@media (max-width:520px) {
    .stock-page .article-layout {
        width:calc(100% - 18px)
    }

    .stock-page .stock-story,
    .stock-page .stock-story:nth-of-type(even) {
        padding:23px 18px
    }

    .stock-page .stock-story h2 {
        margin:12px 0 15px;
        font-size:21px
    }

    .stock-page .stock-story .stock-story-media,
    .stock-page .stock-story:nth-of-type(even) .stock-story-media {
        height:245px;
        min-height:245px;
        margin:14px -18px -23px
    }

    .stock-direction-card { width:40%; padding:10px }
    .stock-direction-card:nth-of-type(1) { left:10% }
    .stock-norm-card { left:3%; width:52%; padding:11px }
    .stock-goods-card { right:2%; width:48%; padding:11px }
    .stock-type-card { top:35px; width:44%; min-height:175px; padding:12px }
    .stock-finance-panel { left:3%; width:84%; height:215px; padding:12px }
    .stock-finance-panel > div { grid-template-columns:1fr }
    .stock-finance-panel span:nth-child(n+2) { display:none }
    .stock-calculator { width:75px; height:105px; padding:12px; font-size:17px }

    .stock-page .article-layout > .toc {
        grid-template-columns:1fr
    }

    .stock-page .toc > span,
    .stock-page .toc .toc-all {
        grid-column:1
    }
}

/* Stable stock-page composition: one dedicated visual per editorial row. */
.stock-page .article-layout {
    max-width:1520px;
    grid-template-columns:224px minmax(0, 1fr);
    gap:24px;
    padding-top:24px
}

.stock-page .prose {
    gap:16px
}

.stock-page .stock-story,
.stock-page .stock-story:nth-of-type(even) {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 43fr) minmax(420px, 57fr);
    column-gap:28px;
    align-content:start;
    min-height:360px;
    padding:36px 42px;
    border:1px solid #d5e2f2;
    border-radius:8px;
    background:#fff;
    box-shadow:0 10px 28px rgba(38, 73, 124, .07);
    overflow:hidden
}

.stock-page .stock-story:nth-of-type(even) {
    grid-template-columns:minmax(420px, 57fr) minmax(0, 43fr)
}

.stock-page .stock-story:before,
.stock-page .stock-story:nth-of-type(even):before {
    z-index:0;
    background:linear-gradient(135deg, #fff 0%, #fbfdff 68%, #edf5ff 100%);
    transform:none
}

.stock-page .stock-story > :not(.stock-story-media),
.stock-page .stock-story:nth-of-type(even) > :not(.stock-story-media) {
    position:relative;
    z-index:3;
    grid-column:1;
    min-width:0;
    padding-left:0
}

.stock-page .stock-story:nth-of-type(even) > :not(.stock-story-media) {
    grid-column:2
}

.stock-page .stock-story .section-index {
    width:44px;
    height:44px;
    margin:0 0 17px;
    border:1px solid #cce0fb;
    border-radius:7px;
    background:#eaf3ff;
    color:#1768df;
    font-size:14px;
    font-weight:800
}

.stock-page .stock-story h2,
.stock-page .stock-story:nth-of-type(even) h2 {
    min-height:44px;
    display:flex;
    align-items:center;
    margin:-61px 0 22px 62px;
    padding:0;
    color:#10203b;
    font-size:clamp(24px, 2vw, 31px);
    line-height:1.13;
    letter-spacing:0
}

.stock-page .stock-story p,
.stock-page .stock-story li,
.stock-page .stock-story:nth-of-type(even) p,
.stock-page .stock-story:nth-of-type(even) li {
    margin:0 0 12px;
    padding:0;
    color:#53647d;
    font-size:14px;
    line-height:1.6
}

.stock-page .stock-story > p:last-of-type {
    margin-bottom:0
}

.stock-page #warehouse,
.stock-page #norms,
.stock-page #cost,
.stock-page #inventory,
.stock-page #differences,
.stock-page #goods,
.stock-page #consignment,
.stock-page #finance {
    min-height:360px
}

.stock-page .stock-story .stock-story-media,
.stock-page .stock-story:nth-of-type(even) .stock-story-media {
    position:relative;
    z-index:2;
    grid-column:2;
    grid-row:1 / span 80;
    align-self:stretch;
    min-width:0;
    min-height:360px;
    margin:-36px -42px -36px -28px;
    overflow:hidden;
    background:linear-gradient(145deg, #eef6ff, #dcecff);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 20%);
    mask-image:linear-gradient(to right, transparent, #000 20%)
}

.stock-page .stock-story:nth-of-type(even) .stock-story-media {
    grid-column:1;
    margin:-36px -28px -36px -42px;
    -webkit-mask-image:linear-gradient(to left, transparent, #000 20%);
    mask-image:linear-gradient(to left, transparent, #000 20%)
}

.stock-page .stock-story-media > img,
.stock-page .stock-story:nth-of-type(even) .stock-story-media > img {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center;
    filter:none;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-story:nth-of-type(even) .stock-story-media > img {
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-warehouse-hero > img {
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-norms-visual {
    background:linear-gradient(140deg, #e2f1ff, #f9fcff)
}

.stock-page .stock-norms-visual > img,
.stock-page .stock-story:nth-of-type(even) .stock-norms-visual > img {
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-cost-visual > img {
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-inventory-visual > img,
.stock-page .stock-story:nth-of-type(even) .stock-inventory-visual > img {
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-difference-visual > img {
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-goods-visual > img,
.stock-page .stock-story:nth-of-type(even) .stock-goods-visual > img {
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-consignment-visual > img {
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none
}

.stock-page .stock-finance-visual > img {
    object-position:64% center
}

.stock-direction-card,
.stock-norm-card,
.stock-goods-card,
.stock-type-card,
.stock-finance-panel,
.stock-cost-visual > .article-callout,
.stock-difference-visual > .article-callout,
.stock-inventory-visual > .stock-figures {
    border:1px solid rgba(200, 217, 239, .96);
    border-radius:8px;
    background:rgba(255, 255, 255, .94);
    box-shadow:0 14px 34px rgba(30, 67, 122, .16);
    backdrop-filter:blur(9px)
}

.stock-direction-card {
    top:24px;
    width:40%;
    min-height:104px;
    padding:15px;
    color:#58708f;
    font-size:9px
}

.stock-direction-card:first-of-type {
    left:9%
}

.stock-direction-card:last-of-type {
    right:3%
}

.stock-direction-card b {
    font-size:13px
}

.stock-norm-card {
    left:auto;
    right:4%;
    top:30px;
    width:48%;
    padding:17px
}

.stock-cost-visual > .article-callout {
    position:absolute;
    z-index:5;
    left:4%;
    width:47%;
    margin:0;
    padding:16px 18px;
    border-left:3px solid #2173e8
}

.stock-cost-visual > .article-callout:nth-of-type(1) {
    top:34px
}

.stock-cost-visual > .article-callout:nth-of-type(2) {
    top:137px
}

.stock-cost-visual > .article-callout p {
    margin:5px 0 0;
    color:#1b3150;
    font-size:15px;
    line-height:1.35
}

.stock-inventory-visual > .stock-figures {
    position:absolute;
    z-index:5;
    left:7%;
    right:6%;
    bottom:24px;
    width:auto;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin:0;
    padding:14px
}

.stock-inventory-visual > .stock-figures > span {
    min-width:0;
    padding:11px 8px;
    border:1px solid #dce7f4;
    border-radius:6px;
    background:#fbfdff;
    color:#607493;
    font-size:9px
}

.stock-inventory-visual > .stock-figures strong {
    display:block;
    margin-bottom:3px;
    color:#173457;
    font-size:18px
}

.stock-difference-visual > .article-callout {
    position:absolute;
    z-index:5;
    left:5%;
    bottom:26px;
    width:48%;
    margin:0;
    padding:17px 19px;
    border-left:3px solid #2173e8
}

.stock-difference-visual > .article-callout p {
    margin:6px 0 0;
    color:#536985;
    font-size:10px;
    line-height:1.48
}

.stock-goods-card {
    top:28px;
    right:4%;
    width:43%;
    padding:15px
}

.stock-type-card {
    top:34px;
    width:42%;
    min-height:180px;
    padding:18px
}

.stock-type-card:first-of-type {
    left:5%
}

.stock-type-card:last-of-type {
    right:4%
}

.stock-type-card b {
    margin-bottom:14px
}

.stock-finance-visual {
    background:linear-gradient(145deg, #deefff, #f7fbff)
}

.stock-finance-panel {
    left:4%;
    top:30px;
    width:61%;
    height:270px;
    padding:17px
}

.stock-finance-panel > b {
    margin-bottom:15px
}

.stock-finance-panel i {
    height:92px
}

.stock-page .toc .toc-all:after {
    content:'›'
}

@media (max-width:1100px) {
    .stock-page .article-layout {
        grid-template-columns:1fr
    }
}

@media (max-width:900px) {
    .stock-page .stock-story,
    .stock-page .stock-story:nth-of-type(even) {
        display:flex;
        flex-direction:column;
        min-height:0;
        padding:30px 28px
    }

    .stock-page .stock-story > :not(.stock-story-media),
    .stock-page .stock-story:nth-of-type(even) > :not(.stock-story-media) {
        padding-left:0
    }

    .stock-page .stock-story .stock-story-media,
    .stock-page .stock-story:nth-of-type(even) .stock-story-media {
        order:100;
        width:auto;
        height:clamp(320px, 54vw, 430px);
        min-height:320px;
        margin:20px -28px -30px;
        -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%);
        mask-image:linear-gradient(to bottom, transparent, #000 16%)
    }

    .stock-page .stock-story-media > img,
    .stock-page .stock-story:nth-of-type(even) .stock-story-media > img {
        -webkit-mask-image:none;
        mask-image:none
    }
}

@media (max-width:600px) {
    .stock-page .article-layout {
        width:calc(100% - 18px);
        padding-top:12px
    }

    .stock-page .stock-story,
    .stock-page .stock-story:nth-of-type(even) {
        padding:24px 18px
    }

    .stock-page .stock-story h2,
    .stock-page .stock-story:nth-of-type(even) h2 {
        min-height:0;
        margin:10px 0 17px;
        font-size:22px
    }

    .stock-page .stock-story .stock-story-media,
    .stock-page .stock-story:nth-of-type(even) .stock-story-media {
        height:300px;
        min-height:300px;
        margin:16px -18px -24px
    }

    .stock-direction-card {
        top:14px;
        width:43%;
        min-height:92px;
        padding:10px
    }

    .stock-direction-card:first-of-type {
        left:4%
    }

    .stock-norm-card {
        top:14px;
        right:3%;
        width:54%;
        padding:11px
    }

    .stock-cost-visual > .article-callout {
        left:3%;
        width:54%;
        padding:11px 12px
    }

    .stock-cost-visual > .article-callout:nth-of-type(1) {
        top:18px
    }

    .stock-cost-visual > .article-callout:nth-of-type(2) {
        top:112px
    }

    .stock-cost-visual > .article-callout p {
        font-size:12px
    }

    .stock-inventory-visual > .stock-figures {
        left:3%;
        right:3%;
        bottom:14px;
        padding:9px
    }

    .stock-inventory-visual > .stock-figures > span {
        padding:8px 5px;
        font-size:7px
    }

    .stock-inventory-visual > .stock-figures strong {
        font-size:14px
    }

    .stock-difference-visual > .article-callout {
        left:3%;
        bottom:14px;
        width:56%;
        padding:12px
    }

    .stock-goods-card {
        top:14px;
        right:2%;
        width:50%;
        padding:10px
    }

    .stock-type-card {
        top:22px;
        width:44%;
        min-height:166px;
        padding:11px
    }

    .stock-type-card:first-of-type {
        left:4%
    }

    .stock-type-card:last-of-type {
        right:3%
    }

    .stock-type-card b {
        margin-bottom:9px;
        font-size:11px
    }

    .stock-type-card span {
        margin:8px 0;
        font-size:8px
    }

    .stock-finance-panel {
        left:3%;
        top:16px;
        width:69%;
        height:235px;
        padding:11px
    }

    .stock-finance-panel > div {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .stock-finance-panel span:nth-child(n+2) {
        display:block
    }

    .stock-finance-panel span:last-child {
        grid-column:1 / -1
    }

    .stock-finance-panel i {
        bottom:13px;
        height:48px
    }
}