@font-face {
    font-family: Manrope;
    src: url('/assets/manrope-400.ttf') format('truetype');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Manrope;
    src: url('/assets/manrope-600.ttf') format('truetype');
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: Manrope;
    src: url('/assets/manrope-800.ttf') format('truetype');
    font-weight: 800;
    font-display: swap
}

* {
    box-sizing: border-box
}

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

body {
    margin: 0;
    font: 16px/1.65 Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #17201e;
    background: #fff;
    -webkit-font-smoothing: antialiased
}

body.variant-b {
    color: #f5f6f2;
    background: #111820
}

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

button,
input,
textarea {
    font: inherit
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

button:disabled {
    cursor: wait
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0
}

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

button {
    border: 0
}

input,
textarea {
    min-width: 0
}

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

input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #739924;
    outline-offset: 2px
}

[hidden] {
    display: none !important
}

.container {
    width: min(1240px, calc(100% - 100px));
    margin-inline: auto
}

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

.skip {
    position: fixed;
    left: 20px;
    top: -100px;
    padding: 12px 24px;
    background: #b9f445;
    color: #101817;
    z-index: 100
}

.skip:focus {
    top: 15px
}

.site-header {
    position: relative;
    background: #fff;
    z-index: 20
}

.header-inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 22px
}

.brand {
    width: 116px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: #282c28;
    border-radius: 8px
}

.brand img {
    width: 150px;
    height: auto;
    max-width: none;
    transform: translate(-18px, -20px)
}

.brand-description {
    font-size: 12px;
    line-height: 1.45;
    color: #666e67;
    border-left: 1px solid #d9dfd6;
    padding-left: 19px
}

.site-header nav {
    display: flex;
    gap: 29px;
    font-size: 14px;
    font-weight: 600;
    margin-left: auto
}

.site-header nav a {
    transition: color .2s
}

.site-header nav a:hover {
    color: #537d07
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    min-height: 55px;
    padding: 15px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    transition: transform .2s, background .2s, box-shadow .2s
}

.button .icon {
    width: 20px;
    height: 20px
}

.button:hover {
    transform: translateY(-2px)
}

.primary {
    background: #b6ed39;
    color: #152016
}

.primary:hover {
    background: #c6ff4f;
    box-shadow: 0 7px 20px #79952826
}

.secondary {
    background: transparent;
    border: 1px solid #ccd3c7;
    color: #243022
}

.secondary:hover {
    background: #f3f6ee
}

.header-button {
    min-height: 43px;
    background: #17231f;
    color: #fff;
    padding: 11px 19px;
    font-size: 12px;
    margin-left: 20px
}

.header-button:hover {
    background: #324437
}

.ink {
    background: #182320;
    color: #fff
}

.menu-toggle {
    display: none;
    background: transparent;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: inherit
}

.menu-toggle span {
    height: 2px;
    background: currentColor;
    display: block;
    margin: 6px 0
}

.mobile-menu {
    padding: 10px 24px 24px !important;
    gap: 15px !important;
    flex-direction: column;
    margin: 0 !important
}

.eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .095em;
    line-height: 1.5;
    color: #75816e
}

h2 {
    font-size: clamp(34px, 3.35vw, 46px);
    font-weight: 800;
    letter-spacing: -.047em;
    line-height: 1.15
}

h3 {
    font-weight: 800
}

.fine-print {
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: #687266
}

.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 800
}

.inline-link .icon {
    width: 19px
}

.section-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px
}

.section-top .eyebrow {
    margin-bottom: 14px
}

.section-top>p {
    font-size: 15px;
    color: #737b70
}

.site-footer {
    padding-block: 30px;
    background: #fff
}

.footer-inner {
    display: flex;
    align-items: center;
    gap: 26px
}

.footer-inner>p {
    font-size: 12px;
    line-height: 1.65;
    color: #586451
}

.footer-inner>p span {
    color: #8c9586
}

.footer-inner>a:last-child {
    margin-left: auto;
    font-size: 13px
}

.site-footer .brand {
    width: 96px;
    height: 50px
}

.site-footer .brand img {
    width: 124px;
    transform: translate(-15px, -16px)
}

/* A: light product-led composition */
.a-hero {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 60px;
    padding-top: 55px;
    padding-bottom: 86px;
    align-items: center
}

.audience {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #f0f5e9;
    border: 1px solid #e5ebdd;
    border-radius: 100px;
    padding: 6px 12px
}

.audience i {
    width: 6px;
    height: 6px;
    background: #65832e;
    border-radius: 50%
}

.a-hero h1 {
    font-size: clamp(48px, 4.95vw, 69px);
    line-height: 1.1;
    letter-spacing: -.057em;
    font-weight: 800;
    margin-top: 23px
}

.lime-underline {
    position: relative;
    z-index: 0;
    white-space: nowrap
}

.lime-underline:after {
    content: '';
    height: .19em;
    background: #c5f367;
    position: absolute;
    left: -3px;
    right: -7px;
    bottom: .06em;
    z-index: -1;
    transform: rotate(-1.5deg)
}

.hero-description {
    font-size: 17px;
    line-height: 1.75;
    color: #636c63;
    margin-top: 27px
}

.hero-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 30px
}

.hero-actions .button {
    font-size: 13px;
    padding: 16px 20px;
    gap: 18px
}

.under-button {
    font-size: 11px;
    margin-top: 17px;
    color: #7c8477
}

.a-hero-visual {
    position: relative;
    height: 500px;
    margin-right: 10px
}

.photo-shape {
    position: absolute;
    inset: 0 0 0 40px;
    overflow: hidden;
    border-radius: 28px 100px 28px 28px;
    background: #e8eee4
}

.photo-shape img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 65% center
}

.floating-status {
    position: absolute;
    right: -23px;
    top: 36px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid #e9ede6;
    padding: 16px 21px;
    border-radius: 16px;
    box-shadow: 0 12px 48px #3444211a;
    transform: rotate(3deg)
}

.floating-status>.icon {
    background: #e4f6bf;
    box-sizing: content-box;
    padding: 8px;
    color: #689315;
    border-radius: 50%;
    width: 21px;
    height: 21px
}

.floating-status b {
    font-size: 14px;
    display: block
}

.floating-status span {
    font-size: 10px;
    color: #738269
}

.floating-document {
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 235px;
    background: #fff;
    border-radius: 19px;
    padding: 19px 22px;
    box-shadow: 0 18px 70px #10201926;
    transform: rotate(-5deg);
    border: 1px solid #edf0e8
}

.mini-top {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 9px;
    color: #8b9485
}

.mini-top .icon {
    width: 16px;
    height: 16px;
    color: #536339
}

