/* Rdeens Chat — Bootstrap 5.3 grid, with a small custom design system. */
@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 800;
    font-display: swap
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap
}

:root {
    --ui-scaling: 0.6944vw;
    /* Scaling Wrapper */
    --ink: #112a4b;
    --muted: #586c83;
    --blue: #1264df;
    --blue-hover: #0953c3;
    --sky: #edf7ff;
    --pale: #f7fbff;
    --line: #dde7f0;
    --navy: #102d50;
    --heading: Manrope, Arial, sans-serif;
    --body: 'DM Sans', Arial, sans-serif;
    --bs-body-font-family: var(--body);
    --bs-body-color: var(--ink);
    --bs-body-bg: #fff;
    --bs-border-color: var(--line)
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 10.4em
}

body {
    font-family: var(--body);
    font-size: 1.6em;
    line-height: 1.65;
    color: var(--ink);
    -webkit-font-smoothing: antialiased
}

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

::selection {
    background: #c5e5ff;
    color: var(--ink)
}

[hidden] {
    display: none !important
}

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

button,
input {
    font: inherit
}

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

button {
    touch-action: manipulation
}

button:disabled {
    cursor: wait;
    opacity: .55
}

:focus-visible {
    outline: 0.3em solid #5498f5;
    outline-offset: 0.5em;
    border-radius: 0.4em
}

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

h1,
h2,
h3 {
    font-family: var(--heading);
    color: var(--ink)
}

h2 {
    font-size: clamp(3.2em, 3.15vw, 4.4em);
    line-height: 1.22;
    font-weight: 700
}

h3 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.4;
}

p {
    color: var(--muted)
}

.custom-scale-wrapper {
    font-size: var(--ui-scaling);
    width: 100%;
}

.container-rd {
    padding: 0 8em;
}

.section-block {
    padding-block: 10em !important;
}

.container {
    max-width: 120em;
    padding-right: 2.4em;
    padding-left: 2.4em
}

.icon {
    width: 2.4em;
    height: 2.4em;
    display: inline-block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    vertical-align: middle
}

.svg-definitions {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none
}

.text-blue {
    color: var(--blue)
}

.section-shell {
    max-width: 144em;
    width: calc(100% - 4.8em);
    margin-right: auto;
    margin-left: auto;
    border-radius: 2.6em;
    position: relative;
    isolation: isolate
}

.section-space {
    padding: 10.4em 0
}

.eyebrow {
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--blue);
    margin-bottom: 2em;
    line-height: 1.6
}

.section-heading {
    margin-bottom: 4.8em
}

.heading-description {
    font-size: 1.3em;
    line-height: 1.6;
    margin-left: auto;
    padding-bottom: 0.4em;
    display: flex;
    justify-content: end;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .8em;
    padding: 1.3em 2.3em;
    border-radius: 0.9em;
    font-size: 1.4em;
    line-height: 1.5;
    font-weight: 600;
    transition: background .2s, box-shadow .2s, transform .2s, color .2s;
    border: 0.1em solid transparent
}

.btn .icon,
.btn [class*="ri-"] {
    font-size: 1.25em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.btn:hover [class*="ri-"] {
    transform: translateX(0.25em);
}

.btn:hover {
    transform: translateY(-0.2em)
}

.btn:active {
    transform: translateY(0)
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 0.5em 1.2em #1264df12
}

.btn-blue:hover,
.btn-blue:focus-visible {
    background: var(--blue-hover);
    color: #fff;
    box-shadow: 0 0.7em 1.8em #1264df24
}

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

.btn-navy:hover,
.btn-navy:focus-visible {
    background: #1a426d;
    color: #fff
}

.btn-quiet {
    color: var(--ink);
    padding-right: 0;
    padding-left: 0;
    gap: 0.8em
}

.btn-quiet:hover {
    color: var(--blue)
}

.btn-outline-navy {
    border-color: #b9cee0;
    color: var(--ink);
    background: transparent
}

.btn-outline-navy:hover {
    background: #fff;
    border-color: var(--navy);
    color: var(--navy)
}

.text-link {
    display: inline-flex;
    gap: 0.8em;
    align-items: center;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--blue)
}

.text-link .icon,
.text-link [class*="ri-"] {
    font-size: 1.2em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: transform .2s ease;
}

.text-link:hover .icon,
.text-link:hover [class*="ri-"] {
    transform: translateX(0.35em);
}

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

.skip-link {
    position: fixed;
    top: 1em;
    left: 1.6em;
    z-index: 200;
    background: var(--navy);
    color: #fff;
    padding: 1em 1.8em;
    border-radius: 0.8em;
    transform: translateY(-150%)
}

.skip-link:focus {
    transform: translateY(0);
    color: #fff
}

/* Navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffffef;
    border-bottom: 0.1em solid transparent;
    backdrop-filter: blur(1.6em);
    transition: border-color .2s
}

.site-header.scrolled {
    border-bottom-color: var(--line)
}

.nav-wrap {
    min-height: 8.2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.6em
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    flex-shrink: 0
}

.brand-icon {
    width: 3.3em;
    height: 3.6em;
    display: inline-grid;
    place-items: center;
    color: var(--blue)
}

.brand-icon .icon {
    width: 3.1em;
    height: 3.1em;
    stroke-width: 2
}

.brand-word {
    font-family: var(--heading);
    font-size: 2.5em;
    font-weight: 800;
    line-height: 1
}

.brand-chat {
    font-weight: 500;
    margin-left: 0.4em
}

.brand-dot {
    color: var(--blue);
    margin-left: 0.1em
}

.navigation {
    display: flex;
    align-items: center;
    gap: 4.3em
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.9em
}

.nav-links a {
    color: #526279;
    font-size: 1.3em;
    font-weight: 500;
    transition: color .2s;
    position: relative;
    padding: 1em 0
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--blue)
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0.2em;
    left: calc(50% - 0.2em);
    width: 0.4em;
    height: 0.4em;
    background: var(--blue);
    border-radius: 50%
}

.nav-cta {
    padding: 1em 1.8em;
    font-size: 1.3em;
    gap: 0.8em
}

.menu-toggle {
    display: none;
    border: 0.1em solid var(--line);
    background: #fff;
    border-radius: 0.8em;
    width: 4.4em;
    height: 4.4em;
    align-items: center;
    justify-content: center;
    color: var(--ink)
}

/* Hero and working chat preview */
.hero {
    background: radial-gradient(ellipse at 77% 45%, #d9edff 0%, #ecf7ff 43%, #f1f8ff 76%);
    padding: 6.1em 0 6.5em;
    overflow: hidden
}

.hero-row {
    --bs-gutter-x: 4.4em
}

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

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    font-size: 1.1em;
    font-weight: 600;
    color: #3b628b;
    padding: 0.5em 1.2em 0.5em 0.5em;
    background: #ffffffa6;
    border: 0.1em solid #d7e8f8;
    border-radius: 3em;
    margin-bottom: 2.7em
}

.tiny-spark {
    display: grid;
    place-items: center;
    color: var(--blue);
    background: #e5f1ff;
    border-radius: 50%;
    height: 2.2em;
    width: 2.2em
}

.tiny-spark .icon {
    width: 1.3em;
    height: 1.3em
}

h1 {
    font-size: clamp(4.8em, 5.65vw, 7.6em);
    font-weight: 700;
    line-height: 1.11;
    max-width: 60em
}

h1 .text-blue {
    display: inline-block
}

.hero-description {
    font-size: 1.6em;
    line-height: 1.5;
    max-width: 44em;
    margin-top: 1.5em;
    color: #556d86;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.2em;
    margin-top: 3.1em
}

.hero-actions .btn-blue {
    padding: 1em 1.7em !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {

    border-color: none;
    border: none;
}

.play-icon {
    display: grid;
    place-items: center;
    width: 2.5em;
    height: 2.5em;
    border: 0.1em solid #a4b8cc;
    border-radius: 50%
}

.play-icon .icon {
    height: 1.2em;
    width: 1.2em;
    stroke-width: 1.7;
    margin-left: -0.2em
}

.hero-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4em;
    margin-top: 2.1em;
    font-size: 1em;
    color: #60728a
}

.hero-details span {
    display: inline-flex;
    align-items: center;
    gap: 0.5em
}

.hero-details .icon,
.hero-details [class*="ri-"] {
    width: 1.3em;
    height: 1.3em;
    font-size: 1.3em;
    line-height: 1;
    color: var(--blue);
    stroke-width: 2
}

.built-by {
    display: flex;
    align-items: center;
    gap: 0.9em;
    margin-top: 3.7em;
    font-size: 1.1em;
    color: #63768c
}

.built-line {
    height: 0.1em;
    width: 2.6em;
    background: #a9c1d8;
    margin-right: 0.2em
}

