@font-face {
    font-family: Manrope;
    src: url("/assets/fonts/manrope.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}
@font-face {
    font-family: Inter;
    src: url("/assets/fonts/inter.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
:root {
    --purple: #6d3fe8;
    --purple-hover: #5a2ed0;
    --ink: #201a36;
    --lavender: #e9e1ff;
    --lime: #d8f36a;
    --canvas: #faf8fd;
    --muted: #716b82;
    --border: #e6e0ee;
    --soft: #f1edf7;
    --white: #fff;
    --heading: Manrope, Inter, system-ui, sans-serif;
    --body: Inter, system-ui, sans-serif;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}
body {
    margin: 0;
    color: var(--ink);
    font: 400 14px/1.65 var(--body);
    -webkit-font-smoothing: antialiased;
}
body,
button,
input,
select {
    font-family: var(--body);
}
h1,
h2,
h3,
h4,
p {
    margin: 0;
}
h1,
h2,
h3,
h4 {
    font-family: var(--heading);
    font-weight: 650;
    line-height: 1.2;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select {
    font: inherit;
}
button {
    cursor: pointer;
}
button:disabled {
    cursor: wait;
    opacity: 0.7;
}
img {
    max-width: 100%;
    display: block;
}
button,
a,
input,
select,
summary {
    touch-action: manipulation;
}
button {
    color: inherit;
}
a,
button {
    -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid #9f80ef;
    outline-offset: 4px;
}
::selection {
    background: var(--lavender);
    color: var(--ink);
}
.container {
    width: min(1280px, calc(100% - 96px));
    margin-inline: auto;
}
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    width: 22px;
    height: 22px;
}
.preserve-lines {
    white-space: pre-line;
}
.skip-link {
    position: fixed;
    left: 20px;
    top: -80px;
    z-index: 100;
    background: var(--ink);
    color: white;
    padding: 12px 22px;
    border-radius: 8px;
}
.skip-link:focus {
    top: 12px;
}
.eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.6;
    color: var(--purple);
    margin-bottom: 18px;
}
.light-eyebrow {
    color: var(--lime);
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 16px 23px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    min-height: 52px;
    transition:
        background 0.18s,
        transform 0.18s,
        border-color 0.18s;
    white-space: nowrap;
}
.button .icon {
    width: 19px;
    height: 19px;
}
.button:hover {
    transform: translateY(-1px);
}
.button-primary {
    background: var(--purple);
    color: #fff;
    box-shadow: 0 4px 10px #6d3fe813;
}
.button-primary:hover {
    background: var(--purple-hover);
}
.button-lime {
    background: var(--lime);
    color: var(--ink);
}
.button-lime:hover {
    background: #e3fb83;
}
.button-outline {
    background: white;
    color: var(--ink);
    border-color: #d6cde4;
}
.button-outline:hover {
    background: var(--canvas);
    border-color: #aa94d1;
}
.button-text {
    padding-inline: 0;
    background: transparent;
    color: var(--ink);
    gap: 14px;
}
.button-text:hover {
    color: var(--purple);
}
.button-small {
    padding: 12px 17px;
    min-height: 43px;
    font-size: 12px;
    gap: 14px;
}
.button-full {
    width: 100%;
    justify-content: space-between;
}
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 8px;
    border-radius: 7px;
    color: var(--muted);
}
.icon-button:hover {
    background: var(--soft);
    color: var(--purple);
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--purple);
    font-weight: 600;
    font-size: 13px;
    background: none;
    border: 0;
    padding: 0;
}
.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.text-link .icon {
    width: 18px;
    height: 18px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    font: 750 27px/1 var(--heading);
    letter-spacing: -1.3px;
}
.brand-icon {
    display: block;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 10px;
    background: #201a36;
}
.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.28);
}
.brand-period {
    color: var(--purple);
}
.brand-light {
    color: white;
}
.brand-light .brand-period {
    color: var(--lime);
}
.brand-light .brand-icon {
    border: 1px solid #ffffff21;
}
.language-switch {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border-radius: 7px;
    border: 1px solid var(--border);
}
.language-switch a {
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--muted);
}
.language-switch a[aria-current] {
    background: var(--ink);
    color: #fff;
}
.language-switch a:hover:not([aria-current]) {
    background: var(--soft);
    color: var(--ink);
}
.marketing-body {
    background: var(--canvas);
}
.site-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: var(--canvas);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 93px;
    gap: 40px;
}
.main-navigation {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    gap: 30px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: 30px;
}
.nav-links > a {
    font-size: 12px;
    font-weight: 500;
    color: #5e576e;
}
.nav-links > a:hover,
.nav-links > a[aria-current] {
    color: var(--purple);
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}
.nav-login {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.nav-login:hover {
    color: var(--purple);
}
.mobile-menu-button {
    display: none;
}
.hero-section {
    display: grid;
    grid-template-columns: 1fr 1.03fr;
    gap: 62px;
    padding-block: 76px 79px;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 550;
    padding: 7px 10px;
    border: 1px solid #ded3f5;
    border-radius: 5px;
    margin-bottom: 25px;
    color: #584877;
    background: #f0eafb;
}
.hero-eyebrow > i {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--purple);
    border-radius: 50%;
}
.hero-eyebrow .icon {
    width: 13px;
    height: 13px;
    margin-left: 5px;
}
.hero-copy h1 {
    font-weight: 650;
    font-size: clamp(51px, 5.45vw, 78px);
    line-height: 1.09;
    letter-spacing: -0.065em;
}
.hero-copy h1 > span {
    color: var(--purple);
}
.hero-copy > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
    max-width: 440px;
    margin-top: 24px;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 29px;
}
.hero-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: #756b86;
    margin-top: 17px;
}
.hero-note .icon {
    width: 14px;
    height: 14px;
    color: var(--purple);
}
.hero-caption {
    display: flex;
    align-items: center;
    gap: 11px;
    letter-spacing: 0.12em;
    font-size: 8px;
    font-weight: 650;
    color: #958ba5;
    margin-top: 49px;
}
.hero-caption > span {
    height: 1px;
    width: 38px;
    background: #cfc1e7;
}
.hero-visual {
    position: relative;
    border-radius: 20px;
    background: var(--lavender);
    padding: 22px 25px 17px;
    isolation: isolate;
}
.hero-visual:before {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    background: var(--lime);
    right: -16px;
    top: 47px;
    border-radius: 16px;
    transform: rotate(13deg);
    z-index: -1;
}
.hero-visual-topline {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.13em;
    color: #79649c;
    margin-bottom: 16px;
}
.hero-visual-note {
    font-size: 8px;
    text-align: center;
    color: #7a6d91;
    max-width: 400px;
    margin: 14px auto 0;
    line-height: 1.6;
}
.hero-orbit {
    position: absolute;
    inset: -17px;
    border: 1px solid #ded4ee;
    z-index: -2;
    border-radius: 28px;
    transform: rotate(3deg);
}
.hero-plus {
    position: absolute;
    color: #9c83c7;
    font: 400 24px var(--body);
    z-index: -1;
}
.hero-plus-one {
    right: -31px;
    bottom: 60px;
}
.hero-plus-two {
    left: -31px;
    top: 95px;
}
.product-demo {
    position: relative;
    overflow: hidden;
    border: 1px solid #d8cee8;
    background: #fff;
    border-radius: 11px;
    box-shadow: 0 16px 28px #40287512;
    text-align: left;
    transform: rotate(-0.7deg);
}
.demo-toolbar {
    height: 34px;
    border-bottom: 1px solid #e9e4f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 13px;
    font-size: 7px;
    color: #a398b5;
    background: #fdfcfe;
}
.demo-window-dots {
    display: flex;
    gap: 4px;
}
.demo-window-dots i {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #d5cbe3;
}
.demo-label {
    font-size: 6px;
    background: #f1edf7;
    color: #8c7aab;
    letter-spacing: 0.08em;
    padding: 2px 5px;
    border-radius: 3px;
}
.demo-layout {
    display: flex;
}
.demo-sidebar {
    display: flex;
    flex-direction: column;
    gap: 23px;
    width: 48px;
    align-items: center;
    padding: 19px 0;
    background: #fbf9fd;
    border-right: 1px solid #eee8f5;
    color: #a99abd;
}
.demo-sidebar > .icon,
.demo-sidebar span > .icon {
    width: 15px;
    height: 15px;
}
.mini-brand {
    font: 800 17px var(--heading);
    color: var(--purple);
    letter-spacing: -2px;
    margin-bottom: 0;
}
.mini-brand span {
    color: #b197ed;
}
.demo-nav-active {
    padding: 7px;
    border-radius: 5px;
    background: var(--lavender);
    color: var(--purple);
    line-height: 1;
}
.demo-sidebar-bottom {
    margin-top: auto;
}
.demo-content {
    padding: 23px 22px 15px;
    flex: 1;
    min-width: 0;
}
.demo-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.demo-kicker {
    font-size: 7px;
    color: #998cae;
}
.demo-heading h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-top: 2px;
}
.demo-date {
    font-size: 6px;
    border: 1px solid #e8e0f2;
    border-radius: 4px;
    padding: 4px 7px;
    color: #9a8daa;
}
.demo-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-bottom: 15px;
}
.demo-metrics > div {
    position: relative;
    border: 1px solid #e8e1f1;
    border-radius: 7px;
    padding: 12px 12px 10px;
    overflow: hidden;
}
.demo-metrics > div > span {
    display: block;
    font-size: 7px;
    color: #8a7b9f;
}
.demo-metrics strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 650;
    margin-top: 5px;
    letter-spacing: -0.04em;
}
.demo-metrics strong > span {
    font-size: 5px;
    color: #a89ab8;
    letter-spacing: 0;
    line-height: 1.5;
}
.demo-metrics strong > .demo-metric-warning {
    color: #956110;
    max-width: 55px;
    background: #fff3dd;
    border-radius: 3px;
    padding: 3px 4px;
}
.demo-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 21px;
    margin-top: 6px;
}
.demo-sparkline > i {
    width: 10%;
    height: 40%;
    border-radius: 2px 2px 0 0;
    background: #dccdfa;
}
.demo-sparkline > i:nth-child(2n) {
    height: 64%;
}
.demo-sparkline > i:nth-child(3n) {
    height: 85%;
    background: #a888ed;
}
.demo-sparkline > i:last-child {
    height: 100%;
    background: var(--purple);
}
.demo-progress {
    height: 4px;
    background: #f0eaf8;
    border-radius: 5px;
    margin-top: 22px;
    margin-bottom: 1px;
}
.demo-progress i {
    display: block;
    background: #b49adb;
    width: 26%;
    height: 4px;
    border-radius: 5px;
}
.demo-alert {
    border: 1px solid #e7d7b7;
    border-radius: 7px;
    background: #fffefa;
    padding: 13px;
}
.demo-alert-top {
    display: flex;
    gap: 9px;
    align-items: center;
}
.demo-alert-icon {
    width: 27px;
    height: 27px;
    border-radius: 6px;
    background: #fff0d3;
    color: #a26b14;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.demo-alert-icon .icon {
    width: 14px;
    height: 14px;
}
.demo-alert-top > div {
    flex: 1;
}
.demo-alert-top strong {
    display: block;
    font-size: 8px;
    line-height: 1.6;
    font-weight: 600;
}
.demo-alert-top > div > span {
    display: block;
    font-size: 6px;
    color: #9b8c75;
    line-height: 1.6;
}
.demo-alert-count {
    font: 500 16px var(--heading);
    color: #d3bd94;
}
.demo-alert-product {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.demo-product-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid #e9e1ee;
    border-radius: 6px;
    background: #f7f4fa;
    color: #8f79a9;
}
.demo-product-icon .icon {
    width: 14px;
    height: 14px;
}
.demo-alert-product strong {
    font-size: 8px;
    display: block;
    line-height: 1.5;
}
.demo-alert-product > div > span {
    display: block;
    font-size: 6px;
    color: #a395af;
    line-height: 1.5;
}
.demo-price-row {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ede4d8;
    gap: 20px;
}
.demo-price-row > div > span {
    font-size: 6px;
    color: #a19380;
    display: block;
}
.demo-price-row strong {
    font-size: 16px;
    letter-spacing: -0.03em;
    font-weight: 600;
    white-space: nowrap;
}
.demo-price-row small {
    font-size: 10px;
}
.demo-price-arrow {
    color: #c5b9d5;
}
.demo-price-difference {
    font-size: 8px;
    background: #fce7e7;
    color: #ba4555;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: auto;
}
.demo-table {
    margin-top: 13px;
}
.demo-table > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #eee9f4;
    font-size: 7px;
    color: #78698c;
}
.demo-table > div > span:first-child {
    flex: 1;
}
.demo-table b {
    font-size: 10px;
    font-weight: 400;
    color: #a393b5;
}
.demo-table-tag {
    background: #fff3de;
    font-size: 6px;
    padding: 3px 5px;
    color: #9b741e;
    border-radius: 3px;
}
.demo-table-tag-neutral {
    background: #f0eafa;
    color: #957db4;
}
.demo-bottom-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 13px;
    font-size: 6px;
    color: #a99ab7;
}
.demo-bottom-note .icon {
    width: 9px;
    height: 9px;
    color: #9b80c8;
}
.integrations-strip {
    border-block: 1px solid var(--border);
    background: #f5f1fa;
}
.integrations-strip > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 88px;
}
.integrations-strip > .container > span {
    font-size: 9px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #8f819f;
    max-width: 260px;
}
.integrations-strip > .container > div {
    display: flex;
    align-items: center;
    gap: 17px;
}
.integrations-strip strong {
    font: 750 26px/1 var(--heading);
    letter-spacing: -1.7px;
}
.integration-strip-dot {
    color: var(--purple);
}
.integrations-strip .sopyo-wordmark {
    font-size: 28px;
    letter-spacing: -1.5px;
    color: #81748f;
}
.integrations-strip i {
    display: block;
    width: 1px;
    height: 24px;
    background: #ded4e9;
    margin: 0 30px;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.status-pill .icon {
    width: 12px;
    height: 12px;
}
.status-pending {
    background: #fcf1db;
    color: #8c5c0e;
}
.status-neutral {
    background: #ede7f5;
    color: #7f6f96;
}
.status-critical {
    background: #fbe7eb;
    color: #a63447;
}
.section {
    padding-block: 104px;
}
.section-heading {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 43px;
}
.section-heading h2,
.workflow-layout h2 {
    font-size: 43px;
    letter-spacing: -0.05em;
    line-height: 1.19;
}
.section-heading > p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 3px;
    max-width: 400px;
}
.section-heading .eyebrow {
    margin-bottom: 16px;
}
.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.capability-card {
    position: relative;
    padding: 29px 25px 26px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
}
.capability-number {
    position: absolute;
    right: 20px;
    top: 22px;
    color: #c0b4cd;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    background: #f0e9ff;
    border-radius: 10px;
    color: var(--purple);
    flex-shrink: 0;
}
.feature-icon .icon {
    width: 22px;
    height: 22px;
}
.feature-icon-neutral {
    background: #f0edf5;
    color: #716282;
}
.capability-card h3 {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.035em;
    margin-top: 25px;
    max-width: 180px;
}
.capability-card p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.9;
    margin-top: 12px;
}
.workflow-section {
    background: #f0ebf7;
    border-block: 1px solid #e7dff1;
    padding-block: 80px;
}
.workflow-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
}
.workflow-layout h2 {
    margin-bottom: 25px;
}
.workflow-art {
    position: relative;
    margin-top: 34px;
    height: 90px;
    width: 180px;
    display: grid;
    place-items: center;
    color: var(--purple);
}
.workflow-art > .icon {
    width: 77px;
    height: 77px;
    stroke-width: 1;
}
.workflow-art:before,
.workflow-art:after {
    content: "";
    position: absolute;
    width: 65px;
    border-top: 1px dashed #baa6da;
    left: 0;
    top: 50%;
}
.workflow-art:after {
    right: 0;
    left: auto;
}
.workflow-art-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--lime);
    border: 2px solid #c5d974;
    border-radius: 50%;
    right: -10px;
    top: 40px;
}
.workflow-art-cross {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 12px;
    height: 12px;
    border: 1px solid #cab6e5;
    transform: rotate(45deg);
}
.workflow-steps {
    padding-top: 4px;
}
.workflow-steps article {
    display: flex;
    gap: 25px;
    padding: 27px 0;
    border-bottom: 1px solid #dcd0e9;
}
.workflow-steps article:first-child {
    padding-top: 0;
}
.workflow-steps article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.step-number {
    font: 500 13px var(--heading);
    color: var(--purple);
    border: 1px solid #d2bee9;
    background: #f8f4ff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.workflow-steps h3 {
    font-size: 19px;
    letter-spacing: -0.025em;
    margin-top: 3px;
}
.workflow-steps p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
    margin-top: 10px;
    max-width: 360px;
}
.cta-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    background: var(--ink);
    border-radius: 17px;
    color: white;
    padding: 48px 58px;
    margin-block: 80px;
    isolation: isolate;
}
.cta-section h2 {
    font-size: 40px;
    letter-spacing: -0.04em;
}
.cta-section p {
    color: #b8aecb;
    font-size: 12px;
    max-width: 390px;
    margin-top: 14px;
}
.cta-section > .button {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.cta-decoration {
    position: absolute;
    right: 210px;
    top: -80px;
    color: #ffffff05;
    z-index: -1;
    transform: rotate(15deg);
}
.cta-decoration > .icon {
    width: 360px;
    height: 360px;
    stroke-width: 0.7;
}
.site-footer {
    border-top: 1px solid var(--border);
    padding-top: 58px;
    background: #f6f3fa;
}
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.1fr 1fr;
    gap: 55px;
    padding-bottom: 48px;
}
.footer-brand > .brand {
    font-size: 25px;
}
.footer-brand .brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}
.footer-brand p {
    font-size: 11px;
    color: var(--muted);
    margin: 20px 0 17px;
    line-height: 1.8;
}
.pilot-label {
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--purple);
    background: #eae1ff;
    border: 1px solid #dbccf7;
    border-radius: 4px;
    padding: 4px 7px;
    line-height: 1.4;
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.footer-column > span {
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #9c8cab;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.footer-column > a {
    color: #736580;
    font-size: 11px;
}
.footer-column > a:hover {
    color: var(--purple);
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--border);
    padding-block: 23px;
    font-size: 9px;
    color: #9d90aa;
}
.page-hero {
    padding-block: 80px 56px;
}
.page-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.8fr;
    gap: 100px;
    align-items: end;
}
.page-hero h1 {
    font-size: 58px;
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 1.15;
}
.page-hero p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    max-width: 440px;
    margin-bottom: 4px;
}
.feature-detail-section {
    padding-bottom: 80px;
}
.feature-detail-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eee7fb;
    border: 1px solid #e1d5f3;
    border-radius: 15px;
    overflow: hidden;
}
.feature-detail-copy {
    padding: 40px;
}
.feature-detail-copy h2 {
    font-size: 29px;
    letter-spacing: -0.045em;
    max-width: 330px;
    margin-top: 23px;
}
.feature-detail-copy p {
    max-width: 360px;
    color: #7d6c95;
    font-size: 12px;
    margin-top: 15px;
    line-height: 1.9;
}
.feature-field-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
}
.feature-field-list > span {
    padding: 4px 9px;
    border: 1px solid #d6c5eb;
    border-radius: 5px;
    font-size: 9px;
    color: #827194;
}
.feature-detail-demo {
    padding: 40px 30px;
    background: #f6f2fd;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.feature-detail-demo > .eyebrow {
    font-size: 8px;
    color: #a18cb9;
}
.feature-product-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e7ddf2;
    background: white;
    border-radius: 8px;
    padding: 18px 14px;
    margin-bottom: 10px;
    box-shadow: 0 5px 8px #49366d04;
}
.product-tile {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    background: var(--lavender);
    border-radius: 7px;
    color: var(--purple);
    flex-shrink: 0;
}
.product-tile-lime {
    background: #eff6d5;
    color: #7c8a42;
}
.feature-product-row > div {
    flex: 1;
    min-width: 0;
}
.feature-product-row strong {
    display: block;
    font-size: 10px;
    font-weight: 600;
}
.feature-product-row > div > span {
    font-size: 8px;
    color: #a392b5;
}
.feature-product-row > strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.feature-detail-demo > p {
    font-size: 9px;
    color: #a18eae;
    margin-top: 5px;
    line-height: 1.8;
}
.feature-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: 15px;
    margin-top: 24px;
    overflow: hidden;
    background: white;
}
.feature-detail-grid > article {
    padding: 34px;
    border-right: 1px solid var(--border);
}
.feature-detail-grid > article:last-child {
    border: 0;
}
.feature-detail-grid h3 {
    font-size: 20px;
    letter-spacing: -0.03em;
    max-width: 220px;
    margin-top: 24px;
}
.feature-detail-grid p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.9;
    margin-top: 13px;
}
.scope-section {
    padding-block: 75px;
    background: #f0ecf7;
    border-block: 1px solid var(--border);
}
.scope-section .section-heading h2 {
    font-size: 33px;
}
.scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #ded3ec;
    border-radius: 12px;
    background: #faf8fd;
}
.scope-column {
    padding: 30px 35px;
}
.scope-column:first-child {
    border-right: 1px solid #ded3ec;
}
.scope-column h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    letter-spacing: -0.02em;
}
.scope-status {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #eee7f6;
    color: #9381a8;
}
.scope-status .icon {
    width: 15px;
    height: 15px;
}
.scope-status-available {
    background: var(--lavender);
    color: var(--purple);
}
.scope-column ul,
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.scope-column li,
.pricing-card li {
    display: flex;
    gap: 11px;
    align-items: center;
    color: #81728f;
    font-size: 12px;
}
.scope-column li .icon,
.pricing-card li .icon {
    width: 15px;
    height: 15px;
    color: #9c82be;
}
.scope-column:first-child li .icon {
    color: var(--purple);
}
.pricing-hero {
    text-align: center;
    padding-bottom: 45px;
}
.pricing-hero > p {
    margin: 23px auto 0;
    max-width: 570px;
    font-size: 13px;
}
.pricing-grid {
    max-width: 1020px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    padding-bottom: 70px;
}
.pricing-card {
    padding: 33px 35px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
}
.pricing-card-featured {
    border-color: #bba3ed;
    box-shadow: 0 14px 30px #6d3fe808;
    position: relative;
}
.pricing-card-featured:before {
    content: "";
    height: 3px;
    position: absolute;
    top: -1px;
    left: 30px;
    right: 30px;
    background: var(--purple);
    border-radius: 0 0 5px 5px;
}
.pricing-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 27px;
}
.pricing-card h2 {
    font-size: 23px;
    letter-spacing: -0.035em;
}
.pricing-card > p {
    font-size: 12px;
    color: var(--muted);
    max-width: 330px;
    line-height: 1.8;
    margin-top: 12px;
    min-height: 45px;
}
.plan-price {
    border-top: 1px solid var(--border);
    margin-top: 27px;
    padding-top: 25px;
}
.plan-price strong {
    display: block;
    font: 650 25px/1.2 var(--heading);
    letter-spacing: -0.04em;
}
.plan-price > span {
    display: block;
    font-size: 10px;
    color: #9a88ad;
    margin-top: 9px;
}
.pricing-card > .button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 25px;
}
.pricing-card ul {
    padding-top: 22px;
    border-top: 1px solid var(--border);
    margin-top: 25px;
    gap: 15px;
}
.pricing-card li {
    font-size: 11px;
}
.faq-section {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 70px;
    padding-block: 25px 90px;
}
.faq-section h2 {
    font-size: 35px;
    letter-spacing: -0.04em;
    max-width: 280px;
}
.faq-list {
    border-top: 1px solid var(--border);
}
.faq-list details {
    border-bottom: 1px solid var(--border);
    padding-block: 22px;
}
.faq-list summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    font-weight: 600;
}
.faq-list summary::-webkit-details-marker {
    display: none;
}
.faq-list summary > span {
    color: var(--purple);
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    transition: transform 0.2s;
}
.faq-list details[open] summary > span {
    transform: rotate(45deg);
}
.faq-list details > p {
    font-size: 12px;
    line-height: 1.9;
    color: var(--muted);
    padding-top: 15px;
    max-width: 540px;
}
.contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    padding-bottom: 100px;
}
.contact-card {
    background: var(--ink);
    padding: 35px 38px 28px;
    border-radius: 15px;
    color: white;
    overflow: hidden;
    position: relative;
    min-height: 370px;
    display: flex;
    flex-direction: column;
}
.contact-graphic {
    position: absolute;
    top: -55px;
    right: -60px;
    color: #ffffff06;
    transform: rotate(15deg);
}
.contact-graphic > .icon {
    width: 300px;
    height: 300px;
    stroke-width: 1;
}
.contact-methods {
    position: relative;
    margin-top: auto;
}
.contact-method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 21px 0;
    border-bottom: 1px solid #ffffff18;
}
.contact-method-icon {
    display: grid;
    place-items: center;
    color: var(--lime);
    width: 40px;
    height: 40px;
    background: #ffffff08;
    border-radius: 9px;
}
.contact-method-icon > .icon {
    width: 19px;
    height: 19px;
}
.contact-method > div {
    flex: 1;
    min-width: 0;
}
.contact-method > div > span {
    display: block;
    font-size: 9px;
    letter-spacing: 0.05em;
    color: #aca0c4;
    margin-bottom: 3px;
}
.contact-method strong {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.contact-method > .icon {
    width: 19px;
    height: 19px;
    color: #8e7eaa;
}
.contact-method:hover strong {
    color: var(--lime);
}
.contact-methods > .button {
    width: 100%;
    justify-content: space-between;
    margin-top: 23px;
}
.contact-note {
    font-size: 9px;
    color: #8c7d9f;
    margin-top: 19px;
}
.company-information {
    padding-top: 17px;
}
.company-information h2 {
    font-size: 25px;
    letter-spacing: -0.035em;
}
.company-information dl {
    margin: 26px 0 0;
}
.company-information dl > div {
    margin-bottom: 19px;
}
.company-information dt {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a797b5;
    margin-bottom: 6px;
}
.company-information dd {
    margin: 0;
    font-size: 12px;
    color: #756680;
    line-height: 1.8;
    white-space: pre-line;
}
.contact-pilot-note {
    border-top: 1px solid var(--border);
    padding-top: 22px;
    margin-top: 30px;
}
.contact-pilot-note > p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 13px;
    max-width: 330px;
    line-height: 1.9;
}
.legal-hero {
    padding-block: 65px 45px;
}
.legal-hero h1 {
    font-size: 48px;
    letter-spacing: -0.05em;
}
.legal-hero > p {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 650px;
    margin-top: 20px;
}
.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 75px;
    padding-bottom: 90px;
}
.legal-navigation {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-self: start;
    position: sticky;
    top: 30px;
}
.legal-navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 7px;
    font-size: 11px;
    color: #857094;
}
.legal-navigation a[aria-current] {
    background: var(--lavender);
    color: var(--purple);
}
.legal-navigation a > .icon {
    width: 14px;
    height: 14px;
}
.legal-content {
    border-top: 1px solid var(--border);
}
.legal-content > section {
    display: flex;
    gap: 26px;
    padding-block: 30px;
    border-bottom: 1px solid var(--border);
}
.legal-number {
    font-size: 10px;
    color: #ab98bd;
    margin-top: 6px;
}
.legal-content h2 {
    font-size: 21px;
    letter-spacing: -0.025em;
}
.legal-content p {
    font-size: 12px;
    color: var(--muted);
    line-height: 2;
    margin-top: 13px;
    max-width: 750px;
}
.legal-content .text-link {
    margin-top: 12px;
}
.auth-body {
    background: var(--canvas);
}
.auth-layout {
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 100svh;
}
.auth-story {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 650px;
    overflow: hidden;
    background: var(--ink);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 40px 50px;
}
.auth-story-main {
    margin-block: auto;
    padding-top: 50px;
}
.auth-story-main h2 {
    font-size: clamp(31px, 3.25vw, 48px);
    letter-spacing: -0.05em;
    line-height: 1.23;
}
.auth-story-main > p {
    font-size: 12px;
    line-height: 1.95;
    color: #afa3c4;
    max-width: 330px;
    margin-top: 21px;
}
.auth-story-bottom {
    font-size: 8px;
    letter-spacing: 0.16em;
    color: #8f7ca8;
}
.auth-orbit {
    position: relative;
    width: 270px;
    height: 260px;
    margin: 25px auto 0;
    display: grid;
    place-items: center;
}
.orbit-ring {
    position: absolute;
    border: 1px solid #ffffff0e;
    border-radius: 50%;
    width: 240px;
    height: 240px;
}
.orbit-two {
    width: 168px;
    height: 168px;
    border-style: dashed;
    border-color: #ffffff12;
}
.orbit-center {
    display: grid;
    place-items: center;
    background: #33264c;
    border: 1px solid #514063;
    border-radius: 22px;
    width: 90px;
    height: 90px;
    transform: rotate(-9deg);
    box-shadow: 0 0 60px #6d3fe818;
}
.orbit-center > .icon {
    width: 47px;
    height: 47px;
    color: var(--lime);
    stroke-width: 1.2;
}
.orbit-node {
    position: absolute;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #655176;
    background: #32263f;
    border-radius: 12px;
    color: #bdacd3;
    transform: rotate(9deg);
}
.orbit-node > .icon {
    width: 20px;
    height: 20px;
}
.orbit-node-one {
    top: 28px;
    left: 25px;
}
.orbit-node-two {
    right: 10px;
    top: 99px;
}
.orbit-node-three {
    bottom: 12px;
    left: 58px;
    background: #3e3351;
    color: var(--lime);
}
.auth-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 40px 50px;
}
.back-link {
    font-size: 11px;
    color: #9a87ab;
    font-weight: 400;
}
.auth-form-wrap {
    width: min(440px, calc(100% - 100px));
    margin: auto;
    padding-block: 30px 50px;
}
.auth-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 17px;
}
.auth-heading h1 {
    font-size: 35px;
    letter-spacing: -0.045em;
    line-height: 1.18;
}
.auth-heading > p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.9;
    max-width: 390px;
    margin-top: 15px;
}
.auth-heading {
    margin-bottom: 28px;
}
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 21px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.form-field > label {
    font-size: 11px;
    font-weight: 550;
    color: #62536f;
}
.form-field input,
.form-field select {
    width: 100%;
    background: #fff;
    border: 1px solid #d7cde3;
    border-radius: 7px;
    min-height: 47px;
    padding: 11px 13px;
    font-size: 13px;
    color: var(--ink);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.form-field input:hover,
.form-field select:hover {
    border-color: #b79bd9;
}
.form-field input:focus,
.form-field select:focus {
    outline: 0;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px #6d3fe812;
}
.form-field input[aria-invalid] {
    border-color: #c0394a;
}
.password-input {
    position: relative;
}
.password-input input {
    padding-right: 48px;
}
.password-input > .icon-button {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    color: #a38ab5;
}
.password-input .icon {
    width: 18px;
    height: 18px;
}
.form-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: -1px;
}
.form-between > .text-link {
    font-size: 10px;
    font-weight: 500;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #877393;
    cursor: pointer;
}
.checkbox-label input {
    margin: 0;
    width: 14px;
    height: 14px;
    border-color: #cab9d8;
    accent-color: var(--purple);
    flex-shrink: 0;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}