.floating-document h3 {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.025em;
    margin-top: 14px
}

.document-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 17px
}

.document-lines i {
    display: block;
    height: 5px;
    width: 100%;
    background: #edf0e8;
    border-radius: 10px
}

.document-lines i:nth-child(2) {
    width: 78%
}

.document-lines i:nth-child(3) {
    width: 55%
}

.document-footer {
    font-size: 9px;
    border-top: 1px solid #edf0e8;
    margin-top: 18px;
    padding-top: 11px;
    color: #697b5a;
    display: flex;
    align-items: center;
    gap: 7px
}

.check-mini {
    border-radius: 100%;
    background: #e8f5ce;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.photo-credit {
    position: absolute;
    right: 20px;
    bottom: 13px;
    color: #fff;
    font-size: 10px;
    text-shadow: 0 1px 4px #0009
}

.hero-seal {
    position: absolute;
    right: -22px;
    bottom: 50px;
    width: 82px;
    height: 82px;
    background: #baed46;
    transform: rotate(8deg);
    border-radius: 50%;
    font-size: 29px;
    font-weight: 800;
    line-height: .9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 20px #16201219
}

.hero-seal span {
    font-size: 9px;
    font-weight: 600;
    margin-top: 7px
}

.a-solutions {
    padding-bottom: 90px
}

.solution-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 19px
}

.solution-card {
    border-radius: 22px;
    padding: 29px 30px 23px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s
}

.solution-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px #1d2a1620
}

.card-ink {
    background: #182b24;
    color: #fff
}

.card-lime {
    background: #c3ef66;
    color: #213018
}

.card-lilac {
    background: #ece8f6;
    color: #372d4e
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.card-top>.icon {
    width: 30px;
    height: 30px
}

.card-top>span {
    font-size: 11px;
    opacity: .65
}

.solution-card h3 {
    font-size: 25px;
    letter-spacing: -.035em;
    line-height: 1.2;
    margin-top: 27px
}

.solution-card p {
    font-size: 13px;
    line-height: 1.65;
    opacity: .75;
    margin-top: 15px;
    max-width: 290px
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    margin-top: auto;
    font-size: 11px;
    font-weight: 600
}

.card-bottom>.icon {
    width: 19px
}

.a-workspace {
    background: #f4f6f1;
    padding-block: 76px 85px
}

.center-heading {
    text-align: center
}

.center-heading h2 {
    margin-top: 17px
}

.center-heading>p {
    margin-top: 20px;
    font-size: 15px;
    color: #6e7968
}

.work-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: #e9eee3;
    width: fit-content;
    border-radius: 100px;
    margin: 30px auto 35px
}

.work-tabs button {
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border-radius: 100px;
    padding: 11px 25px;
    font-size: 13px;
    color: #64745a;
    font-weight: 600
}

.work-tabs .icon {
    width: 18px;
    height: 18px
}

.work-tabs button[aria-selected=true] {
    background: #fff;
    color: #24341d;
    box-shadow: 0 3px 12px #223b1810
}

.workspace-panel {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 46px;
    align-items: center;
    min-height: 400px
}

.panel-copy {
    padding: 24px 0 24px 10px
}

.pill {
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
    border: 1px solid #cbd6c0;
    color: #627548;
    padding: 5px 11px;
    border-radius: 100px
}

.panel-copy h3 {
    font-size: 35px;
    letter-spacing: -.045em;
    line-height: 1.15;
    margin-top: 17px
}

.panel-copy>p {
    font-size: 14px;
    line-height: 1.85;
    color: #6b7765;
    margin-top: 19px
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 27px;
    display: grid;
    gap: 9px;
    font-size: 12px;
    color: #4f6344
}

.check-list li:before {
    content: '✓';
    color: #668c29;
    margin-right: 10px
}

.app-mock {
    background: #fff;
    border: 1px solid #dbe2d5;
    border-radius: 17px;
    box-shadow: 0 20px 70px #25451a10;
    overflow: hidden;
    transform: perspective(1200px) rotateY(-4deg) rotateX(1deg)
}

.mock-bar {
    padding: 14px 18px;
    border-bottom: 1px solid #edf0e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    color: #88917f
}

.mock-dots {
    display: flex;
    gap: 5px
}

.mock-dots i {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #d9dfd4
}

.mock-layout {
    display: grid;
    grid-template-columns: 117px 1fr;
    min-height: 340px
}

.mock-layout aside {
    background: #f5f7f1;
    padding: 23px 12px;
    border-right: 1px solid #edf0e9;
    display: flex;
    gap: 13px;
    flex-direction: column
}

.mock-layout aside>b {
    font-size: 25px;
    letter-spacing: -2px;
    padding-left: 9px;
    line-height: 1.2;
    margin-bottom: 18px
}

.mock-layout aside>b span {
    font-size: 14px;
    color: #7cb230
}

.mock-layout aside>span {
    font-size: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    color: #788170
}

.mock-layout aside .icon {
    width: 12px;
    height: 12px
}

.mock-layout aside .active {
    background: #e4eccc;
    color: #526b28;
    border-radius: 5px
}

.mock-main {
    padding: 28px 24px
}

.mock-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center
}

.mock-title h4 {
    font-size: 17px;
    letter-spacing: -.025em
}

.status-chip {
    padding: 4px 8px;
    border-radius: 100px;
    background: #f1eddc;
    color: #8b7834;
    font-size: 8px;
    white-space: nowrap
}

.route-display {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    background: #f6f8f3;
    padding: 20px 15px;
    margin-top: 25px;
    border-radius: 10px
}

.route-display span,
.field-grid span {
    font-size: 9px;
    color: #8b9485;
    display: block
}

.route-display b {
    font-size: 11px;
    display: block;
    margin-top: 5px
}

.route-display>.icon {
    width: 17px;
    color: #91a77b
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 21px
}

.field-grid b {
    font-size: 11px;
    display: block;
    margin-top: 4px
}

.mock-timeline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 8px;
    color: #8b9583
}

.mock-timeline i {
    height: 1px;
    background: #d9e0d0;
    flex: 1
}

.mock-timeline .done {
    color: #5f822a
}

.mock-timeline .done:before {
    content: '✓';
    display: inline-block;
    margin-right: 4px
}

.mock-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    color: #7d8b6f;
    margin-top: 28px
}

.mock-note .icon {
    width: 12px;
    height: 12px
}

.document-demo,
.sync-demo {
    padding: 28px 35px;
    background: #e8eedf;
    border-radius: 23px;
    min-height: 360px
}

.demo-caption {
    font-size: 10px;
    color: #7e8e6d;
    text-align: right;
    margin-bottom: 22px
}