.built-by a {
    font-weight: 700;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.built-by a [class*="ri-"] {
    font-size: 1.15em;
    line-height: 1;
    transition: transform .2s ease;
}

.built-by a:hover [class*="ri-"] {
    transform: translateX(0.2em);
}

.hero-orbit {
    position: absolute;
    border: 0.1em solid #cfe5f5;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1
}

.orbit-one {
    width: 56em;
    height: 56em;
    right: -14em;
    top: 1em;
    opacity: .65
}

.orbit-two {
    width: 72em;
    height: 72em;
    right: -22em;
    top: -7em;
    opacity: .45
}

.product-stage {
    position: relative;
    max-width: 46em;
    width: 100%;
    padding: 4.5em 0 6.4em;
    margin-left: auto;
    margin-right: 0
}

.context-float {
    position: absolute;
    left: -0.8em;
    top: 0;
    display: flex;
    align-items: center;
    gap: 1.1em;
    background: #ffffffee;
    border: 0.1em solid #dce9f4;
    border-radius: 1.1em;
    padding: 1.3em 1.5em;
    box-shadow: 0 0.8em 2.4em #1d3e6b06;
    z-index: 3;
    width: 32em;
    transform: rotate(-3deg);
    pointer-events: none
}

.context-icon {
    height: 3.5em;
    width: 3.5em;
    display: grid;
    place-items: center;
    border-radius: 0.9em;
    background: #e8f4ff;
    color: var(--blue)
}

.context-icon .icon {
    width: 2em;
    height: 2em
}

.context-float span:not(.context-icon):not(.connected-dot) {
    display: block;
    color: #59728b;
    font-size: 1em;
    line-height: 1.4
}

.context-float strong {
    display: block;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 600;
    margin-top: 0.3em;
    color: #2d4967
}

.connected-dot {
    margin-left: auto;
    width: 0.7em;
    height: 0.7em;
    background: #258b73;
    border: 0.3em solid #ddf5ec;
    box-sizing: content-box;
    border-radius: 50%;
    flex-shrink: 0
}

.chat-window {
    position: relative;
    background: #fff;
    border: 0.1em solid #dbe8f2;
    border-radius: 1.8em;
    box-shadow: 0 2.4em 6em #264e7d16, 0 0.2em 0.8em #264e7d08;
    width: calc(100% - 2.3em);
    margin-left: 2.3em;
    overflow: hidden;
    scroll-margin-top: 11em
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding: 1.8em 1.9em;
    background: #fff;
    border-bottom: 0.1em solid #edf2f7
}

.assistant-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.9em;
    height: 3.9em;
    border-radius: 1.2em;
    background: var(--blue);
    color: #fff;
    box-shadow: inset 0 0 0 0.1em #ffffff20
}

.assistant-avatar .icon {
    width: 2.3em;
    height: 2.3em
}

.chat-header-copy strong {
    display: block;
    font-size: 1.3em;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.5
}

.chat-header-copy>span {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1em;
    color: #6c7a8f;
    line-height: 1.5;
    margin-top: 0.2em
}

.status-dot {
    width: 0.5em;
    height: 0.5em;
    background: #288f77;
    border-radius: 50%
}

.icon-button {
    border: 0;
    background: transparent;
    color: #8493a7;
    width: 3.6em;
    height: 3.6em;
    display: grid;
    place-items: center;
    border-radius: 0.8em;
    margin-left: auto
}

.icon-button .icon {
    width: 1.7em;
    height: 1.7em
}

.icon-button:hover {
    background: #f0f6fb;
    color: var(--blue)
}

.demo-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.13em;
    color: #64748b;
    padding: 1.3em 0 0
}

.demo-label span {
    height: 0.1em;
    width: 2em;
    background: #e3eaf1
}

.chat-messages {
    height: 27.2em;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.7em 2em 1.3em;
    display: flex;
    flex-direction: column;
    gap: 1.3em;
    scrollbar-width: thin;
    scrollbar-color: #d3e2ee transparent
}

.message {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 92%;
    padding: 1.2em 1.5em;
    border-radius: 0 1.2em 1.2em 1.2em;
    flex-shrink: 0;
    animation: message-in .23s ease both
}

.message p {
    margin: 0;
    color: inherit;
    overflow-wrap: anywhere;
    white-space: pre-line
}

.assistant-message {
    background: #f1f6fb;
    color: #4b6078;
    align-self: flex-start
}

.user-message {
    background: #1768de;
    color: #fff;
    align-self: flex-end;
    border-radius: 1.2em 0 1.2em 1.2em;
    font-size: 1.1em;
}

.message-source {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.9em;
    font-size: 0.9em;
    line-height: 1.6;
    color: #366b9e;
    font-weight: 500
}

.message-source:hover {
    text-decoration: underline
}

.message-source .icon {
    height: 1.1em;
    width: 1.1em
}

.chat-controls {
    padding: 0.9em 2em 0;
    background: #fff
}

.prompt-label {
    font-size: 0.9em;
    margin-bottom: 0.7em;
    color: #64748b
}

.quick-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-bottom: 1.3em
}

.quick-prompts button {
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.5;
    color: #426b98;
    border: 0.1em solid #d3e4f6;
    background: #fff;
    padding: 0.6em 0.9em;
    min-height: 3em;
    border-radius: 0.6em;
    transition: background .2s, border-color .2s
}

.quick-prompts button:hover {
    background: #eef7ff;
    border-color: #7daee1
}

.chat-form {
    display: flex;
    gap: 0.8em;
    align-items: center;
    min-height: 4.5em;
    padding: 0.5em 0.6em 0.5em 1.3em;
    border: 0.1em solid #dfe7ee;
    border-radius: 0.9em;
    background: #fff;
    transition: border-color .2s, box-shadow .2s
}

.chat-form:focus-within {
    border-color: #5e9eec;
    box-shadow: 0 0 0 0.3em #1264df10
}

.chat-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0.6em 0;
    outline: none;
    font-size: 1.1em;
    color: var(--ink);
    background: transparent
}

.chat-form input:focus-visible {
    outline: none;
    box-shadow: none
}

.chat-form input::placeholder {
    color: #8491a3;
    opacity: 1
}

.send-button {
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: 0.7em;
    width: 3.2em;
    height: 3.2em;
    flex-shrink: 0;
    display: grid;
    place-items: center
}

.send-button:hover {
    background: var(--blue-hover)
}