.field-hint {
    font-size: 9px;
    color: #9b88aa;
    line-height: 1.7;
}
.auth-alternate {
    text-align: center;
    font-size: 10px;
    color: #9a87ab;
    margin-top: 26px;
}
.auth-alternate > a {
    color: var(--purple);
    font-weight: 600;
    margin-left: 5px;
}
.auth-alternate > a:hover {
    text-decoration: underline;
}
.auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 50px;
    font-size: 8px;
    color: #ad9cba;
}
.auth-footer a:hover {
    color: var(--purple);
}
.registration-form {
    gap: 17px;
}
.registration-form .form-field input {
    min-height: 43px;
}
.registration-form .form-row {
    gap: 14px;
}
.registration-form .button {
    min-height: 49px;
}
.terms-checkbox {
    align-items: flex-start;
    line-height: 1.8;
    font-size: 9px;
}
.terms-checkbox > input {
    margin-top: 2px;
}
.terms-checkbox a {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.form-small-note {
    font-size: 9px;
    color: #9b88a9;
    text-align: center;
    margin-top: -8px;
}
.auth-state-icon {
    width: 54px;
    height: 54px;
    border: 1px solid #e0d4f4;
    background: #eee7fa;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--purple);
    margin-bottom: 25px;
}
.auth-state-icon > .icon {
    width: 24px;
    height: 24px;
}
.verification-email {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 13px 16px;
    background: white;
    font-size: 12px;
    color: #857091;
    margin-bottom: 24px;
    overflow-wrap: anywhere;
}
.verification-email > .icon {
    color: var(--purple);
    width: 17px;
    height: 17px;
}
.verification-logout {
    text-align: center;
    margin-top: 24px;
}
.verification-logout > .text-link {
    font-size: 11px;
    color: #9984a9;
}
.notice {
    border-radius: 8px;
    font-size: 11px;
    padding: 14px 16px;
    margin-bottom: 23px;
    line-height: 1.8;
}
.notice > .icon {
    width: 17px;
    height: 17px;
}
.notice-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #c3dfcd;
    background: #f0f8f2;
    color: #287045;
}
.notice-error {
    border: 1px solid #ecc7ce;
    background: #fff3f4;
    color: #9e384b;
}
.notice-error > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notice-error .icon {
    width: 17px;
    height: 17px;
}
.notice-error strong {
    font-weight: 600;
}
.notice ul {
    margin: 7px 0 0;
    padding-left: 24px;
}
.panel-body {
    background: #f6f4f9;
    font-size: 12px;
}
.panel-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 244px;
    border-right: 1px solid var(--border);
    background: #fdfcfe;
    padding: 30px 20px 0;
    display: flex;
    flex-direction: column;
    z-index: 40;
}
.panel-sidebar > .brand {
    font-size: 25px;
    gap: 8px;
    padding-left: 7px;
    letter-spacing: -1.2px;
}
.panel-sidebar .brand-icon {
    width: 33px;
    height: 33px;
    border-radius: 9px;
}
.tenant-section {
    margin-top: 38px;
}
.tenant-section > .eyebrow {
    font-size: 8px;
    letter-spacing: 0.14em;
    color: #a28caf;
    margin-bottom: 11px;
    padding-left: 10px;
}
.tenant-switcher {
    position: relative;
}
.tenant-switcher > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
}
.tenant-switcher > summary::-webkit-details-marker {
    display: none;
}
.tenant-avatar {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    background: var(--lavender);
    color: var(--purple);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 650;
    flex-shrink: 0;
}
.tenant-name {
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.tenant-switcher > summary > .icon {
    width: 13px;
    height: 13px;
    color: #aa96ba;
}
.tenant-options {
    position: absolute;
    left: 0;
    right: -20px;
    top: calc(100% + 7px);
    display: flex;
    flex-direction: column;
    padding: 5px;
    background: white;
    border: 1px solid #ded1ea;
    border-radius: 8px;
    box-shadow: 0 10px 25px #35264716;
    z-index: 41;
    max-height: 280px;
    overflow: auto;
}
.tenant-options > a {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    font-size: 11px;
    padding: 10px;
    border-radius: 5px;
}
.tenant-options > a:hover,
.tenant-options > a[aria-current] {
    background: #f3eefb;
    color: var(--purple);
}
.tenant-options > a > .icon {
    width: 14px;
    height: 14px;
}
.tenant-options > a:last-child {
    border-top: 1px solid var(--border);
    border-radius: 0;
    margin-top: 4px;
    justify-content: flex-start;
    font-size: 10px;
    color: #967ca9;
}
.panel-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 25px;
}
.panel-nav > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 7px;
    color: #9683a4;
    font-size: 11px;
    font-weight: 500;
}
.panel-nav > a > .icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.7;
}
.panel-nav > a:hover {
    background: #f3eff9;
    color: var(--purple);
}
.panel-nav > a[aria-current] {
    background: #eee6fc;
    color: var(--purple);
    font-weight: 600;
}
.panel-nav > a > i {
    width: 5px;
    height: 5px;
    background: var(--purple);
    border-radius: 50%;
    margin-left: auto;
}
.sidebar-bottom {
    margin-top: auto;
    padding-top: 40px;
}
.sidebar-pilot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    letter-spacing: 0.09em;
    color: #ab96ba;
    padding: 13px;
}
.pilot-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #af95d3;
}
.sidebar-help {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    color: #93809f;
    padding: 12px;
    border-top: 1px solid #eee7f4;
}
.sidebar-help > .icon {
    width: 16px;
    height: 16px;
}
.sidebar-help > .icon:last-child {
    margin-left: auto;
    width: 13px;
    height: 13px;
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--border);
    padding: 18px 0;
    margin-top: 4px;
}
.user-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: #ede6f5;
    color: #9981ad;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-user > div {
    flex: 1;
    min-width: 0;
}
.sidebar-user strong {
    font-size: 10px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.sidebar-user > div > span {
    font-size: 8px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b29cc0;
    margin-top: 2px;
}
.sidebar-user .icon-button {
    padding: 5px;
}
.sidebar-user .icon {
    width: 16px;
    height: 16px;
}
.panel-shell {
    margin-left: 244px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.panel-topbar {
    min-height: 76px;
    border-bottom: 1px solid var(--border);
    background: #fdfcfe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 15px 38px;
}
.panel-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    color: #ac96bb;
}
.panel-breadcrumb > span {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panel-breadcrumb > .icon {
    width: 12px;
    height: 12px;
    color: #c5b5d0;
}
.panel-breadcrumb > strong {
    font-weight: 500;
    color: #7e6a8d;
}
.panel-topbar-actions {
    display: flex;
    align-items: center;
    gap: 21px;
}
.connection-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a48eb5;
    font-size: 9px;
}
.connection-badge > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #baabc8;
}
.panel-topbar .language-switch {
    background: white;
}
.panel-topbar .language-switch a {
    font-size: 8px;
    padding: 3px 6px;
}
.panel-menu-button {
    display: none;
}
.panel-content {
    padding: 34px 38px 40px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    flex: 1;
}
.panel-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 29px;
}
.panel-page-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 0.1em;
    color: #a18aaf;
    margin-bottom: 7px;
}
.panel-page-heading h1 {
    font-size: 29px;
    letter-spacing: -0.045em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-page-heading p {
    font-size: 11px;
    color: #9b88a9;
    line-height: 1.8;
    margin-top: 9px;
    max-width: 620px;
}
.panel-date {
    display: flex;
    gap: 6px;
    font-size: 9px;
    align-items: center;
    color: #aa94b8;
}
.panel-date > .icon {
    width: 13px;
    height: 13px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 26px;
}
.stat-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    padding: 20px 20px 15px;
    min-width: 0;
}
.stat-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #9781a7;
    font-size: 9px;
}
.stat-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    background: #f5f1fa;
    border-radius: 7px;
    color: #a187b5;
}
.stat-icon > .icon {
    width: 14px;
    height: 14px;
}
.stat-card > strong {
    display: block;
    font: 600 32px/1.2 var(--heading);
    letter-spacing: -0.04em;
    margin-top: 14px;
    font-variant-numeric: tabular-nums;
}
.stat-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1eaf5;
    margin-top: 16px;
    padding-top: 10px;
    font-size: 8px;
    color: #a78fb9;
}
.stat-card > a:hover {
    color: var(--purple);
}
.stat-card > a > .icon {
    width: 12px;
    height: 12px;
}
.stat-card > .stat-sync-value {
    font-size: 20px;
    min-height: 38px;
    display: flex;
    align-items: center;
}
.stat-footnote {
    display: block;
    font-size: 8px;
    color: #b49fc1;
    border-top: 1px solid #f1eaf5;
    padding-top: 10px;
    margin-top: 16px;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
}
.dashboard-start-card {
    position: relative;
    padding: 30px;
    background: #eee6fc;
    border: 1px solid #e1d3f4;
    border-radius: 11px;
    overflow: hidden;
    isolation: isolate;
}
.dashboard-start-card > div:first-child {
    max-width: 360px;
    position: relative;
    z-index: 1;
}
.dashboard-start-card .pilot-label {
    background: #f5eeff;
    border-color: #decef5;
    font-size: 7px;
}
.dashboard-start-card h2 {
    font-size: 26px;
    letter-spacing: -0.045em;
    line-height: 1.3;
    margin-top: 19px;
}
.dashboard-start-card p {
    font-size: 10px;
    line-height: 1.95;
    color: #a18cb4;
    margin-top: 13px;
    max-width: 300px;
}
.dashboard-start-card .button {
    margin-top: 24px;
    padding: 11px 15px;
    min-height: 41px;
    font-size: 10px;
    gap: 25px;
}
.dashboard-start-card .button > .icon {
    width: 15px;
    height: 15px;
}
.dashboard-start-art {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    color: #d7c5ed;
    z-index: 0;
}
.dashboard-start-art > .icon {
    width: 160px;
    height: 160px;
    stroke-width: 1;
}
.dashboard-start-art > span {
    position: absolute;
    inset: -30px;
    border: 1px dashed #ddceed;
    border-radius: 50%;
}
.onboarding-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 26px 22px;
}
.onboarding-card h2 {
    font-size: 15px;
    letter-spacing: -0.025em;
    margin-bottom: 22px;
}
.onboarding-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0e8f5;
}
.onboarding-item:last-child {
    border: 0;
    padding-bottom: 0;
}
.onboarding-item > div {
    flex: 1;
}
.onboarding-item strong {
    display: block;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}