.order-token {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #fff;
    border-radius: 12px;
    width: fit-content;
    padding: 14px 22px;
    margin: auto;
    box-shadow: 0 8px 20px #2a3b1110
}

.order-token>.icon {
    width: 28px;
    color: #6b8c38
}

.order-token b {
    display: block;
    font-size: 13px
}

.order-token span {
    font-size: 9px;
    color: #7e8c6f
}

.demo-arrow {
    display: block;
    text-align: center;
    color: #7f995a;
    font-size: 25px;
    line-height: 1.4
}

.paper-pair {
    display: flex;
    justify-content: center;
    gap: 22px
}

.paper {
    width: 44%;
    padding: 20px;
    background: white;
    border-radius: 4px 15px 4px 4px;
    box-shadow: 0 8px 20px #2a3b1110
}

.paper:first-child {
    transform: rotate(-4deg)
}

.paper:last-child {
    transform: rotate(4deg)
}

.paper-icon {
    display: block;
    color: #748e4e
}

.paper-icon>.icon {
    width: 21px
}

.paper h4 {
    font-size: 22px;
    margin-top: 8px
}

.paper-rule {
    height: 1px;
    background: #e4e8dc;
    margin: 12px 0
}

.paper p {
    font-size: 9px;
    color: #8a9580;
    margin-top: 6px
}

.paper-check {
    font-size: 8px;
    color: #698c32;
    display: block;
    margin-top: 20px
}

.sync-hubs {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center
}

.sync-hubs>div {
    width: 42%;
    background: #fff;
    border: 1px solid #dbe4ce;
    border-radius: 19px;
    padding: 25px 15px;
    text-align: center
}

.sync-hubs .icon {
    width: 40px;
    height: 40px;
    color: #749b3d;
    margin: 0 auto 17px
}

.sync-hubs strong {
    font-size: 35px;
    color: #a87620;
    line-height: 40px;
    display: block;
    margin-bottom: 17px
}

.sync-hubs b {
    display: block;
    font-size: 13px
}

.sync-hubs div>span {
    font-size: 9px;
    color: #7c8b6c
}

.sync-track>.icon {
    width: 28px;
    margin: 0
}

.sync-log {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    font-size: 11px;
    color: #6d8056
}

.sync-log>span {
    display: flex;
    gap: 9px;
    align-items: center
}

.sync-log .icon {
    width: 14px;
    height: 14px
}

.a-experience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding-block: 95px;
    align-items: center
}

.experience-visual {
    height: 395px;
    position: relative;
    background: #1c3028;
    border-radius: 24px;
    overflow: hidden;
    color: #e8f1dc;
    padding: 28px
}

.experience-visual>.eyebrow {
    color: #b0c69b;
    font-size: 9px
}

.experience-visual>p {
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px;
    text-align: center;
    font-size: 10px;
    color: #b7c6ad
}

.experience-orbit {
    position: relative;
    height: 295px;
    max-width: 390px;
    margin: auto
}

.experience-orbit:before {
    content: '';
    position: absolute;
    border: 1px solid #59734d66;
    border-radius: 50%;
    width: 270px;
    height: 190px;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%) rotate(-30deg)
}

.experience-orbit:after {
    content: '';
    position: absolute;
    border: 1px solid #59734d66;
    border-radius: 50%;
    width: 280px;
    height: 205px;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%) rotate(36deg)
}

.orbit-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 108px;
    height: 108px;
    border-radius: 25px;
    background: #c0ee6d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #22331c;
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    z-index: 2;
    letter-spacing: -3px;
    box-shadow: 0 0 50px #a4d24916
}

.orbit-center>span {
    font-size: 12px;
    letter-spacing: 0;
    margin-top: 5px
}

.orbit-label {
    position: absolute;
    background: #294132;
    border: 1px solid #546b47;
    border-radius: 100px;
    padding: 8px 15px;
    font-size: 11px;
    z-index: 3
}

.orbit-1 {
    top: 40px;
    left: 20px
}

.orbit-2 {
    top: 45px;
    right: 5px
}

.orbit-3 {
    bottom: 41px;
    left: 24px
}

.orbit-4 {
    bottom: 42px;
    right: 0
}

.experience-copy h2 {
    margin-top: 17px
}

.experience-copy>p:not(.fine-print) {
    font-size: 15px;
    color: #6e7968;
    line-height: 1.9;
    margin-top: 23px
}

.experience-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-block: 24px
}

.experience-points>span {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 11px;
    font-weight: 600
}

.experience-points .icon {
    width: 14px;
    height: 14px;
    color: #789b46
}

.a-process {
    padding-bottom: 80px
}

.process-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px
}

.process-cards article {
    border-top: 1px solid #d9e0d1;
    padding-top: 22px
}

.process-cards article>span {
    font-size: 11px;
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    background: #eaf1df;
    border-radius: 50%;
    color: #647b48
}

.process-cards h3 {
    font-size: 23px;
    letter-spacing: -.025em;
    margin-top: 15px
}

.process-cards p {
    font-size: 13px;
    line-height: 1.8;
    color: #6f7867;
    margin-top: 11px;
    max-width: 330px
}

.a-faq {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    padding-bottom: 85px
}

.a-faq h2 {
    margin-top: 17px
}

.faq-list details {
    border-top: 1px solid #d8dfd0;
    padding-block: 20px
}

.faq-list details:last-child {
    border-bottom: 1px solid #d8dfd0
}

.faq-list summary {
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    line-height: 1.6
}

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

.faq-list summary .icon {
    width: 18px;
    height: 18px;
    color: #779359;
    transition: transform .2s
}

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

.faq-list details>p {
    margin-top: 14px;
    font-size: 13px;
    color: #6e7866;
    line-height: 1.8;
    padding-right: 24px
}

.a-contact {
    background: #d7f3a3;
    padding-block: 72px
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: start
}

.a-contact h2 {
    font-size: 54px;
    line-height: 1.09;
    margin-top: 24px
}

.a-contact h2 em {
    font-style: normal;
    color: #5a7e2a
}

.a-contact .contact-grid>div>p:not(.fine-print) {
    font-size: 16px;
    margin-top: 23px;
    line-height: 1.8;
    color: #5c7046
}

.contact-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 31px;
    font-size: 13px;
    font-weight: 600
}

.contact-badge .icon {
    width: 18px
}

.a-contact .fine-print {
    margin-top: 35px;
    color: #73885a
}

.form-card {
    padding: 32px;
    background: #fff;
    border-radius: 22px;
    color: #24321e;
    box-shadow: 0 15px 45px #2b430b0b
}

form label {
    font-size: 11px;
    font-weight: 600;
    display: block;
    margin-bottom: 7px
}