.send-button .icon,
.send-button [class*="ri-"] {
    font-size: 1.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-footer {
    font-size: 0.9em;
    text-align: center;
    color: #64748b;
    padding: 1.1em 1.2em 1.3em;
    line-height: 1.4
}

.no-js-note {
    font-size: 1.1em;
    padding: 1.6em 2em
}

.grounded-tag {
    position: absolute;
    bottom: 0.2em;
    left: -1.5em;
    display: flex;
    align-items: center;
    gap: 1em;
    background: #fff;
    box-shadow: 0 0.8em 2.5em #234d7510;
    border: 0.1em solid #dce9f6;
    border-radius: 1.1em;
    padding: 1.3em 1.7em;
    transform: rotate(-3deg);
    pointer-events: none
}

.grounded-tag>span {
    width: 3.3em;
    height: 3.6em;
    display: grid;
    place-items: center;
    background: #edf7ff;
    color: var(--blue);
    border-radius: 0.8em
}

.grounded-tag>span .icon {
    width: 1.8em;
    height: 1.8em
}

.grounded-tag p {
    font-size: 1em;
    line-height: 1.6;
    color: #71829a
}

.grounded-tag strong {
    font-weight: 600;
    color: var(--ink)
}

.tag-spark {
    margin-left: 1.2em;
    color: #97c6ee;
    width: 1.7em;
    height: 1.7em
}

.stage-caption {
    position: absolute;
    bottom: 0.8em;
    right: 0.2em;
    font-size: 1em;
    color: #647e97;
    display: flex;
    align-items: center;
    gap: 0.7em;
    transform: rotate(-3deg)
}

.caption-line {
    width: 1.6em;
    height: 0.1em;
    background: #b2cadf
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2em
}

.typing-dots i {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #8aa6c2;
    animation: typing 1s infinite
}

.typing-dots i:nth-child(2) {
    animation-delay: .15s
}

.typing-dots i:nth-child(3) {
    animation-delay: .3s
}

@keyframes message-in {
    from {
        opacity: 0;
        transform: translateY(0.4em)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes typing {

    0%,
    70%,
    100% {
        opacity: .35;
        transform: translateY(0)
    }

    35% {
        opacity: 1;
        transform: translateY(-0.3em)
    }
}

/* First benefits and three-step setup */
.benefit-strip {
    padding: 3.6em 0;
    border-bottom: 0.1em solid #edf1f6
}

.strip-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    font-size: 1.1em;
    font-weight: 500;
    color: #5f738b
}

.strip-item .icon,
.strip-item [class*="ri-"] {
    color: #6c9fd5;
    width: 1.9em;
    height: 1.9em;
    font-size: 1.9em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.step-card {
    height: 100%;
    padding: 0
}

.step-visual {
    height: 22em;
    position: relative;
    background: #f5f9fd;
    border: 0.1em solid #e3ecf4;
    border-radius: 1.5em;
    padding: 2.4em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.step-caption {
    display: flex;
    align-items: center;
    gap: 1.1em;
    margin: 2.3em 0 1em
}

.step-number {
    font-size: 1.1em;
    color: var(--blue);
    font-weight: 600;
    line-height: 1.7;
    background: #eaf4ff;
    padding: 0.3em 0.7em;
    border-radius: 0.5em;
    font-family: var(--heading)
}

.step-caption h3 {
    font-size: 1.7em;
}

.step-card>p {
    font-size: 1.3em;
    line-height: 1.6;
    padding-right: 1.2em
}

.mini-url {
    background: #fff;
    border: 0.1em solid #e1eaf2;
    border-radius: 0.7em;
    display: flex;
    align-items: center;
    gap: 0.9em;
    box-shadow: 0 0.3em 0.8em #24466604;
    padding: 1em 1.2em;
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 1.2em
}

.mini-url .icon {
    height: 1.4em;
    width: 1.4em;
    color: #6e89a5
}

.mini-link-dot {
    height: 0.5em;
    width: 0.5em;
    border-radius: 50%;
    background: #67a4e5;
    margin-left: auto
}

.source-row {
    display: flex;
    gap: 0.9em;
    align-items: center;
    font-size: 0.9em;
    color: #6a7f96;
    margin: 0.6em 0.6em
}

.source-row .icon {
    width: 1.3em;
    height: 1.3em;
    color: #7295b9
}

.source-row .mini-check {
    margin-left: auto;
    color: #548eb8;
    width: 1.2em;
    height: 1.2em
}

.question-visual {
    background: #edf6ff
}

.mini-question {
    font-size: 1em;
    padding: 1.1em 1.3em;
    background: #fff;
    border: 0.1em solid #dbe9f6;
    max-width: 92%;
    margin-left: auto;
    border-radius: 0.9em 0 0.9em 0.9em;
    box-shadow: 0 0.3em 0.8em #24466604
}

.mini-answer {
    display: flex;
    gap: 0.9em;
    align-items: flex-start;
    margin-top: 2em;
    margin-right: 2.5em
}

.mini-ai {
    background: var(--blue);
    width: 2.6em;
    height: 2.7em;
    border-radius: 0.7em;
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.mini-ai .icon {
    height: 1.6em;
    width: 1.6em
}

.mini-answer>div {
    flex: 1;
    background: #ffffffc7;
    border: 0.1em solid #dfebf7;
    border-radius: 0 0.9em 0.9em 0.9em;
    padding: 1.4em
}

.skeleton-line {
    height: 0.5em;
    background: #cbdcef;
    width: 80%;
    display: block;
    border-radius: 0.3em;
    margin-bottom: 0.7em
}

.skeleton-line:last-child {
    margin-bottom: 0
}

.skeleton-line.line-wide {
    width: 100%
}

.skeleton-line.line-short {
    width: 55%
}

.based-on {
    font-size: 0.8em;
    color: #5b80a9;
    margin: 1em 0 0 3.6em;
    display: flex;
    align-items: center;
    gap: 0.5em
}

.based-on .icon {
    height: 1.1em;
    width: 1.1em
}

.website-visual {
    padding: 2.4em 2.2em 0;
    justify-content: flex-end;
    background: #f4f8fc
}

.mini-browser {
    position: relative;
    height: 17.7em;
    border: 0.1em solid #dae5ef;
    border-bottom: 0;
    border-radius: 1em 1em 0 0;
    background: #fff;
    box-shadow: 0 0 2.4em #345b7b06
}

.mini-browser-bar {
    height: 2.8em;
    border-bottom: 0.1em solid #e7edf4;
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 1em;
    background: #fafcfe;
    border-radius: 1em 1em 0 0
}

.mini-browser-bar i {
    height: 0.4em;
    width: 0.4em;
    background: #d7e1ec;
    border-radius: 50%
}

.mini-browser-bar>span {
    font-size: 0.7em;
    color: #9dabbc;
    margin-left: 1.8em
}

.mini-site-nav {
    display: flex;
    gap: 0.7em;
    padding: 1.6em 1.5em 0.9em;
    align-items: center
}

.mini-site-nav>span {
    width: 3.3em;
    height: 0.5em;
    border-radius: 0.3em;
    background: #6983a1;
    margin-right: auto
}

.mini-site-nav b {
    width: 1.7em;
    height: 0.3em;
    border-radius: 0.3em;
    background: #e5ebf2
}

.mini-site-body {
    display: flex;
    padding: 1.5em;
    gap: 1.5em;
    align-items: center
}

.mini-site-body>div:first-child {
    flex: 1
}

.mini-site-body .skeleton-line {
    height: 0.4em;
    background: #d6e2ef
}

.mini-site-button {
    display: block;
    background: #458ce5;
    width: 3.2em;
    height: 1em;
    border-radius: 0.3em;
    margin-top: 0.9em
}

.mini-site-art {
    display: grid;
    place-items: center;
    background: #edf6ff;
    border-radius: 0.7em;
    width: 5.7em;
    height: 4.8em;
    color: #9ec4ef
}

.mini-site-art .icon {
    width: 2.5em;
    height: 2.5em
}

.mini-chat-launcher {
    position: absolute;
    right: 1.2em;
    bottom: 1.2em;
    width: 2.6em;
    height: 2.6em;
    display: grid;
    place-items: center;
    border-radius: 0.8em;
    background: var(--blue);
    color: #fff
}

.mini-chat-launcher .icon {
    height: 1.6em;
    width: 1.6em
}

.mini-chat-tooltip {
    position: absolute;
    right: 1.1em;
    bottom: 4.5em;
    font-size: 0.8em;
    color: #607a94;
    border-radius: 0.6em;
    background: #fff;
    border: 0.1em solid #dce7f2;
    box-shadow: 0 0.3em 1em #234b7310;
    padding: 0.6em 0.9em
}

/* Website content feature */
.features-section {
    padding-top: 3.4em;
    padding-bottom: 11em
}

.feature-copy {
    padding-left: 4em
}

.feature-intro {
    font-size: 1.3em;
    line-height: 1.6;
    margin-top: 2em;
    max-width: 44.5em
}

.feature-list {
    margin-top: 2.9em;
    display: flex;
    flex-direction: column;
    gap: 2.3em
}

.feature-item {
    display: flex;
    gap: 1.5em
}

.feature-icon {
    width: 3.5em;
    height: 3.7em;
    flex-shrink: 0;
    border-radius: 0.9em;
    display: grid;
    place-items: center;
    background: #edf6ff;
    color: #407fc4;
    margin-top: 0.1em
}

.feature-icon .icon,
.feature-icon [class*="ri-"] {
    width: 1.8em;
    height: 1.8em;
    font-size: 1.8em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-item h3 {
    font-size: 1.6em;
    margin-bottom: 0.6em;
}

.feature-item p {
    font-size: 1.3em;
    line-height: 1.6;
    max-width: 35.5em
}

.feature-copy>.text-link {
    margin-top: 2.7em;
    margin-left: 5em
}

.knowledge-scene {
    min-height: 53.5em;
    border: 0.1em solid #e0ecf7;
    border-radius: 2.1em;
    background: radial-gradient(ellipse at 50% 55%, #dceeff, #eff7ff 76%);
    position: relative;
    padding: 3em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.scene-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 2.5em;
    left: 2.8em;
    right: 2.8em
}

.scene-pill {
    display: flex;
    gap: 0.7em;
    align-items: center;
    font-size: 0.8em;
    letter-spacing: 0.11em;
    color: #6483a6;
    font-weight: 600
}

.scene-pill .icon {
    width: 1.3em;
    height: 1.3em
}

.scene-dots {
    font-size: 2.4em;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #8eabc7
}

.knowledge-paper {
    width: 88%;
    background: #fff;
    border: 0.1em solid #d9e7f3;
    border-radius: 1.1em;
    padding: 2.3em 2.3em 1.9em;
    margin-top: 3.5em;
    box-shadow: 0 1em 2.5em #173b6c07;
    position: relative;
    z-index: 2;
    transform: rotate(-3deg)
}

.paper-heading {
    display: flex;
    gap: 1em;
    align-items: center
}

.paper-favicon {
    display: grid;
    place-items: center;
    background: #edf6ff;
    border-radius: 0.8em;
    width: 3.4em;
    height: 3.4em;
    color: #5c8fc4;
    flex-shrink: 0
}

.paper-favicon .icon {
    width: 1.8em;
    height: 1.8em
}

.paper-heading strong {
    display: block;
    font-size: 1.2em;
    color: #2c4a6a;
    font-weight: 600;
    line-height: 1.5
}

.paper-heading div>span {
    display: block;
    font-size: 0.7em;
    color: #8b9aab;
    margin-top: 0.3em;
    line-height: 1.5
}

.paper-rule {
    height: 0.1em;
    background: #edf2f7;
    margin: 1.9em 0
}

.paper-line {
    height: 0.5em;
    border-radius: 0.3em;
    background: #e9eff5;
    margin-bottom: 0.9em
}

.paper-highlight {
    border: 0.1em solid #a9cff7;
    background: #e9f3ff;
    border-radius: 0.5em;
    padding: 0.8em 1em;
    margin: 1.4em -0.6em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.2em 0.5em #3074b008
}

.paper-highlight span {
    font-size: 1em;
    color: #4c83bc
}

.paper-highlight .icon {
    height: 1.3em;
    width: 1.3em;
    color: #548bc8
}

.second-highlight {
    margin-bottom: 1.7em
}

.knowledge-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 6.3em;
    color: #97bce3;
    position: relative;
    z-index: 3;
    margin-top: 0.4em
}

.knowledge-connector>span:first-child {
    height: 1.5em;
    width: 0.1em;
    background: #a2c5e8
}

.knowledge-connector>span:last-child {
    height: 0.8em;
    width: 0.1em;
    background: #a2c5e8
}

.knowledge-connector .icon,
.knowledge-connector [class*="ri-"] {
    transform: rotate(90deg);
    font-size: 1.8em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
}

.knowledge-answer {
    display: flex;
    gap: 1.2em;
    align-items: center;
    align-self: flex-end;
    border: 0.1em solid #d6e5f3;
    background: #fff;
    box-shadow: 0 1em 2.5em #174a7a0a;
    padding: 1.7em 1.9em;
    border-radius: 1.3em;
    z-index: 3;
    transform: rotate(2deg);
    width: 95%
}

.knowledge-answer .assistant-avatar {
    width: 3.3em;
    height: 3.3em;
    border-radius: 0.9em
}

.knowledge-answer .assistant-avatar .icon {
    width: 2.1em;
    height: 2.1em
}

.knowledge-answer strong {
    display: block;
    font-size: 1.1em;
    font-weight: 600;
    color: #284a6e;
    line-height: 1.5
}

.knowledge-answer div>span {
    display: block;
    font-size: 0.8em;
    color: #7f94a8;
    margin-top: 0.5em;
    line-height: 1.5
}

.scene-decoration {
    position: absolute;
    border: 0.1em solid #d1e5f6;
    border-radius: 50%;
    width: 35em;
    height: 35em;
    z-index: 1
}

.decor-one {
    left: -14em;
    bottom: -17em
}

.decor-two {
    left: -17em;
    bottom: -20em;
    width: 41em;
    height: 41em
}

/* Use cases */
.use-cases-section {
    background: var(--navy);
    padding: 7.7em 0 8.1em;
    color: #fff;
    overflow: hidden
}

.use-cases-section::before {
    content: '';
    width: 65em;
    height: 65em;
    border: 0.1em solid #ffffff06;
    border-radius: 50%;
    position: absolute;
    top: -25em;
    right: -18em;
    z-index: -1
}

.use-cases-section h2 {
    color: #fff;
    font-size: 4.1em;
    line-height: 1.2;
}

.eyebrow-light {
    color: #82b9ee;
    font-size: 0.9em;
    letter-spacing: 0.145em
}

.cases-intro {
    font-size: 1.3em;
    line-height: 1.6;
    max-width: 37em;
    margin-top: 2em;
    color: #a8bfd7
}

.case-tabs {
    margin-top: 2.8em;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    max-width: 42em
}

.case-tab {
    display: flex;
    align-items: center;
    gap: 1.3em;
    background: transparent;
    border: 0.1em solid transparent;
    text-align: left;
    border-radius: 1em;
    padding: 1.3em 1.5em;
    color: #c6d5e6;
    width: 100%;
    transition: background .2s, border-color .2s
}

.case-icon {
    width: 3.2em;
    height: 3.4em;
    display: grid;
    place-items: center;
    color: #85a8cb;
    flex-shrink: 0
}

.case-icon .icon {
    width: 2.1em;
    height: 2.1em
}

.case-tab>span:nth-child(2) {
    flex: 1
}

.case-tab strong {
    display: block;
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.5
}

.case-tab small {
    display: block;
    color: #a2b9d2;
    font-size: 1em;
    line-height: 1.7;
    margin-top: 0.3em
}

.case-tab .tab-arrow {
    font-size: 1.4em;
    line-height: 1;
    color: #7098bd;
    opacity: .55;
    transition: transform .2s ease, opacity .2s ease, color .2s ease;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.case-tab.active {
    background: #ffffff0a;
    border-color: #ffffff23
}

.case-tab.active strong {
    color: #fff
}

.case-tab.active .case-icon,
.case-tab.active .tab-arrow {
    color: #9ccfff;
    opacity: 1;
    transform: translateX(0.2em);
}

.case-tab:hover .tab-arrow {
    opacity: 0.85;
}

.case-tab:hover {
    background: #ffffff0a;
    border-color: #ffffff23
}

.case-panel {
    padding: 0;
    background: #fff;
    border-radius: 1.5em;
    color: var(--ink);
    box-shadow: 0 1.5em 4em #00173520;
    overflow: hidden;
    margin-left: 2em
}

.case-panel-header {
    padding: 1.8em 2.1em;
    display: flex;
    align-items: center;
    gap: 0.8em;
    border-bottom: 0.1em solid #edf1f6;
    font-size: 1.1em;
    color: #536b86;
    font-weight: 500
}

.case-panel-dot {
    height: 0.7em;
    width: 0.7em;
    background: #5a95db;
    border-radius: 50%
}

.case-panel-header .icon {
    margin-left: auto;
    width: 1.5em;
    height: 1.5em;
    color: #8fa4b9
}

.case-conversation {
    padding: 2.5em 2.7em 2.7em;
    min-height: 28.8em;
    display: flex;
    flex-direction: column
}

.case-example-label {
    font-size: 0.8em;
    letter-spacing: 0.125em;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 2.3em
}

.case-question {
    font-size: 1.2em;
    background: #eaf3ff;
    color: #27598d;
    padding: 1.2em 1.6em;
    align-self: flex-end;
    border-radius: 1em 0 1em 1em;
    max-width: 90%;
    line-height: 1.7
}

.case-answer-wrap {
    display: flex;
    gap: 1em;
    margin-top: 2.2em;
    align-items: flex-start
}

.case-bot-avatar {
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.8em;
    background: var(--blue);
    border-radius: 0.7em;
    color: #fff;
    flex-shrink: 0;
    margin-top: 0.2em
}

.case-bot-avatar .icon {
    height: 1.7em;
    width: 1.7em
}

.case-answer {
    font-size: 1.2em;
    color: #516780;
    line-height: 1.65;
    min-height: 9.1em
}

.case-source {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
    font-size: 0.9em;
    color: #648bb2;
    margin-top: 0.9em;
    line-height: 1.5
}

.case-source .icon {
    width: 1.2em;
    height: 1.2em
}

.example-content {
    margin: 0 2.7em;
    background: #f6f9fc;
    padding: 1.4em 1.6em;
    border: 0.1em solid #e5edf5;
    border-radius: 0.9em
}

.example-content>span {
    font-size: 0.7em;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #7e91a6;
    display: block;
    margin-bottom: 0.7em
}

.example-content p {
    font-size: 1em;
    line-height: 1.6;
    color: #6f8296;
    min-height: 3.8em
}

.case-disclaimer {
    text-align: center;
    font-size: 0.8em;
    line-height: 1.6;
    color: #64748b;
    padding: 1.5em 2em
}

/* FAQ */
.faq-section {
    padding-top: 11.5em;
    padding-bottom: 11.2em
}

.faq-intro {
    font-size: 1.3em;
    line-height: 1.6;
    max-width: 28em;
    margin-top: 2em;
    margin-bottom: 2.4em
}

.faq-list {
    padding-left: 5.5em
}

.faq-item {
    border-bottom: 0.1em solid #e0e8f1
}

.faq-item:first-child {
    border-top: 0.1em solid #e0e8f1
}

.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    padding: 2.1em 0;
    cursor: pointer;
    font-family: var(--heading);
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.6
}

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

.faq-item summary:hover {
    color: var(--blue)
}

.faq-toggle {
    position: relative;
    width: 1.7em;
    height: 1.7em;
    flex-shrink: 0;
    color: #6d8bab;
    margin-right: 0.3em
}

.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.8em;
    width: 1.3em;
    height: 0.15em;
    background: currentColor;
    transition: transform .2s
}

.faq-toggle::after {
    transform: rotate(90deg)
}

.faq-item[open] .faq-toggle::after {
    transform: rotate(0deg)
}

.faq-item[open] summary {
    padding-bottom: 1.2em;
    color: var(--blue)
}

.faq-answer {
    padding: 0 3.5em 2.1em 0
}

.faq-answer p {
    font-size: 1.3em;
    line-height: 1.65;
    max-width: 58em
}

.faq-answer .text-link {
    font-size: 1.2em;
    margin-top: 1.2em
}

/* Closing invitation and footer */
.contact-section {
    background: #edf7ff;
    text-align: center;
    overflow: hidden;
    padding: 6.4em 0 6.2em
}

.contact-inner {
    position: relative;
    z-index: 2
}

.contact-symbol {
    height: 4.8em;
    width: 4.8em;
    border: 0.1em solid #d3e8fa;
    border-radius: 1.4em;
    background: #fff;
    box-shadow: 0 0.5em 1.5em #3a73ab08;
    display: grid;
    place-items: center;
    color: var(--blue);
    margin: 0 auto 2.1em;
    transform: rotate(-7deg)
}

.contact-symbol .icon {
    height: 2.6em;
    width: 2.6em
}

.contact-section .eyebrow {
    font-size: 0.9em;
    letter-spacing: 0.16em;
    margin-bottom: 1.5em
}

.contact-section h2 {
    font-size: 4.4em;
    line-height: 1.2
}

.contact-section .contact-inner>p:not(.eyebrow) {
    font-size: 1.3em;
    line-height: 1.6;
    margin-top: 2em;
    color: #5f7892;
}

.contact-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2em;
    margin-top: 2.8em
}

.contact-actions .btn {
    font-size: 1.2em;
    padding: 1.1em 2.2em
}

.contact-email {
    display: inline-flex;
    gap: 0.6em;
    align-items: center;
    color: #6a829c;
    font-size: 1em;
    margin-top: 2em
}

.contact-email:hover {
    color: var(--blue)
}

.contact-email .icon {
    height: 1.3em;
    width: 1.3em
}

.contact-ring {
    position: absolute;
    border: 0.1em solid #cfe5f7;
    border-radius: 50%;
    height: 60em;
    width: 60em;
    top: -6em;
    z-index: -1;
    pointer-events: none
}

.ring-one {
    left: -43em
}

.ring-two {
    right: -43em
}

.site-footer {
    padding: 5.5em 0 2.4em
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3em;
    margin-bottom: 3.7em
}

.site-footer .brand-icon {
    width: 2.7em;
    height: 3em
}

.site-footer .brand-icon .icon {
    height: 2.5em;
    width: 2.5em
}

.site-footer .brand-word {
    font-size: 2.2em;
}

.footer-top p {
    font-size: 1.1em;
    margin-top: 1em;
    color: #64748b
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5em;
    font-size: 1.3em;
    color: #62768e
}

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

.footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.footer-nav a [class*="ri-"] {
    font-size: 1.15em;
    line-height: 1;
    transition: transform .2s ease;
}

.footer-nav a:hover [class*="ri-"] {
    transform: translateX(0.2em);
}

.footer-bottom {
    border-top: 0.1em solid #e8eef4;
    padding-top: 2.3em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    font-size: 1.3em;
    color: #64748b
}

.footer-bottom p {
    color: inherit
}

.footer-bottom a {
    color: #687c93
}

.footer-bottom a .icon {
    height: 1.2em;
    width: 1.2em;
    transform: rotate(-90deg);
    margin-left: 0.5em
}

/* ==========================================================================
   Platform / Products Section (Reference Design)
   ========================================================================== */
.platform-section {
    background: #f8fbfe;
    border-top: 0.1em solid #e6eff7;
    border-bottom: 0.1em solid #e6eff7;
}

.platform-header {
    margin-bottom: 4.8em;
}

.eyebrow-num {
    color: #64748b;
    font-weight: 600;
    margin-right: 0.35em;
}

.text-muted-heading {
    color: #64748b;
    font-weight: 500;
}

.product-card {
    background: #ffffff;
    border: 0.1em solid #e5edf5;
    border-radius: 1.4em;
    padding: 2.2em 2.5em;
    display: flex;
    align-items: center;
    gap: 2em;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-0.3em);
    box-shadow: 0 1.2em 3em rgba(18, 100, 223, 0.08);
    border-color: #c8ddf2;
}

.product-icon {
    width: 2.4em;
    height: 2.4em;
    border-radius: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 2.2em;
    line-height: 0;
    box-shadow: 0 0.6em 1.4em rgba(0, 0, 0, 0.08);
}

.product-icon-blue {
    background: linear-gradient(135deg, #1e70eb, #0052cc);
}

.product-icon-red {
    background: linear-gradient(135deg, #f43f5e, #be123c);
}

.product-icon-orange {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.product-icon-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.product-icon-emerald {
    background: linear-gradient(135deg, #10b981, #047857);
}

.product-icon-pink {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.product-icon-purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.product-icon-teal {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
}

.product-icon-green {
    background: linear-gradient(135deg, #22c55e, #15803d);
}

.product-icon-indigo {
    background: linear-gradient(135deg, #4f46e5, #3730a3);
}

.product-info {
    flex: 1;
    min-width: 0;
}

.product-title-row {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: 0.4em;
}

.product-name {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}

.badge-soon {
    font-size: 0.68em;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 0.1em solid #e2e8f0;
    border-radius: 99.9em;
    padding: 0.25em 0.85em;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.product-desc {
    font-size: 1.3em;
    line-height: 1.55;
    color: #586c83;
    margin: 0;
}

/* ==========================================================================
   Testimonials Section (Minimal & Modern)
   ========================================================================== */
.testimonials-section {
    background: #ffffff;
    padding-bottom: 0 !important;
}

#how-it-works {
    padding-bottom: 0 !important;
}

.testimonials-header {
    margin-bottom: 4.8em;
}

.testimonial-card {
    background: #ffffff;
    border: 0.1em solid #e5edf5;
    border-radius: 1.5em;
    padding: 3em 2.6em 2.6em;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-0.4em);
    box-shadow: 0 1.5em 3.5em rgba(18, 100, 223, 0.08);
    border-color: #c9ddf0;
}

.testimonial-card.featured-card {
    border-color: #bcd9f8;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 0.8em 2.5em rgba(18, 100, 223, 0.06);
}

.testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8em;
    flex-wrap: wrap;
    gap: 1em;
}

.review-stars {
    color: #f59e0b;
    font-size: 1.4em;
    display: inline-flex;
    gap: 0.2em;
}

.review-tag {
    font-size: 0.85em;
    font-weight: 700;
    color: #107569;
    background: #edfcf6;
    border: 0.1em solid #c3f2df;
    padding: 0.4em 1em;
    border-radius: 99em;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.review-tag.tag-blue {
    color: var(--blue);
    background: #eef6ff;
    border-color: #cce4fc;
}

.testimonial-quote {
    font-size: 1.35em;
    line-height: 1.65;
    color: #334862;
    margin-bottom: 2.2em;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1.2em;
    border-top: 0.1em solid #edf2f7;
    padding-top: 1.8em;
}

.review-avatar {
    width: 3.8em;
    height: 3.8em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2em;
    color: #ffffff;
    flex-shrink: 0;
}

.avatar-blue {
    background: linear-gradient(135deg, #1e70eb, #0052cc);
}

.avatar-purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.avatar-emerald {
    background: linear-gradient(135deg, #10b981, #047857);
}

.author-info h4 {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

.author-info p {
    font-size: 1.1em;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Trust stats bar */
.trust-stats-bar {
    margin-top: 4.8em;
    background: #f8fbfe;
    border: 0.1em solid #e5edf5;
    border-radius: 1.5em;
    padding: 2.8em 3em;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: var(--heading);
    font-size: 3.2em;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.1;
    margin-bottom: 0.2em;
}

.stat-label {
    font-size: 1.2em;
    color: #556d86;
    margin: 0;
    font-weight: 500;
}

/* Responsive layout: mobile first behavior below the desktop composition. */
@media(min-width:1600px) {
    .container {
        max-width: 124em
    }

    .hero {
        padding-top: 6.7em;
        padding-bottom: 7.1em
    }

    .hero-description {
        font-size: 1.8em;
    }

    .hero-details {
        font-size: 1.1em;
    }
}

@media(max-width:1199.98px) {
    .container-rd {
        padding: 0 5em;
    }

    .container {
        max-width: 106em
    }

    .nav-links {
        gap: 2.1em
    }

    .navigation {
        gap: 2.8em
    }

    .hero {
        padding-top: 4.6em;
        padding-bottom: 4.9em
    }

    .hero-row {
        --bs-gutter-x: 2.8em
    }

    h1 {
        font-size: 6.2em;
    }

    .hero-description {
        font-size: 1.5em;
        max-width: 37em
    }

    .hero-actions {
        gap: 1.6em
    }

    .hero-actions .btn {
        font-size: 1.2em;
        gap: 0.8em
    }

    .hero-actions .btn-blue {
        padding: 1.3em 1.6em
    }

    .hero-details {
        font-size: 0.9em;
        gap: 1.2em
    }

    .product-stage {
        max-width: 42.5em
    }

    .context-float {
        left: 0.5em
    }

    .grounded-tag {
        left: 0
    }

    .stage-caption {
        font-size: 0.8em;
        right: 0
    }

    .strip-item {
        font-size: 1em;
        gap: 0.7em
    }

    .step-caption h3 {
        font-size: 1.5em;
    }

    .step-visual {
        padding: 2.1em
    }

    .step-card>p {
        font-size: 1.2em;
    }

    .website-visual {
        padding: 2.4em 2em 0
    }

    .feature-copy {
        padding-left: 2.8em
    }

    .features-section h2 {
        font-size: 3.5em;
    }

    .knowledge-scene {
        min-height: 51em;
        padding: 2.4em
    }

    .knowledge-paper {
        width: 94%
    }

    .knowledge-answer {
        width: 100%;
        padding: 1.7em 1.4em
    }

    .knowledge-answer strong {
        font-size: 1em;
    }

    .knowledge-answer div>span {
        font-size: 0.7em;
    }

    .use-cases-section h2 {
        font-size: 3.6em;
    }

    .case-panel {
        margin-left: 0
    }

    .case-conversation {
        padding: 2.4em 2.2em
    }

    .case-answer {
        font-size: 1.1em;
        min-height: 10.4em
    }

    .faq-list {
        padding-left: 3.4em
    }
}

@media(max-width:991.98px) {
    :root {
        --ui-scaling: 10px;
    }

    html {
        scroll-padding-top: 8.7em
    }

    .section-shell {
        width: calc(100% - 3.2em);
        border-radius: 2.2em
    }

    .container-rd {
        padding-left: 2.6em;
        padding-right: 2.6em;
    }

    .section-block {
        padding-block: 7.5em !important;
    }

    .container {
        max-width: 78em;
        padding-left: 2.6em;
        padding-right: 2.6em
    }

    .site-header .container {
        max-width: none
    }

    .nav-wrap {
        min-height: 7.8em;
        gap: 1.5em;
        flex-wrap: wrap;
        padding-top: 1.5em;
        padding-bottom: 1.5em
    }

    .menu-toggle {
        display: flex
    }

    .brand-word {
        font-size: 2.4em;
    }

    .navigation {
        width: 100%;
        gap: 2em;
        padding: 0.8em 0 1.2em;
        justify-content: space-between
    }

    .js .navigation {
        display: none
    }

    .js .navigation.is-open {
        display: flex
    }

    .nav-links {
        gap: 2.3em
    }

    .nav-links a {
        font-size: 1.2em;
    }

    .nav-cta {
        font-size: 1.2em;
        gap: 0.8em
    }

    .hero {
        padding-top: 5.3em;
        padding-bottom: 3.7em
    }

    .hero-row {
        --bs-gutter-x: 2.4em
    }

    .hero-copy {
        text-align: center
    }

    .eyebrow-pill {
        margin-bottom: 2.2em
    }

    h1 {
        font-size: 6.4em;
        line-height: 1.11;
        max-width: 65em;
        margin: 0 auto;
    }

    .hero-description {
        font-size: 1.6em;
        max-width: 44.5em;
        margin: 2.3em auto 0
    }

    .hero-actions {
        justify-content: center;
        gap: 2.3em;
        margin-top: 2.6em
    }

    .hero-actions .btn {
        font-size: 1.3em;
    }

    .hero-actions .btn-blue {
        padding: 1.4em 2em
    }

    .hero-details {
        justify-content: center;
        font-size: 1em;
        gap: 1.8em
    }

    .built-by {
        justify-content: center;
        margin-top: 2.4em
    }

    .hero-product {
        margin-top: 4em
    }

    .product-stage {
        max-width: 47em;
        margin: 0 auto
    }

    .context-float {
        left: -0.8em
    }

    .chat-window {
        width: calc(100% - 2.3em)
    }

    .chat-messages {
        height: 27.2em
    }

    .grounded-tag {
        left: -0.7em
    }

    .stage-caption {
        font-size: 1em;
    }

    .orbit-one {
        right: -29em;
        top: 36em
    }

    .orbit-two {
        right: -37em;
        top: 28em
    }

    .benefit-strip {
        padding: 2.9em 0
    }

    .strip-item {
        justify-content: flex-start;
        font-size: 1.2em;
        gap: 1.2em
    }

    .strip-item .icon {
        height: 2em;
        width: 2em
    }

    .section-space {
        padding: 7.5em 0
    }

    .section-heading {
        margin-bottom: 3.6em
    }

    .heading-description {
        margin-left: 0;
        max-width: 49em;
        font-size: 1.35em;
        line-height: 1.6;
    }

    .section-heading h2 {
        font-size: 3.8em;
    }

    .eyebrow {
        margin-bottom: 1.5em;
        font-size: 1em;
    }

    .step-visual {
        height: 19em;
        padding: 1.5em
    }

    .mini-url {
        font-size: 0.8em;
        padding: 0.9em 0.8em;
        gap: 0.6em
    }

    .source-row {
        font-size: 0.7em;
        gap: 0.5em
    }

    .source-row .icon {
        width: 1.1em;
        height: 1.1em
    }

    .mini-question {
        font-size: 0.8em;
        max-width: 100%;
        padding: 0.9em
    }

    .mini-answer {
        margin-right: 0;
        gap: 0.6em;
        margin-top: 1.5em
    }

    .mini-answer>div {
        padding: 1em
    }

    .based-on {
        font-size: 0.6em;
        gap: 0.3em;
        margin-left: 0.5em
    }

    .mini-ai {
        height: 2.4em;
        width: 2.4em
    }

    .website-visual {
        padding: 1.8em 1.4em 0
    }

    .mini-browser {
        height: 15.5em
    }

    .mini-site-art {
        width: 3.8em;
        height: 4em
    }

    .mini-site-body {
        gap: 0.7em;
        padding: 1.2em
    }

    .mini-chat-tooltip {
        font-size: 0.6em;
        padding: 0.5em 0.7em
    }

    .step-caption {
        gap: 0.7em;
        align-items: flex-start;
        margin-top: 1.9em
    }

    .step-caption h3 {
        font-size: 1.4em;
    }

    .step-number {
        font-size: 0.9em;
        padding: 0.3em 0.5em
    }

    .step-card>p {
        font-size: 1.1em;
        padding-right: 0
    }

    .features-section {
        padding-top: 1.5em;
        padding-bottom: 7.8em
    }

    .knowledge-scene {
        max-width: 57em;
        margin: 0 auto;
        min-height: 52em;
        padding: 3.5em
    }

    .knowledge-paper {
        width: 82%;
        padding: 2.4em
    }

    .knowledge-answer {
        width: 87%;
        align-self: center;
        margin-left: 3em
    }

    .knowledge-answer strong {
        font-size: 1.2em;
    }

    .knowledge-answer div>span {
        font-size: 0.9em;
    }

    .feature-copy {
        padding-left: calc(var(--bs-gutter-x)*.5);
        max-width: 62em;
        margin-left: auto;
        margin-right: auto
    }

    .features-section h2 {
        font-size: 3.8em;
    }

    .feature-intro {
        max-width: 55em;
        font-size: 1.35em;
        line-height: 1.6;
    }

    .feature-list {
        gap: 2.3em
    }

    .feature-item p {
        max-width: 50em;
        font-size: 1.3em;
    }

    .feature-item h3 {
        font-size: 1.6em;
    }

    .use-cases-section {
        padding: 6em 0
    }

    .use-cases-section h2 {
        font-size: 3.8em;
    }

    .cases-intro {
        font-size: 1.3em;
        line-height: 1.6;
        max-width: 55em
    }

    .case-tabs {
        max-width: none;
        margin-top: 2.7em
    }

    .case-tab {
        padding: 1.4em
    }

    .case-tab strong {
        font-size: 1.4em;
    }

    .case-tab small {
        font-size: 1.1em;
    }

    .case-panel {
        max-width: 57em;
        margin: 0 auto
    }

    .case-conversation {
        padding: 2.6em 3em;
        min-height: 27.3em
    }

    .case-answer {
        font-size: 1.3em;
        min-height: 9em
    }

    .case-question {
        font-size: 1.3em;
    }

    .example-content {
        margin-left: 3em;
        margin-right: 3em
    }

    .example-content p {
        font-size: 1.1em;
    }

    .case-disclaimer {
        font-size: 0.9em;
    }

    .platform-header,
    .testimonials-header {
        margin-bottom: 3.8em;
    }

    .platform-section h2,
    .testimonials-section h2 {
        font-size: 3.8em;
    }

    .product-card {
        padding: 2em 2.2em;
        gap: 1.8em;
    }

    .testimonial-card {
        padding: 2.6em 2.2em;
    }

    .faq-section h2 {
        font-size: 3.8em;
    }

    .faq-intro {
        font-size: 1.3em;
        line-height: 1.6;
        max-width: 44em;
        margin-top: 1.7em;
        margin-bottom: 1.6em
    }

    .faq-list {
        padding-left: calc(var(--bs-gutter-x)*.5)
    }

    .faq-item summary {
        font-size: 1.4em;
    }

    .faq-answer p {
        font-size: 1.3em;
        max-width: none
    }

    .contact-section {
        padding: 5.5em 0
    }

    .contact-section h2 {
        font-size: 4em;
    }

    .footer-top {
        align-items: flex-start
    }

    .footer-nav {
        max-width: 26em;
        justify-content: flex-end;
        gap: 1.6em 2.1em
    }

    .footer-bottom>span {
        display: none
    }
}

@media(max-width:575.98px) {
    html {
        scroll-padding-top: 8em
    }

    .container-rd {
        padding-left: 2em;
        padding-right: 2em;
    }

    .section-block {
        padding-block: 5.9em !important;
    }

    .container {
        padding-left: 2.3em;
        padding-right: 2.3em
    }

    .section-shell {
        width: calc(100% - 2em);
        border-radius: 1.7em
    }

    .nav-wrap {
        min-height: 7.3em;
        padding-top: 1.3em;
        padding-bottom: 1.3em
    }

    .brand-word {
        font-size: 2.3em;
    }

    .brand-icon .icon {
        width: 2.7em;
        height: 2.7em
    }

    .brand {
        gap: 0.6em
    }

    .menu-toggle {
        height: 4em;
        width: 4em
    }

    .navigation,
    .js .navigation.is-open {
        align-items: stretch;
        flex-direction: column;
        gap: 1.3em;
        padding-bottom: 0.5em
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0 2em
    }

    .nav-links a {
        font-size: 1.3em;
        padding: 1em 0.2em
    }

    .nav-links a.active::after {
        display: none
    }

    .nav-cta {
        width: 100%;
        min-height: 4.3em
    }

    .hero {
        padding-top: 4em;
        padding-bottom: 2.3em
    }

    .hero .container,
    .hero .container-rd {
        padding-left: 2em;
        padding-right: 2em
    }

    .eyebrow-pill {
        font-size: 0.9em;
        gap: 0.7em;
        margin-bottom: 2em
    }

    .tiny-spark {
        height: 2em;
        width: 2em
    }

    h1 {
        font-size: clamp(3.9em, 10.6vw, 5.7em);
        line-height: 1.14;
    }

    .hero-description {
        font-size: 1.35em;
        line-height: 1.55;
        margin-top: 2em;
        max-width: 35.5em
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.8em;
        margin-top: 2.4em
    }

    .hero-actions .btn-blue {
        padding: 1.3em 2.2em;
        font-size: 1.3em;
    }

    .hero-actions .btn-quiet {
        font-size: 1.2em;
    }

    .hero-details {
        gap: 0.7em 1.3em;
        font-size: 0.8em;
        margin-top: 1.2em
    }

    .hero-details .icon {
        height: 1.1em;
        width: 1.1em
    }

    .built-by {
        font-size: 1em;
        margin-top: 2.2em
    }

    .hero-product {
        margin-top: 3.1em
    }

    .product-stage {
        max-width: 39.8em;
        padding-top: 4em;
        padding-bottom: 5.7em
    }

    .context-float {
        width: 26.7em;
        left: 0;
        padding: 1em 1.2em;
        gap: 0.9em;
        transform: rotate(-2deg);
        border-radius: 0.9em
    }

    .context-float strong {
        font-size: 0.8em;
    }

    .context-float span:not(.context-icon):not(.connected-dot) {
        font-size: 0.8em;
    }

    .context-icon {
        height: 3em;
        width: 3em
    }

    .context-icon .icon {
        height: 1.7em;
        width: 1.7em
    }

    .connected-dot {
        width: 0.5em;
        height: 0.5em
    }

    .chat-window {
        margin-left: 0.7em;
        width: calc(100% - 0.7em);
        border-radius: 1.4em
    }

    .chat-header {
        padding: 1.5em 1.5em;
        gap: 0.9em
    }

    .assistant-avatar {
        width: 3.4em;
        height: 3.4em;
        border-radius: 1em
    }

    .chat-header-copy strong {
        font-size: 1.2em;
    }

    .chat-header-copy>span {
        font-size: 0.9em;
    }

    .chat-messages {
        padding: 1.6em 1.4em 1em;
        height: 24.7em;
        gap: 1.1em
    }

    .message {
        font-size: 1.1em;
        line-height: 1.55;
        padding: 1.1em 1.2em;
        max-width: 93%
    }

    .user-message {
        font-size: 1em;
    }

    .message-source {
        font-size: 0.8em;
    }

    .demo-label {
        font-size: 0.7em;
        letter-spacing: 0.1em
    }

    .chat-controls {
        padding: 0.9em 1.4em 0
    }

    .quick-prompts {
        gap: 0.5em;
        margin-bottom: 1.1em
    }

    .quick-prompts button {
        font-size: 0.8em;
        padding: 0.7em 0.8em;
        min-height: 3.2em
    }

    .chat-form input {
        font-size: 1.1em;
    }

    .chat-form {
        min-height: 4.7em
    }

    .send-button {
        width: 3.4em;
        height: 3.4em
    }

    .chat-footer {
        font-size: 0.8em;
        padding-bottom: 1.2em
    }

    .grounded-tag {
        left: -0.3em;
        bottom: 0;
        padding: 1em 1.2em;
        gap: 0.8em
    }

    .grounded-tag>span {
        height: 2.9em;
        width: 2.7em
    }

    .grounded-tag p {
        font-size: 0.8em;
    }

    .grounded-tag .tag-spark {
        width: 1.3em;
        margin-left: 0.8em
    }

    .stage-caption {
        font-size: 0.8em;
        bottom: 1.1em;
        right: -0.2em;
        gap: 0.4em
    }

    .caption-line {
        width: 1em
    }

    .benefit-strip {
        padding: 2.7em 0
    }

    .benefit-strip .row {
        --bs-gutter-x: 1.4em;
        --bs-gutter-y: 2.1em
    }

    .strip-item {
        font-size: 0.9em;
        line-height: 1.6;
        gap: 0.8em
    }

    .strip-item .icon {
        width: 1.7em;
        height: 1.7em
    }

    .section-space {
        padding: 5.9em 0
    }

    h2,
    .section-heading h2,
    .features-section h2,
    .use-cases-section h2,
    .faq-section h2 {
        font-size: 3.1em;
        line-height: 1.25;
    }

    .eyebrow {
        font-size: 0.8em;
        letter-spacing: 0.13em;
        margin-bottom: 1.4em
    }

    .section-heading {
        --bs-gutter-y: 1.8em;
        margin-bottom: 2.9em
    }

    .heading-description {
        font-size: 1.3em;
        line-height: 1.6
    }

    .steps-row {
        --bs-gutter-y: 3em
    }

    .step-visual {
        height: 21.6em;
        padding: 2.6em 3.2em
    }

    .step-caption {
        margin-top: 1.9em;
        gap: 1em;
        align-items: center
    }

    .step-caption h3 {
        font-size: 1.7em;
    }

    .step-number {
        font-size: 1em;
        padding: 0.3em 0.6em
    }

    .step-card>p {
        font-size: 1.3em;
        line-height: 1.6;
        max-width: 38em
    }

    .mini-url {
        font-size: 1em;
        padding: 1.1em 1.3em;
        margin-bottom: 1.3em
    }

    .mini-url .icon {
        height: 1.5em;
        width: 1.5em
    }

    .source-row {
        font-size: 0.9em;
        gap: 1em
    }

    .source-row .icon {
        width: 1.3em;
        height: 1.3em
    }

    .mini-question {
        font-size: 1em;
        max-width: 95%;
        padding: 1.1em 1.3em
    }

    .mini-answer {
        margin-top: 1.9em;
        margin-right: 1em;
        gap: 1em
    }

    .mini-ai {
        height: 2.9em;
        width: 2.9em
    }

    .mini-answer>div {
        padding: 1.4em
    }

    .based-on {
        font-size: 0.8em;
        gap: 0.5em;
        margin-left: 3.9em
    }

    .website-visual {
        padding: 2.4em 3.2em 0
    }

    .mini-browser {
        height: 18em
    }

    .mini-site-art {
        width: 6.3em;
        height: 5.3em
    }

    .mini-site-nav {
        padding: 1.7em 1.7em 1em
    }

    .mini-site-body {
        padding: 1.7em;
        gap: 1.7em
    }

    .mini-chat-tooltip {
        font-size: 0.8em;
        padding: 0.6em 0.9em
    }

    .mini-chat-launcher {
        height: 2.9em;
        width: 2.9em;
        bottom: 0.9em
    }

    .mini-browser-bar span {
        font-size: 0.8em;
    }

    .features-section {
        padding-top: 0.8em;
        padding-bottom: 6em
    }

    .features-section .row {
        --bs-gutter-y: 3.6em
    }

    .knowledge-scene {
        min-height: 44em;
        padding: 2.2em 1.7em;
        border-radius: 1.6em
    }

    .scene-topline {
        top: 2em;
        left: 2.1em;
        right: 2.1em
    }

    .scene-pill {
        font-size: 0.7em;
    }

    .knowledge-paper {
        width: 89%;
        padding: 2.1em 1.8em;
        margin-top: 3.5em
    }

    .paper-heading strong {
        font-size: 1.1em;
    }

    .paper-heading div>span {
        font-size: 0.6em;
    }

    .paper-favicon {
        width: 2.8em;
        height: 2.8em
    }

    .paper-rule {
        margin: 1.5em 0
    }

    .paper-highlight {
        padding: 0.7em 0.9em;
        margin: 1.3em -0.5em
    }

    .paper-highlight span {
        font-size: 0.9em;
    }

    .knowledge-connector {
        height: 4.9em
    }

    .knowledge-answer {
        width: 96%;
        margin-left: 0.7em;
        padding: 1.4em 1.1em;
        gap: 0.9em
    }

    .knowledge-answer strong {
        font-size: 0.9em;
    }

    .knowledge-answer div>span {
        font-size: 0.6em;
    }

    .knowledge-answer .assistant-avatar {
        width: 2.8em;
        height: 2.9em
    }

    .feature-intro {
        font-size: 1.3em;
        line-height: 1.6;
        margin-top: 2em
    }

    .feature-list {
        gap: 2.1em;
        margin-top: 2.5em
    }

    .feature-item h3 {
        font-size: 1.4em;
    }

    .feature-item p {
        font-size: 1.2em;
        line-height: 1.6;
    }

    .feature-icon {
        height: 3.4em;
        width: 3.3em;
        border-radius: 0.8em
    }

    .feature-item {
        gap: 1.2em
    }

    .feature-copy>.text-link {
        margin-left: 4.5em;
        font-size: 1.2em;
        margin-top: 2.4em
    }

    .use-cases-section {
        padding: 4.8em 0
    }

    .use-cases-section .container,
    .use-cases-section .container-rd {
        padding-left: 2em;
        padding-right: 2em
    }

    .use-cases-section .row {
        --bs-gutter-y: 3em
    }

    .eyebrow-light {
        font-size: 0.7em;
        letter-spacing: 0.11em
    }

    .cases-intro {
        font-size: 1.2em;
        line-height: 1.6;
        margin-top: 1.8em
    }

    .case-tabs {
        gap: 0.5em;
        margin-top: 2.2em
    }

    .case-tab {
        padding: 1.2em 1em;
        gap: 0.9em
    }

    .case-tab strong {
        font-size: 1.2em;
    }

    .case-tab small {
        font-size: 0.9em;
    }

    .case-icon {
        width: 2.9em
    }

    .case-icon .icon {
        height: 1.9em;
        width: 1.9em
    }

    .case-tab .tab-arrow {
        font-size: 1.25em;
    }

    .case-panel {
        border-radius: 1.2em
    }

    .case-panel-header {
        font-size: 1em;
        padding: 1.6em
    }

    .case-conversation {
        padding: 2.1em 1.7em 2.2em;
        min-height: 28.9em
    }

    .case-example-label {
        font-size: 0.7em;
        letter-spacing: 0.1em;
        margin-bottom: 2em
    }

    .case-question {
        font-size: 1em;
        padding: 1.1em 1.3em
    }

    .case-answer-wrap {
        gap: 0.9em;
        margin-top: 2em
    }

    .case-answer {
        font-size: 1.1em;
        line-height: 1.65;
        min-height: 10.5em
    }

    .case-bot-avatar {
        width: 2.4em;
        height: 2.5em
    }

    .case-source {
        font-size: 0.8em;
    }

    .example-content {
        margin: 0 1.7em;
        padding: 1.3em
    }

    .example-content>span {
        font-size: 0.6em;
    }

    .example-content p {
        font-size: 0.9em;
        line-height: 1.6
    }

    .case-disclaimer {
        font-size: 0.8em;
        padding: 1.4em 1.5em
    }

    .platform-header,
    .testimonials-header {
        margin-bottom: 2.8em;
    }

    .platform-section h2,
    .testimonials-section h2 {
        font-size: 3.1em;
        line-height: 1.25;
    }

    .product-card {
        padding: 1.6em 1.6em;
        gap: 1.4em;
        border-radius: 1.2em;
    }

    .product-icon {
        width: 4em;
        height: 4em;
        font-size: 1.8em;
        border-radius: 1em;
    }

    .product-name {
        font-size: 1.6em;
    }

    .product-desc {
        font-size: 1.2em;
    }

    .testimonial-card {
        padding: 2.2em 1.8em;
        border-radius: 1.2em;
    }

    .testimonial-quote {
        font-size: 1.25em;
        margin-bottom: 1.8em;
    }

    .trust-stats-bar {
        margin-top: 3.2em;
        padding: 2.2em 1.4em;
        border-radius: 1.2em;
    }

    .stat-number {
        font-size: 2.6em;
    }

    .stat-label {
        font-size: 1.1em;
    }

    .faq-section .row {
        --bs-gutter-y: 2.8em
    }

    .faq-intro {
        font-size: 1.2em;
        line-height: 1.6;
        max-width: 30em
    }

    .faq-section .text-link {
        font-size: 1.2em;
    }

    .faq-item summary {
        font-size: 1.2em;
        padding: 2em 0;
        gap: 1.6em
    }

    .faq-answer p {
        font-size: 1.25em;
        line-height: 1.65;
    }

    .faq-answer {
        padding-right: 1.5em
    }

    .contact-section {
        padding: 4.4em 0 4.1em
    }

    .contact-section .container,
    .contact-section .container-rd {
        padding-left: 1.8em;
        padding-right: 1.8em
    }

    .contact-symbol {
        height: 4.2em;
        width: 4.2em;
        border-radius: 1.2em;
        margin-bottom: 1.9em
    }

    .contact-symbol .icon {
        height: 2.4em;
        width: 2.4em
    }

    .contact-section .eyebrow {
        font-size: 0.7em;
        letter-spacing: 0.12em;
        margin-bottom: 1.4em
    }

    .contact-section h2 {
        font-size: 3em;
        line-height: 1.22;
    }

    .contact-section .contact-inner>p:not(.eyebrow) {
        font-size: 1.2em;
        line-height: 1.6;
        margin: 1.6em auto 0;
        max-width: 33em
    }

    .contact-actions {
        gap: 0.9em;
        margin-top: 2.3em
    }

    .contact-actions .btn {
        font-size: 1em;
        padding: 1em 1.3em;
        gap: 0.8em;
        min-height: 4.5em
    }

    .contact-actions .btn .icon,
    .contact-actions .btn [class*="ri-"] {
        font-size: 1.15em;
    }

    .contact-email {
        font-size: 0.9em;
    }

    .site-footer {
        padding: 3.9em 0 2.2em
    }

    .footer-top {
        flex-direction: column;
        gap: 2.5em;
        margin-bottom: 2.9em
    }

    .footer-nav {
        max-width: none;
        justify-content: flex-start;
        gap: 1.3em 2.2em;
        font-size: 1em;
    }

    .footer-top p {
        font-size: 1em;
    }

    .footer-bottom {
        gap: 1.2em;
        font-size: 0.8em;
        padding-top: 2em
    }
}

@media(max-width:359.98px) {
    .container-rd {
        padding-left: 1.8em;
        padding-right: 1.8em;
    }

    .container {
        padding-left: 1.8em;
        padding-right: 1.8em
    }

    .hero .container,
    .hero .container-rd {
        padding-left: 1.7em;
        padding-right: 1.7em
    }

    h1 {
        font-size: 3.8em;
    }

    .hero-details {
        font-size: 0.7em;
        gap: 0.7em
    }

    .hero-description {
        font-size: 1.3em;
    }

    .context-float {
        width: 24.4em
    }

    .context-float strong {
        font-size: 0.7em;
    }

    .chat-messages {
        height: 26.7em;
        padding-left: 1.1em;
        padding-right: 1.1em
    }

    .message {
        font-size: 1em;
    }

    .user-message {
        font-size: 0.9em;
    }

    .chat-controls {
        padding-left: 1.1em;
        padding-right: 1.1em
    }

    .quick-prompts button {
        font-size: 0.7em;
    }

    .stage-caption {
        display: none
    }

    .grounded-tag {
        left: 0.7em
    }

    .step-visual {
        padding-left: 2.3em;
        padding-right: 2.3em
    }

    .website-visual {
        padding-bottom: 0
    }

    .knowledge-answer strong {
        font-size: 0.8em;
    }

    .knowledge-answer div>span {
        font-size: 0.6em;
    }

    .case-answer {
        font-size: 1em;
    }

    .contact-actions {
        flex-direction: column;
        align-items: center
    }

    .contact-actions .btn {
        min-width: 17.2em
    }

    .footer-nav {
        gap: 1.2em 1.8em
    }
}

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

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

    .btn:hover {
        transform: none
    }
}

@media print {
    .site-header {
        position: static
    }

    .menu-toggle,
    .chat-controls,
    .context-float,
    .grounded-tag,
    .stage-caption {
        display: none !important
    }

    .section-shell {
        width: 100%;
        background: #fff;
        border: 0.1em solid #ddd
    }

    .section-space {
        padding: 3em 0
    }

    .hero {
        padding: 3em 0
    }

    .use-cases-section {
        background: #fff !important;
        color: #000
    }

    .use-cases-section h2,
    .case-tab strong,
    .case-tab small,
    .cases-intro {
        color: #000 !important
    }

    .case-tabs {
        display: none
    }

    .site-footer {
        padding: 2em 0
    }

    .faq-item {
        break-inside: avoid
    }

    .contact-ring,
    .hero-orbit {
        display: none
    }
}