.onboarding-item > div > span {
    font-size: 8px;
    color: #af98be;
    display: block;
    margin-top: 4px;
}
.onboarding-item > .icon {
    width: 12px;
    height: 12px;
    color: #b49ac7;
}
.onboarding-item:hover strong {
    color: var(--purple);
}
.onboarding-check,
.onboarding-step {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #e4d8ef;
    background: #f7f3fb;
    border-radius: 50%;
    font-size: 9px;
    color: #a68bb9;
    flex-shrink: 0;
}
.onboarding-check {
    background: var(--lavender);
    color: var(--purple);
    border-color: #d9c5f1;
}
.onboarding-check > .icon {
    width: 12px;
    height: 12px;
}
.dashboard-support {
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #faf8fd;
    border: 1px solid var(--border);
    padding: 21px 23px;
    border-radius: 9px;
}
.support-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    background: #eee8f5;
    color: #a68eb7;
    border-radius: 8px;
    flex-shrink: 0;
}
.support-icon > .icon {
    width: 18px;
    height: 18px;
}
.dashboard-support > div {
    flex: 1;
}
.dashboard-support h2 {
    font-size: 12px;
    font-weight: 600;
}
.dashboard-support p {
    font-size: 9px;
    line-height: 1.8;
    color: #aa94b9;
    margin-top: 4px;
}
.dashboard-support > .text-link {
    font-size: 10px;
    color: #9173a8;
}
.dashboard-support > .text-link > .icon {
    width: 14px;
    height: 14px;
}
.panel-footer {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 20px 38px;
    font-size: 8px;
    color: #baa8c7;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.panel-card {
    border: 1px solid var(--border);
    background: white;
    border-radius: 11px;
    overflow: hidden;
}
.title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    border: 1px solid #dfd0ed;
    background: #f0e8f9;
    color: #a188b5;
    font: 500 11px var(--body);
    letter-spacing: 0;
    padding: 0 7px;
}
.empty-state {
    padding: 80px 30px;
    min-height: 430px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.empty-state-icon {
    width: 66px;
    height: 66px;
    background: #f1eafa;
    border: 1px solid #e1d4f1;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: #aa8fcc;
    transform: rotate(-6deg);
}
.empty-state-icon > .icon {
    width: 29px;
    height: 29px;
    stroke-width: 1.3;
    transform: rotate(6deg);
}
.empty-state h2 {
    font-size: 24px;
    letter-spacing: -0.04em;
}
.empty-state p {
    max-width: 420px;
    font-size: 11px;
    line-height: 1.9;
    color: #a28aaf;
    margin-top: 13px;
}
.empty-state .button {
    margin-top: 25px;
    font-size: 10px;
    min-height: 40px;
}
.table-scroll {
    overflow: auto;
}
.records-table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    font-size: 10px;
    white-space: nowrap;
}
.records-table thead {
    background: #faf7fd;
    color: #a18ab1;
}
.records-table th {
    font-weight: 500;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 9px;
}
.records-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #f0e9f5;
    color: #9b83ac;
}
.records-table tr:last-child td {
    border-bottom: 0;
}
.records-table td strong {
    font-weight: 500;
    color: #73607f;
}
.numeric-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.mono-cell {
    font-variant-numeric: tabular-nums;
    color: #a78db8;
}
.table-product {
    display: flex;
    align-items: center;
    gap: 10px;
}
.table-product-icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    background: #f2ecf8;
    border: 1px solid #e8dcf1;
    border-radius: 7px;
    color: #b499c7;
}
.table-product-icon > .icon {
    width: 15px;
    height: 15px;
}
.pagination {
    padding: 17px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #b098c1;
    font-size: 9px;
}
.pagination > div {
    display: flex;
    gap: 15px;
    align-items: center;
}
.pagination a {
    color: var(--purple);
    border: 1px solid #dfd0f0;
    padding: 6px 10px;
    border-radius: 5px;
}
.pagination a:hover {
    background: var(--lavender);
}
.pagination-disabled {
    opacity: 0.55;
}
.panel-integration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.integration-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.integration-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: 28px;
}
.provider-logo {
    font: 750 29px/1 var(--heading);
    letter-spacing: -1.7px;
}
.provider-logo i {
    font-style: normal;
    color: var(--purple);
}
.provider-logo-sopyo {
    color: #a28daf;
    letter-spacing: -1.2px;
}
.integration-card > p {
    font-size: 11px;
    color: #a18aaf;
    line-height: 1.9;
    max-width: 400px;
}
.integration-card-status {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 8px;
    color: #b69bc7;
    margin-top: 21px;
    padding-block: 14px;
    border-block: 1px solid #f0e8f6;
    width: 100%;
}
.integration-card-status > .icon {
    width: 12px;
    height: 12px;
}
.integration-card > .button {
    font-size: 10px;
    min-height: 39px;
    margin-top: 24px;
    gap: 21px;
}
.integration-card > .button > .icon {
    width: 14px;
    height: 14px;
}
.integration-planned {
    font-size: 9px;
    color: #b8a1c7;
    padding-top: 29px;
}
.information-strip {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #e1d6ed;
    background: #f0ebf7;
    border-radius: 8px;
    padding: 16px 19px;
    margin-top: 24px;
    color: #a48bb7;
}
.information-strip > .icon {
    width: 17px;
    height: 17px;
}
.information-strip p {
    font-size: 10px;
    line-height: 1.8;
}
.settings-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 24px;
    align-items: start;
}
.settings-card {
    padding: 27px 29px;
}
.settings-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.settings-card-heading h2 {
    font-size: 16px;
    letter-spacing: -0.025em;
}
.settings-card-heading p {
    font-size: 9px;
    color: #a68bb7;
    line-height: 1.8;
    margin-top: 5px;
}
.settings-card .feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}
.settings-card .feature-icon > .icon {
    width: 19px;
    height: 19px;
}
.settings-card .form-field > label {
    font-size: 10px;
    color: #9d80b1;
}
.settings-card .form-field input,
.settings-card .form-field select {
    min-height: 42px;
    font-size: 11px;
    border-color: #dfd2e9;
}
.settings-card .form-stack {
    gap: 22px;
}
.settings-form-footer {
    border-top: 1px solid #eee5f5;
    padding-top: 23px;
    display: flex;
    justify-content: flex-end;
}
.settings-form-footer .button {
    font-size: 10px;
    min-height: 39px;
}
.settings-form-footer .button > .icon {
    width: 14px;
    height: 14px;
}
.settings-profile {
    padding: 30px;
    text-align: center;
}
.user-avatar-large {
    width: 57px;
    height: 57px;
    font-size: 23px;
    background: #eee5f7;
    color: #a487ba;
    margin: 0 auto 22px;
}
.settings-profile .eyebrow {
    font-size: 8px;
    color: #b49ac5;
    letter-spacing: 0.09em;
    margin-bottom: 12px;
}
.settings-profile h2 {
    font-size: 19px;
    letter-spacing: -0.03em;
}
.settings-profile p {
    font-size: 10px;
    color: #ad93be;
    line-height: 1.9;
    margin-top: 17px;
}
.settings-profile .profile-email {
    font-size: 10px;
    color: #947aa7;
    margin-top: 8px;
    overflow-wrap: anywhere;
}
.new-company-card {
    grid-column: 1/-1;
}
.new-company-form {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}
.new-company-form > .form-field {
    flex: 1;
    max-width: 420px;
}
.new-company-form > .button {
    font-size: 10px;
    min-height: 42px;
}
.new-company-form > .button > .icon {
    width: 14px;
    height: 14px;
}
.mobile-scrim {
    position: fixed;
    inset: 0;
    background: #201a3680;
    z-index: 30;
    backdrop-filter: blur(2px);
}
.mobile-scrim[hidden] {
    display: none;
}
/* Secondary text retains contrast on the light application surfaces. */
.hero-caption,
.footer-column > span,
.footer-bottom,
.feature-detail-demo > p,
.plan-price > span,
.contact-pilot-note > p,
.legal-number,
.legal-navigation a,
.back-link,
.field-hint,
.checkbox-label,
.auth-alternate,
.auth-footer,
.verification-logout > .text-link {
    color: var(--muted);
}
.feature-detail-copy p {
    color: #6c5b81;
}
.scope-column li,
.pricing-card li {
    color: var(--muted);
}
.panel-body .tenant-section > .eyebrow,
.panel-body .panel-nav > a:not([aria-current]),
.panel-body .sidebar-pilot,
.panel-body .sidebar-help,
.panel-body .sidebar-user > div > span,
.panel-body .panel-breadcrumb,
.panel-body .panel-breadcrumb > strong,
.panel-body .connection-badge,
.panel-body .panel-page-heading .eyebrow,
.panel-body .panel-page-heading p,
.panel-body .panel-date,
.panel-body .stat-card > div,
.panel-body .stat-card > a,
.panel-body .stat-footnote,
.panel-body .dashboard-start-card p,
.panel-body .onboarding-item > div > span,
.panel-body .dashboard-support p,
.panel-body .dashboard-support > .text-link,
.panel-body .panel-footer,
.panel-body .empty-state p,
.panel-body .records-table th,
.panel-body .records-table td,
.panel-body .records-table td strong,
.panel-body .pagination,
.panel-body .integration-card > p,
.panel-body .integration-card-status,
.panel-body .integration-planned,
.panel-body .information-strip,
.panel-body .settings-card-heading p,
.panel-body .settings-card .form-field > label,
.panel-body .settings-profile .eyebrow,
.panel-body .settings-profile p,
.panel-body .settings-profile .profile-email {
    color: var(--muted);
}
.panel-body .stat-card > a:hover,
.panel-body .panel-nav > a:hover,
.panel-body .dashboard-support > .text-link:hover {
    color: var(--purple);
}
.panel-body .onboarding-step,
.panel-body .sidebar-user .user-avatar,
.panel-body .settings-profile .user-avatar-large {
    color: #7e6595;
}
.menu-is-open {
    overflow: hidden;
}
@media (min-width: 1600px) {
    .hero-copy h1 {
        font-size: 78px;
    }
    .hero-section {
        padding-block: 95px;
    }
    .hero-visual {
        padding: 27px 30px 20px;
    }
    .demo-content {
        padding: 25px 25px 18px;
    }
    .demo-alert {
        padding: 16px;
    }
    .demo-heading {
        margin-bottom: 23px;
    }
    .demo-metrics {
        margin-bottom: 18px;
    }
    .demo-table > div {
        padding-block: 10px;
    }
}
@media (max-width: 1250px) {
    .container {
        width: calc(100% - 64px);
    }
    .header-inner {
        gap: 27px;
    }
    .brand {
        font-size: 25px;
    }
    .main-navigation {
        gap: 20px;
    }
    .nav-links {
        margin-left: 0;
        gap: 22px;
    }
    .nav-actions {
        gap: 18px;
    }
    .nav-actions > .button {
        font-size: 10px;
        gap: 12px;
    }
    .hero-section {
        gap: 40px;
        padding-block: 65px;
    }
    .hero-copy h1 {
        font-size: 61px;
    }
    .hero-copy > p {
        font-size: 13px;
    }
    .hero-actions {
        gap: 22px;
    }
    .hero-actions > .button {
        font-size: 11px;
        padding-inline: 17px;
    }
    .hero-actions > .button-text {
        padding-inline: 0;
    }
    .hero-note {
        font-size: 9px;
    }
    .hero-caption {
        font-size: 7px;
    }
    .hero-visual {
        padding-inline: 19px;
    }
    .demo-content {
        padding: 19px 16px 13px;
    }
    .demo-price-row {
        gap: 12px;
    }
    .demo-price-row strong {
        font-size: 15px;
    }
    .demo-price-difference {
        font-size: 7px;
    }
    .capability-grid {
        gap: 15px;
    }
    .capability-card {
        padding: 25px 20px;
    }
    .capability-card h3 {
        font-size: 15px;
    }
    .section-heading h2,
    .workflow-layout h2 {
        font-size: 38px;
    }
    .workflow-layout {
        gap: 90px;
    }
    .footer-main {
        gap: 35px;
    }
    .page-hero h1 {
        font-size: 50px;
    }
    .page-hero-grid {
        gap: 60px;
    }
    .auth-story {
        padding: 35px;
    }
    .auth-header {
        padding: 35px 40px;
    }
    .auth-form-wrap {
        width: calc(100% - 80px);
        max-width: 440px;
    }
    .auth-footer {
        padding: 25px 40px;
    }
    .panel-sidebar {
        width: 220px;
        padding-inline: 15px;
    }
    .panel-sidebar > .brand {
        font-size: 23px;
    }
    .panel-sidebar .brand-icon {
        width: 31px;
        height: 31px;
    }
    .panel-shell {
        margin-left: 220px;
    }
    .panel-topbar {
        padding-inline: 28px;
    }
    .panel-content {
        padding: 30px 28px;
    }
    .panel-footer {
        padding-inline: 28px;
    }
    .stats-grid {
        gap: 13px;
    }
    .stat-card {
        padding: 17px 15px 13px;
    }
    .dashboard-grid {
        grid-template-columns: 1.4fr 1fr;
        gap: 18px;
    }
    .dashboard-start-card {
        padding: 26px;
    }
    .dashboard-start-card h2 {
        font-size: 23px;
    }
    .dashboard-start-art {
        right: -60px;
        opacity: 0.65;
    }
    .onboarding-card {
        padding: 25px 18px;
    }
    .onboarding-item {
        gap: 10px;
    }
    .onboarding-item strong {
        font-size: 9px;
    }
    .settings-layout {
        grid-template-columns: 1.6fr 1fr;
    }
    .settings-card {
        padding: 25px;
    }
    .integration-card {
        padding: 25px;
    }
    .integration-card-header {
        gap: 15px;
    }
    .integration-card .status-pill {
        font-size: 8px;
    }
}
@media (max-width: 1050px) {
    .header-inner {
        min-height: 83px;
        gap: 23px;
    }
    .brand {
        font-size: 24px;
    }
    .brand-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
    .nav-links {
        gap: 19px;
    }
    .nav-links > a {
        font-size: 10px;
    }
    .nav-actions {
        gap: 12px;
    }
    .nav-login {
        font-size: 10px;
    }
    .nav-actions > .button {
        padding: 10px 12px;
        min-height: 39px;
        font-size: 9px;
        gap: 8px;
    }
    .nav-actions > .button > .icon {
        width: 15px;
        height: 15px;
    }
    .language-switch a {
        font-size: 9px;
        padding-inline: 6px;
    }
    .hero-section {
        gap: 32px;
    }
    .hero-copy h1 {
        font-size: 53px;
    }
    .hero-copy > p {
        font-size: 12px;
    }
    .hero-eyebrow {
        font-size: 8px;
        padding: 6px 8px;
    }
    .hero-actions {
        gap: 17px;
    }
    .hero-actions > .button {
        font-size: 10px;
        gap: 12px;
        padding-inline: 14px;
        min-height: 46px;
    }
    .hero-actions > .button-text {
        padding-inline: 0;
    }
    .hero-note {
        font-size: 8px;
    }
    .hero-note > .icon {
        width: 12px;
        height: 12px;
    }
    .hero-caption {
        margin-top: 35px;
        font-size: 6px;
        gap: 8px;
    }
    .hero-caption > span {
        width: 25px;
    }
    .hero-visual {
        padding: 17px 15px 13px;
    }
    .hero-visual-topline {
        font-size: 5px;
        margin-bottom: 12px;
    }
    .hero-visual-note {
        font-size: 6px;
    }
    .demo-content {
        padding: 16px 12px 11px;
    }
    .demo-sidebar {
        width: 38px;
        gap: 20px;
        padding-block: 16px;
    }
    .demo-sidebar .icon {
        width: 12px;
        height: 12px;
    }
    .demo-heading h3 {
        font-size: 17px;
    }
    .demo-heading {
        margin-bottom: 15px;
    }
    .demo-metrics {
        gap: 8px;
        margin-bottom: 11px;
    }
    .demo-metrics > div {
        padding: 10px;
    }
    .demo-metrics strong {
        font-size: 21px;
        gap: 6px;
    }
    .demo-metrics strong > span {
        font-size: 4px;
    }
    .demo-alert {
        padding: 10px;
    }
    .demo-alert-top {
        gap: 7px;
    }
    .demo-alert-top strong {
        font-size: 7px;
    }
    .demo-alert-top > div > span {
        font-size: 5px;
    }
    .demo-alert-count {
        font-size: 14px;
    }
    .demo-price-row strong {
        font-size: 12px;
    }
    .demo-price-row small {
        font-size: 8px;
    }
    .demo-alert-product {
        margin-top: 10px;
    }
    .demo-alert-product strong {
        font-size: 7px;
    }
    .demo-product-icon {
        width: 24px;
        height: 24px;
    }
    .demo-table > div {
        font-size: 6px;
    }
    .demo-table-tag {
        font-size: 5px;
    }
    .demo-bottom-note {
        font-size: 5px;
        margin-top: 10px;
    }
    .section {
        padding-block: 80px;
    }
    .section-heading {
        gap: 45px;
    }
    .section-heading h2,
    .workflow-layout h2 {
        font-size: 35px;
    }
    .section-heading > p {
        font-size: 12px;
    }
    .capability-card {
        padding: 23px 18px;
    }
    .capability-card h3 {
        font-size: 14px;
    }
    .capability-card p {
        font-size: 10px;
    }
    .feature-icon {
        width: 37px;
        height: 37px;
        border-radius: 9px;
    }
    .feature-icon .icon {
        width: 19px;
        height: 19px;
    }
    .workflow-layout {
        gap: 65px;
    }
    .workflow-steps h3 {
        font-size: 17px;
    }
    .workflow-steps p {
        font-size: 11px;
    }
    .cta-section {
        padding: 42px;
    }
    .cta-section h2 {
        font-size: 35px;
    }
    .cta-section p {
        font-size: 11px;
    }
    .cta-section > .button {
        font-size: 11px;
        gap: 15px;
    }
    .footer-main {
        grid-template-columns: 1.3fr 1fr 1.1fr 1fr;
        gap: 30px;
    }
    .footer-brand > .brand {
        font-size: 22px;
    }
    .footer-column > a {
        font-size: 10px;
    }
    .page-hero {
        padding-block: 65px 45px;
    }
    .page-hero h1 {
        font-size: 45px;
    }
    .page-hero-grid {
        gap: 40px;
    }
    .page-hero p {
        font-size: 12px;
    }
    .feature-detail-copy {
        padding: 33px;
    }
    .feature-detail-copy h2 {
        font-size: 26px;
    }
    .feature-detail-demo {
        padding: 30px 23px;
    }
    .feature-product-row {
        gap: 10px;
        padding: 15px 12px;
    }
    .feature-product-row strong {
        font-size: 9px;
    }
    .feature-detail-grid > article {
        padding: 28px;
    }
    .feature-detail-grid h3 {
        font-size: 18px;
    }
    .feature-detail-grid p {
        font-size: 11px;
    }
    .scope-section .section-heading h2 {
        font-size: 29px;
    }
    .scope-column {
        padding: 27px;
    }
    .scope-column h3 {
        font-size: 15px;
    }
    .scope-column li {
        font-size: 11px;
    }
    .pricing-grid {
        max-width: 850px;
    }
    .pricing-card {
        padding: 30px;
    }
    .pricing-card h2 {
        font-size: 21px;
    }
    .plan-price strong {
        font-size: 23px;
    }
    .pricing-card li {
        font-size: 10px;
    }
    .faq-section {
        gap: 50px;
    }
    .faq-section h2 {
        font-size: 30px;
    }
    .contact-layout {
        gap: 55px;
    }
    .contact-card {
        padding: 30px;
        min-height: 350px;
    }
    .contact-method strong {
        font-size: 15px;
    }
    .company-information h2 {
        font-size: 23px;
    }
    .legal-layout {
        gap: 50px;
        grid-template-columns: 210px 1fr;
    }
    .legal-hero h1 {
        font-size: 43px;
    }
    .legal-content h2 {
        font-size: 19px;
    }
    .auth-story {
        padding: 33px;
    }
    .auth-story-main h2 {
        font-size: 35px;
    }
    .auth-story-main > p {
        font-size: 11px;
    }
    .auth-orbit {
        width: 235px;
        height: 235px;
        margin-top: 20px;
    }
    .orbit-ring {
        width: 210px;
        height: 210px;
    }
    .orbit-two {
        width: 145px;
        height: 145px;
    }
    .auth-story-bottom {
        font-size: 7px;
    }
    .auth-header {
        padding-inline: 35px;
    }
    .auth-form-wrap {
        width: calc(100% - 70px);
    }
    .auth-heading h1 {
        font-size: 31px;
    }
    .auth-footer {
        padding-inline: 35px;
    }
    .panel-sidebar {
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s;
        width: 244px;
        padding-inline: 20px;
    }
    .panel-sidebar > .brand {
        font-size: 25px;
    }
    .panel-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }
    .panel-shell {
        margin-left: 0;
    }
    .panel-menu-button {
        display: inline-flex;
        padding: 0 5px 0 0;
    }
    .panel-menu-button > .icon {
        width: 19px;
        height: 19px;
    }
    .panel-topbar {
        min-height: 70px;
    }
    .dashboard-start-art {
        right: 0;
    }
    .dashboard-start-card > div:first-child {
        max-width: 380px;
    }
    .dashboard-start-card h2 {
        font-size: 27px;
    }
    .dashboard-start-card p {
        max-width: 330px;
    }
    .stats-grid {
        gap: 18px;
    }
    .stat-card {
        padding: 20px;
    }
    .dashboard-grid {
        grid-template-columns: 1.5fr 1fr;
    }
    .onboarding-item strong {
        font-size: 10px;
    }
    .panel-page-heading h1 {
        font-size: 29px;
    }
}
@media (max-width: 850px) {
    .container {
        width: calc(100% - 48px);
    }
    .header-inner {
        min-height: 78px;
    }
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--canvas);
        border-bottom: 1px solid var(--border);
        padding: 20px 24px;
        box-shadow: 0 18px 30px #201a360a;
    }
    .main-navigation.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }
    .mobile-menu-button {
        display: inline-flex;
    }
    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav-links > a {
        padding: 11px;
        font-size: 13px;
        border-bottom: 1px solid var(--border);
    }
    .nav-actions {
        justify-content: space-between;
        gap: 15px;
    }
    .nav-login {
        font-size: 12px;
    }
    .nav-actions > .button {
        font-size: 11px;
        min-height: 43px;
        padding-inline: 15px;
    }
    .nav-actions > .button > .icon {
        width: 18px;
        height: 18px;
    }
    .nav-actions .language-switch a {
        font-size: 10px;
        padding: 5px 8px;
    }
    .hero-section {
        grid-template-columns: 1fr;
        padding-block: 55px 65px;
        gap: 55px;
    }
    .hero-copy {
        max-width: 630px;
    }
    .hero-copy h1 {
        font-size: 69px;
    }
    .hero-copy > p {
        font-size: 14px;
        max-width: 500px;
    }
    .hero-eyebrow {
        font-size: 10px;
        padding: 7px 10px;
    }
    .hero-actions {
        gap: 28px;
        margin-top: 28px;
    }
    .hero-actions > .button {
        min-height: 51px;
        font-size: 12px;
        padding-inline: 21px;
        gap: 22px;
    }
    .hero-actions > .button-text {
        padding-inline: 0;
        gap: 12px;
    }
    .hero-note {
        font-size: 10px;
    }
    .hero-caption {
        margin-top: 35px;
        font-size: 8px;
    }
    .hero-caption > span {
        width: 35px;
    }
    .hero-visual {
        max-width: 620px;
        width: calc(100% - 24px);
        margin: 0 auto;
        padding: 24px 29px 18px;
    }
    .hero-visual-topline {
        font-size: 8px;
        margin-bottom: 17px;
    }
    .hero-visual-note {
        font-size: 9px;
        margin-top: 16px;
        max-width: 450px;
    }
    .demo-content {
        padding: 24px 25px 17px;
    }
    .demo-toolbar {
        height: 36px;
        font-size: 8px;
    }
    .demo-sidebar {
        width: 52px;
        gap: 25px;
        padding-block: 21px;
    }
    .demo-sidebar > .icon,
    .demo-sidebar span > .icon {
        width: 16px;
        height: 16px;
    }
    .mini-brand {
        font-size: 20px;
    }
    .demo-heading h3 {
        font-size: 23px;
    }
    .demo-kicker {
        font-size: 8px;
    }
    .demo-date {
        font-size: 7px;
    }
    .demo-heading {
        margin-bottom: 22px;
    }
    .demo-metrics {
        gap: 14px;
        margin-bottom: 18px;
    }
    .demo-metrics > div {
        padding: 14px;
    }
    .demo-metrics > div > span {
        font-size: 8px;
    }
    .demo-metrics strong {
        font-size: 30px;
        gap: 12px;
    }
    .demo-metrics strong > span {
        font-size: 6px;
    }
    .demo-sparkline {
        height: 23px;
    }
    .demo-alert {
        padding: 16px;
    }
    .demo-alert-top strong {
        font-size: 10px;
    }
    .demo-alert-top > div > span {
        font-size: 8px;
    }
    .demo-alert-count {
        font-size: 20px;
    }
    .demo-alert-icon {
        width: 31px;
        height: 31px;
    }
    .demo-alert-icon > .icon {
        width: 17px;
        height: 17px;
    }
    .demo-alert-top {
        gap: 10px;
    }
    .demo-alert-product {
        margin-top: 17px;
        gap: 10px;
    }
    .demo-product-icon {
        width: 33px;
        height: 33px;
    }
    .demo-product-icon > .icon {
        width: 17px;
        height: 17px;
    }
    .demo-alert-product strong {
        font-size: 10px;
    }
    .demo-alert-product > div > span {
        font-size: 7px;
    }
    .demo-price-row {
        margin-top: 13px;
        padding-top: 13px;
        gap: 25px;
    }
    .demo-price-row > div > span {
        font-size: 8px;
    }
    .demo-price-row strong {
        font-size: 21px;
    }
    .demo-price-row small {
        font-size: 12px;
    }
    .demo-price-difference {
        font-size: 10px;
        padding: 4px 8px;
    }
    .demo-table {
        margin-top: 16px;
    }
    .demo-table > div {
        font-size: 8px;
        padding-block: 10px;
        gap: 14px;
    }
    .demo-table-tag {
        font-size: 7px;
    }
    .demo-bottom-note {
        font-size: 7px;
        margin-top: 16px;
    }
    .demo-bottom-note > .icon {
        width: 11px;
        height: 11px;
    }
    .integrations-strip > .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-block: 25px;
    }
    .integrations-strip > .container > span {
        font-size: 8px;
        max-width: none;
    }
    .integrations-strip > .container > div {
        width: 100%;
        justify-content: space-between;
        gap: 15px;
    }
    .integrations-strip i {
        margin-inline: 20px;
    }
    .section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
    .section-heading > p {
        max-width: 510px;
    }
    .capability-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .capability-card {
        padding: 27px;
    }
    .capability-card h3 {
        font-size: 18px;
        max-width: 240px;
        margin-top: 23px;
    }
    .capability-card p {
        font-size: 12px;
        line-height: 1.9;
    }
    .capability-number {
        right: 25px;
        top: 25px;
    }
    .feature-icon {
        width: 43px;
        height: 43px;
    }
    .feature-icon .icon {
        width: 22px;
        height: 22px;
    }
    .section-heading h2,
    .workflow-layout h2 {
        font-size: 39px;
    }
    .workflow-layout {
        grid-template-columns: 1fr 1.1fr;
        gap: 35px;
    }
    .workflow-steps article {
        gap: 15px;
    }
    .workflow-steps h3 {
        font-size: 16px;
    }
    .workflow-steps p {
        font-size: 11px;
    }
    .workflow-art {
        width: 160px;
    }
    .cta-section {
        padding: 35px;
        gap: 30px;
        margin-block: 60px;
    }
    .cta-section h2 {
        font-size: 30px;
    }
    .cta-section p {
        max-width: 320px;
    }
    .cta-section > .button {
        font-size: 10px;
        gap: 15px;
        padding-inline: 16px;
    }
    .footer-main {
        grid-template-columns: 1.2fr 1fr;
        gap: 35px 60px;
    }
    .footer-brand > .brand {
        font-size: 25px;
    }
    .footer-column > a {
        font-size: 11px;
    }
    .footer-column > span {
        font-size: 10px;
    }
    .footer-main .footer-brand {
        grid-row: 1/3;
    }
    .footer-main .footer-column:last-child {
        grid-column: 1;
        grid-row: 2;
        margin-top: 160px;
    }
    .footer-main .footer-column:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
    .footer-bottom {
        font-size: 8px;
    }
    .page-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .page-hero h1 {
        font-size: 49px;
    }
    .page-hero p {
        font-size: 13px;
        max-width: 550px;
    }
    .feature-detail-main {
        grid-template-columns: 1fr;
    }
    .feature-detail-copy {
        padding: 35px;
    }
    .feature-detail-copy h2 {
        max-width: 450px;
    }
    .feature-detail-copy p {
        max-width: 530px;
    }
    .feature-detail-demo {
        padding: 28px 35px;
    }
    .feature-product-row {
        padding: 17px;
    }
    .feature-product-row strong {
        font-size: 11px;
    }
    .feature-product-row > div > span {
        font-size: 9px;
    }
    .feature-detail-demo > p {
        font-size: 10px;
    }
    .feature-detail-grid > article {
        padding: 25px;
    }
    .feature-detail-grid h3 {
        font-size: 17px;
    }
    .feature-detail-grid p {
        font-size: 11px;
    }
    .scope-section .section-heading h2 {
        font-size: 33px;
    }
    .scope-column h3 {
        font-size: 16px;
        align-items: flex-start;
        gap: 10px;
    }
    .scope-status {
        flex-shrink: 0;
    }
    .scope-column {
        padding: 25px 22px;
    }
    .scope-column ul {
        gap: 14px;
    }
    .scope-column li {
        align-items: flex-start;
        font-size: 10px;
    }
    .pricing-hero > p {
        max-width: 540px;
    }
    .pricing-grid {
        gap: 20px;
    }
    .pricing-card {
        padding: 25px;
    }
    .pricing-card h2 {
        font-size: 19px;
    }
    .pricing-card > p {
        font-size: 11px;
        min-height: 60px;
    }
    .plan-price strong {
        font-size: 21px;
    }
    .plan-price > span {
        font-size: 9px;
    }
    .pricing-card > .button {
        font-size: 10px;
        padding-inline: 14px;
        gap: 12px;
        min-height: 47px;
    }
    .pricing-card li {
        font-size: 10px;
        align-items: flex-start;
        line-height: 1.9;
        gap: 9px;
    }
    .pricing-card li > .icon {
        margin-top: 2px;
    }
    .faq-section {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-block: 10px 70px;
    }
    .faq-section h2 {
        max-width: none;
        font-size: 33px;
    }
    .faq-list summary {
        font-size: 12px;
    }
    .contact-layout {
        gap: 35px;
        grid-template-columns: 1.15fr 1fr;
    }
    .contact-card {
        padding: 25px;
    }
    .contact-method {
        gap: 11px;
    }
    .contact-method-icon {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }
    .contact-method-icon > .icon {
        width: 16px;
        height: 16px;
    }
    .contact-method strong {
        font-size: 12px;
    }
    .contact-method > div > span {
        font-size: 8px;
    }
    .contact-method > .icon {
        width: 15px;
        height: 15px;
    }
    .contact-methods > .button {
        font-size: 10px;
        padding-inline: 14px;
        gap: 10px;
    }
    .company-information h2 {
        font-size: 21px;
    }
    .company-information dd {
        font-size: 11px;
    }
    .contact-note {
        font-size: 8px;
    }
    .contact-pilot-note > p {
        font-size: 10px;
    }
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .legal-navigation {
        position: static;
        flex-direction: row;
    }
    .legal-navigation a {
        padding: 11px 14px;
        gap: 20px;
    }
    .legal-content > section {
        gap: 20px;
        padding-block: 27px;
    }
    .legal-content p {
        font-size: 12px;
    }
    .legal-hero h1 {
        font-size: 42px;
    }
    .auth-layout {
        grid-template-columns: 36% 64%;
    }
    .auth-story {
        padding: 25px;
    }
    .auth-story > .brand {
        font-size: 21px;
        gap: 6px;
    }
    .auth-story .brand-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
    .auth-story-main h2 {
        font-size: 28px;
        line-height: 1.3;
    }
    .auth-story-main > p {
        font-size: 10px;
    }
    .auth-story-main > .eyebrow {
        font-size: 8px;
        letter-spacing: 0.08em;
    }
    .auth-orbit {
        transform: scale(0.8);
        margin: 10px 0 0 -25px;
        width: 235px;
        height: 235px;
    }
    .auth-story-bottom {
        font-size: 6px;
        max-width: 180px;
        line-height: 1.9;
    }
    .auth-header {
        padding: 28px 30px;
    }
    .auth-form-wrap {
        width: calc(100% - 60px);
        max-width: 440px;
        padding-block: 25px 40px;
    }
    .auth-heading h1 {
        font-size: 32px;
    }
    .auth-heading p {
        font-size: 11px;
    }
    .auth-footer {
        padding: 22px 30px;
    }
    .form-row {
        gap: 13px;
    }
    .form-field > label {
        font-size: 10px;
    }
    .form-field input {
        font-size: 12px;
    }
    .registration-form .form-row {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        gap: 14px;
    }
    .stat-card {
        padding: 17px 14px 13px;
    }
    .stat-card > div {
        font-size: 8px;
        gap: 5px;
    }
    .stat-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .stat-icon > .icon {
        width: 12px;
        height: 12px;
    }
    .stat-card > strong {
        font-size: 29px;
    }
    .stat-card > .stat-sync-value {
        font-size: 16px;
    }
    .dashboard-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 18px;
    }
    .dashboard-start-card {
        padding: 25px;
    }
    .dashboard-start-card h2 {
        font-size: 23px;
    }
    .dashboard-start-card p {
        font-size: 10px;
    }
    .dashboard-start-art {
        right: -75px;
        opacity: 0.5;
    }
    .onboarding-card {
        padding: 24px 18px;
    }
    .onboarding-card h2 {
        font-size: 14px;
    }
    .onboarding-item strong {
        font-size: 9px;
    }
    .onboarding-item > div > span {
        font-size: 7px;
    }
    .onboarding-item {
        gap: 9px;
    }
    .onboarding-check,
    .onboarding-step {
        width: 23px;
        height: 23px;
        font-size: 8px;
    }
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .settings-profile {
        grid-row: 3;
    }
    .settings-profile {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 20px;
        text-align: left;
        align-items: center;
        padding: 25px;
    }
    .settings-profile .user-avatar-large {
        grid-row: 1/5;
        margin: 0;
    }
    .settings-profile .eyebrow {
        margin-bottom: 6px;
    }
    .settings-profile h2 {
        font-size: 17px;
    }
    .settings-profile p {
        font-size: 9px;
        margin-top: 9px;
    }
    .settings-profile .profile-email {
        font-size: 10px;
        margin-top: 3px;
    }
    .new-company-card {
        grid-column: auto;
    }
    .panel-integration-grid {
        gap: 18px;
    }
    .integration-card {
        padding: 23px;
    }
    .integration-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
    }
    .integration-card > p {
        font-size: 10px;
    }
    .integration-card-status {
        font-size: 7px;
    }
    .integration-card > .button {
        font-size: 9px;
        gap: 12px;
        padding-inline: 13px;
    }
    .panel-content {
        padding: 29px 25px;
    }
    .panel-topbar {
        padding-inline: 25px;
    }
    .panel-footer {
        padding-inline: 25px;
    }
    .panel-breadcrumb {
        gap: 10px;
    }
}
@media (max-width: 600px) {
    html {
        scroll-padding-top: 90px;
    }
    .container {
        width: calc(100% - 40px);
    }
    .header-inner {
        min-height: 72px;
    }
    .brand {
        font-size: 25px;
        gap: 8px;
    }
    .brand-icon {
        width: 34px;
        height: 34px;
    }
    .hero-section {
        padding-block: 41px 48px;
        gap: 44px;
    }
    .hero-eyebrow {
        font-size: 8px;
        gap: 7px;
        padding: 6px 8px;
        margin-bottom: 23px;
    }
    .hero-eyebrow > .icon {
        width: 12px;
        height: 12px;
        margin-left: 0;
    }
    .hero-copy h1 {
        font-size: clamp(44px, 10.7vw, 62px);
        line-height: 1.13;
        letter-spacing: -0.062em;
    }
    .hero-copy > p {
        font-size: 12px;
        line-height: 1.95;
        margin-top: 20px;
        max-width: 390px;
    }
    .hero-actions {
        gap: 21px;
        margin-top: 25px;
        flex-wrap: wrap;
    }
    .hero-actions > .button {
        font-size: 10px;
        gap: 16px;
        min-height: 46px;
        padding-inline: 15px;
    }
    .hero-actions > .button-text {
        padding-inline: 0;
        font-size: 10px;
        gap: 9px;
        min-height: 35px;
    }
    .hero-actions .icon {
        width: 16px;
        height: 16px;
    }
    .hero-note {
        font-size: 8px;
        gap: 5px;
        margin-top: 14px;
    }
    .hero-note > .icon {
        width: 12px;
        height: 12px;
    }
    .hero-caption {
        font-size: 6px;
        letter-spacing: 0.11em;
        margin-top: 27px;
        gap: 8px;
    }
    .hero-caption > span {
        width: 26px;
    }
    .hero-visual {
        width: calc(100% - 12px);
        padding: 15px 13px 12px;
        border-radius: 13px;
    }
    .hero-visual-topline {
        font-size: 5px;
        letter-spacing: 0.09em;
        margin-bottom: 12px;
    }
    .hero-visual:before {
        width: 40px;
        height: 40px;
        right: -8px;
        top: 30px;
        border-radius: 9px;
    }
    .hero-orbit {
        inset: -10px;
        border-radius: 18px;
    }
    .hero-plus {
        font-size: 17px;
    }
    .hero-plus-one {
        right: -17px;
        bottom: 50px;
    }
    .hero-plus-two {
        left: -17px;
        top: 70px;
    }
    .hero-visual-note {
        font-size: 6px;
        line-height: 1.8;
        margin-top: 11px;
        max-width: 300px;
    }
    .product-demo {
        border-radius: 7px;
    }
    .demo-toolbar {
        height: 26px;
        padding-inline: 10px;
        font-size: 6px;
    }
    .demo-label {
        font-size: 5px;
    }
    .demo-window-dots {
        gap: 3px;
    }
    .demo-window-dots i {
        height: 4px;
        width: 4px;
    }
    .demo-sidebar {
        width: 32px;
        padding-block: 14px;
        gap: 20px;
    }
    .demo-sidebar > .icon,
    .demo-sidebar span > .icon {
        width: 11px;
        height: 11px;
    }
    .mini-brand {
        font-size: 14px;
        letter-spacing: -1.5px;
    }
    .demo-nav-active {
        padding: 5px;
        border-radius: 4px;
    }
    .demo-content {
        padding: 16px 12px 11px;
    }
    .demo-heading {
        margin-bottom: 15px;
    }
    .demo-heading h3 {
        font-size: 17px;
    }
    .demo-kicker {
        font-size: 6px;
    }
    .demo-date {
        font-size: 5px;
        padding: 3px 5px;
    }
    .demo-metrics {
        gap: 8px;
        margin-bottom: 10px;
    }
    .demo-metrics > div {
        padding: 9px 8px 7px;
        border-radius: 5px;
    }
    .demo-metrics > div > span {
        font-size: 6px;
    }
    .demo-metrics strong {
        font-size: 22px;
        gap: 8px;
        margin-top: 4px;
    }
    .demo-metrics strong > span {
        font-size: 4px;
    }
    .demo-metrics strong > .demo-metric-warning {
        padding: 3px;
        max-width: 47px;
    }
    .demo-sparkline {
        height: 17px;
        gap: 3px;
        margin-top: 4px;
    }
    .demo-progress {
        margin-top: 17px;
        height: 3px;
    }
    .demo-progress > i {
        height: 3px;
    }
    .demo-alert {
        padding: 10px;
        border-radius: 5px;
    }
    .demo-alert-top {
        gap: 7px;
    }
    .demo-alert-top strong {
        font-size: 7px;
    }
    .demo-alert-top > div > span {
        font-size: 5px;
    }
    .demo-alert-count {
        font-size: 14px;
    }
    .demo-alert-icon {
        width: 24px;
        height: 24px;
        border-radius: 5px;
    }
    .demo-alert-icon > .icon {
        width: 12px;
        height: 12px;
    }
    .demo-alert-product {
        margin-top: 11px;
        gap: 7px;
    }
    .demo-product-icon {
        width: 24px;
        height: 24px;
        border-radius: 5px;
    }
    .demo-product-icon > .icon {
        width: 12px;
        height: 12px;
    }
    .demo-alert-product strong {
        font-size: 7px;
    }
    .demo-alert-product > div > span {
        font-size: 5px;
    }
    .demo-price-row {
        margin-top: 9px;
        padding-top: 9px;
        gap: 14px;
    }
    .demo-price-row > div > span {
        font-size: 5px;
    }
    .demo-price-row strong {
        font-size: 14px;
    }
    .demo-price-row small {
        font-size: 8px;
    }
    .demo-price-arrow {
        font-size: 9px;
    }
    .demo-price-difference {
        font-size: 7px;
        padding: 3px 5px;
    }
    .demo-table {
        margin-top: 9px;
    }
    .demo-table > div {
        font-size: 6px;
        padding-block: 7px;
        gap: 7px;
    }
    .demo-table-tag {
        font-size: 5px;
        padding: 2px 4px;
    }
    .demo-bottom-note {
        font-size: 5px;
        margin-top: 11px;
        gap: 4px;
    }
    .demo-bottom-note > .icon {
        width: 8px;
        height: 8px;
    }
    .integrations-strip > .container {
        padding-block: 22px;
        gap: 15px;
    }
    .integrations-strip > .container > span {
        font-size: 7px;
        letter-spacing: 0.1em;
    }
    .integrations-strip > .container > div {
        gap: 9px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .integrations-strip strong {
        font-size: 22px;
    }
    .integrations-strip .sopyo-wordmark {
        font-size: 23px;
    }
    .integrations-strip .status-pill {
        font-size: 7px;
        padding: 4px 6px;
    }
    .integrations-strip i {
        margin-inline: 9px;
        height: 20px;
    }
    .section {
        padding-block: 57px;
    }
    .section-heading {
        gap: 18px;
        margin-bottom: 28px;
    }
    .eyebrow {
        font-size: 8px;
        letter-spacing: 0.12em;
        margin-bottom: 15px;
    }
    .section-heading h2,
    .workflow-layout h2 {
        font-size: 32px;
        letter-spacing: -0.045em;
    }
    .section-heading > p {
        font-size: 11px;
        line-height: 1.9;
    }
    .capability-grid {
        gap: 13px;
    }
    .capability-card {
        padding: 21px 17px;
    }
    .feature-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }
    .feature-icon > .icon {
        width: 19px;
        height: 19px;
    }
    .capability-number {
        font-size: 8px;
        right: 16px;
        top: 18px;
    }
    .capability-card h3 {
        font-size: 14px;
        margin-top: 22px;
        line-height: 1.4;
        max-width: 160px;
    }
    .capability-card p {
        font-size: 10px;
        line-height: 1.85;
        margin-top: 10px;
    }
    .workflow-section {
        padding-block: 48px;
    }
    .workflow-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .workflow-layout h2 {
        margin-bottom: 20px;
    }
    .workflow-layout > .text-link {
        font-size: 11px;
    }
    .workflow-art {
        display: none;
    }
    .workflow-steps article {
        gap: 18px;
        padding-block: 23px;
    }
    .step-number {
        width: 31px;
        height: 31px;
        font-size: 11px;
    }
    .workflow-steps h3 {
        font-size: 17px;
    }
    .workflow-steps p {
        font-size: 11px;
        max-width: 340px;
        line-height: 1.9;
        margin-top: 9px;
    }
    .cta-section {
        padding: 30px 26px;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        margin-block: 48px;
        border-radius: 12px;
    }
    .cta-section h2 {
        font-size: 32px;
    }
    .cta-section p {
        font-size: 11px;
        max-width: 300px;
        line-height: 1.9;
        margin-top: 13px;
    }
    .cta-section > .button {
        font-size: 11px;
        gap: 25px;
        min-height: 45px;
        padding-inline: 17px;
    }
    .cta-section .eyebrow {
        font-size: 8px;
        margin-bottom: 14px;
    }
    .cta-decoration {
        right: -70px;
        top: 80px;
    }
    .cta-decoration > .icon {
        width: 290px;
        height: 290px;
    }
    .site-footer {
        padding-top: 35px;
    }
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px 25px;
        padding-bottom: 31px;
    }
    .footer-main .footer-brand {
        grid-column: 1/-1;
        grid-row: auto;
    }
    .footer-main .footer-column:last-child {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
    }
    .footer-main .footer-column:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }
    .footer-brand p {
        font-size: 10px;
        margin: 15px 0 12px;
    }
    .footer-brand > .brand {
        font-size: 24px;
    }
    .footer-column {
        gap: 9px;
    }
    .footer-column > span {
        font-size: 8px;
        margin-bottom: 4px;
    }
    .footer-column > a {
        font-size: 10px;
    }
    .footer-bottom {
        padding-block: 20px;
        gap: 9px;
        flex-direction: column;
        align-items: flex-start;
        font-size: 7px;
    }
    .footer-bottom > span {
        display: none;
    }
    .page-hero {
        padding-block: 44px 34px;
    }
    .page-hero .eyebrow {
        font-size: 8px;
    }
    .page-hero h1 {
        font-size: 37px;
        letter-spacing: -0.05em;
        line-height: 1.2;
    }
    .page-hero-grid {
        gap: 20px;
    }
    .page-hero p {
        font-size: 12px;
        line-height: 1.9;
    }
    .feature-detail-section {
        padding-bottom: 50px;
    }
    .feature-detail-main {
        border-radius: 11px;
    }
    .feature-detail-copy {
        padding: 26px;
    }
    .feature-detail-copy h2 {
        font-size: 25px;
        max-width: 300px;
        margin-top: 20px;
    }
    .feature-detail-copy p {
        font-size: 11px;
        margin-top: 13px;
    }
    .feature-field-list {
        margin-top: 20px;
    }
    .feature-field-list > span {
        font-size: 8px;
        padding: 4px 7px;
    }
    .feature-detail-demo {
        padding: 23px 22px;
    }
    .feature-detail-demo > .eyebrow {
        font-size: 7px;
        margin-bottom: 13px;
    }
    .feature-product-row {
        padding: 13px 10px;
        gap: 10px;
    }
    .product-tile {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }
    .product-tile > .icon {
        width: 16px;
        height: 16px;
    }
    .feature-product-row strong {
        font-size: 8px;
    }
    .feature-product-row > div > span {
        font-size: 7px;
    }
    .feature-detail-demo > p {
        font-size: 8px;
    }
    .feature-detail-grid {
        grid-template-columns: 1fr;
        border-radius: 11px;
        margin-top: 18px;
    }
    .feature-detail-grid > article {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 26px;
    }
    .feature-detail-grid h3 {
        font-size: 20px;
        max-width: none;
        margin-top: 18px;
    }
    .feature-detail-grid p {
        font-size: 11px;
        max-width: 390px;
    }
    .scope-section {
        padding-block: 48px;
    }
    .scope-section .section-heading h2 {
        font-size: 29px;
        max-width: 340px;
    }
    .scope-grid {
        grid-template-columns: 1fr;
        border-radius: 10px;
    }
    .scope-column {
        padding: 27px;
    }
    .scope-column:first-child {
        border-right: 0;
        border-bottom: 1px solid #ded3ec;
    }
    .scope-column h3 {
        align-items: center;
        font-size: 16px;
    }
    .scope-column li {
        font-size: 11px;
        align-items: center;
    }
    .pricing-hero {
        text-align: left;
    }
    .pricing-hero > p {
        margin: 21px 0 0;
        font-size: 11px;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 48px;
    }
    .pricing-card {
        padding: 29px;
    }
    .pricing-card h2 {
        font-size: 23px;
    }
    .pricing-card > p {
        font-size: 12px;
        min-height: 0;
    }
    .pricing-card-top {
        margin-bottom: 24px;
    }
    .plan-price strong {
        font-size: 26px;
    }
    .plan-price > span {
        font-size: 10px;
    }
    .pricing-card > .button {
        font-size: 11px;
        min-height: 47px;
        padding-inline: 17px;
    }
    .pricing-card li {
        font-size: 11px;
        align-items: center;
    }
    .pricing-card .feature-icon {
        width: 43px;
        height: 43px;
    }
    .pricing-card .feature-icon > .icon {
        width: 22px;
        height: 22px;
    }
    .faq-section {
        padding-block: 3px 50px;
        gap: 24px;
    }
    .faq-section h2 {
        font-size: 30px;
    }
    .faq-list details {
        padding-block: 19px;
    }
    .faq-list summary {
        font-size: 12px;
        line-height: 1.6;
        align-items: flex-start;
    }
    .faq-list p {
        font-size: 11px;
    }
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 55px;
    }
    .contact-card {
        padding: 28px;
        min-height: 330px;
        border-radius: 12px;
    }
    .contact-method {
        gap: 14px;
    }
    .contact-method strong {
        font-size: 17px;
    }
    .contact-method > div > span {
        font-size: 9px;
    }
    .contact-method-icon {
        width: 37px;
        height: 37px;
        border-radius: 8px;
    }
    .contact-method-icon > .icon {
        width: 18px;
        height: 18px;
    }
    .contact-method > .icon {
        width: 18px;
        height: 18px;
    }
    .contact-methods > .button {
        font-size: 11px;
        min-height: 47px;
        padding-inline: 17px;
    }
    .contact-note {
        font-size: 8px;
        margin-top: 17px;
    }
    .company-information {
        padding: 2px 5px 0;
    }
    .company-information h2 {
        font-size: 24px;
    }
    .company-information .eyebrow {
        font-size: 9px;
    }
    .company-information dd {
        font-size: 12px;
        max-width: 370px;
    }
    .company-information dt {
        font-size: 8px;
    }
    .company-information dl {
        margin-top: 22px;
    }
    .contact-pilot-note {
        margin-top: 25px;
    }
    .contact-pilot-note > p {
        max-width: 390px;
        font-size: 11px;
    }
    .legal-hero {
        padding-block: 45px 30px;
    }
    .legal-hero h1 {
        font-size: 34px;
    }
    .legal-hero > p {
        font-size: 11px;
        line-height: 1.9;
        margin-top: 16px;
    }
    .legal-layout {
        gap: 24px;
        padding-bottom: 50px;
    }
    .legal-navigation {
        gap: 3px;
    }
    .legal-navigation a {
        font-size: 9px;
        padding: 10px;
        gap: 8px;
    }
    .legal-navigation a > .icon {
        width: 12px;
        height: 12px;
    }
    .legal-content > section {
        gap: 14px;
        padding-block: 24px;
    }
    .legal-number {
        font-size: 8px;
        margin-top: 5px;
    }
    .legal-content h2 {
        font-size: 18px;
        line-height: 1.4;
    }
    .legal-content p {
        font-size: 11px;
        line-height: 1.95;
        margin-top: 10px;
    }
    .legal-content .text-link {
        font-size: 11px;
    }
    .auth-layout {
        grid-template-columns: 1fr;
    }
    .auth-story {
        display: none;
    }
    .auth-content {
        min-height: 100svh;
    }
    .auth-header {
        padding: 25px;
    }
    .auth-header > .back-link {
        font-size: 10px;
    }
    .auth-header .language-switch a {
        font-size: 9px;
    }
    .auth-form-wrap {
        width: calc(100% - 50px);
        max-width: 430px;
        padding-block: 30px 40px;
    }
    .auth-heading h1 {
        font-size: 34px;
    }
    .auth-heading > p {
        font-size: 12px;
    }
    .auth-heading .eyebrow {
        font-size: 8px;
    }
    .auth-heading {
        margin-bottom: 27px;
    }
    .auth-footer {
        padding: 20px 25px;
        font-size: 8px;
    }
    .form-field > label {
        font-size: 11px;
    }
    .form-field input,
    .form-field select {
        min-height: 48px;
        font-size: 16px;
    }
    .form-stack {
        gap: 20px;
    }
    .registration-form {
        gap: 17px;
    }
    .registration-form .form-field input {
        min-height: 45px;
        font-size: 16px;
    }
    .registration-form .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .field-hint {
        font-size: 9px;
    }
    .form-between > .text-link {
        font-size: 10px;
    }
    .checkbox-label {
        font-size: 10px;
    }
    .terms-checkbox {
        font-size: 9px;
    }
    .form-small-note {
        font-size: 9px;
    }
    .auth-alternate {
        font-size: 10px;
    }
    .form-between {
        gap: 15px;
    }
    .notice {
        font-size: 10px;
        padding: 13px;
    }
    .verification-email {
        font-size: 12px;
    }
    .panel-topbar {
        min-height: 65px;
        padding: 14px 19px;
        gap: 15px;
    }
    .panel-breadcrumb {
        gap: 7px;
        font-size: 9px;
        flex: 1;
        min-width: 0;
    }
    .panel-breadcrumb > span {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .panel-breadcrumb > strong {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px;
    }
    .panel-breadcrumb > .icon {
        width: 10px;
        height: 10px;
    }
    .panel-menu-button {
        padding-right: 3px;
    }
    .panel-menu-button > .icon {
        width: 19px;
        height: 19px;
    }
    .panel-topbar-actions {
        gap: 0;
    }
    .connection-badge {
        display: none;
    }
    .panel-topbar .language-switch a {
        padding: 3px 5px;
        font-size: 8px;
    }
    .panel-content {
        padding: 28px 19px 32px;
    }
    .panel-page-heading {
        gap: 15px;
        margin-bottom: 24px;
        align-items: flex-start;
    }
    .panel-page-heading .eyebrow {
        font-size: 8px;
        margin-bottom: 8px;
    }
    .panel-page-heading h1 {
        font-size: 28px;
    }
    .panel-page-heading p {
        font-size: 10px;
        line-height: 1.9;
        margin-top: 9px;
        max-width: 330px;
    }
    .panel-date {
        display: none;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 22px;
    }
    .stat-card {
        padding: 18px 15px 13px;
        border-radius: 9px;
    }
    .stat-card > div {
        font-size: 8px;
    }
    .stat-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .stat-card > strong {
        font-size: 31px;
        margin-top: 14px;
    }
    .stat-card > a {
        font-size: 8px;
        margin-top: 14px;
        padding-top: 10px;
    }
    .stat-card > .stat-sync-value {
        font-size: 17px;
        min-height: 37px;
    }
    .stat-footnote {
        margin-top: 14px;
        font-size: 7px;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .dashboard-start-card {
        padding: 27px;
        border-radius: 10px;
    }
    .dashboard-start-card h2 {
        font-size: 26px;
        line-height: 1.25;
        max-width: 340px;
    }
    .dashboard-start-card p {
        font-size: 11px;
        max-width: 310px;
        line-height: 1.9;
    }
    .dashboard-start-card .button {
        font-size: 10px;
        min-height: 43px;
        margin-top: 23px;
    }
    .dashboard-start-art {
        right: -40px;
        opacity: 0.6;
    }
    .dashboard-start-card .pilot-label {
        font-size: 7px;
    }
    .onboarding-card {
        padding: 26px;
    }
    .onboarding-card h2 {
        font-size: 17px;
        margin-bottom: 17px;
    }
    .onboarding-item {
        padding-block: 16px;
        gap: 14px;
    }
    .onboarding-item strong {
        font-size: 11px;
    }
    .onboarding-item > div > span {
        font-size: 9px;
        margin-top: 4px;
    }
    .onboarding-check,
    .onboarding-step {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
    .onboarding-check > .icon {
        width: 13px;
        height: 13px;
    }
    .dashboard-support {
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
        padding: 21px;
        margin-top: 21px;
    }
    .dashboard-support h2 {
        font-size: 12px;
        line-height: 1.5;
    }
    .dashboard-support p {
        font-size: 10px;
        line-height: 1.8;
        max-width: 260px;
        margin-top: 5px;
    }
    .dashboard-support > .text-link {
        margin-left: 47px;
        font-size: 10px;
        margin-top: 5px;
    }
    .support-icon {
        width: 35px;
        height: 35px;
    }
    .dashboard-support > div {
        flex-basis: calc(100% - 50px);
    }
    .panel-footer {
        padding: 18px 19px;
        flex-direction: column;
        gap: 5px;
        font-size: 7px;
    }
    .empty-state {
        padding: 60px 26px;
        min-height: 390px;
    }
    .empty-state-icon {
        width: 61px;
        height: 61px;
        margin-bottom: 25px;
    }
    .empty-state h2 {
        font-size: 23px;
    }
    .empty-state p {
        font-size: 11px;
        line-height: 1.95;
    }
    .empty-state > .button {
        font-size: 10px;
        margin-top: 24px;
    }
    .panel-card {
        border-radius: 10px;
    }
    .records-table th {
        padding: 15px 17px;
    }
    .records-table td {
        padding: 16px 17px;
        font-size: 10px;
    }
    .panel-integration-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .integration-card {
        padding: 27px;
        border-radius: 11px;
    }
    .integration-card-header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 27px;
        gap: 15px;
    }
    .provider-logo {
        font-size: 29px;
    }
    .integration-card .status-pill {
        font-size: 8px;
    }
    .integration-card > p {
        font-size: 11px;
        line-height: 1.9;
    }
    .integration-card-status {
        font-size: 8px;
        padding-block: 15px;
    }
    .integration-card > .button {
        font-size: 10px;
        min-height: 42px;
        padding-inline: 15px;
        gap: 20px;
    }
    .integration-planned {
        font-size: 10px;
        padding-top: 23px;
    }
    .information-strip {
        padding: 16px;
        gap: 10px;
        margin-top: 20px;
    }
    .information-strip p {
        font-size: 10px;
        line-height: 1.9;
    }
    .information-strip > .icon {
        width: 16px;
        height: 16px;
        margin-top: 1px;
    }
    .settings-layout {
        gap: 19px;
    }
    .settings-card {
        padding: 25px 22px;
    }
    .settings-card-heading {
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 25px;
    }
    .settings-card-heading h2 {
        font-size: 17px;
    }
    .settings-card-heading p {
        font-size: 9px;
        line-height: 1.8;
        margin-top: 5px;
    }
    .settings-card .form-field > label {
        font-size: 10px;
    }
    .settings-card .form-field input,
    .settings-card .form-field select {
        font-size: 16px;
        min-height: 45px;
        padding-inline: 11px;
    }
    .settings-card .form-row {
        grid-template-columns: 1fr;
        gap: 21px;
    }
    .settings-card .form-stack {
        gap: 21px;
    }
    .settings-form-footer {
        padding-top: 21px;
    }
    .settings-form-footer .button {
        font-size: 11px;
        min-height: 42px;
        width: 100%;
        justify-content: space-between;
    }
    .settings-profile {
        padding: 25px 22px;
        column-gap: 16px;
    }
    .settings-profile .user-avatar-large {
        width: 47px;
        height: 47px;
        font-size: 19px;
    }
    .settings-profile .eyebrow {
        font-size: 7px;
    }
    .settings-profile h2 {
        font-size: 17px;
    }
    .settings-profile p {
        font-size: 9px;
        line-height: 1.8;
    }
    .new-company-form {
        flex-direction: column;
        align-items: stretch;
        gap: 17px;
    }
    .new-company-form > .form-field {
        max-width: none;
    }
    .new-company-form > .button {
        justify-content: space-between;
        font-size: 11px;
        min-height: 43px;
    }
    .pagination {
        padding: 15px;
        font-size: 8px;
        gap: 12px;
    }
    .pagination > div {
        gap: 9px;
    }
    .pagination a {
        padding: 5px 7px;
    }
    .title-count {
        height: 24px;
        min-width: 25px;
        font-size: 10px;
    }
    .panel-sidebar {
        width: min(280px, calc(100% - 55px));
        padding: 28px 20px 0;
    }
    .panel-sidebar > .brand {
        font-size: 26px;
    }
    .panel-sidebar .brand-icon {
        width: 35px;
        height: 35px;
    }
    .tenant-section {
        margin-top: 35px;
    }
    .tenant-name {
        font-size: 12px;
    }
    .panel-nav > a {
        font-size: 12px;
        padding-block: 13px;
    }
    .panel-nav > a > .icon {
        width: 19px;
        height: 19px;
    }
    .tenant-section > .eyebrow {
        font-size: 8px;
    }
    .sidebar-user strong {
        font-size: 11px;
    }
    .sidebar-user > div > span {
        font-size: 9px;
    }
    .sidebar-user .user-avatar {
        width: 33px;
        height: 33px;
    }
    .sidebar-help {
        font-size: 11px;
    }
    .tenant-options > a {
        font-size: 12px;
    }
    .tenant-options > a:last-child {
        font-size: 11px;
    }
    .tenant-options {
        right: 0;
    }
}
@media (max-width: 370px) {
    .container {
        width: calc(100% - 32px);
    }
    .hero-eyebrow {
        font-size: 7px;
        gap: 6px;
    }
    .hero-copy h1 {
        font-size: 43px;
    }
    .hero-actions {
        gap: 16px;
    }
    .hero-actions > .button {
        font-size: 9px;
        padding-inline: 12px;
        gap: 10px;
    }
    .hero-actions > .button-text {
        padding-inline: 0;
    }
    .hero-caption {
        font-size: 5px;
    }
    .hero-note {
        font-size: 7px;
    }
    .demo-content {
        padding-inline: 10px;
    }
    .demo-price-row {
        gap: 11px;
    }
    .demo-price-row strong {
        font-size: 12px;
    }
    .demo-alert-top strong {
        font-size: 6px;
    }
    .demo-alert-top > div > span {
        font-size: 4px;
    }
    .demo-table > div {
        font-size: 5px;
    }
    .demo-table-tag {
        font-size: 4px;
    }
    .hero-visual-topline {
        font-size: 4px;
    }
    .integrations-strip > .container > div {
        gap: 7px;
    }
    .integrations-strip strong {
        font-size: 20px;
    }
    .integrations-strip .sopyo-wordmark {
        font-size: 21px;
    }
    .integrations-strip i {
        margin-inline: 5px;
    }
    .integrations-strip .status-pill {
        font-size: 6px;
    }
    .capability-grid {
        gap: 10px;
    }
    .capability-card {
        padding: 19px 14px;
    }
    .capability-card h3 {
        font-size: 13px;
    }
    .capability-card p {
        font-size: 9px;
    }
    .capability-number {
        right: 13px;
        top: 16px;
    }
    .section-heading h2,
    .workflow-layout h2 {
        font-size: 29px;
    }
    .page-hero h1 {
        font-size: 33px;
    }
    .cta-section {
        padding: 27px 23px;
    }
    .cta-section h2 {
        font-size: 29px;
    }
    .auth-form-wrap {
        width: calc(100% - 40px);
    }
    .auth-header {
        padding: 22px 20px;
    }
    .auth-heading h1 {
        font-size: 31px;
    }
    .registration-form .form-row {
        grid-template-columns: 1fr;
    }
    .contact-method strong {
        font-size: 14px;
    }
    .panel-content {
        padding-inline: 16px;
    }
    .panel-topbar {
        padding-inline: 16px;
    }
    .panel-breadcrumb > span {
        max-width: 70px;
    }
    .panel-breadcrumb > strong {
        max-width: 90px;
    }
    .panel-page-heading h1 {
        font-size: 26px;
    }
    .stat-card {
        padding: 16px 13px 12px;
    }
    .stat-card > div {
        font-size: 7px;
    }
    .stat-card > .stat-sync-value {
        font-size: 16px;
    }
    .dashboard-start-card {
        padding: 24px;
    }
    .dashboard-start-card h2 {
        font-size: 23px;
    }
    .dashboard-start-card p {
        font-size: 10px;
    }
    .integration-card {
        padding: 24px;
    }
    .provider-logo {
        font-size: 26px;
    }
    .integration-card .status-pill {
        font-size: 7px;
    }
    .panel-footer {
        padding-inline: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important;
    }
}