form input:not([type=hidden]):not([type=checkbox]),
form textarea {
    border: 1px solid #dfe5d8;
    background: #f8faf5;
    border-radius: 9px;
    padding: 12px 13px;
    color: #273521;
    width: 100%;
    margin-bottom: 17px;
    line-height: 1.5;
    font-size: 14px;
    min-height: 47px
}

form textarea {
    resize: vertical
}

form input::placeholder,
form textarea::placeholder {
    font-size: 12px;
    color: #96a08d;
    opacity: 1
}

.form-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.optional {
    font-weight: 400;
    color: #919c85;
    font-size: 10px
}

.form-submit {
    width: 100%;
    margin-top: 3px
}

.form-status {
    font-size: 10px;
    line-height: 1.7;
    color: #8a947e;
    margin-top: 15px
}

.form-status.error {
    color: #9d3927
}

.honey {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.consent {
    display: flex;
    gap: 10px;
    align-items: start;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 15px
}

.consent input {
    width: 16px;
    height: 16px;
    accent-color: #75982c;
    flex-shrink: 0
}

.consent a {
    text-decoration: underline
}

/* B: cinematic, case-first, interactive narrative */
.variant-b .site-header {
    background: #111820;
    border-bottom: 1px solid #30373c
}

.variant-b .brand-description {
    color: #8d969d;
    border-color: #3d4448
}

.variant-b .brand {
    border-radius: 0
}

.variant-b .header-button {
    background: #b6ed39;
    color: #14201c
}

.variant-b nav a:hover {
    color: #c0f168
}

.variant-b .header-inner {
    min-height: 87px
}

.variant-b .site-header nav {
    font-weight: 400;
    font-size: 12px
}

.variant-b .button {
    border-radius: 5px;
    font-size: 12px
}

.b-hero-top {
    padding-top: 40px
}

.b-kicker {
    display: flex;
    justify-content: space-between;
    color: #8c9a9f;
    font-size: 9px;
    letter-spacing: .1em;
    font-weight: 600
}

.b-kicker>span:first-child {
    color: #b6ed39
}

.b-hero-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 60px;
    padding: 31px 0 46px
}

.b-hero h1 {
    font-weight: 600;
    font-size: clamp(44px, 4.3vw, 62px);
    line-height: 1.14;
    letter-spacing: -.05em
}

.b-hero h1>span {
    color: #a8b4b7
}

.b-hero-side {
    padding-bottom: 4px;
    flex-shrink: 0
}

.b-hero-side>p {
    font-size: 12px;
    line-height: 1.8;
    color: #a7b1b5
}

.b-hero-side>.button {
    margin-top: 19px
}

.b-caption {
    display: block;
    color: #707e85;
    font-size: 9px;
    margin-top: 10px
}

.b-panorama {
    position: relative;
    height: 335px;
    background: #253537;
    overflow: hidden
}

.b-panorama:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0c1a1df2 0%, #11232218 65%)
}

.b-panorama>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 59%
}

.panorama-overlay {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: end;
    z-index: 2
}

.coordinate-mark {
    border-left: 2px solid #b6ed39;
    padding-left: 17px
}

.coordinate-mark>span {
    display: block;
    color: #b2c5b9;
    font-size: 9px;
    letter-spacing: .15em
}

.coordinate-mark>strong {
    display: block;
    font-size: 23px;
    letter-spacing: -.02em;
    font-weight: 400;
    margin-top: 8px
}

.scroll-cue {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #d0dad0
}

.scroll-cue>.icon {
    width: 18px
}

.image-caption {
    position: absolute;
    z-index: 3;
    right: 20px;
    top: 14px;
    font-size: 8px;
    background: #10191a70;
    padding: 4px 7px;
    border-radius: 2px;
    color: #d2dbd8
}

.b-hero-bottom {
    display: flex;
    justify-content: space-between;
    padding-block: 24px;
    border-bottom: 1px solid #2e3b40;
    font-size: 10px;
    color: #8c9fa3
}

.b-case {
    padding-top: 88px;
    padding-bottom: 72px
}

.section-marker {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: .12em;
    color: #80949a;
    padding-bottom: 25px;
    border-bottom: 1px solid #2e3c41
}

.section-marker>span:first-child {
    color: #aecb93
}

.b-case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    margin-top: 34px
}

.variant-b h2 {
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.18
}

.variant-b h2 em {
    font-style: normal;
    color: #a6bf80
}

.large-copy {
    font-size: 18px;
    line-height: 1.8;
    color: #dee5df;
    letter-spacing: -.02em
}

.muted-copy {
    font-size: 12px;
    line-height: 1.9;
    color: #8a9ca0;
    margin-top: 22px
}

.case-ribbon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px 32px;
    background: #1b2a2d;
    border: 1px solid #2b3e3e;
    border-radius: 4px;
    margin-top: 44px;
    font-size: 15px;
    color: #c9d9cb
}

.case-ribbon i {
    font-style: normal;
    color: #a7d263;
    font-size: 25px
}

.b-journey {
    background: #182429;
    padding-block: 70px 78px
}

.journey-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-top: 30px
}

.journey-heading>p {
    font-size: 12px;
    color: #889e9f
}

.journey-nav {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.journey-nav button {
    text-align: left;
    padding: 17px 20px 21px;
    background: none;
    color: #6f858a;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    border-bottom: 2px solid #344b50;
    transition: background .2s, color .2s
}

.journey-nav button>span {
    font-size: 9px;
    grid-column: 1/-1
}

.journey-nav strong {
    font-size: 18px;
    font-weight: 400
}

.journey-nav .icon {
    width: 18px
}

.journey-nav button[aria-selected=true] {
    color: #c6eb96;
    border-color: #b3e471;
    background: #20342f
}

.stage-panel {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    padding-top: 45px;
    align-items: center;
    min-height: 330px
}

.stage-visual {
    position: relative;
    min-height: 286px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #304b3d 0%, #1b2b2d00 65%)
}

.stage-big-number {
    position: absolute;
    font-size: 230px;
    line-height: 1;
    font-weight: 600;
    color: #223b3d;
    letter-spacing: -.09em;
    left: 0;
    top: -2px
}

.stage-object {
    position: relative;
    z-index: 1;
    width: 230px;
    border: 1px solid #4d6857;
    background: linear-gradient(145deg, #30473c, #223630);
    padding: 24px;
    border-radius: 7px;
    box-shadow: 20px 22px 0 -9px #1a3030, 20px 22px 0 -8px #3c5045;
    transform: rotate(-4deg)
}

.stage-object>span:first-child {
    font-size: 8px;
    letter-spacing: .1em;
    color: #9bb690;
    display: block
}

.stage-object>.icon {
    width: 40px;
    height: 40px;
    color: #aed77d;
    margin-top: 18px
}

.stage-object strong {
    font-size: 19px;
    letter-spacing: -.025em;
    font-weight: 400;
    display: block;
    margin-top: 15px
}

.stage-object-line {
    display: block;
    height: 1px;
    background: #53684f;
    margin: 17px 0 10px
}

.stage-object>p {
    font-size: 10px;
    color: #9caf9b
}

.stage-visual-caption {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    color: #75908d
}

.stage-topic {
    font-size: 8px;
    color: #95b271;
    letter-spacing: .1em
}

.stage-copy h3 {
    white-space: pre-line;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -.035em;
    margin-top: 15px
}

.stage-copy>p {
    font-size: 13px;
    color: #96acaa;
    line-height: 1.9;
    margin-top: 18px
}

.human-system {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 28px;
    padding-top: 19px;
    border-top: 1px solid #354b4b
}

.human-system span {
    font-size: 9px;
    color: #b1ce94
}

.human-system p {
    font-size: 11px;
    color: #92a9a4;
    margin-top: 7px
}

.b-estimate {
    background: #dce9cd;
    color: #253522;
    padding-block: 77px
}

.estimate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 85px;
    align-items: start
}

.b-estimate .eyebrow {
    color: #708758;
    font-size: 9px
}

.b-estimate h2 {
    margin-top: 20px;
    font-weight: 600
}

.b-estimate h2 em {
    color: #688b42
}

.estimate-grid>div>p:not(.estimate-disclaimer) {
    font-size: 14px;
    color: #718663;
    margin-top: 22px;
    line-height: 1.9
}

.estimate-disclaimer {
    font-size: 10px;
    color: #829570;
    margin-top: 33px;
    line-height: 1.8
}

.calculator {
    padding: 30px;
    background: #f5f8ef;
    border-radius: 6px;
    border: 1px solid #d1dfc0
}

.calc-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.calc-inputs>label {
    font-size: 11px;
    line-height: 1.7;
    color: #62794e
}

.calc-inputs input {
    margin-top: 12px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #bfceaf;
    background: transparent;
    border-radius: 0;
    color: #263821;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.5;
    padding: 0 0 8px
}

.calc-result {
    margin-top: 28px;
    padding: 22px 0;
    border-top: 1px solid #d7e1ca
}

.calc-result>span {
    font-size: 10px;
    color: #779363
}

.calc-result>div {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-top: 3px
}

.calc-result output {
    font-size: 70px;
    letter-spacing: -.06em;
    line-height: 1.2;
    color: #405f2f
}

.calc-result strong {
    font-size: 15px;
    font-weight: 400;
    color: #7c9270
}

.calc-result>p {
    font-size: 10px;
    color: #96a68a;
    margin-top: 8px
}

.calculator>.button {
    width: 100%;
    border-radius: 4px
}

.b-approach {
    padding-block: 80px
}

.approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    margin-top: 35px
}

.approach-grid>div:first-child>p {
    font-size: 14px;
    color: #8c9fa1;
    margin-top: 23px;
    max-width: 400px;
    line-height: 1.9
}

.approach-list {
    display: flex;
    flex-direction: column;
    gap: 27px
}

.approach-list>article {
    display: flex;
    gap: 23px;
    border-bottom: 1px solid #2e3c41;
    padding-bottom: 25px
}

.approach-list article>span {
    font-size: 10px;
    color: #91b16d;
    margin-top: 5px
}

.approach-list h3 {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -.025em
}

.approach-list p {
    font-size: 12px;
    color: #8c9fa1;
    line-height: 1.8;
    margin-top: 9px
}

.b-faq {
    padding-bottom: 80px
}

.faq-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    margin-top: 30px
}

.variant-b .faq-list details {
    border-color: #324248
}

.variant-b .faq-list summary {
    font-weight: 400;
    font-size: 13px
}

.variant-b .faq-list details>p {
    color: #8e9fa2;
    font-size: 12px
}

.variant-b .faq-list summary .icon {
    color: #99b77c
}

.b-contact {
    background: #1c2d2b;
    padding-block: 75px
}

.b-contact .eyebrow {
    font-size: 9px;
    color: #94b378
}

.b-contact h2 {
    margin-top: 22px
}

.b-contact .contact-grid>div>p:not(.fine-print) {
    font-size: 14px;
    line-height: 1.9;
    color: #9aada2;
    margin-top: 25px;
    max-width: 360px
}

.b-contact-mark {
    font-size: 85px;
    color: #bed98b;
    line-height: 1;
    margin-top: 25px
}

.b-contact .fine-print {
    color: #789788;
    font-size: 10px !important;
    margin-top: 20px
}

.b-contact .form-card {
    border-radius: 7px;
    padding: 30px;
    background: #e6eddf
}

.variant-b .site-footer {
    background: #111820;
    border-top: 1px solid #2b3a39
}

.variant-b .footer-inner>p {
    color: #a2b1a7
}

.variant-b .footer-inner>a:last-child {
    color: #8b9e95
}

/* Responsive and motion */
@media(min-width:1600px) {
    .a-hero {
        padding-block: 75px 100px
    }

    .a-hero-visual {
        height: 550px
    }

    .b-panorama {
        height: 390px
    }
}

@media(max-width:1200px) {
    .container {
        width: calc(100% - 64px)
    }

    .header-inner {
        gap: 16px
    }

    .brand-description {
        display: none
    }

    .site-header nav {
        gap: 22px
    }

    .a-hero {
        gap: 30px
    }

    .a-hero h1 {
        font-size: 56px
    }

    .a-hero-visual {
        height: 465px
    }

    .a-hero .button {
        font-size: 12px;
        padding: 15px 17px;
        gap: 10px
    }

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

    .floating-document {
        width: 210px;
        left: -4px
    }

    .floating-status {
        right: -12px
    }

    .hero-seal {
        right: -10px
    }

    .solution-card {
        padding: 24px
    }

    .solution-card h3 {
        font-size: 23px
    }

    .workspace-panel {
        gap: 30px;
        grid-template-columns: .75fr 1.25fr
    }

    .mock-main {
        padding: 23px 16px
    }

    .a-experience {
        gap: 50px
    }

    .contact-grid {
        gap: 50px
    }

    .a-faq {
        gap: 50px
    }

    .b-hero-heading {
        gap: 25px
    }

    .b-hero h1 {
        font-size: 53px
    }

    .b-case-grid,
    .approach-grid {
        gap: 55px
    }

    .estimate-grid {
        gap: 50px
    }

    .stage-panel {
        gap: 40px
    }

    .calc-result output {
        font-size: 64px
    }
}

@media(max-width:960px) {
    .site-header nav {
        gap: 17px;
        font-size: 12px
    }

    .header-button {
        margin-left: 0
    }

    .a-hero {
        padding-top: 40px;
        gap: 25px
    }

    .a-hero h1 {
        font-size: 47px
    }

    .hero-description {
        font-size: 14px
    }

    .desktop-br {
        display: none
    }

    .a-hero-visual {
        height: 430px
    }

    .floating-status {
        font-size: 12px;
        padding: 13px
    }

    .floating-status span {
        font-size: 9px
    }

    .floating-document {
        width: 190px;
        padding: 18px
    }

    .floating-document h3 {
        font-size: 16px
    }

    .hero-seal {
        display: none
    }

    .hero-actions {
        gap: 10px
    }

    .hero-actions .button {
        padding: 14px 17px;
        min-height: 48px
    }

    .a-solutions h2 {
        font-size: 35px
    }

    .solution-card {
        padding: 22px;
        min-height: 285px
    }

    .solution-card h3 {
        font-size: 21px
    }

    .solution-card p {
        font-size: 12px
    }

    .workspace-panel {
        grid-template-columns: 1fr;
        gap: 23px;
        max-width: 750px;
        margin: auto
    }

    .panel-copy {
        padding: 0;
        max-width: 600px
    }

    .panel-copy>p {
        max-width: 550px
    }

    .panel-copy h3 br {
        display: none
    }

    .panel-copy h3 {
        font-size: 32px
    }

    .check-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-block: 15px 20px
    }

    .app-mock {
        transform: none
    }

    .mock-layout {
        min-height: 300px;
        grid-template-columns: 135px 1fr
    }

    .mock-layout aside {
        padding-inline: 20px
    }

    .mock-main {
        padding: 26px 30px
    }

    .mock-title h4 {
        font-size: 19px
    }

    .route-display b {
        font-size: 13px
    }

    .mock-note {
        font-size: 11px
    }

    .mock-timeline {
        font-size: 10px
    }

    .a-experience {
        gap: 35px
    }

    .a-experience h2 {
        font-size: 34px
    }

    .experience-visual {
        height: 365px;
        padding: 22px
    }

    .experience-orbit {
        height: 270px
    }

    .orbit-label {
        font-size: 9px;
        padding: 7px 10px
    }

    .orbit-1 {
        left: 0;
        top: 32px
    }

    .orbit-2 {
        right: 0;
        top: 40px
    }

    .orbit-3 {
        left: 8px;
        bottom: 33px
    }

    .orbit-4 {
        right: 0;
        bottom: 33px
    }

    .experience-points {
        grid-template-columns: 1fr
    }

    .experience-copy>p:not(.fine-print) {
        font-size: 13px
    }

    .a-contact h2 {
        font-size: 45px
    }

    .form-card {
        padding: 26px
    }

    .form-pair {
        grid-template-columns: 1fr;
        gap: 0
    }

    .a-faq {
        gap: 30px
    }

    .b-hero h1 {
        font-size: 46px
    }

    .b-hero-side>p {
        font-size: 11px
    }

    .b-hero-side>.button {
        padding-inline: 19px
    }

    .b-hero-top {
        padding-top: 28px
    }

    .b-hero-heading {
        padding-block: 26px 38px
    }

    .b-kicker {
        font-size: 8px
    }

    .b-case-grid {
        gap: 40px
    }

    .variant-b h2 {
        font-size: 35px
    }

    .large-copy {
        font-size: 15px
    }

    .journey-heading>p {
        font-size: 11px
    }

    .journey-nav button {
        padding: 15px
    }

    .journey-nav strong {
        font-size: 16px
    }

    .stage-panel {
        gap: 33px
    }

    .stage-big-number {
        font-size: 195px
    }

    .stage-copy h3 {
        font-size: 27px
    }

    .human-system {
        gap: 14px
    }

    .estimate-grid {
        gap: 35px
    }

    .calculator {
        padding: 24px
    }

    .calc-inputs {
        gap: 15px
    }

    .calc-inputs label {
        font-size: 10px
    }

    .calc-inputs input {
        font-size: 31px
    }

    .calc-result output {
        font-size: 54px
    }

    .calc-result strong {
        font-size: 12px
    }

    .approach-grid,
    .faq-grid {
        gap: 45px
    }

    .b-contact .contact-grid {
        gap: 45px
    }
}

@media(max-width:720px) {
    html {
        scroll-padding-top: 75px
    }

    .container {
        width: calc(100% - 40px)
    }

    .header-inner {
        min-height: 75px;
        gap: 15px
    }

    .brand {
        width: 100px;
        height: 53px
    }

    .brand img {
        width: 130px;
        transform: translate(-16px, -17px)
    }

    .site-header .header-inner nav {
        display: none
    }

    .header-inner>.header-button {
        margin-left: auto;
        font-size: 10px;
        padding: 10px 15px;
        min-height: 38px;
        gap: 12px
    }

    .header-inner>.header-button .icon {
        width: 15px;
        height: 15px
    }

    .menu-toggle {
        display: block
    }

    .header-inner>.header-button {
        display: none
    }

    .menu-toggle {
        margin-left: auto
    }

    .site-header .mobile-menu {
        display: flex
    }

    .a-hero {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 24px;
        padding-bottom: 55px
    }

    .audience {
        font-size: 11px
    }

    .a-hero h1 {
        font-size: clamp(41px, 8.2vw, 57px);
        letter-spacing: -.055em;
        margin-top: 18px
    }

    .hero-description {
        font-size: 15px;
        margin-top: 21px;
        max-width: 460px
    }

    .hero-description br {
        display: none
    }

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

    .hero-actions .button {
        font-size: 12px;
        gap: 14px;
        padding: 15px 20px
    }

    .under-button {
        font-size: 10px;
        margin-top: 14px
    }

    .a-hero-visual {
        height: 430px;
        margin: 0 10px 0 0;
        max-width: 510px;
        width: calc(100% - 10px);
        justify-self: center
    }

    .photo-shape {
        inset: 0 0 0 37px;
        border-radius: 24px 75px 24px 24px
    }

    .photo-shape img {
        object-position: 65% 40%
    }

    .floating-status {
        right: -14px;
        top: 24px;
        padding: 13px 16px
    }

    .floating-document {
        left: 0;
        bottom: 20px;
        width: 205px;
        transform: rotate(-4deg)
    }

    .hero-seal {
        display: flex;
        width: 68px;
        height: 68px;
        font-size: 25px;
        right: -12px;
        bottom: 42px
    }

    .hero-seal span {
        font-size: 8px
    }

    .section-top {
        display: block;
        margin-bottom: 25px
    }

    .section-top>p {
        margin-top: 17px;
        font-size: 13px
    }

    .section-top>p br {
        display: none
    }

    h2,
    .a-solutions h2 {
        font-size: 32px;
        letter-spacing: -.045em
    }

    .eyebrow {
        font-size: 9px
    }

    .a-solutions {
        padding-bottom: 55px
    }

    .solution-cards {
        grid-template-columns: 1fr;
        gap: 13px
    }

    .solution-card {
        min-height: 0;
        padding: 25px;
        border-radius: 18px
    }

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

    .solution-card h3 {
        font-size: 25px;
        margin-top: 16px
    }

    .solution-card h3 br {
        display: none
    }

    .solution-card p {
        font-size: 13px;
        max-width: 100%;
        margin-top: 12px
    }

    .card-bottom {
        padding-top: 24px
    }

    .a-workspace {
        padding-block: 50px
    }

    .center-heading h2 {
        margin-top: 14px
    }

    .center-heading p {
        font-size: 13px;
        margin-top: 16px
    }

    .work-tabs {
        margin: 25px auto 30px;
        gap: 3px;
        padding: 5px;
        max-width: 100%
    }

    .work-tabs button {
        padding: 10px 13px;
        font-size: 11px;
        gap: 6px
    }

    .work-tabs .icon {
        width: 15px;
        height: 15px
    }

    .workspace-panel {
        gap: 26px;
        min-height: 0
    }

    .panel-copy h3 {
        font-size: 29px
    }

    .panel-copy>p {
        font-size: 13px
    }

    .check-list {
        grid-template-columns: 1fr;
        font-size: 11px
    }

    .inline-link {
        font-size: 12px
    }

    .app-mock {
        border-radius: 12px
    }

    .mock-bar {
        padding: 11px;
        font-size: 7px
    }

    .mock-layout {
        grid-template-columns: 64px 1fr;
        min-height: 290px
    }

    .mock-layout aside {
        padding: 16px 5px;
        gap: 12px
    }

    .mock-layout aside>b {
        font-size: 20px;
        padding-left: 2px;
        margin-bottom: 14px
    }

    .mock-layout aside>span {
        font-size: 7px;
        display: flex;
        flex-direction: column;
        padding: 5px 2px;
        gap: 5px
    }

    .mock-layout aside .icon {
        width: 14px;
        height: 14px
    }

    .mock-main {
        padding: 20px 13px
    }

    .mock-title h4 {
        font-size: 12px;
        line-height: 1.3
    }

    .status-chip {
        font-size: 7px;
        padding: 3px 5px
    }

    .route-display {
        padding: 12px 9px;
        margin-top: 19px;
        gap: 8px
    }

    .route-display b {
        font-size: 9px;
        line-height: 1.6
    }

    .route-display span {
        font-size: 7px
    }

    .route-display>.icon {
        width: 13px
    }

    .field-grid {
        gap: 10px;
        margin-top: 18px
    }

    .field-grid span {
        font-size: 7px
    }

    .field-grid b {
        font-size: 9px
    }

    .mock-timeline {
        font-size: 7px;
        margin-top: 26px;
        gap: 6px
    }

    .mock-note {
        font-size: 7px;
        line-height: 1.8;
        margin-top: 23px
    }

    .document-demo,
    .sync-demo {
        padding: 20px 17px;
        min-height: 310px
    }

    .paper-pair {
        gap: 15px
    }

    .paper {
        padding: 15px;
        width: 46%
    }

    .paper h4 {
        font-size: 20px
    }

    .paper p {
        font-size: 8px
    }

    .paper-check {
        font-size: 7px
    }

    .sync-hubs {
        gap: 9px
    }

    .sync-hubs>div {
        padding: 20px 8px;
        width: 44%
    }

    .sync-hubs b {
        font-size: 11px
    }

    .sync-hubs div>span {
        font-size: 8px
    }

    .sync-hubs strong {
        font-size: 32px
    }

    .sync-track>.icon {
        width: 20px
    }

    .sync-log {
        font-size: 10px
    }

    .a-experience {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-block: 55px
    }

    .experience-visual {
        height: 355px;
        order: 2;
        max-width: 500px;
        width: 100%;
        justify-self: center
    }

    .experience-copy h2 {
        font-size: 32px
    }

    .experience-copy>p:not(.fine-print) {
        font-size: 14px
    }

    .experience-points {
        grid-template-columns: 1fr 1fr;
        font-size: 11px
    }

    .experience-orbit {
        height: 275px
    }

    .orbit-1 {
        left: 12px;
        top: 35px
    }

    .orbit-2 {
        right: 12px;
        top: 35px
    }

    .orbit-3 {
        left: 20px;
        bottom: 38px
    }

    .orbit-4 {
        right: 0;
        bottom: 38px
    }

    .orbit-label {
        font-size: 10px;
        padding: 8px 12px
    }

    .a-process {
        padding-bottom: 55px
    }

    .process-cards {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .process-cards article {
        display: grid;
        grid-template-columns: 35px 1fr;
        gap: 8px 15px;
        padding-top: 20px
    }

    .process-cards article>span {
        grid-row: 1/3;
        margin-top: 2px
    }

    .process-cards h3 {
        font-size: 21px;
        margin: 0
    }

    .process-cards p {
        grid-column: 2;
        margin: 0;
        max-width: none
    }

    .a-faq {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 55px
    }

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

    .faq-list details>p {
        font-size: 12px
    }

    .a-contact {
        padding-block: 50px
    }

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

    .a-contact h2 {
        font-size: 43px;
        margin-top: 17px
    }

    .a-contact h2 br:nth-child(2) {
        display: none
    }

    .a-contact .contact-grid>div>p:not(.fine-print) {
        font-size: 14px;
        margin-top: 19px
    }

    .contact-badge {
        font-size: 12px;
        margin-top: 21px
    }

    .a-contact .fine-print {
        margin-top: 21px;
        font-size: 10px !important
    }

    .form-card {
        padding: 24px;
        border-radius: 17px
    }

    .form-pair {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    form input:not([type=hidden]):not([type=checkbox]),
    form textarea {
        font-size: 16px
    }

    form input::placeholder,
    form textarea::placeholder {
        font-size: 11px
    }

    .footer-inner {
        flex-wrap: wrap;
        gap: 18px
    }

    .footer-inner>p {
        font-size: 10px
    }

    .footer-inner>a:last-child {
        font-size: 10px;
        margin-left: auto
    }

    .site-footer {
        padding-block: 25px
    }

    .variant-b .header-inner {
        min-height: 75px
    }

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

    .b-kicker {
        font-size: 7px;
        gap: 20px;
        line-height: 1.7
    }

    .b-kicker>span:last-child {
        max-width: 130px;
        text-align: right
    }

    .b-hero-heading {
        display: block;
        padding-top: 24px;
        padding-bottom: 32px
    }

    .b-hero h1 {
        font-size: clamp(36px, 7.9vw, 51px);
        line-height: 1.16
    }

    .b-hero-side {
        margin-top: 24px
    }

    .b-hero-side>p {
        font-size: 12px;
        max-width: 350px
    }

    .b-hero-side>p br {
        display: none
    }

    .b-hero-side>.button {
        font-size: 12px;
        min-height: 51px;
        margin-top: 20px
    }

    .b-caption {
        font-size: 9px
    }

    .b-panorama {
        height: 330px
    }

    .b-panorama>img {
        object-position: 61% center
    }

    .panorama-overlay {
        bottom: 27px;
        display: block
    }

    .coordinate-mark>strong {
        font-size: 20px;
        line-height: 1.5
    }

    .coordinate-mark>span {
        font-size: 8px
    }

    .scroll-cue {
        margin-top: 19px;
        margin-left: 18px;
        font-size: 10px
    }

    .image-caption {
        font-size: 7px;
        right: 10px;
        top: 10px
    }

    .b-hero-bottom {
        gap: 12px;
        font-size: 8px;
        line-height: 1.7;
        padding-block: 21px
    }

    .b-hero-bottom>span {
        max-width: 105px
    }

    .b-case {
        padding-top: 50px;
        padding-bottom: 47px
    }

    .section-marker {
        font-size: 7px;
        gap: 20px;
        padding-bottom: 18px
    }

    .section-marker>span:last-child {
        text-align: right
    }

    .b-case-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 26px
    }

    .variant-b h2 {
        font-size: 32px
    }

    .large-copy {
        font-size: 15px
    }

    .muted-copy {
        font-size: 12px;
        margin-top: 17px
    }

    .case-ribbon {
        font-size: 10px;
        padding: 19px 15px;
        gap: 12px;
        line-height: 1.7;
        margin-top: 28px
    }

    .case-ribbon>span {
        max-width: 95px
    }

    .case-ribbon>i {
        font-size: 18px
    }

    .b-journey {
        padding-block: 48px
    }

    .journey-heading {
        display: block;
        margin-top: 25px
    }

    .journey-heading>p {
        font-size: 12px;
        margin-top: 19px
    }

    .journey-heading>p br {
        display: none
    }

    .journey-nav {
        margin-top: 25px;
        grid-template-columns: repeat(4, 1fr)
    }

    .journey-nav button {
        padding: 12px 6px;
        display: block
    }

    .journey-nav button>span {
        font-size: 8px;
        display: block;
        margin-bottom: 9px
    }

    .journey-nav strong {
        font-size: 10px
    }

    .journey-nav .icon {
        display: none
    }

    .stage-panel {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 25px;
        min-height: 0
    }

    .stage-visual {
        min-height: 267px
    }

    .stage-big-number {
        font-size: 218px;
        left: 12%
    }

    .stage-object {
        width: 215px;
        padding: 22px
    }

    .stage-copy h3 {
        font-size: 28px;
        margin-top: 12px
    }

    .stage-copy>p {
        font-size: 12px;
        margin-top: 14px
    }

    .human-system {
        margin-top: 22px
    }

    .b-estimate {
        padding-block: 48px
    }

    .estimate-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .estimate-grid>div>p:not(.estimate-disclaimer) {
        font-size: 13px;
        margin-top: 19px
    }

    .estimate-grid>div>p:not(.estimate-disclaimer) br {
        display: none
    }

    .estimate-disclaimer {
        font-size: 10px;
        margin-top: 19px
    }

    .estimate-disclaimer br {
        display: none
    }

    .calculator {
        padding: 23px
    }

    .calc-inputs {
        gap: 21px
    }

    .calc-inputs input {
        font-size: 32px
    }

    .calc-result output {
        font-size: 59px
    }

    .calc-result strong {
        font-size: 13px
    }

    .b-approach {
        padding-block: 48px
    }

    .approach-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 25px
    }

    .approach-grid>div:first-child>p {
        font-size: 13px;
        margin-top: 18px
    }

    .approach-list {
        gap: 22px
    }

    .approach-list>article {
        gap: 20px;
        padding-bottom: 21px
    }

    .b-faq {
        padding-bottom: 48px
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 24px
    }

    .faq-grid h2 br {
        display: none
    }

    .b-contact {
        padding-block: 48px
    }

    .b-contact .contact-grid {
        gap: 30px
    }

    .b-contact h2 {
        font-size: 34px;
        margin-top: 20px
    }

    .b-contact .contact-grid>div>p:not(.fine-print) {
        font-size: 13px
    }

    .b-contact-mark {
        display: none
    }

    .b-contact .fine-print {
        font-size: 9px !important
    }

    .b-contact .form-card {
        padding: 24px
    }

    .variant-b .site-footer .footer-inner>a:last-child {
        font-size: 10px
    }
}

@media(max-width:390px) {
    .container {
        width: calc(100% - 32px)
    }

    .a-hero h1 {
        font-size: 40px
    }

    .a-hero-visual {
        height: 375px
    }

    .hero-actions .button {
        font-size: 11px;
        padding: 14px 16px;
        gap: 10px
    }

    .floating-document {
        width: 188px;
        padding: 17px
    }

    .floating-status {
        padding: 12px;
        right: -12px
    }

    .floating-status b {
        font-size: 12px
    }

    .floating-status span {
        font-size: 8px
    }

    .floating-status>.icon {
        width: 17px;
        height: 17px;
        padding: 7px
    }

    .a-hero h1 {
        letter-spacing: -.06em
    }

    .work-tabs button {
        font-size: 10px;
        padding: 10px 12px
    }

    .form-pair {
        grid-template-columns: 1fr;
        gap: 0
    }

    .b-hero h1 {
        font-size: 35px
    }

    .variant-b h2 {
        font-size: 30px
    }

    .b-case .large-copy {
        font-size: 14px
    }

    .journey-nav strong {
        font-size: 9px
    }

    .calculator {
        padding: 20px
    }

    .calc-result output {
        font-size: 54px
    }
}

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

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

@media(max-width:720px) {
    .floating-status {
        top: -18px;
        right: 0
    }

    .b-hero-side>p {
        font-size: 14px
    }

    .stage-copy>p {
        font-size: 14px
    }

    .muted-copy {
        font-size: 14px
    }

    .b-contact .contact-grid>div>p:not(.fine-print) {
        font-size: 14px
    }
}