@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');:root {
    --bg: #080b13;
    --panel: #0e1421;
    --panel2: #121a2a;
    --line: rgba(153,174,215,.13);
    --text: #f4f6ff;
    --muted: #929db4;
    --purple: #8b70ff;
    --purple2: #6c52ee;
    --blue: #5c9dff;
    --green: #56e0b0;
    --orange: #ffb76b;
    --radius: 22px;
    --max: 1200px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: auto;
    scroll-snap-type: none;
    scroll-padding-top: 0
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Manrope,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.65;
    overflow-x: hidden
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 15% 15%,rgba(101,74,215,.1),transparent 38%),radial-gradient(ellipse at 90% 45%,rgba(53,126,215,.08),transparent 32%),linear-gradient(180deg,#080b13,#0a0d16)
}

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

button,input,select {
    font: inherit
}

button {
    cursor: pointer
}

.site-header {
    height: 82px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(4vw,24px);
    border-bottom: 1px solid rgba(153,174,215,.1);
    background: rgba(8,11,19,.84);
    backdrop-filter: blur(18px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-family: 'Space Grotesk';
    font-weight: 700;
    letter-spacing: -.08em;
    background: linear-gradient(140deg,#a18cff,#6347db);
    box-shadow: 0 7px 24px #7656ed38
}

.brand b {
    color: #b9aaff;
    letter-spacing: 7px;
}

.brand small,.footer-brand small {
    display: block;
    font-size: 8px;
    letter-spacing: .18em;
    color: #7f8ba6;
    margin-top: 4px
}

.nav,.nav-actions {
    display: flex;
    align-items: center;
    gap: 28px
}

.nav a,.nav-login,.nav-user {
    color: #aeb8ce;
    font-size: 12px;
    font-weight: 700;
    transition: .2s
}

.nav a:hover,.nav-login:hover,.nav-user:hover {
    color: #fff
}

.nav-actions {
    gap: 16px
}

.btn {
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    transition: transform .2s,box-shadow .2s,border-color .2s;
    white-space: nowrap
}

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

.btn-primary {
    background: linear-gradient(130deg,#9279ff,#6b51ed);
    color: #fff;
    box-shadow: 0 8px 26px #7357ed30
}

.btn-primary:hover {
    box-shadow: 0 12px 34px #7357ed4d
}

.btn-ghost {
    border-color: rgba(164,180,218,.22);
    background: rgba(255,255,255,.025);
    color: #e8ecfa
}

.btn-ghost:hover {
    border-color: #8c79ec;
    background: rgba(130,105,255,.08)
}

.btn-small {
    padding: 9px 13px;
    font-size: 11px
}

.btn-large {
    padding: 15px 22px;
    font-size: 12px
}

.full-btn {
    width: 100%
}

.mobile-menu {
    display: none;
    color: #fff;
    background: none;
    border: 0;
    font-size: 24px
}

.flash {
    max-width: 1100px;
    margin: 16px auto 0;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #111827;
    color: #dce5ff
}

.flash-success {
    border-color: #56e0b055
}

.flash-error {
    border-color: #ff7f7f55
}

.snap-page {
    min-height: calc(100svh - 82px);
    height: calc(100svh - 82px);
    scroll-snap-align: none;
    scroll-snap-stop:normal;position: relative;
    margin: 0;
    padding: clamp(32px,5vh,72px) max(5vw,24px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate
}

.hero-section {
    max-width: 100%;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 30px;
    padding-top: 55px;
    padding-bottom: 95px
}

.hero-copy {
    max-width: 570px;
    z-index: 2
}

.eyebrow {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #a99aff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px
}

.live-dot,.green-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 12px #56e0b088
}

.hero-copy h1,.inner-hero h1,.auth-promo h1 {
    font-family: 'Space Grotesk',sans-serif;
    font-size: clamp(44px,5.5vw,78px);
    letter-spacing: -.065em;
    line-height: 1.05;
    margin: 0 0 24px;
    font-weight: 700
}

.hero-copy h1 span,.section-heading h2 span,.workflow-copy h2 span,.inner-hero h1 span,.auth-promo h1 span,.feature-detail h2 span,.feature-callout h2 span,.cta-section h2 span,.dashboard-welcome h1 span {
    background: linear-gradient(100deg,#a898ff,#75b7ff);
    color: transparent;
    background-clip: text
}

.hero-lead,.section-heading>p,.workflow-copy>p,.inner-hero>p {
    color: #9da9c0;
    font-size: 14px;
    line-height: 1.9;
    max-width: 480px
}

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

.hero-proof {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 36px
}

.avatar-stack {
    display: flex;
    padding-left: 4px
}

.avatar-stack i {
    width: 31px;
    height: 31px;
    border: 2px solid var(--bg);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #302750;
    color: #c6b8ff;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    margin-left: -5px
}

.avatar-stack i:nth-child(2) {
    background: #21395a;
    color: #9dc8ff
}

.avatar-stack i:nth-child(3) {
    background: #163e38;
    color: #82edcf
}

.hero-proof span b,.hero-proof span small {
    display: block
}

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

.hero-proof span small {
    font-size: 10px;
    color: #7886a2
}

.hero-visual {
    position: relative;
    min-width: 0;
    padding: 12px 0 30px
}

.visual-glow {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 8%;
    border-radius: 50%;
    background: #644bdb25;
    filter: blur(65px)
}

.app-window {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 660px;
    margin: auto;
    border: 1px solid #8394b62b;
    border-radius: 18px;
    background: #0d1320;
    overflow: hidden;
    box-shadow: 0 35px 100px #0008,0 0 0 6px #ffffff04;
    transform: perspective(1200px) rotateY(-4deg) rotateX(1deg)
}

.app-titlebar {
    height: 43px;
    border-bottom: 1px solid #8799bc20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    background: #101726;
    color: #bfc9dd;
    font: 700 9px 'Space Grotesk';
    letter-spacing: .13em
}

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

.window-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7d85
}

.window-dots i:nth-child(2) {
    background: #ffc66e
}

.window-dots i:nth-child(3) {
    background: #59dba7
}

.app-titlebar em {
    font-style: normal;
    color: #9884ff;
    margin-left: 6px
}

.online-state {
    font-size: 8px;
    color: #66d9b2
}

.online-state i {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #56e0b0;
    border-radius: 50%;
    margin-right: 5px
}

.app-layout {
    display: grid;
    grid-template-columns: 52px 1fr;
    min-height: 395px
}

.app-sidebar {
    border-right: 1px solid #8799bc1c;
    background: #0a101b;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    padding: 15px 0
}

.side-logo {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: linear-gradient(140deg,#a18cff,#6347db);
    font-weight: 800;
    font-size: 10px;
    margin-bottom: 10px
}

.side-icon {
    color: #71809b;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 15px
}

.side-icon.active {
    color: #c9bdff;
    background: #7761e32b;
    box-shadow: inset 0 0 0 1px #8e79ff38
}

.side-bottom {
    margin-top: auto;
    color: #7886a2
}

.app-content {
    padding: 23px 24px 14px;
    min-width: 0
}

.app-greeting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.app-greeting small,.mini-stats small,.app-section-title small {
    font-size: 7px;
    letter-spacing: .15em;
    color: #74829d;
    font-weight: 800
}

.app-greeting h3 {
    font-size: 17px;
    line-height: 1.2;
    margin: 5px 0;
    font-family: 'Space Grotesk'
}

.app-greeting p {
    font-size: 9px;
    color: #7f8da7;
    margin: 0
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid #8799bc20;
    border-radius: 10px;
    background: #121b2a
}

.profile-chip>span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #3b2e68;
    color: #c8baff;
    font-weight: 800
}

.profile-chip b,.profile-chip small {
    display: block;
    font-size: 8px
}

.profile-chip small {
    font-size: 7px;
    color: #7f8da7
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin: 23px 0
}

.mini-stats>div {
    padding: 12px;
    border: 1px solid #8799bc1e;
    border-radius: 10px;
    background: #111a29
}

.mini-stats small,.mini-stats b {
    display: block
}

.mini-stats b {
    font-size: 10px;
    margin-top: 7px
}

.tag {
    font-size: 6px;
    color: #b7aaff;
    background: #6650c333;
    padding: 3px 5px;
    border-radius: 4px
}

.muted {
    font-size: 7px;
    color: #72809b;
    font-weight: 500
}

.app-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 23px 0 12px;
    font-size: 10px;
    font-weight: 800
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px
}

.quick-card {
    position: relative;
    min-height: 89px;
    padding: 13px;
    border: 1px solid #8799bc1e;
    border-radius: 11px;
    background: #111a29
}

.quick-card>span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: #8a70ff25;
    color: #b8a7ff;
    margin-bottom: 8px;
    font-size: 14px
}

.quick-card b,.quick-card small {
    display: block
}

.quick-card b {
    font-size: 9px
}

.quick-card small {
    font-size: 8px;
    color: #8290aa
}

.quick-card i {
    position: absolute;
    right: 12px;
    top: 13px;
    font-style: normal;
    color: #7c8aa4
}

.quick-card.blue>span {
    background: #4c9dff22;
    color: #81baff
}

.quick-card.teal>span {
    background: #56e0b022;
    color: #6ce7bf
}

.quick-card.orange>span {
    background: #ffb76b22;
    color: #ffc582
}

.app-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #8799bc1c;
    margin-top: 18px;
    padding-top: 11px;
    font-size: 7px;
    color: #71809b
}

.app-bottom .green-dot {
    width: 5px;
    height: 5px;
    margin-right: 5px
}

.float-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #9aa8c82a;
    border-radius: 12px;
    background: #121a2a;
    box-shadow: 0 15px 40px #0006
}

.float-one {
    right: -16px;
    top: 17%
}

.float-two {
    left: -25px;
    bottom: 14%
}

.float-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #8b70ff25;
    color: #b6a5ff;
    font-size: 15px
}

.blue-bg {
    background: #5c9dff22;
    color: #8dc2ff
}

.float-card b,.float-card small {
    display: block;
    font-size: 9px
}

.float-card small {
    font-size: 8px;
    color: #8390a8
}

.float-check {
    color: var(--green);
    margin-left: 8px
}

.visual-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 8px;
    letter-spacing: .12em;
    color: #6f7d97
}

.visual-caption b {
    color: #9a8aff
}

.caption-line {
    width: 30px;
    height: 1px;
    background: #8d79ff
}

.scroll-cue {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    color: #7c8aa4;
    font-size: 9px;
    letter-spacing: .1em
}

.scroll-cue b {
    color: #b5a6ff
}

.scroll-mouse {
    height: 19px;
    width: 12px;
    border: 1px solid #8290aa;
    border-radius: 8px;
    position: relative
}

.scroll-mouse:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 2px;
    height: 4px;
    background: #b3a3ff;
    border-radius: 2px
}

.benefits-section,.pricing-teaser {
    display: block;
    padding-top: 92px;
    padding-bottom: 70px;
    background: linear-gradient(180deg,#0b0f1a,#0a0d15)
}

.section-heading h2,.workflow-copy h2,.feature-callout h2,.cta-section h2 {
    font-family: 'Space Grotesk';
    font-size: clamp(34px,4.2vw,56px);
    letter-spacing: -.055em;
    line-height: 1.12;
    margin: 0 0 15px
}

.section-heading>p {
    max-width: 550px
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin: 43px 0 34px
}

.benefit-card {
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 23px 20px;
    background: linear-gradient(155deg,#121a2a,#0e1420);
    min-height: 285px;
    transition: .25s
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: #8974ff55
}

.benefit-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 20px;
    margin-bottom: 22px
}

.purple-icon {
    background: #8b70ff20;
    color: #b6a5ff
}

.blue-icon {
    background: #5c9dff20;
    color: #8fc1ff
}

.green-icon {
    background: #56e0b020;
    color: #76ebc8
}

.orange-icon {
    background: #ffb76b20;
    color: #ffc98c
}

.card-index {
    font-size: 8px;
    letter-spacing: .15em;
    color: #6f7c95;
    font-weight: 800
}

.benefit-card h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 13px 0 9px
}

.benefit-card p {
    font-size: 11px;
    color: #909cb3;
    line-height: 1.85
}

.benefit-card>a {
    display: inline-flex;
    gap: 12px;
    margin-top: 13px;
    font-size: 10px;
    font-weight: 800;
    color: #b9acff
}

.section-footer,.pricing-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: #71809a;
    font-size: 9px;
    letter-spacing: .13em
}

.text-link {
    color: #b9acff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0
}

.text-link b {
    margin-left: 7px
}

.workflow-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    background: radial-gradient(ellipse at 78% 50%,#392a7335,transparent 36%)
}

.workflow-copy {
    max-width: 540px
}

.workflow-copy>p {
    margin-bottom: 28px
}

.steps {
    margin-top: 36px;
    border-top: 1px solid var(--line)
}

.step {
    display: grid;
    grid-template-columns: 40px 1fr 22px;
    align-items: center;
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line)
}

.step>span {
    font: 700 11px 'Space Grotesk';
    color: #a898ff
}

.step b {
    font-size: 12px
}

.step p {
    font-size: 10px;
    color: #8592aa;
    margin: 4px 0 0
}

.step>i {
    font-style: normal;
    color: var(--green);
    font-size: 13px
}

.workflow-visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center
}

.orbit {
    position: absolute;
    border: 1px solid #9a87ff24;
    border-radius: 50%;
    aspect-ratio: 1
}

.orbit-a {
    width: min(34vw,390px)
}

.orbit-b {
    width: min(25vw,290px);
    border-style: dashed;
    border-color: #72a8ff24
}

.workflow-logo {
    font: 700 68px 'Space Grotesk';
    letter-spacing: -.1em;
    color: #fff;
    position: relative;
    text-shadow: 0 0 55px #967dff9c
}

.workflow-logo span {
    font-size: 24px;
    color: #8b70ff;
    vertical-align: top
}

.orbit-center {
    position: absolute;
    display: grid;
    place-items: center;
    right: 23%;
    top: 26%;
    width: 45px;
    height: 45px;
    border-radius: 15px;
    background: #1b2440;
    border: 1px solid #8b70ff48;
    color: #bcaeff;
    box-shadow: 0 0 40px #8b70ff30;
    font-size: 20px
}

.orbit-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid #9aa8c82a;
    background: #111a29;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 8px 35px #0004
}

.orbit-label span {
    color: #a898ff;
    font: 700 9px 'Space Grotesk'
}

.label-a {
    top: 15%;
    left: 15%
}

.label-b {
    right: 4%;
    bottom: 28%
}

.label-c {
    left: 10%;
    bottom: 17%
}

.pricing-teaser {
    background: linear-gradient(180deg,#0a0d15,#0b0f1a)
}

.center-heading {
    text-align: center
}

.center-heading .eyebrow {
    justify-content: center
}

.center-heading>p {
    margin-left: auto;
    margin-right: auto
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px;
    max-width: 1060px;
    margin: 42px auto 24px
}

.price-card {
    position: relative;
    padding: 27px 25px 24px;
    border: 1px solid #9aa8c821;
    border-radius: 19px;
    background: linear-gradient(150deg,#121a2a,#0d131f);
    min-width: 0
}

.featured-price {
    border-color: #8b70ff75;
    box-shadow: 0 15px 60px #7054e51b;
    background: linear-gradient(150deg,#1b1b37,#101524)
}

.popular-pill {
    position: absolute;
    top: -12px;
    right: 19px;
    border: 1px solid #8d78ff65;
    background: #2c2351;
    border-radius: 20px;
    padding: 5px 10px;
    color: #c8bbff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em
}

.plan-top {
    display: flex;
    align-items: center;
    gap: 10px
}

.plan-symbol {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #8b70ff20;
    color: #b6a5ff;
    font-size: 19px
}

.plan-name {
    font: 700 10px 'Space Grotesk';
    letter-spacing: .2em;
    color: #c6ccdc
}

.price-card h3 {
    font-size: 18px;
    margin: 19px 0 5px
}

.price-card>p {
    color: #8996ae;
    font-size: 11px;
    min-height: 36px;
    margin: 0
}

.price {
    font: 700 36px 'Space Grotesk';
    letter-spacing: -.06em;
    margin: 22px 0 17px
}

.price small {
    font: 500 10px Manrope;
    letter-spacing: 0;
    color: #7f8da7
}

.price-card ul {
    list-style: none;
    padding: 16px 0 22px;
    margin: 0;
    border-top: 1px solid var(--line);
    min-height: 148px
}

.price-card li {
    font-size: 11px;
    color: #a8b3c9;
    padding: 6px 0
}

.price-card li:before {
    content: '✓';
    color: var(--green);
    margin-right: 9px
}

.pricing-bottom {
    max-width: 1060px;
    margin: 25px auto 0;
    letter-spacing: 0
}

.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(ellipse at 50% 50%,#38266c35,transparent 47%),#090c14
}

.cta-section .eyebrow {
    justify-content: center
}

.cta-section h2 {
    font-size: clamp(38px,5.2vw,68px)
}

.cta-section>p {
    color: #9aa7bf;
    font-size: 13px
}

.cta-section .hero-actions {
    justify-content: center
}

.cta-orb {
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid #8b70ff18;
    border-radius: 50%;
    box-shadow: 0 0 0 65px #8b70ff05,0 0 0 130px #8b70ff03;
    pointer-events: none
}

.cta-section>*:not(.cta-orb) {
    z-index: 1
}

.cta-meta {
    position: absolute;
    bottom: 29px;
    left: 5vw;
    right: 5vw;
    display: flex;
    justify-content: space-between;
    color: #71809a;
    font-size: 8px;
    letter-spacing: .15em
}

.cta-meta .green-dot {
    margin-right: 6px
}

.footer {
    border-top: 1px solid var(--line);
    padding: 30px max(5vw,24px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 17px;
    align-items: center;
    background: #080b13
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 12px;
    letter-spacing: .12em
}

.footer-brand .brand-mark {
    width: 35px;
    height: 35px;
    font-size: 12px
}

.footer-links {
    display: flex;
    gap: 21px;
    font-size: 10px;
    color: #8a96ad
}

.footer-links a:hover {
    color: #fff
}

.footer p {
    grid-column: 1/-1;
    margin: 0;
    color: #58657d;
    font-size: 9px
}

.footer>span {
    grid-column: 1/-1;
    color: #58657d;
    font-size: 9px
}

.inner-hero {
    padding: 95px max(5vw,24px) 55px;
    max-width: 1000px;
    margin: auto
}

.inner-hero h1 {
    font-size: clamp(44px,5vw,68px)
}

.inner-hero>p {
    max-width: 650px
}

.inner-hero-tags {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 26px
}

.inner-hero-tags span {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    color: #aab6cd;
    font-size: 10px;
    background: #111725
}

.feature-detail-grid {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 75px
}

.feature-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7%;
    align-items: center;
    position: relative;
    padding: 55px 0;
    border-top: 1px solid var(--line)
}

.feature-detail.reverse .detail-art {
    order: 2
}

.feature-detail.reverse>div:last-child {
    order: 1
}

.detail-number {
    position: absolute;
    top: 25px;
    left: 0;
    color: #697791;
    font: 700 10px 'Space Grotesk';
    letter-spacing: .15em
}

.detail-art {
    min-height: 260px;
    border: 1px solid var(--line);
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 70px;
    position: relative;
    overflow: hidden
}

.detail-art span {
    position: absolute;
    bottom: 19px;
    left: 22px;
    font: 700 9px 'Space Grotesk';
    letter-spacing: .2em;
    color: #a0acc3
}

.art-purple {
    background: radial-gradient(circle at 50% 45%,#8b70ff35,transparent 55%),#111626;
    color: #b6a5ff
}

.art-blue {
    background: radial-gradient(circle at 50% 45%,#5c9dff35,transparent 55%),#111626;
    color: #91c4ff
}

.art-green {
    background: radial-gradient(circle at 50% 45%,#56e0b02b,transparent 55%),#111626;
    color: #7debc9
}

.art-orange {
    background: radial-gradient(circle at 50% 45%,#ffb76b2b,transparent 55%),#111626;
    color: #ffc68b
}

.feature-detail h2 {
    font: 700 35px/1.12 'Space Grotesk';
    letter-spacing: -.05em;
    margin: 8px 0 15px
}

.feature-detail p {
    font-size: 12px;
    color: #9aa7bf;
    line-height: 1.9
}

.check-list {
    list-style: none;
    padding: 5px 0 0
}

.check-list li {
    font-size: 11px;
    color: #c3cbe0;
    padding: 6px 0
}

.check-list li:before {
    content: '✓';
    color: var(--green);
    margin-right: 10px
}

.feature-callout {
    max-width: 1080px;
    margin: 20px auto 80px;
    padding: 35px;
    border: 1px solid #8b70ff36;
    border-radius: 22px;
    background: radial-gradient(ellipse at 80% 20%,#7252da1b,transparent 50%),#111624;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.feature-callout h2 {
    font-size: 32px;
    margin-bottom: 8px
}

.feature-callout p {
    max-width: 650px;
    color: #929fba;
    font-size: 11px
}

.pricing-hero {
    text-align: center
}

.pricing-hero .eyebrow {
    justify-content: center
}

.pricing-hero>p {
    margin-left: auto;
    margin-right: auto
}

.billing-switch {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #101624;
    margin-top: 18px
}

.billing-option {
    border: 0;
    border-radius: 8px;
    padding: 10px 17px;
    color: #a6b2c8;
    background: transparent;
    font-size: 11px;
    font-weight: 800
}

.billing-option.active {
    background: #8067f5;
    color: white;
    box-shadow: 0 4px 15px #7357ed33
}

.billing-option small {
    display: block;
    font-size: 8px;
    color: #bdf8e5
}

.pricing-full {
    margin: 5px auto 35px
}

.pricing-note {
    display: flex;
    gap: 15px;
    max-width: 1060px;
    margin: 0 auto 80px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #111623
}

.note-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid #9b88ff5c;
    border-radius: 50%;
    color: #b7a6ff;
    flex-shrink: 0
}

.pricing-note b {
    font-size: 11px
}

.pricing-note p {
    font-size: 10px;
    color: #8d9ab2;
    margin: 4px 0 0
}

.install-grid {
    max-width: 1080px;
    margin: 0 auto 70px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px
}

.install-card {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #111725
}

.install-step {
    font: 700 9px 'Space Grotesk';
    letter-spacing: .18em;
    color: #a898ff
}

.install-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: #8b70ff1e;
    border-radius: 15px;
    font-size: 22px;
    color: #b8a7ff;
    margin: 22px 0
}

.install-card h3 {
    font-size: 16px
}

.install-card p {
    font-size: 11px;
    color: #929fba;
    min-height: 95px
}

.status-pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #8b70ff1c;
    color: #c4b8ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em
}

.auth-layout {
    max-width: 1120px;
    margin: 0 auto;
    padding: 60px 24px 85px;
    min-height: calc(100vh - 160px);
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 8%;
    align-items: center
}

.auth-promo {
    position: relative;
    min-height: 460px;
    padding: 35px 0;
    overflow: hidden
}

.auth-promo h1 {
    font-size: clamp(40px,4.5vw,62px)
}

.auth-promo>p {
    max-width: 430px;
    color: #9aa7bf;
    font-size: 13px
}

.auth-perks {
    display: grid;
    gap: 12px;
    margin-top: 34px;
    color: #bac5dc;
    font-size: 11px
}

.auth-big-mark {
    position: absolute;
    bottom: -100px;
    right: 15px;
    font: 700 240px 'Space Grotesk';
    letter-spacing: -.12em;
    color: #ffffff04;
    line-height: 1
}

.auth-big-mark span {
    color: #8b70ff18;
    font-size: 80px;
    vertical-align: top
}

.auth-form-wrap {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: linear-gradient(150deg,#131b2b,#0e1420);
    box-shadow: 0 25px 80px #0003
}

.form-kicker {
    font: 700 9px 'Space Grotesk';
    letter-spacing: .2em;
    color: #a898ff
}

.auth-form-head h2 {
    font: 700 31px 'Space Grotesk';
    letter-spacing: -.05em;
    margin: 8px 0
}

.auth-form-head p {
    font-size: 11px;
    color: #8795ad
}

.auth-form-head a {
    color: #b7a6ff;
    font-weight: 800
}

.auth-form {
    display: grid;
    gap: 17px;
    margin-top: 26px
}

.auth-form label {
    display: grid;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #b7c2d8
}

.auth-form input,.inline-admin-form select {
    width: 100%;
    padding: 12px 13px;
    background: #0a101b;
    border: 1px solid #9aa8c826;
    border-radius: 9px;
    color: #f5f6ff;
    outline: none
}

.auth-form input:focus {
    border-color: #8b70ff88;
    box-shadow: 0 0 0 3px #8b70ff16
}

.auth-form input::placeholder {
    color: #52617a
}

.terms-copy {
    font-size: 9px;
    color: #6f7d96;
    text-align: center
}

.form-error {
    padding: 10px 12px;
    margin-top: 18px;
    background: #ff707014;
    border: 1px solid #ff70704a;
    color: #ffaaaa;
    border-radius: 8px;
    font-size: 10px
}

.dashboard-page,.admin-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 62px 24px 80px;
    min-height: 70vh
}

.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 34px
}

.dashboard-welcome .eyebrow {
    margin-bottom: 12px
}

.dashboard-welcome h1 {
    font: 700 clamp(32px,4vw,47px)/1.15 'Space Grotesk';
    letter-spacing: -.06em;
    margin: 0
}

.dashboard-welcome p {
    color: #909db5;
    font-size: 12px
}

.dashboard-avatar,.admin-seal {
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    border: 1px solid #8b70ff5c;
    border-radius: 18px;
    background: #8b70ff20;
    color: #c2b5ff;
    font: 700 22px 'Space Grotesk'
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 17px
}

.dash-card,.history-card,.admin-table-card {
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: linear-gradient(150deg,#121a29,#0e1420);
    min-width: 0
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    color: #8d9ab3
}

.status-active {
    background: #56e0b01a;
    color: #73e9c5
}

.status-inactive {
    background: #8994a61a;
    color: #a0aac0
}

.current-plan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 29px 0
}

.current-plan .plan-symbol {
    width: 49px;
    height: 49px;
    font-size: 25px
}

.current-plan small {
    font-size: 8px;
    letter-spacing: .16em;
    color: #7f8da6
}

.current-plan h2 {
    font: 700 28px 'Space Grotesk';
    margin: 0
}

.subscription-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 22px
}

.subscription-meta small,.subscription-meta b {
    display: block
}

.subscription-meta small {
    font-size: 9px;
    color: #7f8da6
}

.subscription-meta b {
    font-size: 11px;
    margin-top: 5px
}

.profile-state {
    color: #75e9c6;
    font-size: 8px
}

.profile-state .green-dot {
    width: 5px;
    height: 5px;
    margin-right: 4px
}

.profile-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 10px
}

.profile-row span {
    color: #8795ad
}

.profile-row b {
    max-width: 65%;
    text-align: right;
    overflow-wrap: anywhere
}

.profile-card .text-link {
    display: inline-block;
    margin-top: 21px
}

.empty-state {
    text-align: center;
    padding: 28px 0 8px
}

.empty-state>div {
    font-size: 31px;
    color: #b6a5ff
}

.empty-state h3 {
    font-size: 17px
}

.empty-state p {
    color: #8795ad;
    font-size: 11px
}

.history-card {
    margin-top: 18px
}

.history-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px
}

.history-heading .eyebrow {
    margin-bottom: 5px
}

.history-heading h2 {
    font: 700 23px 'Space Grotesk';
    margin: 0;
    letter-spacing: -.04em
}

.table-wrap {
    width: 100%;
    overflow-x: auto
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 650px;
    text-align: left
}

th {
    font-size: 8px;
    letter-spacing: .1em;
    color: #73819b;
    padding: 12px;
    border-bottom: 1px solid var(--line)
}

td {
    padding: 14px 12px;
    border-bottom: 1px solid #9aa8c80e;
    font-size: 10px;
    color: #bac5da
}

tbody tr:last-child td {
    border-bottom: 0
}

.table-status {
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800
}

.is-muted {
    color: #99a5bb;
    background: #a3b0c214
}

.history-empty {
    padding: 25px 0;
    color: #7f8da6;
    font-size: 11px
}

.dashboard-help {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 17px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #101623
}

.help-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid #8b70ff55;
    border-radius: 50%;
    color: #b5a4ff;
    font-weight: 800
}

.dashboard-help b {
    font-size: 11px
}

.dashboard-help p {
    font-size: 10px;
    color: #8d9ab2;
    margin: 3px 0 0
}

.admin-seal {
    font-size: 25px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.admin-seal small {
    font-size: 7px;
    letter-spacing: .15em
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-bottom: 20px
}

.admin-stats article {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #111725
}

.admin-stats small,.admin-stats b,.admin-stats span {
    display: block
}

.admin-stats small {
    font-size: 8px;
    letter-spacing: .12em;
    color: #8795ad
}

.admin-stats b {
    font: 700 31px 'Space Grotesk';
    margin: 9px 0 0
}

.admin-stats span {
    font-size: 9px;
    color: #74829b
}

.admin-table-card {
    padding: 22px 0 5px
}

.admin-table-card>.history-heading {
    padding: 0 22px
}

.admin-table-card table {
    min-width: 1050px
}

.table-subline {
    display: block;
    font-size: 9px;
    color: #74829b;
    margin-top: 4px
}

.inline-admin-form {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 150px
}

.inline-admin-form select {
    padding: 8px 7px;
    font-size: 9px;
    min-width: 70px
}

.inline-admin-form .btn {
    padding: 8px 9px;
    font-size: 9px
}

.grant-form {
    min-width: 250px
}

.admin-warning {
    font-size: 10px;
    color: #7e8ca5;
    margin-top: 20px
}

@media (max-width: 1050px) {
    .hero-section {
        grid-template-columns:1fr;
        gap: 30px;
        padding-top: 60px
    }

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

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

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

    .snap-page {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .hero-section {
        padding-bottom: 80px
    }

    .float-one {
        right: 0
    }

    .float-two {
        left: 0
    }

    .feature-callout {
        margin-left: 24px;
        margin-right: 24px
    }

    .nav {
        gap: 16px
    }

    .nav a {
        font-size: 11px
    }
}

@media (max-width: 760px) {
    html {
        scroll-snap-type:y proximity;
        scroll-padding-top: 70px
    }

    .site-header {
        height: 70px;
        padding: 0 18px
    }

    .brand-mark {
        width: 36px;
        height: 36px
    }

    .nav {
        display: none;
        position: absolute;
        top: 69px;
        left: 0;
        right: 0;
        padding: 18px;
        background: #0b101a;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: flex-start;
        gap: 18px
    }

    .nav.open {
        display: flex
    }

    .nav-actions {
        gap: 10px
    }

    .nav-actions .nav-login,.nav-actions .nav-user {
        display: none
    }

    .mobile-menu {
        display: block;
        margin-left: 10px
    }

    .site-header {
        justify-content: space-between
    }

    .site-header .nav-actions {
        margin-left: auto
    }

    .btn-small {
        padding: 8px 10px
    }

    .snap-page {
        min-height: calc(100vh - 70px);
        padding: 64px 20px
    }

    .hero-section {
        padding-top: 47px;
        padding-bottom: 75px
    }

    .hero-copy h1 {
        font-size: clamp(43px,13vw,65px)
    }

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

    .hero-actions {
        gap: 9px
    }

    .btn-large {
        padding: 13px 15px;
        font-size: 11px
    }

    .hero-visual {
        padding: 12px 0 28px
    }

    .app-window {
        transform: none
    }

    .app-layout {
        grid-template-columns: 39px 1fr;
        min-height: 320px
    }

    .app-sidebar {
        gap: 11px
    }

    .side-icon {
        width: 27px;
        height: 27px
    }

    .app-content {
        padding: 15px 12px 10px
    }

    .app-greeting h3 {
        font-size: 13px
    }

    .app-greeting p {
        font-size: 8px
    }

    .profile-chip {
        padding: 5px
    }

    .profile-chip>div {
        display: none
    }

    .mini-stats {
        gap: 5px;
        margin: 15px 0
    }

    .mini-stats>div {
        padding: 8px 6px
    }

    .mini-stats b {
        font-size: 8px
    }

    .quick-grid {
        gap: 6px
    }

    .quick-card {
        padding: 9px;
        min-height: 75px
    }

    .quick-card b {
        font-size: 8px
    }

    .quick-card small {
        font-size: 7px
    }

    .quick-card>span {
        width: 23px;
        height: 23px;
        margin-bottom: 6px
    }

    .app-bottom {
        font-size: 6px
    }

    .float-card {
        padding: 8px
    }

    .float-one {
        top: 5%;
        right: -5px
    }

    .float-two {
        bottom: 9%;
        left: -5px
    }

    .float-card b {
        font-size: 8px
    }

    .float-card small {
        font-size: 7px
    }

    .float-icon {
        width: 25px;
        height: 25px
    }

    .visual-caption {
        font-size: 6px
    }

    .scroll-cue {
        bottom: 14px
    }

    .section-heading h2,.workflow-copy h2 {
        font-size: 38px
    }

    .benefit-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 30px 0
    }

    .benefit-card {
        min-height: 0;
        padding: 19px
    }

    .benefit-icon {
        margin-bottom: 13px
    }

    .benefit-card p {
        font-size: 11px
    }

    .section-footer,.pricing-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        line-height: 1.8
    }

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

    .workflow-visual {
        min-height: 310px
    }

    .orbit-a {
        width: 260px
    }

    .orbit-b {
        width: 200px
    }

    .workflow-logo {
        font-size: 58px
    }

    .orbit-center {
        right: 14%;
        top: 18%
    }

    .label-a {
        top: 9%;
        left: 1%
    }

    .label-b {
        right: 0;
        bottom: 24%
    }

    .label-c {
        left: 2%;
        bottom: 11%
    }

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

    .price-card {
        padding: 24px
    }

    .price-card ul {
        min-height: 0
    }

    .popular-pill {
        right: 14px;
        font-size: 7px
    }

    .pricing-teaser {
        padding-top: 70px
    }

    .cta-section h2 {
        font-size: 39px
    }

    .cta-meta {
        left: 20px;
        right: 20px;
        bottom: 17px;
        font-size: 6px
    }

    .footer {
        grid-template-columns: 1fr;
        padding: 25px 20px
    }

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

    .footer p,.footer>span {
        grid-column: 1
    }

    .inner-hero {
        padding: 65px 20px 35px
    }

    .inner-hero h1 {
        font-size: 44px
    }

    .feature-detail-grid {
        padding: 0 20px 45px
    }

    .feature-detail {
        grid-template-columns: 1fr;
        gap: 23px;
        padding: 50px 0 35px
    }

    .feature-detail.reverse .detail-art,.feature-detail.reverse>div:last-child {
        order: initial
    }

    .detail-art {
        min-height: 210px
    }

    .feature-detail h2 {
        font-size: 32px
    }

    .feature-callout {
        margin: 10px 20px 45px;
        padding: 23px;
        align-items: flex-start;
        flex-direction: column
    }

    .feature-callout h2 {
        font-size: 28px
    }

    .pricing-hero {
        padding-top: 65px
    }

    .billing-option {
        padding: 9px 11px;
        font-size: 10px
    }

    .pricing-note {
        margin: 0 20px 50px
    }

    .install-grid {
        grid-template-columns: 1fr;
        margin-bottom: 45px;
        padding: 0 20px
    }

    .install-card p {
        min-height: 0
    }

    .auth-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 40px 20px 55px
    }

    .auth-promo {
        min-height: 0;
        padding: 10px 0 20px
    }

    .auth-promo h1 {
        font-size: 43px
    }

    .auth-promo>p {
        font-size: 11px
    }

    .auth-perks {
        gap: 8px;
        margin-top: 20px
    }

    .auth-big-mark {
        display: none
    }

    .auth-form-wrap {
        padding: 23px
    }

    .dashboard-page,.admin-page {
        padding: 40px 18px 55px
    }

    .dashboard-welcome {
        align-items: flex-start;
        gap: 12px
    }

    .dashboard-welcome h1 {
        font-size: 32px
    }

    .dashboard-avatar,.admin-seal {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        flex-shrink: 0
    }

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

    .dash-card,.history-card {
        padding: 18px
    }

    .history-heading {
        align-items: flex-start
    }

    .history-heading h2 {
        font-size: 20px
    }

    .admin-stats {
        grid-template-columns: 1fr;
        gap: 9px
    }

    .admin-stats article {
        padding: 15px
    }

    .admin-stats b {
        font-size: 25px
    }

    .admin-table-card {
        padding-top: 17px
    }

    .admin-table-card>.history-heading {
        padding: 0 17px
    }

    .flash {
        margin: 10px 12px 0
    }

    .snap-page {
        scroll-snap-stop:normal}
}

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

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

:root {
    --max: 1120px
}

.site-header {
    height: 72px;
    padding-left: max(3vw,20px);
    padding-right: max(3vw,20px)
}

html {
    scroll-padding-top: 72px
}

.nav,.nav-actions {
    gap: 20px
}

.btn {
    padding: 10px 15px
}

.btn-small {
    padding: 8px 11px
}

.snap-page {
    padding-top: 66px;
    padding-bottom: 66px
}

.hero-section {
    padding-top: 42px;
    padding-bottom: 70px;
    gap: 22px
}

.hero-copy h1 {
    font-size: clamp(42px,5vw,68px)
}

.app-layout {
    min-height: 360px
}

.section-heading h2,.workflow-copy h2 {
    font-size: clamp(34px,4vw,54px)
}

.benefit-grid {
    gap: 12px;
    margin: 28px 0
}

.benefit-card {
    padding: 22px;
    min-height: 235px
}

.suite-section {
    display: block;
    padding-top: 72px;
    padding-bottom: 64px
}

.suite-section .section-heading {
    max-width: 780px
}

.suite-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-top: 30px
}

.suite-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg,#121a2a,#0d121e);
    min-width: 0
}

.suite-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px
}

.suite-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 20px;
    background: #8b70ff20;
    color: #b5a4ff
}

.suite-icon.blue-icon {
    background: #5c9dff20;
    color: #8dc2ff
}

.suite-icon.green-icon {
    background: #56e0b018;
    color: #72e7c4
}

.status-planned {
    color: #ffc582;
    background: #ffb76b14;
    border-color: #ffb76b33
}

.suite-card h3 {
    font: 700 19px 'Space Grotesk';
    margin: 0 0 10px;
    letter-spacing: -.03em
}

.suite-card p {
    font-size: 11px;
    color: #929fba;
    line-height: 1.8;
    min-height: 95px
}

.suite-card ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 9px
}

.suite-card li {
    font-size: 10px;
    color: #c5cfe1;
    padding-left: 17px;
    position: relative
}

.suite-card li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7de5c5
}

.compact-dashboard {
    max-width: 1100px;
    padding-top: 36px;
    padding-bottom: 52px
}

.dashboard-welcome {
    margin-bottom: 20px
}

.dashboard-welcome h1 {
    font-size: clamp(30px,3vw,42px);
    margin: 5px 0 8px
}

.dashboard-welcome p {
    font-size: 12px;
    margin: 0
}

.account-nav {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    padding: 7px;
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0d121e
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    color: #96a3bc;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    transition: .2s
}

.account-nav a span {
    font-size: 14px;
    color: #a99aff
}

.account-nav a:hover,.account-nav a.active {
    color: #f4f2ff;
    background: #8b70ff19;
    box-shadow: inset 0 0 0 1px #8b70ff2b
}

.compact-dashboard .dashboard-grid {
    gap: 14px
}

.compact-dashboard .dash-card,.compact-dashboard .history-card {
    padding: 20px
}

.compact-dashboard .history-card {
    margin-top: 14px
}

.compact-dashboard .history-heading {
    margin-bottom: 13px
}

.compact-dashboard .profile-row {
    padding: 11px 0
}

.compact-dashboard .current-plan {
    margin: 20px 0
}

.compact-dashboard .empty-state {
    padding: 14px 0 3px
}

.account-shortcuts {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 14px
}

.account-shortcuts a {
    display: block;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #101623;
    transition: .2s
}

.account-shortcuts a:hover {
    border-color: #8b70ff66;
    transform: translateY(-2px)
}

.account-shortcuts b,.account-shortcuts span {
    display: block
}

.account-shortcuts b {
    font-size: 11px
}

.account-shortcuts span {
    font-size: 9px;
    color: #8997b0;
    margin-top: 5px
}

.settings-layout,.support-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(260px,.8fr);
    gap: 14px
}

.settings-panel .dash-card-head,.side-info .dash-card-head {
    margin-bottom: 17px
}

.site-form {
    display: grid;
    gap: 15px
}

.site-form label {
    display: grid;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #aeb9ce
}

.site-form input:not([type=checkbox]),.site-form select,.site-form textarea {
    width: 100%;
    border: 1px solid #9aa8c826;
    border-radius: 10px;
    padding: 12px 13px;
    color: #edf1ff;
    background: #0b111d;
    outline: none;
    font-size: 11px
}

.site-form textarea {
    resize: vertical;
    min-height: 120px
}

.site-form input:focus,.site-form select:focus,.site-form textarea:focus {
    border-color: #8b70ff88;
    box-shadow: 0 0 0 3px #8b70ff12
}

.setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-top: 1px solid var(--line)
}

.setting-toggle b,.setting-toggle small {
    display: block
}

.setting-toggle b {
    font-size: 11px
}

.setting-toggle small {
    font-size: 9px;
    color: #8390a9;
    margin-top: 3px
}

.setting-toggle input {
    accent-color: #8b70ff;
    width: 17px;
    height: 17px
}

.side-info h3 {
    font: 700 18px 'Space Grotesk';
    margin: 5px 0 9px
}

.side-info>p {
    font-size: 11px;
    color: #8d9ab2;
    line-height: 1.8
}

.subscription-overview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 25px!important
}

.subscription-overview small,.activity-stats small {
    font-size: 8px;
    color: #8290aa;
    letter-spacing: .13em;
    font-weight: 800
}

.subscription-overview h2 {
    font: 700 26px 'Space Grotesk';
    margin: 7px 0
}

.subscription-overview p {
    font-size: 11px;
    color: #98a5bd;
    margin: 0
}

.payment-notice {
    display: flex;
    gap: 13px;
    padding: 16px;
    border: 1px solid #ffb76b35;
    border-radius: 13px;
    background: #ffb76b0a;
    margin-bottom: 14px
}

.payment-notice>span {
    font-size: 20px;
    color: #ffc582
}

.payment-notice b {
    font-size: 11px
}

.payment-notice p {
    font-size: 10px;
    color: #9da8bd;
    margin: 4px 0 0;
    line-height: 1.7
}

.inline-note {
    font-size: 10px;
    color: #8592ab;
    line-height: 1.8;
    margin-top: 14px
}

.ticket-list {
    display: grid;
    gap: 10px
}

.ticket-item {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #101623
}

.ticket-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.ticket-top>b {
    font-size: 11px
}

.ticket-item>small {
    display: block;
    color: #7f8da7;
    font-size: 9px;
    margin-top: 7px
}

.ticket-item>p {
    font-size: 10px;
    color: #bac5da;
    line-height: 1.8;
    margin: 12px 0 0;
    overflow-wrap: anywhere
}

.admin-reply {
    padding: 12px;
    margin-top: 12px;
    border-radius: 9px;
    background: #8b70ff10;
    border: 1px solid #8b70ff25
}

.admin-reply b {
    font-size: 10px;
    color: #c4b7ff
}

.admin-reply p {
    font-size: 10px;
    color: #c7d0e2;
    margin: 6px 0 0;
    line-height: 1.8
}

.check-list {
    padding-left: 18px;
    color: #b7c2d7;
    font-size: 10px;
    line-height: 2
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px
}

.activity-stats .dash-card {
    padding: 18px
}

.activity-stats b {
    display: block;
    font: 700 23px 'Space Grotesk';
    margin: 9px 0 4px
}

.activity-stats span {
    font-size: 9px;
    color: #8290aa
}

@media (max-width: 900px) {
    .suite-grid {
        grid-template-columns:1fr
    }

    .suite-card p {
        min-height: 0
    }

    .settings-layout,.support-grid {
        grid-template-columns: 1fr
    }

    .account-nav {
        overflow-x: auto;
        flex-wrap: nowrap
    }

    .account-nav a {
        font-size: 9px
    }

    .account-shortcuts {
        grid-template-columns: 1fr
    }
}

@media (max-width: 760px) {
    .site-header {
        height:70px
    }

    .suite-section {
        padding: 54px 20px
    }

    .suite-grid {
        gap: 10px
    }

    .suite-card {
        padding: 18px
    }

    .suite-card p {
        font-size: 11px
    }

    .compact-dashboard {
        padding: 28px 16px 45px
    }

    .account-nav {
        gap: 3px
    }

    .account-nav a {
        padding: 9px 10px
    }

    .subscription-overview {
        align-items: flex-start;
        flex-direction: column
    }

    .activity-stats {
        grid-template-columns: 1fr
    }

    .compact-dashboard .dash-card,.compact-dashboard .history-card {
        padding: 17px
    }

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

    .ticket-top>b {
        max-width: 72%
    }
}

.admin-support-card {
    margin-top: 18px;
    padding: 22px
}

.admin-support-card>.history-heading {
    padding: 0 0 15px
}

.admin-ticket-list {
    padding: 0 0 6px
}

.admin-ticket-form {
    display: grid;
    grid-template-columns: 170px 1fr auto;
    align-items: start;
    gap: 8px;
    margin-top: 13px
}

.admin-ticket-form select,.admin-ticket-form textarea {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #0b111d;
    color: #e8ecfa;
    font: 10px Manrope,Arial,sans-serif
}

.admin-ticket-form textarea {
    resize: vertical
}

.admin-ticket-form .btn {
    padding: 9px 11px
}

@media (max-width: 760px) {
    .admin-support-card {
        padding:17px
    }

    .admin-ticket-form {
        grid-template-columns: 1fr
    }

    .admin-ticket-form .btn {
        justify-self: start
    }
}

html {
    scroll-snap-type: none!important;
    scroll-padding-top: 82px;
    overflow-y: auto;
    overscroll-behavior-y: auto
}

body {
    overflow-x: clip;
    min-width: 320px
}

.snap-page {
    scroll-snap-align: none;
    scroll-snap-stop:normal;overflow: visible
}

main>section:not(.hero-section):not(.news-section) {
    width: 100%;
    margin-inline:auto}

.site-header {
    padding-left: max(calc((100vw - 1320px)/2),24px);
    padding-right: max(calc((100vw - 1320px)/2),24px)
}

.nav a i,.nav-login i,.btn i {
    margin-right: 5px;
    font-size: .95em
}

.nav a {
    white-space: nowrap
}

.hero-section {
    isolation: isolate;
    position: relative;
    background: #080b13
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../images/fbi-hero.jpg') center 44%/cover no-repeat;
    opacity: .42
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(5,8,14,.96) 0%,rgba(5,8,14,.82) 39%,rgba(5,8,14,.5) 72%,rgba(5,8,14,.72) 100%),linear-gradient(0deg,#080b13 0%,transparent 38%,rgba(8,11,19,.12) 100%);
    pointer-events: none
}

.hero-copy,.hero-visual {
    position: relative;
    z-index: 1
}

.hero-section .app-window {
    background: rgba(13,19,32,.94);
    backdrop-filter: blur(8px)
}

.news-section {
    padding: 84px max(5vw,24px);
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden
}

.news-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto 28px
}

.news-head h2 {
    font: 700 clamp(30px,4vw,48px)/1.1 'Space Grotesk',Arial,sans-serif;
    letter-spacing: -.055em;
    margin: 0 0 12px
}

.news-head h2 span {
    background: linear-gradient(100deg,#a898ff,#75b7ff);
    color: transparent;
    background-clip: text
}

.news-head p {
    margin: 0;
    color: #9da9c0;
    max-width: 590px;
    line-height: 1.8
}

.carousel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.carousel-controls button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #111827;
    color: #e8ecfa;
    transition: background .2s,border-color .2s
}

.carousel-controls button:hover {
    background: #292149;
    border-color: #8b70ff
}

.news-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, calc((100% - 48px)/3));
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #51458c #101522;
    padding: 8px 2px 20px;
    max-width: 1280px;
    margin: 0 auto;
    touch-action: pan-x pan-y
}

.news-track::-webkit-scrollbar {
    height: 7px
}

.news-track::-webkit-scrollbar-track {
    background: #101522;
    border-radius: 10px
}

.news-track::-webkit-scrollbar-thumb {
    background: #51458c;
    border-radius: 10px
}

.news-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(160deg,#121a2a,#0c111d);
    scroll-snap-align: start;
    transition: transform .25s,border-color .25s;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: #8b70ff70
}

.news-card>a {
    display: block;
    height: 100%
}

.news-card img {
    width: 100%;
    height: 245px;
    display: block;
    object-fit: cover;
    object-position: center
}

.news-feature {
    grid-column: span 1
}

.news-category {
    position: absolute;
    margin: -232px 0 0 18px;
    display: inline-flex;
    background: #8b70ff;
    color: white;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em
}

.news-card-copy {
    padding: 22px
}

.news-card-copy time {
    display: block;
    color: #a99aff;
    font-size: 10px;
    letter-spacing: .06em;
    margin-bottom: 10px
}

.news-card-copy h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 10px;
    letter-spacing: -.02em
}

.news-card-copy p {
    color: #929db4;
    font-size: 12px;
    line-height: 1.8;
    margin: 0 0 18px
}

.news-read {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #c8bdff
}

.news-cover {
    height: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    overflow: hidden
}

.news-cover::before,.news-cover::after {
    content: "";
    position: absolute;
    border: 1px solid #ffffff20;
    border-radius: 50%;
    width: 230px;
    height: 230px;
    transform: rotate(-24deg)
}

.news-cover::after {
    width: 170px;
    height: 170px
}

.news-cover i {
    font-size: 55px;
    position: relative;
    z-index: 1;
    text-shadow: 0 10px 35px #0005
}

.news-cover span {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em
}

.cover-purple {
    background: radial-gradient(circle at 50% 35%,#8267ff,#30255b 55%,#141528)
}

.cover-blue {
    background: radial-gradient(circle at 50% 35%,#4c9dff,#1b3b64 55%,#111b2c)
}

.cover-green {
    background: radial-gradient(circle at 50% 35%,#45cba0,#194d49 55%,#101c28)
}

.content-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 70px 24px 90px;
    min-height: 55vh
}

.content-page .eyebrow {
    justify-content: center
}

.content-page h1 {
    text-align: center;
    font: 700 clamp(38px,5vw,62px)/1.08 'Space Grotesk',Arial,sans-serif;
    letter-spacing: -.06em;
    margin: 0 auto 18px
}

.content-page .page-lead {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 42px;
    color: #9da9c0;
    line-height: 1.9
}

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

.editorial-card,.faq-item,.roadmap-item {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(150deg,#121a2a,#0d121e);
    padding: 24px
}

.editorial-card h2,.faq-item h2,.roadmap-item h2 {
    font-size: 20px;
    margin: 12px 0 8px
}

.editorial-card p,.faq-item p,.roadmap-item p {
    font-size: 13px;
    line-height: 1.85;
    color: #9da9c0
}

.editorial-card .news-cover {
    height: 175px;
    border-radius: 12px
}

.editorial-card time {
    display: block;
    color: #a99aff;
    font-size: 10px;
    margin-top: 16px
}

.faq-list,.roadmap-list {
    display: grid;
    gap: 14px;
    max-width: 900px;
    margin: auto
}

.faq-item h2 {
    display: flex;
    gap: 12px;
    align-items: center
}

.faq-item h2 i {
    color: #a99aff
}

.roadmap-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px
}

.roadmap-status {
    font-size: 10px;
    color: #b6a5ff;
    font-weight: 800;
    letter-spacing: .1em
}

.roadmap-item h2 {
    margin-top: 0
}

.icon-bullet {
    color: #a99aff;
    margin-right: 8px
}

@media (max-width: 1000px) {
    .news-track {
        grid-auto-columns:minmax(260px,calc((100% - 24px)/2));
        gap: 18px
    }

    .news-head {
        align-items: flex-start
    }

    .editorial-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top:70px
    }

    .site-header {
        padding: 0 16px
    }

    .nav a i {
        width: 18px
    }

    .hero-section::before {
        background-position: 58% center;
        opacity: .5
    }

    .hero-section::after {
        background: linear-gradient(90deg,rgba(5,8,14,.92),rgba(5,8,14,.67)),linear-gradient(0deg,#080b13,transparent 60%)
    }

    .news-section {
        padding: 58px 18px
    }

    .news-head {
        display: block
    }

    .news-head h2 {
        font-size: 34px
    }

    .news-head p {
        font-size: 12px
    }

    .carousel-controls {
        margin-top: 20px;
        justify-content: flex-start
    }

    .news-track {
        grid-auto-columns: minmax(78%, 360px);
        gap: 14px
    }

    .news-card img,.news-cover {
        height: 205px
    }

    .news-category {
        margin-top: -192px
    }

    .news-card-copy {
        padding: 18px
    }

    .news-card-copy h3 {
        font-size: 17px
    }

    .content-page {
        padding: 50px 18px 65px
    }

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

    .roadmap-item {
        grid-template-columns: 1fr;
        gap: 5px
    }

    .footer-links {
        gap: 14px
    }
}

html {
    scroll-snap-type: y proximity!important;
    scroll-padding-top: 84px
}

main>section.snap-page {
    min-height: calc(100svh - 72px);
    padding-left: max(calc((100vw - 1320px)/2),clamp(24px,5vw,76px));
    padding-right: max(calc((100vw - 1320px)/2),clamp(24px,5vw,76px));
    scroll-snap-align: start;
    scroll-snap-stop:normal}

main>section.snap-page>* {
    min-width: 0
}

.hero-section {
    width: 100%;
    grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
    gap: clamp(24px,3vw,52px)
}

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

.product-hero-visual {
    width: 100%;
    max-width: 760px;
    margin-inline:auto;perspective: 1400px;
    padding: 24px 12px 44px
}

.product-glow {
    position: absolute;
    inset: 12% 4% 18%;
    background: radial-gradient(ellipse,#7560ff35,transparent 67%);
    filter: blur(40px);
    pointer-events: none
}

.product-preview-tilt {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    border-radius: 16px;
    transform: perspective(1400px) rotateY(-13deg) rotateX(5deg) rotateZ(-1deg);
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s,border-color .3s;
    box-shadow: 0 35px 80px #0009,0 0 0 1px #b7c5ff30;
    border: 0;
    background: transparent;
    overflow: hidden
}

.product-preview-tilt:hover,.product-preview-tilt:focus-visible {
    transform: perspective(1400px) rotateY(8deg) rotateX(-3deg) rotateZ(.5deg) translateY(-7px) scale(1.02);
    box-shadow: 0 42px 100px #000b,0 0 0 1px #a898ff8c,0 0 55px #8065ff28;
    outline: none
}

.product-preview-tilt img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1270/700;
    object-fit: cover;
    object-position: center
}

.product-preview-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    background: linear-gradient(0deg,rgba(5,8,14,.96),rgba(5,8,14,.2));
    font-size: 9px;
    letter-spacing: .13em;
    color: #dfe6fa
}

.product-preview-caption b {
    margin-left: auto;
    color: #b7a7ff;
    font-size: 8px;
    letter-spacing: .1em
}

.product-hero-visual .visual-caption {
    bottom: 8px;
    right: 12px
}

.section-heading,.benefit-grid,.suite-grid,.workflow-copy,.workflow-visual,.pricing-grid,.pricing-bottom,.section-footer {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto
}

.benefits-section,.suite-section,.workflow-section,.pricing-teaser,.cta-section {
    justify-content: center
}

.benefits-section,.suite-section,.pricing-teaser {
    flex-direction: column;
    align-items: stretch
}

.benefits-section .section-heading,.suite-section .section-heading,.pricing-teaser .section-heading {
    margin-bottom: 12px
}

.benefit-grid,.suite-grid,.pricing-grid {
    align-items: stretch
}

.benefit-card,.suite-card,.price-card {
    height: 100%;
    display: flex;
    flex-direction: column
}

.benefit-card>a,.suite-card .btn {
    margin-top: auto
}

.product-feature-card {
    width: 100%;
    max-width: 1280px;
    margin: 30px auto 20px;
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr);
    gap: clamp(24px,4vw,58px);
    align-items: center;
    padding: clamp(18px,3vw,34px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(140deg,#111827eF,#0c111deF);
    box-shadow: 0 25px 70px #0003
}

.product-feature-image {
    perspective: 1200px;
    min-width: 0
}

.product-feature-image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #9cadd42e;
    border-radius: 14px;
    box-shadow: 0 25px 65px #0007;
    transform: perspective(1200px) rotateY(-5deg);
    transition: transform .45s,box-shadow .45s
}

.product-feature-image:hover img {
    transform: perspective(1200px) rotateY(3deg) rotateX(-1deg) translateY(-4px);
    box-shadow: 0 32px 75px #0009
}

.product-feature-copy h3 {
    font: 700 clamp(30px,3vw,44px)/1.1 'Space Grotesk',Arial,sans-serif;
    letter-spacing: -.05em;
    margin: 16px 0 12px
}

.product-feature-copy>p {
    color: #9da9c0;
    font-size: 13px;
    line-height: 1.9
}

.product-feature-copy ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 24px;
    display: grid;
    gap: 10px;
    color: #c8d1e4;
    font-size: 12px
}

.product-feature-copy li:before {
    content: '✓';
    color: var(--green);
    margin-right: 10px;
    font-weight: 900
}

.products-page {
    max-width: 1320px;
    min-height: calc(100svh - 150px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.products-page h1 span {
    background: linear-gradient(100deg,#a898ff,#75b7ff);
    color: transparent;
    background-clip: text
}

.product-page-card {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
    gap: clamp(26px,4vw,60px);
    align-items: center;
    padding: clamp(20px,3.5vw,42px);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: linear-gradient(145deg,#121a2a,#0b101b);
    box-shadow: 0 25px 80px #0004
}

.product-page-image {
    align-self: center
}

.product-page-details h2 {
    font: 700 clamp(34px,4vw,48px)/1.1 'Space Grotesk',Arial,sans-serif;
    letter-spacing: -.055em;
    margin: 15px 0 12px
}

.product-page-details>p {
    color: #9da9c0;
    font-size: 12px;
    line-height: 1.9
}

.product-capabilities {
    display: grid;
    gap: 16px;
    margin: 24px 0
}

.product-capabilities>div {
    display: flex;
    align-items: flex-start;
    gap: 13px
}

.product-capabilities>div>i {
    flex: 0 0 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #8b70ff1c;
    color: #b5a5ff;
    font-size: 15px
}

.product-capabilities b,.product-capabilities small {
    display: block
}

.product-capabilities b {
    font-size: 12px
}

.product-capabilities small {
    font-size: 10px;
    line-height: 1.7;
    color: #8996b0;
    margin-top: 3px
}

.product-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px
}

.product-page-details .product-disclaimer {
    font-size: 9px;
    color: #75829b;
    margin-top: 20px
}

.section-nav {
    position: fixed;
    z-index: 90;
    right: clamp(12px,2vw,28px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 10px 7px;
    border: 1px solid #aebde51b;
    border-radius: 20px;
    background: rgba(8,11,19,.72);
    backdrop-filter: blur(14px)
}

.section-nav button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #64718b;
    transition: width .25s,background .25s,box-shadow .25s
}

.section-nav button[aria-current="true"] {
    height: 24px;
    background: linear-gradient(#b5a3ff,#5f9fff);
    box-shadow: 0 0 15px #8b70ff55
}

.section-nav button:focus-visible {
    outline: 2px solid #b5a3ff;
    outline-offset: 4px
}

.section-nav-label {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #151c2b;
    color: #cdd6ea;
    font-size: 9px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s
}

.section-nav button:hover .section-nav-label,.section-nav button:focus-visible .section-nav-label {
    opacity: 1
}

@media (max-width: 1000px) {
    main>section.snap-page {
        padding-left:32px;
        padding-right: 32px
    }

    .product-feature-card,.product-page-card {
        grid-template-columns: 1fr
    }

    .product-feature-image {
        max-width: 760px;
        margin: auto
    }

    .product-page-image {
        max-width: 900px;
        width: 100%;
        margin: auto
    }

    .product-page-details {
        max-width: 800px;
        margin: auto;
        width: 100%
    }

    .section-nav {
        right: 8px
    }
}

@media (max-width: 760px) {
    html {
        scroll-snap-type:y proximity!important
    }

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

    .hero-visual {
        max-width: 620px;
        margin: 0 auto;
        width: 100%
    }

    .product-hero-visual {
        padding: 10px 4px 36px
    }

    .product-preview-tilt {
        transform: none;
        border-radius: 12px
    }

    .product-preview-tilt:hover,.product-preview-tilt:focus-visible {
        transform: perspective(1000px) rotateY(2deg) rotateX(-1deg) scale(1.01)
    }

    .product-preview-caption {
        padding: 8px;
        font-size: 7px
    }

    .product-preview-caption b {
        font-size: 6px
    }

    .product-feature-card {
        padding: 15px;
        gap: 22px
    }

    .product-feature-copy h3 {
        font-size: 30px
    }

    .products-page {
        padding-left: 18px;
        padding-right: 18px
    }

    .product-page-card {
        padding: 14px;
        border-radius: 18px
    }

    .product-page-actions {
        flex-direction: column;
        align-items: stretch
    }

    .section-nav {
        right: 5px;
        padding: 8px 5px;
        gap: 8px
    }

    .section-nav button {
        width: 6px;
        height: 6px
    }

    .section-nav button[aria-current="true"] {
        height: 19px
    }

    main>section.snap-page {
        padding-left: 20px;
        padding-right: 20px;
        min-height: calc(100svh - 70px)
    }

    .product-feature-copy>p {
        font-size: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-snap-type: none!important
    }

    .product-preview-tilt,.product-feature-image img,.section-nav button {
        transition: none!important
    }
}

html {
    scroll-snap-type: none!important;
    scroll-behavior: smooth;
    overflow-y: auto;
    overscroll-behavior-y: none
}

main>section.snap-page,main>section.news-section {
    min-height: calc(100svh - 82px);
    height: calc(100svh - 82px);
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop:always;overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

main>section.snap-page {
    padding-top: clamp(28px,5vh,58px);
    padding-bottom: clamp(28px,5vh,58px)
}

main>section.news-section {
    padding: clamp(26px,4vh,48px) max(calc((100vw - 1280px)/2),clamp(24px,5vw,76px));
    flex-direction: column;
    justify-content: center
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0, .9fr);
    align-content: center;
    align-items: center;
    justify-items: center;
    gap: clamp(24px,4vw,64px);
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-left: max(calc((100vw - 1180px)/2),clamp(24px,5vw,76px));
    padding-right: max(calc((100vw - 1180px)/2),clamp(24px,5vw,76px));
    text-align: center
}

.hero-copy {
    width: 100%;
    max-width: 590px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline:auto}

.hero-copy .eyebrow {
    justify-content: center;
    margin-bottom: 16px
}

.hero-copy h1 {
    font-size: clamp(42px,4.8vw,68px);
    margin-bottom: 18px
}

.hero-lead {
    margin: 0 auto;
    max-width: 500px
}

.hero-actions {
    justify-content: center;
    margin: 24px 0
}

.hero-proof {
    justify-content: center;
    margin-top: 14px
}

.product-hero-visual {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px
}

.product-preview-tilt {
    width: min(100%,530px);
    transform: perspective(1400px) rotateY(-10deg) rotateX(4deg) rotateZ(-1.5deg);
    transform-origin: center;
    will-change: transform
}

.product-preview-tilt:hover,.product-preview-tilt:focus-visible {
    transform: perspective(1400px) rotateY(7deg) rotateX(-3deg) rotateZ(1.2deg) translateY(-7px) scale(1.025)
}

.product-preview-caption,.product-hero-visual .visual-caption,.product-glow {
    display: none!important
}

.hero-section .scroll-cue {
    bottom: 16px
}

main>section.section-entering .section-heading,main>section.section-entering .hero-copy,main>section.section-entering .hero-visual,main>section.section-entering .benefit-grid,main>section.section-entering .product-feature-card,main>section.section-entering .workflow-copy,main>section.section-entering .workflow-visual,main>section.section-entering .pricing-grid,main>section.section-entering .pricing-bottom,main>section.section-entering .cta-section>* ,main>section.section-entering .news-head,main>section.section-entering .news-track {
    animation: sectionFadeUp .65s cubic-bezier(.2,.75,.2,1) both
}

@keyframes sectionFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,18px,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.section-nav button {
    cursor: pointer
}

@media (max-width: 900px) {
    main>section.snap-page,main>section.news-section {
        height:auto;
        min-height: calc(100svh - 72px);
        overflow: visible
    }

    .hero-section {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 32px;
        padding-bottom: 64px
    }

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

    .product-hero-visual {
        max-width: 460px;
        padding: 8px 12px 20px
    }

    .product-preview-tilt {
        width: min(100%,430px)
    }

    .hero-proof {
        margin-top: 8px
    }

    .hero-section .scroll-cue {
        bottom: 12px
    }
}

@media (max-width: 600px) {
    .hero-copy h1 {
        font-size:clamp(38px,11vw,54px)
    }

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

    .hero-actions {
        margin: 17px 0;
        gap: 9px
    }

    .hero-actions .btn {
        white-space: normal
    }

    .hero-proof {
        display: none
    }

    .product-hero-visual {
        max-width: 360px
    }

    .product-preview-tilt {
        transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) rotateZ(-1deg)
    }

    .product-preview-tilt:hover,.product-preview-tilt:focus-visible {
        transform: perspective(1000px) rotateY(4deg) rotateX(-2deg) rotateZ(1deg) translateY(-4px)
    }

    main>section.snap-page {
        padding-left: 18px;
        padding-right: 18px
    }
}

@media (prefers-reduced-motion:reduce) {
    main>section.section-entering .section-heading,main>section.section-entering .hero-copy,main>section.section-entering .hero-visual,main>section.section-entering .benefit-grid,main>section.section-entering .product-feature-card,main>section.section-entering .workflow-copy,main>section.section-entering .workflow-visual,main>section.section-entering .pricing-grid,main>section.section-entering .pricing-bottom,main>section.section-entering .news-head,main>section.section-entering .news-track {
        animation: none!important
    }
}

@media (min-width: 761px) {
    html {
        scroll-snap-type:none!important;
        scroll-behavior: auto!important;
        overscroll-behavior-y: none
    }

    main>section.snap-page, main>section.news-section {
        width: 100%;
        height: calc(100svh - 82px);
        min-height: calc(100svh - 82px);
        max-height: calc(100svh - 82px);
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        scroll-margin-top: 82px;
        scroll-snap-align: start;
        scroll-snap-stop:always;}

    main>section.snap-page {
        padding-top: clamp(12px,2.5vh,28px);
        padding-bottom: clamp(12px,2.5vh,28px)
    }

    main>section.news-section {
        padding: clamp(18px,3vh,34px) max(calc((100vw - 1280px)/2),clamp(24px,5vw,76px));
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(14px,2vh,24px)
    }

    .hero-section {
        grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
        gap: clamp(20px,3vw,48px);
        align-items: center;
        justify-items: center;
        padding-left: max(calc((100vw - 1180px)/2),clamp(24px,5vw,76px));
        padding-right: max(calc((100vw - 1180px)/2),clamp(24px,5vw,76px));
        padding-top: 18px;
        padding-bottom: 34px
    }

    .hero-copy {
        max-width: 540px;
        max-height: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(38px,4.1vw,62px);
        margin-bottom: clamp(10px,1.8vh,18px)
    }

    .hero-copy .eyebrow {
        margin-bottom: clamp(8px,1.5vh,15px)
    }

    .hero-lead {
        font-size: clamp(12px,.95vw,14px);
        line-height: 1.7
    }

    .hero-actions {
        margin: clamp(12px,2vh,22px) 0;
        gap: 10px
    }

    .hero-proof {
        margin-top: clamp(5px,1vh,12px)
    }

    .product-hero-visual {
        width: 100%;
        max-width: min(100%,620px);
        max-height: 100%;
        padding: 10px 8px 18px;
        overflow: visible
    }

    .product-preview-tilt {
        width: min(100%,570px);
        max-height: calc(100svh - 180px)
    }

    .product-preview-tilt img {
        width: 100%;
        height: auto;
        max-height: calc(100svh - 190px);
        object-fit: contain;
        aspect-ratio: 1270/700
    }

    .hero-section .scroll-cue {
        bottom: 8px
    }

    main>section.section-entering>* {
        animation: sectionContentReveal .62s cubic-bezier(.2,.75,.2,1) both
    }

    main>section.section-entering>*:nth-child(2) {
        animation-delay: .06s
    }

    main>section.section-entering>*:nth-child(3) {
        animation-delay: .12s
    }

    main>section.section-entering>*:nth-child(4) {
        animation-delay: .18s
    }
}

@keyframes sectionContentReveal {
    from {
        opacity: 0;
        transform: translate3d(0,22px,0);
        filter: blur(3px)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
        filter: blur(0)
    }
}

@media (max-width: 760px) {
    main>section.snap-page,main>section.news-section {
        height:auto;
        min-height: calc(100svh - 70px);
        max-height: none;
        overflow: visible
    }

    .hero-section {
        min-height: calc(100svh - 70px);
        padding-top: 28px;
        padding-bottom: 58px
    }
}

@media (prefers-reduced-motion:reduce) {
    main>section.section-entering>* {
        animation: none!important
    }
}

html {
    scroll-behavior: auto;
    scroll-snap-type: none;
    scroll-padding-top: 0;
    scrollbar-width: none
}

html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none
}

body {
    overflow-x: hidden;
    scrollbar-width: none
}

main:has(> section.snap-page),main:has(> section.news-section) {
    padding: 0
}

main>section.snap-page,main>section.news-section {
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 82px);
    height: calc(100svh - 82px);
    margin: 0;
    padding: clamp(28px,4vh,52px) max(calc((100vw - 1320px)/2),5vw);
    scroll-snap-align: none;
    scroll-snap-stop:normal;box-sizing: border-box;
}

main>section.news-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden
}

main>section.snap-page:not(.hero-section) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch
}

main>section.hero-section {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    align-items: center;
    gap: clamp(24px,4vw,64px);
    padding-top: 34px;
    padding-bottom: 42px;
    overflow: visible;
}

.hero-section::before {
    opacity: 0
}

.hero-section::after {
    background: linear-gradient(90deg,rgba(5,8,14,.18),rgba(5,8,14,.04) 70%),linear-gradient(0deg,#080b13 0%,transparent 24%,transparent 100%)
}

.hero-copy {
    text-align: left;
    justify-self: start;
    width: 100%;
    max-width: 560px
}

.hero-copy h1,.hero-copy p,.hero-copy .eyebrow {
    text-align: left;
    margin-left: 0;
    margin-right: 0
}

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

.hero-actions {
    justify-content: flex-start
}

.product-hero-visual {
    width: 100%;
    max-width: 790px;
    min-width: 0;
    margin: auto;
    padding: 0 0 25px;
    perspective: none
}

.product-preview-tilt {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none!important
}

.product-preview-tilt:hover,.product-preview-tilt:focus-visible {
    box-shadow: none;
    transform: none!important
}

.product-preview-tilt img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 25px 42px rgba(0,0,0,.28))
}

.product-preview-caption {
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 76px;
    padding: 30px 18px 14px;
    background: linear-gradient(0deg,rgba(5,8,14,.82),rgba(5,8,14,.45) 55%,transparent);
    letter-spacing: .08em
}

.product-caption-spacer {
    flex: 1
}

.product-caption-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(172,156,255,.45);
    border-radius: 10px;
    background: linear-gradient(120deg,#8970f2,#654be0);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 7px 24px #6d50e63b
}

.product-caption-cta i {
    font-size: 11px
}

.product-hero-visual .visual-caption {
    display: none
}

.scroll-cue {
    bottom: 10px
}

.news-section {
    margin: 0
}

.news-head {
    width: 100%;
    max-width: 1320px
}

.news-track {
    width: 100%;
    max-width: 1320px
}

.benefits-section .section-heading,.suite-section .section-heading,.pricing-teaser .section-heading {
    margin-bottom: clamp(10px,2vh,22px)
}

.benefit-grid {
    margin: clamp(18px,3vh,34px) auto clamp(12px,2vh,24px);
    gap: 14px
}

.benefit-card {
    min-height: 0;
    padding: clamp(16px,2vh,23px) clamp(15px,1.6vw,22px)
}

.benefit-card p {
    line-height: 1.7
}

.section-footer,.pricing-bottom {
    width: 100%
}

.product-feature-card {
    width: 100%;
    max-width: 1180px;
    margin: 20px auto
}

.workflow-section {
    display: grid!important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(28px,5vw,76px)
}

.workflow-copy {
    max-width: 620px
}

.workflow-visual {
    min-height: 0;
    height: 100%;
    max-height: 520px
}

.pricing-grid {
    margin-top: clamp(18px,3vh,35px);
    margin-bottom: clamp(12px,2vh,24px)
}

.price-card {
    padding: clamp(17px,2vh,27px) clamp(16px,1.8vw,25px)
}

.cta-section {
    text-align: center;
    align-items: center!important
}

.cta-section .eyebrow,.cta-section .hero-actions,.cta-section .cta-meta {
    justify-content: center
}

.section-ready {
    opacity: 1
}

.section-entering {
    animation: sectionReveal .42s ease both
}

@keyframes sectionReveal {
    from {
        opacity: .65;
        transform: translateY(12px)
    }

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

@media (max-width: 1050px) {
    main>section.snap-page,main>section.news-section {
        padding:30px 5vw
    }

    main>section.hero-section {
        grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
        gap: 24px
    }

    .hero-copy h1 {
        font-size: clamp(40px,5vw,64px)
    }

    .benefit-card {
        padding: 16px
    }
}

@media (max-width: 760px) {
    html {
        scroll-snap-type:none
    }

    main>section.snap-page,main>section.news-section {
        height: auto;
        min-height: calc(100svh - 70px);
        padding: 42px 20px
    }

    main>section.hero-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding-top: 32px;
        padding-bottom: 52px
    }

    .hero-copy h1 {
        font-size: clamp(40px,11vw,60px)
    }

    .hero-visual {
        max-width: 100%
    }

    .product-hero-visual {
        padding: 0 0 16px
    }

    .product-preview-caption {
        min-height: 60px;
        padding: 24px 10px 8px;
        font-size: 8px
    }

    .product-caption-cta {
        padding: 9px 10px;
        font-size: 10px
    }

    .benefit-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .workflow-section {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .workflow-visual {
        min-height: 250px
    }

    .news-head {
        align-items: flex-start;
        flex-direction: column
    }

    .news-track {
        grid-auto-columns: minmax(245px,82%)
    }

    .section-footer,.pricing-bottom {
        align-items: flex-start;
        flex-direction: column
    }

    .section-entering {
        animation-duration: .3s
    }
}

@media (prefers-reduced-motion:reduce) {
    .section-entering {
        animation: none!important
    }
}

html, body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body {
    overflow-x: clip;
}

main:has(> section.snap-page), main:has(> section.news-section) {
    padding: 0;
}

main > section.snap-page, main > section.news-section {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100svh - 82px);
    max-height: none;
    margin: 0;
    box-sizing: border-box;
}

main > section.snap-page:not(.hero-section) {
    padding-block:clamp(28px,5vh,64px);}

main > section.news-section {
    padding-block:clamp(26px,4vh,52px);}

main > section.hero-section {
    min-height: calc(100svh - 82px);
    padding-top: clamp(20px,3.5vh,42px);
    padding-bottom: clamp(30px,5vh,58px);
    align-content: center;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
}

.hero-copy {
    align-items: flex-start;
    text-align: left;
    margin: 0;
}

.hero-copy .eyebrow {
    justify-content: flex-start;
}

.hero-copy h1, .hero-copy p, .hero-copy .eyebrow {
    text-align: left;
}

.hero-lead {
    margin-left: 0;
    margin-right: 0;
}

.hero-actions {
    justify-content: flex-start;
}

.hero-proof {
    justify-content: flex-start;
}

.product-hero-visual {
    max-width: 900px;
    padding: 0;
    perspective: none;
}

.product-preview-tilt {
    display: block;
    position: relative;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    isolation: isolate;
    transition: transform .28s ease;
}

.product-preview-tilt img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100svh - 150px);
    object-fit: contain;
    object-position: center;
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 22px 35px rgba(0,0,0,.24));
    transition: filter .28s ease, transform .28s ease;
}

.product-preview-tilt::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(0deg,rgba(4,7,13,.78),rgba(4,7,13,.28) 50%,transparent);
    transition: opacity .25s ease;
}

.product-preview-caption {
    display: flex !important;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 30px 18px 14px;
    color: #dce3f8;
    font-size: 9px;
    letter-spacing: .1em;
    background: transparent;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.product-caption-spacer {
    flex: 1;
}

.product-caption-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(172,156,255,.5);
    border-radius: 10px;
    background: linear-gradient(120deg,#8970f2,#654be0);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 7px 24px #6d50e63b;
    white-space: nowrap;
}

.product-preview-tilt:hover, .product-preview-tilt:focus-visible {
    transform: translateY(-5px) scale(1.015);
}

.product-preview-tilt:hover::after, .product-preview-tilt:focus-visible::after, .product-preview-tilt:hover .product-preview-caption, .product-preview-tilt:focus-visible .product-preview-caption {
    opacity: 1;
}

.product-preview-tilt:hover .product-preview-caption, .product-preview-tilt:focus-visible .product-preview-caption {
    transform: translateY(0);
}

.product-hero-visual .visual-caption, .product-glow {
    display: none !important;
}

.section-heading, .news-head, .news-track, .benefit-grid, .product-feature-card, .workflow-copy, .pricing-grid, .pricing-bottom {
    min-width: 0;
}

.benefit-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.benefit-card {
    overflow-wrap: anywhere;
}

.product-feature-card {
    align-items: center;
}

.product-feature-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.workflow-section {
    align-items: center;
}

.section-nav {
    z-index: 110;
}

@media (min-width: 761px) and (max-height:760px) {
    main > section.snap-page, main > section.news-section {
        height:auto;
        min-height: calc(100svh - 82px);
    }

    main > section.snap-page:not(.hero-section) {
        padding-block:24px;}

    .benefit-grid {
        gap: 10px;
        margin-block:18px;}

    .benefit-card {
        padding: 14px;
    }

    .benefit-icon {
        margin-bottom: 12px;
    }

    .benefit-card p {
        font-size: 10px;
        line-height: 1.55;
    }

    .pricing-grid {
        margin-top: 16px;
    }

    .price-card ul {
        min-height: 0;
        padding-bottom: 12px;
    }

    .product-preview-tilt img {
        max-height: calc(100svh - 170px);
    }
}

@media (max-width: 1100px) {
    .benefit-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hero-section {
        gap: clamp(18px,3vw,32px);
    }

    .hero-copy h1 {
        font-size: clamp(38px,4.8vw,60px);
    }

    .nav, .nav-actions {
        gap: 14px;
    }
}

@media (max-width: 760px) {
    main > section.snap-page, main > section.news-section {
        height:auto;
        min-height: calc(100svh - 70px);
        max-height: none;
        overflow: visible;
        padding: 36px 20px;
    }

    main > section.hero-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 18px;
        padding: 28px 20px 54px;
        min-height: calc(100svh - 70px);
    }

    .hero-copy {
        width: 100%;
        max-width: 680px;
        align-items: flex-start;
    }

    .hero-copy h1 {
        font-size: clamp(38px,8vw,58px);
    }

    .hero-lead {
        max-width: 620px;
        font-size: 13px;
    }

    .hero-proof {
        display: flex;
    }

    .product-hero-visual {
        width: 100%;
        max-width: 680px;
        align-self: center;
        padding: 0;
    }

    .product-preview-tilt {
        width: 100%;
    }

    .product-preview-tilt img {
        max-height: none;
        width: 100%;
    }

    .product-preview-caption {
        min-height: 58px;
        padding: 22px 10px 8px;
        font-size: 8px;
    }

    .product-caption-cta {
        padding: 9px 10px;
        font-size: 10px;
    }

    .product-preview-tilt::after {
        height: 38%;
    }

    .news-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .news-track {
        grid-auto-columns: minmax(245px,82%);
    }

    .workflow-section {
        display: grid !important;
        grid-template-columns: minmax(0,1fr);
    }

    .workflow-visual {
        min-height: 260px;
    }

    .pricing-grid {
        grid-template-columns: minmax(0,1fr);
        width: 100%;
    }

    .section-footer, .pricing-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .footer-links {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .benefit-grid {
        grid-template-columns:minmax(0,1fr);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .product-preview-caption > span:nth-child(2) {
        display: none;
    }

    .section-nav {
        display: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    .product-preview-tilt, .product-preview-caption, .product-preview-tilt::after, .product-preview-tilt img {
        transition: none !important;
    }
}

main > section.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

main > section.hero-section::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -18px;
    background-image: linear-gradient(90deg,rgba(7,9,18,.92) 0%,rgba(7,9,18,.78) 48%,rgba(7,9,18,.68) 100%),url('../images/fbi-hero.jpg');
    background-size: cover;
    background-position: center 44%;
    filter: blur(3px);
    transform: scale(1.025);
}

main > section.hero-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(7,9,18,.12),rgba(7,9,18,.28));
}

main > section.hero-section > * {
    position: relative;
}

.product-hero-visual {
    perspective: 1400px;
}

.product-preview-tilt {
    transform: rotate(-3deg) translateY(0);
    transform-origin: 55% 50%;
}

.product-preview-tilt:hover, .product-preview-tilt:focus-visible {
    transform: rotate(0deg) translateY(-5px) scale(1.025);
}

.product-preview-tilt img {
    cursor: pointer;
}

html:has(main > section.snap-page) {
    scroll-snap-type: none !important;
}

body:has(main > section.snap-page) {
    overscroll-behavior-y: none;
}

main > section.snap-page, main > section.news-section {
    scroll-snap-align: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .product-preview-tilt, .product-preview-tilt img {
        transition-duration: .01ms !important;
    }
}

@media (max-width: 760px) {
    main > section.hero-section::before {
        background-position:58% center;
    }

    .product-preview-tilt {
        transform: rotate(-1.5deg);
    }

    .product-preview-tilt:hover, .product-preview-tilt:focus-visible {
        transform: rotate(0deg) scale(1.01);
    }
}

html {
    scroll-snap-type: none !important;
}

.snap-page, .news-section.page-section {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    scroll-margin-top: 0;
}

.hero-section {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(88px, 10vh, 120px);
    padding-bottom: clamp(28px, 5vh, 64px);
    background-image: linear-gradient(90deg, rgba(5,8,13,.78), rgba(5,8,13,.53) 52%, rgba(5,8,13,.66)), url("../images/fbi-hero.jpg");
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    background: url("../images/fbi-hero.jpg") center / cover no-repeat;
    filter: blur(5px);
    transform: scale(1.025);
    opacity: .72;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(5,8,13,.56), rgba(5,8,13,.25) 56%, rgba(5,8,13,.48));
    pointer-events: none;
}

.hero-copy, .hero-visual {
    position: relative;
    z-index: 1;
}

.app-window {
    transform: perspective(1400px) rotateY(-10deg) rotateX(2deg) rotateZ(-1deg);
    transform-origin: center;
    transition: transform .55s cubic-bezier(.2,.75,.2,1), box-shadow .55s ease;
    will-change: transform;
}

.hero-visual:hover .app-window {
    transform: perspective(1400px) rotateY(2deg) rotateX(0deg) rotateZ(0deg) translateY(-5px);
    box-shadow: 0 42px 110px rgba(0,0,0,.62), 0 0 0 1px rgba(169,154,255,.16);
}

.workflow-section {
    align-items: center;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block:clamp(82px, 10vh, 130px);}

.workflow-copy, .workflow-visual {
    align-self: center;
}

.workflow-copy {
    margin-block:auto;}

.workflow-visual {
    min-height: clamp(320px, 48vh, 560px);
}

@media (min-width: 1051px) {
    .hero-section {
        grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
        align-items: center;
    }

    .hero-visual {
        min-width: 0;
    }

    .app-window {
        width: min(100%, 760px);
    }
}

@media (max-width: 1050px) {
    .hero-section {
        min-height:100svh;
        padding-top: 100px;
        padding-bottom: 36px;
    }

    .app-window {
        transform: perspective(1200px) rotateY(-5deg) rotateX(1deg);
    }

    .hero-visual:hover .app-window {
        transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-3px);
    }
}

@media (max-width: 760px) {
    .hero-section {
        background-position:62% center;
        padding-top: 92px;
        padding-bottom: 28px;
    }

    .workflow-section {
        padding-block:92px 36px;}

    .workflow-visual {
        min-height: 300px;
    }

    .app-window {
        transform: perspective(1000px) rotateY(-2deg);
    }
}

html, body {
    overscroll-behavior-y: none;
}

body.landing-section-lock {
    overscroll-behavior-y: none;
}

main > section.snap-page, main > section.news-section {
    margin-block:0 !important;}

main > section.snap-page:not(.hero-section) {
    min-height: calc(100svh - 82px);
}

.product-hero-visual {
    perspective: 1500px;
    overflow: visible;
}

.product-preview-tilt {
    transform: perspective(1400px) rotateY(-13deg) rotateX(5deg) rotateZ(-1deg);
    will-change: transform;
    cursor: pointer;
}

.product-preview-tilt:hover, .product-preview-tilt:focus-visible {
    transform: perspective(1400px) rotateY(8deg) rotateX(-3deg) rotateZ(.5deg) translateY(-7px) scale(1.02);
}

.product-preview-tilt img {
    object-fit: contain;
    background: transparent;
}

@media (max-height: 650px) {
    .snap-page {
        padding-top:24px;
        padding-bottom: 24px;
    }

    .hero-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    background: #080b13;
}

main > section.hero-section#top {
    height: calc(100vh - 82px) !important;
    height: calc(100dvh - 82px) !important;
    min-height: calc(100vh - 82px) !important;
    min-height: calc(100dvh - 82px) !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    background-color: #080b13;
    overflow: visible;
}

.product-hero-visual {
    perspective: 1600px !important;
    transform-style: preserve-3d;
}

.product-preview-tilt {
    transform: perspective(1400px) rotateY(-18deg) rotateX(7deg) rotateZ(-2deg) !important;
    transform-origin: 52% 50% !important;
    transform-style: preserve-3d !important;
    transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .55s ease !important;
    will-change: transform;
    backface-visibility: hidden;
}

.product-preview-tilt:hover, .product-preview-tilt:focus-visible {
    transform: perspective(1400px) rotateY(13deg) rotateX(-5deg) rotateZ(1deg) translateY(-7px) scale(1.025) !important;
    filter: drop-shadow(0 28px 38px rgba(0,0,0,.35));
}

.product-preview-tilt img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain !important;
}

@media (max-width: 1050px) {
    main > section.hero-section#top {
        height:auto !important;
        min-height: calc(100dvh - 72px) !important;
    }

    .product-preview-tilt {
        transform: perspective(1200px) rotateY(-12deg) rotateX(5deg) rotateZ(-1.5deg) !important;
    }

    .product-preview-tilt:hover,.product-preview-tilt:focus-visible {
        transform: perspective(1200px) rotateY(9deg) rotateX(-3deg) rotateZ(.5deg) translateY(-4px) scale(1.015) !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    .product-preview-tilt,.product-preview-tilt:hover,.product-preview-tilt:focus-visible {
        transition: none !important;
    }
}

main > section.hero-section#top {
    overflow: clip !important;
    isolation: isolate;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

@supports not (overflow: clip) {
    main > section.hero-section#top {
        overflow:hidden !important;
    }
}

main > section.hero-section#top::before, main > section.hero-section#top::after {
    inset: 0;
}

main > section.hero-section#top .scroll-cue {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: clamp(14px, 2.4vh, 26px) !important;
    top: auto !important;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
    margin: 0 !important;
}

main > section.hero-section#top .scroll-cue:hover {
    transform: translateX(-50%) translateY(-2px);
}

html:has(main > section.snap-page), body:has(main > section.snap-page) {
    overscroll-behavior-y: none !important;
    scroll-behavior: auto !important;
}

body.landing-section-lock {
    overflow-y: hidden !important;
}

main:has(> section.snap-page) {
    padding: 0 !important;
    margin: 0 !important;
}

main > section.snap-page, main > section.news-section {
    height: calc(100dvh - 82px) !important;
    min-height: calc(100dvh - 82px) !important;
    max-height: calc(100dvh - 82px) !important;
    margin: 0 !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
}

main > section.hero-section#top {
    height: calc(100dvh - 82px) !important;
    min-height: calc(100dvh - 82px) !important;
    max-height: calc(100dvh - 82px) !important;
    padding-bottom: 0 !important;
    overflow: clip !important;
}

main > section.news-section#news {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    background-color: #080b13;
}

main > section.news-section#news > * {
    position: relative;
    z-index: 1;
}

main > section.hero-section#top .scroll-cue {
    pointer-events: none !important;
    cursor: default !important;
    user-select: none;
}

@media (max-width: 900px) {
    main > section.snap-page, main > section.news-section {
        height:auto !important;
        min-height: calc(100dvh - 70px) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    main > section.hero-section#top {
        height: auto !important;
        min-height: calc(100dvh - 70px) !important;
        max-height: none !important;
    }

    body.landing-section-lock {
        overflow-y: hidden !important;
    }
}

.site-header {
    position: fixed!important;
    top: 12px!important;
    left: 50%!important;
    transform: translateX(-50%)!important;
    width: min( calc(100% - 48px), 1320px)!important;
    height: 64px!important;
    min-height: 64px!important;
    padding: 0 clamp(16px,2.4vw,34px)!important;
    display: flex!important;
    align-items: center!important;
    gap: clamp(12px,2vw,30px)!important;
    border: 1px solid rgba(220,228,255,.16)!important;
    border-radius: 20px!important;
    background: linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045) 48%,rgba(115,100,180,.09))!important;
    backdrop-filter: blur(24px) saturate(155%)!important;
    -webkit-backdrop-filter: blur(24px) saturate(155%)!important;
    box-shadow: 0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
    z-index: 1000!important;
    flex-shrink: 0!important;
    will-change: auto!important;
    transition: background .25s,border-color .25s!important
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg,rgba(255,255,255,.08),transparent 38%,rgba(165,145,255,.05));
    z-index: -1
}

body {
    padding-top: 0!important
}

main:has(> section.snap-page),main:has(> section.news-section) {
    padding-top: 0!important
}

main>section.snap-page,main>section.news-section {
    height: 100svh!important;
    min-height: 100svh!important;
    max-height: 100svh!important;
    margin: 0!important;
    scroll-margin-top: 0!important;
    box-sizing: border-box!important
}

main>section.hero-section#top {
    padding-top: clamp(90px,12vh,130px)!important;
    padding-bottom: clamp(46px,7vh,80px)!important
}

main>section.news-section#news {
    padding-top: clamp(100px,13vh,145px)!important
}

main>section.hero-section#top::after {
    background: linear-gradient(90deg,rgba(5,8,14,.18),rgba(5,8,14,.04) 70%),linear-gradient(0deg,#080b13 0%,transparent 18%,transparent 100%)!important
}

@media (max-width: 1050px) {
    .site-header {
        width:calc(100% - 28px)!important;
        top: 8px!important;
        height: 60px!important;
        min-height: 60px!important;
        border-radius: 17px!important
    }

    .nav,.nav-actions {
        gap: 12px!important
    }

    .brand-mark {
        width: 36px;
        height: 36px
    }
}

@media (max-width: 760px) {
    .site-header {
        width:calc(100% - 20px)!important;
        top: 7px!important;
        height: 56px!important;
        min-height: 56px!important;
        padding: 0 14px!important;
        border-radius: 15px!important
    }

    .nav {
        display: none
    }

    .nav.open {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        border: 1px solid rgba(220,228,255,.16);
        border-radius: 16px;
        background: rgba(9,12,22,.94);
        backdrop-filter: blur(22px)
    }

    .nav-actions {
        margin-left: auto
    }

    .mobile-menu {
        display: block
    }

    .brand {
        font-size: 12px
    }

    .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px
    }

    .site-header .nav-actions .nav-login {
        display: none
    }

    main>section.snap-page,main>section.news-section {
        height: auto!important;
        min-height: 100svh!important;
        max-height: none!important;
        padding-top: 100px!important;
        padding-bottom: 36px!important
    }

    .hero-section {
        min-height: 100svh!important
    }

    .hero-section .scroll-cue {
        bottom: 14px!important
    }
}

@media (min-width: 761px) {
    main>section.snap-page,main>section.news-section {
        overflow:hidden!important
    }

    .hero-section {
        padding-bottom: 70px!important
    }

    .hero-section .scroll-cue {
        bottom: 18px!important
    }
}

.site-header {
    width: calc(100% - 24px)!important;
    max-width: 1320px!important;
    padding-left: clamp(12px,1.4vw,22px)!important;
    padding-right: clamp(12px,1.4vw,22px)!important;
    border-radius: .75rem!important;
}

@media (max-width: 1050px) {
    .site-header {
        width:calc(100% - 16px)!important;
        border-radius: .75rem!important;
        padding-left: 12px!important;
        padding-right: 12px!important
    }
}

@media (max-width: 760px) {
    .site-header {
        width:calc(100% - 12px)!important;
        border-radius: .75rem!important;
        top: 6px!important
    }
}

html,body {
    margin: 0!important;
    padding: 0!important
}

main:has(> section.snap-page),main:has(> section.news-section) {
    margin: 0!important;
    padding: 0!important;
    gap: 0!important
}

main>section.hero-section#top {
    position: relative!important;
    height: 100vh!important;
    height: 100svh!important;
    height: 100dvh!important;
    min-height: 100vh!important;
    min-height: 100svh!important;
    min-height: 100dvh!important;
    max-height: none!important;
    margin: 0!important;
    padding-top: clamp(90px,12vh,130px)!important;
    padding-bottom: clamp(46px,7vh,80px)!important;
    background-color: #080b13!important;
    overflow: hidden!important;
    isolation: isolate!important;
}

main>section.hero-section#top::before, main>section.hero-section#top::after {
    top: 0!important;
    bottom: -3px!important;
    height: auto!important
}

main>section.news-section#news {
    margin-top: 0!important
}

html {
    scroll-behavior: auto !important;
}

body:not(:has(main > section.hero-section#top)) main {
    padding-top: 104px;
}

body:not(:has(main > section.hero-section#top)) .site-header {
    transform: translateX(-50%) translateZ(0);
}

body:not(:has(main > section.hero-section#top)) .footer {
    margin-top: 30px;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    margin: 0;
    padding: clamp(100px, 14vh, 150px) clamp(20px, 5vw, 72px) 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vh, 34px);
    border: 0;
    background: transparent !important;
    text-align: center;
    overflow: hidden;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel::before {
    content: "";
    position: absolute;
    top: clamp(76px, 10vh, 112px);
    left: 50%;
    transform: translateX(-50%);
    width: min(78vw, 980px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(173,161,255,.55) 18%, rgba(200,211,255,.28) 50%, rgba(173,161,255,.55) 82%, transparent);
    box-shadow: 0 0 22px rgba(137,112,255,.12);
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel .footer-brand {
    justify-content: center;
    gap: 12px;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel .footer-links {
    max-width: 900px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px clamp(18px, 2.6vw, 34px);
    font-size: 12px;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel p, body:has(main > section.hero-section#top) > footer.landing-footer-panel > span {
    display: block;
    width: min(760px, 100%);
    margin: 0;
    text-align: center;
    line-height: 1.8;
    color: #69758d;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel > span {
    color: #8994aa;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel.section-ready {
    opacity: 1;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel.section-entering {
    animation: footer-panel-enter .28s ease-out both;
}

@keyframes footer-panel-enter {
    from {
        opacity: .75;
    }

    to {
        opacity: 1;
    }
}

body:has(main > section.hero-section#top) main > section.snap-page, body:has(main > section.hero-section#top) main > section.news-section {
    flex-shrink: 0;
    scroll-margin: 0 !important;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    body:has(main > section.hero-section#top) > footer.landing-footer-panel {
        height:auto;
        min-height: 100svh;
        max-height: none;
        padding: 100px 22px 40px;
    }

    body:not(:has(main > section.hero-section#top)) main {
        padding-top: 88px;
    }
}

@media (max-width: 600px) {
    body:has(main > section.hero-section#top) > footer.landing-footer-panel {
        gap:22px;
    }

    body:has(main > section.hero-section#top) > footer.landing-footer-panel .footer-links {
        gap: 12px 18px;
        font-size: 11px;
    }
}

.content-page,.products-page,.pricing-full,.dashboard-page,.admin-page,.auth-layout {
    width: min(100% - 40px, 1180px);
    margin-inline:auto;}

.content-page {
    padding-top: clamp(34px, 5vh, 62px);
    padding-bottom: clamp(54px, 7vh, 86px);
}

.inner-hero {
    max-width: 980px;
    margin: 0 auto clamp(28px, 4vw, 48px);
}

.inner-hero h1 {
    max-width: 900px;
    text-wrap: balance;
}

.inner-hero > p,.page-lead {
    max-width: 720px;
    line-height: 1.85;
}

.editorial-grid,.feature-detail-grid,.install-grid,.support-grid,.dashboard-grid {
    align-items: stretch;
    gap: clamp(14px, 2vw, 24px);
}

.editorial-card,.faq-item,.install-card,.product-page-card,.dash-card,.history-card,.settings-panel,.subscription-card,.ticket-item,.roadmap-item {
    border: 1px solid rgba(153,174,215,.14);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(19,27,43,.92),rgba(11,16,27,.94));
    box-shadow: 0 16px 42px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025);
}

.editorial-card,.install-card,.product-page-card,.dash-card,.history-card,.settings-panel,.subscription-card {
    padding: clamp(20px, 2.5vw, 30px);
}

.editorial-card,.install-card,.product-page-card,.dash-card,.subscription-card {
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.editorial-card:hover,.install-card:hover,.product-page-card:hover,.dash-card:hover,.subscription-card:hover {
    transform: translateY(-3px);
    border-color: rgba(160,139,255,.34);
    box-shadow: 0 20px 50px rgba(0,0,0,.2), 0 0 30px rgba(126,101,255,.05);
}

.feature-detail {
    gap: clamp(24px, 5vw, 64px);
    padding-block:clamp(32px, 5vw, 58px);}

.feature-detail h2,.feature-callout h2 {
    text-wrap: balance;
}

.feature-detail-grid {
    max-width: 1180px;
    margin-inline:auto;}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 980px;
    margin-inline:auto;}

.faq-item {
    padding: 20px 24px;
}

.roadmap-list {
    display: grid;
    gap: 14px;
}

.roadmap-item {
    padding: 22px;
}

.pricing-full {
    padding-bottom: clamp(50px, 7vh, 80px);
}

.pricing-grid {
    align-items: stretch;
}

.price-card {
    border-radius: 20px;
}

.price-card.featured-price {
    box-shadow: 0 24px 70px rgba(88,66,190,.15), inset 0 1px 0 rgba(255,255,255,.07);
}

.auth-layout {
    min-height: min(760px, calc(100svh - 140px));
    align-items: center;
    padding-block:clamp(28px, 5vh, 58px);}

.auth-form-wrap {
    border: 1px solid rgba(153,174,215,.16);
    border-radius: 22px;
    background: linear-gradient(145deg,rgba(18,25,40,.96),rgba(10,14,24,.97));
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.table-wrap {
    border-radius: 14px;
}

@media (max-width: 760px) {
    .content-page,.products-page,.pricing-full,.dashboard-page,.admin-page,.auth-layout {
        width:min(100% - 28px, 1180px);
    }

    .content-page {
        padding-top: 28px;
        padding-bottom: 48px;
    }

    .editorial-card,.install-card,.product-page-card,.dash-card,.history-card,.settings-panel,.subscription-card {
        padding: 18px;
    }

    .faq-item,.roadmap-item {
        padding: 17px;
    }

    .auth-layout {
        padding-block:25px 42px;}
}

.footer, body:has(main > section.hero-section#top) > footer.footer, body:has(main > section.hero-section#top) > footer.landing-footer-panel {
    position: relative !important;
    isolation: isolate;
    box-sizing: border-box !important;
    width: min(calc(100% - 40px), 1180px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 34px auto 0 !important;
    padding: 30px 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center !important;
    overflow: visible !important;
    animation: none !important;
    opacity: 1 !important;
}

.footer::before, body:has(main > section.hero-section#top) > footer.landing-footer-panel::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(78vw, 980px) !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(173,161,255,.5) 18%, rgba(200,211,255,.28) 50%, rgba(173,161,255,.5) 82%, transparent) !important;
    box-shadow: 0 0 22px rgba(137,112,255,.12) !important;
    pointer-events: none !important;
}

.footer .footer-brand {
    justify-content: center !important;
    text-align: left;
}

.footer .footer-links {
    max-width: 900px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px clamp(16px, 2.4vw, 30px) !important;
    font-size: 12px !important;
    text-align: center !important;
}

.footer p, .footer > span {
    display: block !important;
    width: min(760px, 100%) !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.8 !important;
}

.footer p {
    color: #69758d !important;
    font-size: 10px !important;
}

.footer > span {
    color: #8994aa !important;
    font-size: 10px !important;
}

body:has(main > section.hero-section#top) > footer.landing-footer-panel {
    flex-shrink: 1 !important;
}

@media (max-width: 760px) {
    .footer, body:has(main > section.hero-section#top) > footer.landing-footer-panel {
        width:min(calc(100% - 28px), 1180px) !important;
        margin-top: 26px !important;
        padding: 26px 0 22px !important;
        gap: 16px !important;
    }

    .footer .footer-links {
        gap: 12px 18px !important;
        font-size: 11px !important;
    }
}

.cms-products-grid {
    max-width: 1120px;
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap: 16px
}

.cms-product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg,#141b2a,#0e1420);
    min-width: 0
}

.cms-product-card>img,.cms-product-placeholder {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: radial-gradient(circle at 50% 40%,#8b70ff30,transparent 55%),#111725
}

.cms-product-placeholder {
    display: grid;
    place-items: center;
    color: #b7a6ff;
    font-size: 42px
}

.cms-product-content {
    padding: 19px
}

.cms-product-content h2 {
    margin: 12px 0 8px;
    font-size: 20px
}

.cms-product-content p {
    color: #96a3bb;
    font-size: 11px;
    line-height: 1.8;
    min-height: 55px
}

.cms-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px
}

.cms-product-bottom>b {
    font-size: 13px;
    color: #d7ceff
}

.cms-article-details {
    font-size: 11px;
    color: #b9c3d8
}

.cms-article-details summary {
    cursor: pointer;
    color: #b8a7ff;
    font-weight: 800;
    margin-top: 12px
}

.products-experience {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 54px 24px 32px;
    background: radial-gradient(ellipse at 76% 8%,rgba(98,76,218,.13),transparent 32%),radial-gradient(ellipse at 15% 42%,rgba(53,126,215,.07),transparent 34%)
}

.products-container {
    width: min(1160px,100%);
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.products-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(1px);
    opacity: .7
}

.products-orb-one {
    width: 380px;
    height: 380px;
    right: -220px;
    top: 250px;
    border: 1px solid #9b87ff20;
    box-shadow: 0 0 100px #7b63ff0c
}

.products-orb-two {
    width: 250px;
    height: 250px;
    left: -190px;
    top: 1050px;
    border: 1px solid #7abaff18
}

.products-hero {
    display: grid;
    grid-template-columns: 1fr .92fr;
    gap: 42px;
    align-items: center;
    min-height: 590px;
    padding: 22px 0 62px
}

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

.products-hero .eyebrow {
    gap: 10px;
    margin-bottom: 24px;
    font-size: 9px
}

.eyebrow-divider {
    height: 14px;
    width: 1px;
    background: #5d6380;
    margin: 0 4px
}

.products-hero h1,.showcase-heading h2,.capabilities-heading h2,.workflow-copy h2,.products-faq h2,.products-final-cta h2 {
    font-family: 'Space Grotesk',Manrope,sans-serif;
    font-size: clamp(44px,5.4vw,72px);
    line-height: .99;
    letter-spacing: -.07em;
    margin: 0;
    font-weight: 700
}

.products-hero h1 span,.showcase-heading h2 span,.capabilities-heading h2 span,.workflow-copy h2 span,.products-faq h2 span,.products-final-cta h2 span {
    background: linear-gradient(100deg,#ad9cff 4%,#8abaff 94%);
    color: transparent;
    background-clip: text
}

.products-lead {
    max-width: 500px;
    margin: 27px 0 0;
    color: #a2aec5;
    font-size: 14px;
    line-height: 1.95
}

.products-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px
}

.products-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #c9c1ff;
    font-size: 12px;
    font-weight: 800;
    transition: gap .2s,color .2s
}

.products-text-link:hover {
    gap: 15px;
    color: #fff
}

.products-trust-row {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 44px
}

.products-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.trust-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #8cbaff27;
    border-radius: 12px;
    background: #6b9cff10;
    color: #91bcff;
    font-size: 13px
}

.trust-icon-purple {
    background: #9a7bff12;
    border-color: #a58aff2b;
    color: #b4a0ff
}

.trust-icon-green {
    background: #56e0b010;
    border-color: #56e0b026;
    color: #69e5c0
}

.products-trust-item b,.products-trust-item small {
    display: block;
    white-space: nowrap
}

.products-trust-item b {
    font-size: 10px;
    color: #e7ebfa
}

.products-trust-item small {
    font-size: 9px;
    color: #7e8ba7;
    margin-top: 2px
}

.trust-separator {
    height: 29px;
    width: 1px;
    background: #ffffff13
}

.products-hero-art {
    position: relative;
    min-width: 0;
    min-height: 480px;
    display: grid;
    place-items: center;
    perspective: 1100px
}

.product-art-glow {
    position: absolute;
    width: 75%;
    height: 65%;
    border-radius: 50%;
    background: linear-gradient(120deg,#6d53ef2b,#57a7ff17);
    filter: blur(52px)
}

.product-art-ring {
    position: absolute;
    border: 1px solid #a7a0ff17;
    border-radius: 50%;
    transform: rotate(-22deg)
}

.ring-a {
    width: 110%;
    height: 70%
}

.ring-b {
    width: 95%;
    height: 95%;
    border-color: #7db8ff10;
    transform: rotate(32deg)
}

.product-main-visual {
    position: relative;
    width: 100%;
    max-width: 510px;
    padding: 13px;
    border: 1px solid #a6b8df2a;
    border-radius: 22px;
    background: linear-gradient(145deg,#171d31ed,#0b101df5);
    box-shadow: 0 38px 90px #0007,0 0 0 7px #ffffff04;
    transform: perspective(1100px) rotateY(-4deg) rotateX(1deg);
    transition: transform .18s ease;
    z-index: 2
}

.visual-topline,.visual-bottomline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 4px 5px 13px;
    color: #7e8aa7;
    font: 700 8px 'Space Grotesk';
    letter-spacing: .1em
}

.visual-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #f0efff
}

.visual-brand .brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 11px
}

.visual-live {
    color: #8ee9cd;
    font-size: 7px
}

.visual-live .live-dot {
    width: 5px;
    height: 5px;
    margin-right: 5px
}

.product-main-visual>img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    border: 1px solid #8297bd22;
    border-radius: 12px;
    background: #0b101a
}

.visual-bottomline {
    padding: 13px 4px 3px;
    font-size: 7px
}

.visual-bottomline span:last-child {
    color: #a79aff
}

.product-floating-tag {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid #b6c2e82b;
    border-radius: 14px;
    background: #11192aeb;
    box-shadow: 0 15px 42px #0005;
    backdrop-filter: blur(14px)
}

.product-floating-tag>i:first-child {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #8871ff20;
    color: #b5a5ff
}

.product-floating-tag b,.product-floating-tag small {
    display: block;
    white-space: nowrap
}

.product-floating-tag b {
    font-size: 10px
}

.product-floating-tag small {
    font-size: 9px;
    color: #8795b1;
    margin-top: 3px
}

.tag-top {
    top: 43px;
    left: -8px;
    animation: productFloat 5s ease-in-out infinite
}

.tag-bottom {
    bottom: 41px;
    right: -5px;
    animation: productFloat 5s ease-in-out infinite -2.3s
}

.floating-mini-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #56e0b014;
    color: #6ee7c2
}

.floating-arrow {
    font-size: 10px;
    color: #8c9ab7;
    margin-left: 5px
}

.visual-index {
    position: absolute;
    right: 0;
    bottom: 0;
    font: 700 9px 'Space Grotesk';
    letter-spacing: .16em;
    color: #8994af
}

.visual-index span {
    color: #5d6882;
    margin: 0 5px
}

.products-marquee {
    overflow: hidden;
    border-block:1px solid #aab9dc17;padding: 17px 0;
    margin: 0 calc((min(1160px,100vw - 48px) - 100vw + 48px)/2) 78px;
    background: #ffffff03
}

.marquee-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 30px;
    animation: productMarquee 36s linear infinite;
    color: #7f8ca9;
    font: 700 9px 'Space Grotesk';
    letter-spacing: .18em
}

.marquee-track span {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap
}

.marquee-track i {
    font-size: 12px;
    color: #a393ff
}

.marquee-track>b {
    font-size: 13px;
    color: #6e5bd6
}

.products-showcase,.product-capabilities-section,.products-workflow,.products-faq,.more-products {
    padding: 0 0 104px
}

.section-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8e9ab5;
    font: 700 9px 'Space Grotesk';
    letter-spacing: .15em
}

.section-kicker span:first-child {
    color: #a99aff
}

.kicker-line {
    height: 1px;
    width: clamp(35px,10vw,130px);
    background: linear-gradient(90deg,#9d8cff66,transparent)
}

.showcase-heading {
    display: grid;
    grid-template-columns: 1fr .72fr;
    align-items: end;
    gap: 45px;
    margin: 24px 0 35px
}

.showcase-heading h2,.capabilities-heading h2,.workflow-copy h2,.products-faq h2 {
    font-size: clamp(36px,4.2vw,54px);
    line-height: 1.06
}

.showcase-heading>p {
    max-width: 410px;
    margin: 0 0 5px;
    color: #909db7;
    font-size: 12px;
    line-height: 1.9
}

.product-feature-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    overflow: hidden;
    border: 1px solid #9aadd02b;
    border-radius: 26px;
    background: linear-gradient(125deg,#121a2a,#0d1320 60%,#11152a);
    box-shadow: 0 24px 80px #0002
}

.feature-card-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 18% 50%,#7760ff18,transparent 45%),radial-gradient(ellipse at 100% 0%,#5b9dff0c,transparent 40%);
    pointer-events: none
}

.feature-card-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    padding: 50px 35px
}

.feature-visual-grid {
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image: linear-gradient(#8195c015 1px,transparent 1px),linear-gradient(90deg,#8195c015 1px,transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(120deg,#000,transparent 85%)
}

.feature-device {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 10px;
    border: 1px solid #9aabce36;
    border-radius: 17px;
    background: #0a101c;
    box-shadow: 0 25px 60px #0007;
    transform: rotate(-2deg)
}

.device-chrome {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px 11px;
    color: #7887a5;
    font: 700 7px 'Space Grotesk';
    letter-spacing: .12em
}

.device-chrome>span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff7f8c
}

.device-chrome>span:nth-child(2) {
    background: #ffc16c
}

.device-chrome>span:nth-child(3) {
    background: #56e0b0
}

.device-chrome>b {
    margin-left: 7px;
    font-weight: 700
}

.device-chrome b i {
    font-style: normal;
    color: #9e8aff
}

.device-chrome>i {
    margin-left: auto
}

.feature-device img {
    display: block;
    width: 100%;
    max-height: 270px;
    object-fit: contain;
    border-radius: 8px;
    background: #0c1220
}

.device-status {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 4px 3px;
    font: 700 7px 'Space Grotesk';
    letter-spacing: .07em;
    color: #7f8ca8
}

.device-status span:first-child {
    color: #7ee4c4
}

.device-status .live-dot {
    width: 5px;
    height: 5px;
    margin-right: 4px
}

.device-status span:last-child {
    color: #a397ff
}

.visual-callout {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #b1bce42b;
    border-radius: 12px;
    background: #151b2bed;
    box-shadow: 0 12px 30px #0004;
    color: #a99aff;
    font-size: 12px
}

.visual-callout span {
    font-size: 8px;
    color: #98a5bf;
    line-height: 1.6
}

.visual-callout b {
    font-size: 9px;
    color: #f1f2ff
}

.callout-left {
    left: 20px;
    top: 66px
}

.callout-right {
    right: 12px;
    bottom: 64px;
    color: #6be0c1
}

.feature-card-info {
    position: relative;
    padding: 56px clamp(28px,4vw,55px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #a6b5d21a
}

.feature-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #b5a7ff;
    font: 700 8px 'Space Grotesk';
    letter-spacing: .12em
}

.feature-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #56e0b0;
    box-shadow: 0 0 10px #56e0b088
}

.feature-version {
    padding: 5px 7px;
    border: 1px solid #8e7aff2b;
    border-radius: 5px;
    color: #8592ad;
    font-size: 7px
}

.feature-card-info h3 {
    margin: 24px 0 15px;
    font: 700 clamp(34px,3.5vw,47px)/1.03 'Space Grotesk';
    letter-spacing: -.06em
}

.feature-card-info>p {
    margin: 0;
    color: #9aa7c0;
    font-size: 12px;
    line-height: 1.9
}

.product-mini-benefits {
    display: grid;
    gap: 11px;
    margin: 23px 0;
    color: #d3d9eb;
    font-size: 10px
}

.product-mini-benefits i {
    color: #63dfb8;
    margin-right: 8px
}

.feature-card-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px
}

.feature-card-buttons .btn {
    padding: 13px 15px;
    font-size: 10px
}

.feature-footnote {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    color: #71809e;
    font-size: 9px;
    line-height: 1.7
}

.feature-footnote i {
    color: #8f9ab3;
    margin-top: 3px
}

.product-capabilities-section {
    padding-top: 7px
}

.capabilities-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    margin: 24px 0 32px
}

.capabilities-heading p {
    max-width: 510px;
    color: #929fba;
    font-size: 12px;
    line-height: 1.85;
    margin: 16px 0 0
}

.capability-counter {
    font: 700 12px 'Space Grotesk';
    color: #7987a3;
    white-space: nowrap;
    padding-bottom: 7px
}

.capability-counter b {
    font-size: 34px;
    color: #b6a5ff;
    letter-spacing: -.06em
}

.capability-explorer {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 16px
}

.capability-tabs {
    display: grid;
    gap: 9px;
    align-content: start
}

.capability-tab {
    width: 100%;
    display: grid;
    grid-template-columns: 27px 36px 1fr 16px;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 18px 16px;
    border: 1px solid #a2b2d51b;
    border-radius: 15px;
    background: #10162580;
    color: #e9edfa;
    transition: background .25s,border-color .25s,transform .25s
}

.capability-tab:hover {
    transform: translateX(3px);
    border-color: #a394ff44
}

.capability-tab.active {
    border-color: #a28cff7a;
    background: linear-gradient(110deg,#7b64ff1b,#111a2b);
    box-shadow: inset 3px 0 #a08bff,0 12px 28px #0002
}

.capability-tab-number {
    font: 700 9px 'Space Grotesk';
    color: #677590
}

.capability-tab>i:nth-of-type(1) {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #8b75ff16;
    color: #b4a2ff;
    font-size: 14px
}

.capability-tab:nth-child(2)>i:nth-of-type(1) {
    background: #55deb315;
    color: #67e3bf
}

.capability-tab:nth-child(3)>i:nth-of-type(1) {
    background: #71b4ff15;
    color: #7bb8ff
}

.capability-tab b,.capability-tab small {
    display: block
}

.capability-tab b {
    font-size: 11px
}

.capability-tab small {
    font-size: 9px;
    color: #7f8ca7;
    margin-top: 5px
}

.tab-arrow {
    font-size: 10px;
    color: #6f7d99;
    transition: transform .2s
}

.capability-tab.active .tab-arrow {
    color: #b3a3ff;
    transform: rotate(45deg)
}

.capability-detail {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    padding: 29px 32px;
    border: 1px solid #9daed02a;
    border-radius: 19px;
    background: radial-gradient(ellipse at 100% 0%,#8771ff17,transparent 45%),linear-gradient(135deg,#141c2d,#0e1421)
}

.capability-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.detail-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #9c87ff35;
    border-radius: 14px;
    background: #8c75ff18;
    color: #b9a8ff;
    font-size: 17px
}

.detail-status {
    font: 700 7px 'Space Grotesk';
    letter-spacing: .12em;
    color: #7f8da8
}

.detail-status .live-dot {
    width: 5px;
    height: 5px;
    margin-right: 5px
}

.capability-detail h3 {
    font: 700 clamp(24px,2.5vw,32px)/1.1 'Space Grotesk';
    letter-spacing: -.05em;
    margin: 23px 0 12px
}

.capability-detail>p {
    max-width: 550px;
    color: #97a4be;
    font-size: 11px;
    line-height: 1.9;
    margin: 0
}

.detail-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin: 20px 0 23px
}

.detail-points span {
    font-size: 9px;
    color: #c5cde0
}

.detail-points i {
    color: #62dfb7;
    margin-right: 6px
}

.capability-progress {
    height: 2px;
    background: #ffffff0b
}

.capability-progress span {
    display: block;
    width: 33.333%;
    height: 100%;
    background: linear-gradient(90deg,#9279ff,#72b9ff);
    transition: width .3s
}

.capability-tab:nth-child(2).active~.capability-detail .capability-progress span {
    width: 66%
}

.detail-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    color: #65738f;
    font: 700 7px 'Space Grotesk';
    letter-spacing: .12em
}

.detail-bottom i {
    color: #a292ff
}

.products-workflow {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: center;
    padding-top: 6px
}

.workflow-copy h2 {
    margin-top: 25px
}

.workflow-copy>p {
    max-width: 410px;
    margin: 20px 0 26px;
    color: #929fba;
    font-size: 12px;
    line-height: 1.95
}

.workflow-steps {
    position: relative;
    display: grid;
    gap: 0
}

.workflow-line {
    position: absolute;
    left: 22px;
    top: 36px;
    bottom: 36px;
    width: 1px;
    background: linear-gradient(#a08cff70,#65ddbb25,transparent)
}

.workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: 42px 48px 1fr;
    gap: 15px;
    align-items: start;
    padding: 22px 0
}

.workflow-number {
    padding-top: 8px;
    color: #65728e;
    font: 700 10px 'Space Grotesk'
}

.workflow-step-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #9e8cff35;
    border-radius: 14px;
    background: #8e77ff13;
    color: #b4a3ff;
    z-index: 1
}

.workflow-step:nth-of-type(3) .workflow-step-icon {
    color: #66dfbc;
    border-color: #56e0b02b;
    background: #56e0b010
}

.workflow-step h3 {
    margin: 0 0 7px;
    font-size: 14px
}

.workflow-step p {
    max-width: 350px;
    margin: 0;
    color: #8997b1;
    font-size: 11px;
    line-height: 1.8
}

.workflow-tag {
    display: inline-block;
    margin-top: 10px;
    color: #9284d9;
    font: 700 7px 'Space Grotesk';
    letter-spacing: .15em
}

.products-faq {
    padding-top: 5px
}

.products-faq-layout {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 65px;
    margin-top: 25px
}

.products-faq h2 {
    margin-bottom: 17px
}

.products-faq-layout>div:first-child>p {
    font-size: 12px;
    color: #909db7;
    margin-bottom: 24px
}

.products-accordion {
    border-top: 1px solid #a2b1d51c
}

.products-accordion details {
    border-bottom: 1px solid #a2b1d51c
}

.products-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    list-style: none;
    padding: 19px 2px;
    color: #e5e9f7;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer
}

.products-accordion summary::-webkit-details-marker {
    display: none
}

.accordion-plus {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1px solid #a18cff3b;
    border-radius: 50%
}

.accordion-plus:before,.accordion-plus:after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 10px;
    height: 1px;
    background: #b9a8ff;
    transition: transform .2s
}

.accordion-plus:after {
    transform: rotate(90deg)
}

details[open] .accordion-plus:after {
    transform: rotate(0)
}

.products-accordion details p {
    max-width: 650px;
    margin: 0;
    padding: 0 35px 20px 2px;
    color: #8e9bb5;
    font-size: 11px;
    line-height: 1.9;
    animation: productFade .2s ease
}

.more-products {
    padding-bottom: 95px
}

.products-cms-grid {
    margin-top: 25px
}

.products-cms-grid .cms-product-card {
    overflow: hidden;
    border: 1px solid #a6b6d522;
    border-radius: 18px;
    background: #101625;
    transition: transform .25s,border-color .25s,box-shadow .25s
}

.products-cms-grid .cms-product-card:hover {
    transform: translateY(-5px);
    border-color: #a18cff60;
    box-shadow: 0 18px 45px #0003
}

.products-cms-grid .cms-product-card>img {
    width: 100%;
    height: 180px;
    object-fit: cover
}

.products-cms-grid .cms-product-content {
    padding: 20px
}

.products-cms-grid h3 {
    font-size: 16px;
    margin: 13px 0 7px
}

.products-cms-grid p {
    color: #929fba;
    font-size: 11px;
    line-height: 1.8
}

.products-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 25px;
    min-height: 320px;
    padding: 48px clamp(25px,5vw,65px);
    border: 1px solid #a293ff38;
    border-radius: 25px;
    background: radial-gradient(ellipse at 75% 40%,#8c70ff1c,transparent 45%),linear-gradient(120deg,#171b30,#101625 72%);
    margin-bottom: 32px
}

.cta-grid-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .23;
    background-image: linear-gradient(#8f9bc00c 1px,transparent 1px),linear-gradient(90deg,#8f9bc00c 1px,transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg,transparent,#000)
}

.cta-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid #a896ff4a;
    border-radius: 20px;
    background: #947dff19;
    color: #b8a8ff;
    font-size: 23px;
    box-shadow: 0 0 45px #8e74ff16
}

.cta-content {
    position: relative;
    z-index: 2
}

.cta-overline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9f91f4;
    font: 700 8px 'Space Grotesk';
    letter-spacing: .16em
}

.cta-overline .live-dot {
    width: 6px;
    height: 6px
}

.products-final-cta h2 {
    font-size: clamp(32px,4vw,49px);
    margin: 16px 0
}

.products-final-cta p {
    max-width: 500px;
    color: #929fba;
    font-size: 12px;
    line-height: 1.8;
    margin: 0
}

.products-final-cta .products-hero-actions {
    margin-top: 22px
}

.cta-orbit {
    position: absolute;
    border: 1px solid #a99aff19;
    border-radius: 50%;
    width: 340px;
    height: 340px;
    right: -90px;
    top: -90px;
    z-index: -1
}

.orbit-two {
    width: 240px;
    height: 240px;
    right: -35px;
    top: -40px;
    border-color: #73b7ff19
}

.cta-watermark {
    position: absolute;
    right: 6%;
    bottom: -100px;
    font: 700 290px/.9 'Space Grotesk';
    letter-spacing: -.15em;
    color: #ffffff04;
    pointer-events: none
}

.products-bottom-note {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 4px 2px 12px;
    color: #6f7c97;
    font-size: 9px
}

.products-bottom-note span {
    display: flex;
    align-items: center;
    gap: 8px
}

.products-bottom-note span i {
    color: #8c7aff
}

.products-bottom-note a {
    color: #a99aff;
    font-weight: 800;
    white-space: nowrap
}

.products-bottom-note a i {
    margin-left: 6px
}

.cms-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 18px
}

.cms-product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px
}

.cms-product-placeholder {
    height: 180px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at center,#8a70ff20,transparent 65%);
    font-size: 35px;
    color: #9e8aff
}

.products-page {
    max-width: 1200px;
    margin: auto
}

@keyframes productFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes productMarquee {
    to {
        transform: translateX(-50%)
    }
}

@keyframes productFade {
    from {
        opacity: 0;
        transform: translateY(-3px)
    }

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

@media (max-width: 900px) {
    .products-hero {
        grid-template-columns:1fr .8fr;
        gap: 20px
    }

    .products-trust-row {
        gap: 10px
    }

    .products-trust-item {
        gap: 7px
    }

    .trust-icon {
        width: 31px;
        height: 31px
    }

    .products-trust-item b {
        font-size: 9px
    }

    .products-trust-item small {
        font-size: 8px
    }

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

    .feature-card-visual {
        padding: 35px 20px;
        min-height: 390px
    }

    .feature-card-info {
        padding: 35px 27px
    }

    .feature-card-buttons .btn {
        white-space: normal
    }

    .products-workflow {
        gap: 35px
    }

    .products-faq-layout {
        gap: 35px
    }
}

@media (max-width: 680px) {
    .products-experience {
        padding:35px 17px 24px
    }

    .products-hero {
        grid-template-columns: 1fr;
        padding: 10px 0 38px;
        gap: 20px;
        min-height: 0
    }

    .products-hero h1 {
        font-size: clamp(43px,12vw,62px)
    }

    .products-lead {
        font-size: 12px;
        margin-top: 20px
    }

    .products-hero-art {
        min-height: 350px;
        margin: 0 6px
    }

    .product-main-visual {
        max-width: 470px
    }

    .product-main-visual>img {
        max-height: 255px
    }

    .tag-top {
        left: -3px;
        top: 16px
    }

    .tag-bottom {
        right: -4px;
        bottom: 18px
    }

    .product-floating-tag {
        padding: 9px 11px
    }

    .product-floating-tag b {
        font-size: 9px
    }

    .product-floating-tag small {
        font-size: 8px
    }

    .products-trust-row {
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 30px;
        gap: 12px
    }

    .trust-separator {
        display: none
    }

    .products-trust-item {
        flex: 1
    }

    .products-marquee {
        margin-bottom: 55px
    }

    .products-showcase,.product-capabilities-section,.products-workflow,.products-faq,.more-products {
        padding-bottom: 70px
    }

    .showcase-heading {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 24px
    }

    .showcase-heading h2,.capabilities-heading h2,.workflow-copy h2,.products-faq h2 {
        font-size: clamp(35px,9vw,47px)
    }

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

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

    .feature-card-visual {
        min-height: 320px;
        padding: 35px 20px
    }

    .feature-device {
        max-width: 430px
    }

    .feature-device img {
        max-height: 220px
    }

    .callout-left {
        left: 6px;
        top: 20px
    }

    .callout-right {
        right: 2px;
        bottom: 22px
    }

    .feature-card-info {
        padding: 30px 23px;
        border-left: 0;
        border-top: 1px solid #a6b5d21a
    }

    .feature-card-info h3 {
        font-size: 38px
    }

    .feature-card-buttons {
        display: grid;
        grid-template-columns: 1fr
    }

    .feature-card-buttons .btn {
        width: 100%
    }

    .capabilities-heading {
        align-items: start
    }

    .capability-counter {
        padding-top: 6px
    }

    .capability-counter b {
        font-size: 27px
    }

    .capability-explorer {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .capability-tabs {
        gap: 7px
    }

    .capability-tab {
        padding: 13px 12px;
        grid-template-columns: 22px 34px 1fr 14px;
        gap: 9px
    }

    .capability-tab>i:nth-of-type(1) {
        width: 32px;
        height: 32px
    }

    .capability-detail {
        padding: 23px 20px;
        min-height: 0
    }

    .capability-detail h3 {
        font-size: 27px
    }

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

    .products-workflow {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .workflow-step {
        grid-template-columns: 28px 42px 1fr;
        gap: 11px;
        padding: 18px 0
    }

    .workflow-step-icon {
        width: 40px;
        height: 40px
    }

    .workflow-line {
        left: 20px
    }

    .products-faq-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .products-accordion summary {
        font-size: 11px
    }

    .products-final-cta {
        display: block;
        padding: 29px 22px;
        min-height: 0
    }

    .cta-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        margin-bottom: 23px;
        font-size: 18px
    }

    .products-final-cta h2 {
        font-size: clamp(31px,8vw,42px)
    }

    .products-final-cta .products-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px
    }

    .products-final-cta .btn {
        width: 100%
    }

    .cta-watermark {
        font-size: 190px;
        right: 0;
        bottom: -60px
    }

    .products-bottom-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    .section-kicker {
        font-size: 8px;
        gap: 9px
    }

    .kicker-line {
        width: 25px
    }

    .products-cms-grid {
        grid-template-columns: 1fr
    }

    .products-cms-grid .cms-product-card>img {
        height: 200px
    }
}

@media (prefers-reduced-motion:reduce) {
    .marquee-track,.product-floating-tag {
        animation: none!important
    }

    .product-main-visual,.capability-tab,.products-cms-grid .cms-product-card {
        transition: none!important
    }
}

:root {
    --surface-soft: #101725;
    --accent-line: rgba(164,145,255,.22)
}

.nav a.active {
    color: #f5f2ff;
    background: linear-gradient(135deg,rgba(145,119,255,.18),rgba(103,166,255,.08));
    border: 1px solid rgba(167,146,255,.27);
    box-shadow: inset 0 0 18px rgba(139,112,255,.07)
}

.nav a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,#a18aff,#76b9ff)
}

.nav a {
    position: relative;
    transition: color .22s,background .22s,border-color .22s,transform .22s
}

.nav a:hover {
    transform: translateY(-1px)
}

.gradient-text {
    background: linear-gradient(100deg,#b5a6ff 0%,#83baff 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text
}

.products-marquee {
    position: relative;
    width: 100%;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin: 6px 0 clamp(65px,8vw,110px);
    padding: 22px 0;
    border-block:1px solid rgba(159,173,211,.10);background: linear-gradient(90deg,rgba(9,12,20,.4),rgba(9,12,20,.02) 22%,rgba(9,12,20,.02) 78%,rgba(9,12,20,.4));
    mask-image: linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%)
}

.marquee-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 36px;
    animation: rpMarquee 34s linear infinite;
    will-change: transform;
    padding-inline:22px}

.marquee-track>span {
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 800;
    color: #b8c2d8;
    white-space: nowrap
}

.marquee-track>span i {
    color: #a18aff;
    margin-right: 9px
}

.marquee-track>b {
    color: #8e7bff;
    font-size: 15px;
    opacity: .7
}

.products-marquee:hover .marquee-track {
    animation-play-state: paused
}

@keyframes rpMarquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.screenshot-placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    text-align: center;
    color: #9faed0;
    background: radial-gradient(ellipse at 50% 45%,rgba(131,108,255,.16),transparent 58%),linear-gradient(145deg,#111a2b,#0b111d);
    border: 1px dashed rgba(165,151,255,.34);
    border-radius: 15px;
    min-height: 220px;
    isolation: isolate
}

.screenshot-placeholder:before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(166,177,211,.09);
    border-radius: 10px;
    pointer-events: none
}

.screenshot-placeholder:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #8e78ff12;
    filter: blur(38px);
    z-index: -1
}

.screenshot-placeholder>i {
    font-size: 31px;
    color: #a99aff
}

.screenshot-placeholder>b {
    font-size: 10px;
    letter-spacing: .16em;
    color: #d3d9ec
}

.screenshot-placeholder>small {
    font-size: 10px;
    color: #7786a3
}

.product-shot-placeholder {
    width: 100%;
    height: clamp(270px,34vw,410px);
    border-radius: 15px;
    background: radial-gradient(ellipse at center,rgba(127,105,255,.13),transparent 58%),#0c1220
}

.feature-shot-placeholder {
    width: 100%;
    height: 100%;
    min-height: 270px;
    border-radius: 10px
}

.feature-device>.feature-shot-placeholder {
    min-height: 220px
}

.detail-art.screenshot-placeholder {
    min-height: 280px;
    padding: 22px;
    border-radius: 22px
}

.detail-art.screenshot-placeholder>span {
    position: relative;
    z-index: 1;
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: .2em;
    color: #9cabe0
}

.detail-art.screenshot-placeholder>i {
    font-size: 36px
}

.feature-detail .detail-art {
    transition: border-color .25s,transform .35s
}

.feature-detail:hover .detail-art {
    border-color: rgba(169,151,255,.55);
    transform: translateY(-3px)
}

.capability-progress {
    overflow: hidden;
    border-radius: 8px
}

.capability-progress span {
    transition: width .45s cubic-bezier(.2,.7,.2,1),background .3s
}

.research-complete {
    color: #70e3bc!important
}

.capability-progress:has(span[style*="100%"]) {
    background: rgba(96,225,184,.15)
}

.capability-progress:has(span[style*="100%"]) span {
    background: linear-gradient(90deg,#58d7ad,#8cf0d0);
    box-shadow: 0 0 18px rgba(88,215,173,.4)
}

.news-page {
    width: min(100% - 48px,1240px);
    max-width: 1240px
}

.news-page .eyebrow,.news-page h1,.news-page>.page-lead {
    text-align: left;
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0
}

.news-page h1 {
    max-width: 900px
}

.news-page>.page-lead {
    max-width: 760px;
    margin-bottom: 24px
}

.news-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px
}

.news-page-meta span,.faq-topic-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgba(158,173,209,.13);
    border-radius: 999px;
    background: rgba(17,24,39,.7);
    font-size: 10px;
    color: #aebbd3
}

.news-page-meta i,.faq-topic-row i {
    color: #a798ff
}

.news-cards-grid {
    position: relative;
    gap: 18px
}

.news-list-card {
    padding: 16px;
    border-radius: 19px;
    min-width: 0;
    transition: transform .25s,border-color .25s,box-shadow .25s
}

.news-list-card:hover {
    transform: translateY(-4px);
    border-color: rgba(164,145,255,.36);
    box-shadow: 0 18px 45px rgba(0,0,0,.2)
}

.news-list-card[hidden] {
    display: none!important
}

.news-list-card .news-cover {
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    background-color: #111a2b;
    background-image: radial-gradient(ellipse at 25% 20%,rgba(144,116,255,.3),transparent 55%),linear-gradient(135deg,#151d30,#0d1320);
    background-size: cover;
    border: 1px solid rgba(169,181,213,.08)
}

.news-list-card .news-cover i {
    font-size: 28px;
    color: #c0b3ff;
    align-self: center;
    margin: auto
}

.news-list-card .news-cover span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #e2e7f5;
    background: rgba(8,12,22,.7);
    padding: 7px 9px;
    border-radius: 7px
}

.news-list-card h2 {
    font-size: 18px;
    line-height: 1.35;
    margin: 12px 0 8px
}

.news-list-card>p {
    min-height: 70px
}

.news-more-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 65px 12px 8px;
    margin-top: -56px;
    z-index: 2
}

.news-more-wrap:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -35px;
    height: 130px;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(8,11,19,0),#080b13 76%);
    z-index: -1
}

.news-more-wrap.is-finished {
    padding-top: 25px;
    margin-top: 0
}

.news-more-wrap.is-finished:before {
    display: none
}

.news-more-wrap button {
    min-width: 210px;
    box-shadow: 0 12px 40px rgba(108,84,235,.18)
}

.news-more-caption {
    font-size: 10px;
    color: #73819d
}

.news-more-wrap button[hidden] {
    display: none
}

.news-bottom-panel,.faq-support-panel {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 70px;
    padding: clamp(22px,4vw,38px);
    border: 1px solid rgba(164,145,255,.2);
    border-radius: 22px;
    background: radial-gradient(ellipse at 85% 20%,rgba(124,103,255,.13),transparent 42%),linear-gradient(130deg,#111827,#0d1320)
}

.news-bottom-icon,.faq-support-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(164,145,255,.28);
    background: rgba(144,119,255,.12);
    color: #b6a6ff;
    font-size: 20px
}

.news-bottom-panel>div:nth-child(2),.faq-support-panel>div:nth-child(2) {
    flex: 1
}

.news-bottom-panel h2,.faq-support-panel h2 {
    font-size: clamp(22px,3vw,30px);
    margin: 8px 0
}

.news-bottom-panel p,.faq-support-panel p {
    font-size: 12px;
    line-height: 1.8;
    color: #95a2bc;
    margin: 0
}

.news-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.faq-page {
    width: min(100% - 48px,1080px);
    max-width: 1080px
}

.faq-page .eyebrow,.faq-page h1,.faq-page>.page-lead {
    text-align: left;
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0
}

.faq-page h1 {
    max-width: 800px
}

.faq-page>.page-lead {
    margin-bottom: 26px
}

.faq-search {
    display: flex;
    align-items: center;
    gap: 13px;
    width: min(100%,700px);
    padding: 0 15px;
    height: 58px;
    border: 1px solid rgba(160,174,211,.19);
    border-radius: 14px;
    background: #0e1522;
    box-shadow: 0 10px 30px rgba(0,0,0,.12)
}

.faq-search>i {
    color: #a99aff
}

.faq-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #eef1fb;
    font: inherit;
    font-size: 13px
}

.faq-search input::placeholder {
    color: #65738e
}

.faq-search kbd {
    font-size: 8px;
    letter-spacing: .1em;
    color: #7785a0;
    border: 1px solid #9ba8c326;
    padding: 5px 7px;
    border-radius: 999rem;
}

.faq-topic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0 27px
}

.faq-accordion {
    max-width: 900px;
    margin-left: 0;
    gap: 11px
}

.faq-accordion .faq-item {
    padding: 0;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(140deg,#111927,#0d1320);
    transition: border-color .2s,background .2s
}

.faq-accordion .faq-item:hover,.faq-accordion .faq-item[open] {
    border-color: rgba(164,145,255,.34)
}

.faq-accordion .faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px 21px;
    cursor: pointer
}

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

.faq-q-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(164,145,255,.2);
    border-radius: 12px;
    background: rgba(144,119,255,.1);
    color: #b6a6ff
}

.faq-accordion .faq-item summary>span:nth-child(2) {
    display: grid;
    gap: 5px;
    flex: 1
}

.faq-accordion .faq-item summary small {
    font-size: 8px;
    letter-spacing: .14em;
    color: #8e81db
}

.faq-accordion .faq-item summary b {
    font-size: 14px;
    color: #e8ecf8
}

.faq-toggle {
    color: #a99aff;
    font-size: 12px;
    transition: transform .2s
}

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

.faq-answer {
    padding: 0 22px 20px 78px;
    animation: productFade .22s ease
}

.faq-answer p {
    margin: 0 0 12px;
    color: #9ba8c0;
    font-size: 12px;
    line-height: 1.9
}

.faq-no-results {
    padding: 25px;
    color: #aeb9d0;
    border: 1px dashed rgba(160,174,211,.2);
    border-radius: 12px
}

.faq-support-panel {
    margin-top: 55px
}

.faq-support-panel .btn {
    white-space: nowrap
}

.pricing-hero {
    max-width: 1000px;
    padding-top: clamp(55px,7vw,90px);
    padding-bottom: 28px
}

.pricing-hero .eyebrow {
    color: #a99aff
}

.pricing-hero h1 {
    font-size: clamp(46px,6.5vw,76px);
    letter-spacing: -.065em
}

.pricing-hero>p {
    max-width: 690px;
    color: #a2aec4;
    font-size: 14px
}

.pricing-hero .billing-switch {
    margin-top: 28px
}

.pricing-grid.pricing-full {
    width: min(100% - 48px,1120px);
    gap: 18px;
    margin: 0 auto 30px
}

.price-card {
    position: relative;
    border-radius: 22px;
    padding: clamp(22px,3vw,32px);
    background: linear-gradient(145deg,rgba(20,29,46,.98),rgba(12,18,29,.98));
    border: 1px solid rgba(160,174,211,.15);
    box-shadow: 0 20px 55px rgba(0,0,0,.12);
    transition: transform .25s,border-color .25s,box-shadow .25s
}

.price-card:hover {
    transform: translateY(-5px);
    border-color: rgba(164,145,255,.38);
    box-shadow: 0 25px 60px rgba(0,0,0,.24)
}

.price-card.featured-price {
    border-color: rgba(164,145,255,.48);
    background: radial-gradient(ellipse at 50% 0,rgba(139,112,255,.18),transparent 45%),linear-gradient(145deg,#171b31,#0d1422);
    box-shadow: 0 20px 65px rgba(91,68,205,.12)
}

.price-card .plan-top {
    margin-bottom: 20px
}

.price-card .plan-symbol {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(164,145,255,.25);
    border-radius: 14px;
    background: rgba(144,119,255,.12);
    color: #c0b2ff;
    font-size: 23px
}

.price-card .plan-name {
    font-size: 10px;
    letter-spacing: .19em;
    color: #aab6ce
}

.price-card h3 {
    font-size: 22px;
    letter-spacing: -.035em
}

.price-card>p {
    min-height: 47px;
    color: #9ba8c0;
    font-size: 12px;
    line-height: 1.75
}

.price-card .price {
    margin: 23px 0;
    padding: 17px 0;
    border-block:1px solid rgba(160,174,211,.12);font-size: 14px;
    color: #b5a6ff
}

.price-card .tier-price,.price-card .price:not(:has(.tier-price)) {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.06em;
    color: #f2f3ff
}

.price-card .price small {
    font-size: 11px;
    font-weight: 500;
    color: #8996b0;
    letter-spacing: 0
}

.price-card ul {
    display: grid;
    gap: 13px;
    margin: 20px 0 26px;
    padding: 0;
    list-style: none
}

.price-card li {
    font-size: 11px;
    line-height: 1.55;
    color: #c3cce0
}

.price-card li:before {
    content: '✓';
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    border-radius: 50%;
    background: rgba(89,219,177,.12);
    color: #65ddb7;
    font-size: 10px
}

.price-card .full-btn {
    width: 100%;
    justify-content: center;
    min-height: 46px
}

.popular-pill {
    border-radius: 999px;
    padding: 8px 11px;
    background: linear-gradient(90deg,#8f75ff,#6b9dff);
    color: #fff;
    font-size: 8px;
    letter-spacing: .09em;
    box-shadow: 0 6px 25px rgba(119,100,255,.22)
}

.pricing-note {
    width: min(100% - 48px,1080px);
    margin: 0 auto 70px;
    border-radius: 16px;
    border: 1px solid rgba(160,174,211,.12);
    background: rgba(15,22,35,.72);
    padding: 22px
}

.pricing-note p {
    line-height: 1.8
}

.pricing-value-strip {
    width: min(100% - 48px,1120px);
    margin: 0 auto 32px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.pricing-value-strip article {
    padding: 18px;
    border: 1px solid rgba(160,174,211,.12);
    border-radius: 15px;
    background: rgba(16,23,36,.7)
}

.pricing-value-strip i {
    color: #a99aff;
    font-size: 17px
}

.pricing-value-strip b {
    display: block;
    margin: 11px 0 5px;
    font-size: 12px
}

.pricing-value-strip p {
    margin: 0;
    color: #8f9db7;
    font-size: 10px;
    line-height: 1.7
}

.content-page .eyebrow {
    justify-content: flex-start
}

.content-page h1 {
    text-align: left;
    margin-left: 0;
    margin-right: 0
}

.content-page .page-lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0
}

.feature-detail-grid {
    max-width: 1240px;
    width: calc(100% - 48px)
}

.feature-detail {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(28px,5vw,70px)
}

.feature-detail>div:last-child {
    min-width: 0
}

.feature-detail h2 {
    font-size: clamp(28px,3.3vw,42px)
}

.feature-callout {
    border-radius: 22px
}

.content-page,.inner-hero,.feature-detail-grid,.pricing-grid,.pricing-note {
    box-sizing: border-box
}

@media (max-width: 900px) {
    .news-bottom-panel,.faq-support-panel {
        align-items:flex-start;
        flex-wrap: wrap
    }

    .news-bottom-actions {
        width: 100%;
        padding-left: 74px
    }

    .faq-support-panel .btn {
        margin-left: 74px
    }

    .pricing-grid.pricing-full {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .pricing-grid.pricing-full .price-card:last-child {
        grid-column: 1/-1
    }

    .pricing-grid.pricing-full .price-card:last-child ul {
        min-height: 0
    }

    .feature-detail-grid {
        width: calc(100% - 40px)
    }
}

@media (max-width: 640px) {
    .products-marquee {
        margin:0 0 52px;
        padding: 17px 0
    }

    .marquee-track {
        gap: 24px;
        animation-duration: 27s
    }

    .marquee-track>span {
        font-size: 9px
    }

    .product-shot-placeholder {
        height: 255px;
        min-height: 255px
    }

    .feature-shot-placeholder {
        min-height: 220px
    }

    .feature-detail .detail-art.screenshot-placeholder {
        min-height: 220px
    }

    .news-page,.faq-page {
        width: calc(100% - 32px);
        padding-top: 40px;
        padding-bottom: 54px
    }

    .news-page h1,.faq-page h1 {
        font-size: clamp(36px,10vw,49px)
    }

    .news-page-meta {
        gap: 7px;
        margin-bottom: 20px
    }

    .news-page-meta span,.faq-topic-row span {
        font-size: 9px;
        padding: 8px 10px
    }

    .news-cards-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 13px
    }

    .news-list-card {
        padding: 12px
    }

    .news-list-card .news-cover {
        height: 180px
    }

    .news-list-card h2 {
        font-size: 17px
    }

    .news-list-card>p {
        min-height: 0
    }

    .news-more-wrap {
        padding-top: 52px;
        margin-top: -44px
    }

    .news-more-wrap button {
        width: 100%;
        max-width: 330px
    }

    .news-bottom-panel,.faq-support-panel {
        display: grid;
        grid-template-columns: 44px minmax(0,1fr);
        gap: 14px;
        margin-top: 44px;
        padding: 19px
    }

    .news-bottom-icon,.faq-support-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px
    }

    .news-bottom-panel h2,.faq-support-panel h2 {
        font-size: 22px
    }

    .news-bottom-actions,.faq-support-panel .btn {
        grid-column: 1/-1;
        width: 100%;
        margin: 0;
        padding-left: 0
    }

    .news-bottom-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .faq-search {
        height: 52px;
        padding-inline:12px}

    .faq-search kbd {
        display: none
    }

    .faq-topic-row {
        gap: 7px;
        margin: 15px 0 20px
    }

    .faq-accordion .faq-item summary {
        padding: 14px;
        gap: 11px
    }

    .faq-q-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 10px
    }

    .faq-accordion .faq-item summary b {
        font-size: 12px;
        line-height: 1.45
    }

    .faq-answer {
        padding: 0 15px 17px 61px
    }

    .faq-answer p {
        font-size: 11px
    }

    .pricing-hero {
        padding: 48px 16px 25px
    }

    .pricing-hero h1 {
        font-size: clamp(39px,11vw,56px)
    }

    .pricing-hero>p {
        font-size: 12px
    }

    .pricing-grid.pricing-full {
        width: calc(100% - 32px);
        grid-template-columns: minmax(0,1fr);
        gap: 13px
    }

    .pricing-grid.pricing-full .price-card:last-child {
        grid-column: auto
    }

    .price-card {
        padding: 22px
    }

    .price-card>p {
        min-height: 0
    }

    .pricing-value-strip {
        width: calc(100% - 32px);
        grid-template-columns: 1fr;
        margin-bottom: 22px
    }

    .pricing-value-strip article {
        display: grid;
        grid-template-columns: 25px 1fr;
        column-gap: 10px;
        padding: 15px
    }

    .pricing-value-strip i {
        grid-row: span 2
    }

    .pricing-value-strip b {
        margin: 0 0 4px
    }

    .pricing-note {
        width: calc(100% - 32px);
        padding: 17px;
        margin-bottom: 42px
    }

    .feature-detail-grid {
        width: calc(100% - 32px)
    }

    .feature-detail {
        grid-template-columns: minmax(0,1fr);
        gap: 19px;
        padding: 32px 0
    }

    .feature-detail.reverse .detail-art,.feature-detail.reverse>div:last-child {
        order: initial
    }

    .detail-art.screenshot-placeholder {
        min-height: 210px
    }

    .feature-detail h2 {
        font-size: 30px
    }

    .feature-detail p,.feature-detail li {
        font-size: 12px;
        line-height: 1.8
    }

    .feature-callout {
        margin: 12px 16px 30px;
        padding: 20px
    }

    .feature-callout h2 {
        font-size: 25px
    }

    .products-final-cta {
        border-radius: 18px
    }

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

@media (prefers-reduced-motion:reduce) {
    .marquee-track {
        animation: none!important
    }

    .news-list-card,.price-card,.feature-detail .detail-art,.nav a {
        transition: none!important;
        scroll-behavior: auto!important
    }
}

.site-header {
    border-radius: 3.5rem!important;
    background: rgba(12,16,28,.76)!important;
    border: 1px solid rgba(224,231,255,.15)!important;
    backdrop-filter: blur(22px) saturate(145%)!important;
    -webkit-backdrop-filter: blur(22px) saturate(145%)!important;
    box-shadow: 0 12px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.11)!important;
    transition: transform .38s cubic-bezier(.22,.75,.25,1),background .25s,border-color .25s,box-shadow .25s!important;
    will-change: transform!important;
    overflow: visible!important;
}

.site-header::before {
    border-radius: inherit!important;
    background: linear-gradient(110deg,rgba(255,255,255,.075),transparent 42%,rgba(165,145,255,.045))!important
}

.site-header .brand-mark {
    border-radius: 50%!important;
    flex: 0 0 auto
}

.site-header .nav {
    gap: clamp(4px,.55vw,9px)!important
}

.site-header .nav a {
    position: relative!important;
    display: inline-flex!important;
    align-items: center!important;
    gap: 8px!important;
    min-height: 38px!important;
    padding: 0 13px!important;
    border: 1px solid transparent!important;
    border-radius: 999px!important;
    background: transparent!important;
    box-shadow: none!important;
    color: #aeb8ce!important;
    transition: color .2s,background .2s,border-color .2s!important;
}

.site-header .nav a:hover {
    color: #fff!important;
    background: rgba(255,255,255,.055)!important
}

.site-header .nav a.active,.site-header .nav a.active:hover {
    color: #fff!important;
    background: rgba(255,255,255,.055)!important;
    border-color: rgba(255,255,255,.08)!important;
    box-shadow: none!important
}

.site-header .nav a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 4px;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #fff!important;
    opacity: .95
}

.site-header .nav-actions {
    gap: 10px!important
}

.site-header .nav-login,.site-header .nav-user {
    border-radius: 999px!important;
    padding: 9px 12px!important;
    transition: color .2s,background .2s!important
}

.site-header .nav-login:hover,.site-header .nav-user:hover {
    background: rgba(255,255,255,.055)!important
}

.site-header .btn {
    border-radius: 999px!important;
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.site-header .btn-primary {
    background: linear-gradient(115deg,#9a84ff 0%,#795cf2 52%,#6c9dff 100%)!important;
    box-shadow: 0 7px 24px rgba(115,87,237,.3),inset 0 1px 0 rgba(255,255,255,.22)!important
}

.site-header .btn-primary::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -60%;
    bottom: -60%;
    left: -65%;
    width: 42%;
    transform: skewX(-22deg);
    pointer-events: none;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.12) 22%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.14) 78%,transparent);
    filter: blur(.2px);
    animation: headerCtaShine 2.8s ease-in-out infinite;
}

.site-header .btn-primary>* {
    position: relative;
    z-index: 1
}

.site-header .btn-primary:hover {
    box-shadow: 0 10px 30px rgba(115,87,237,.43),inset 0 1px 0 rgba(255,255,255,.25)!important
}

@keyframes headerCtaShine {
    0%,18% {
        left: -65%;
        opacity: 0
    }

    28% {
        opacity: 1
    }

    58% {
        left: 135%;
        opacity: 1
    }

    72%,100% {
        left: 135%;
        opacity: 0
    }
}

.site-header.is-hidden {
    transform: translate(-50%,calc(-100% - 24px))!important;
    pointer-events: none
}

body:not(:has(main > section.hero-section#top)) .site-header.is-hidden {
    transform: translate(-50%,calc(-100% - 24px)) translateZ(0)!important
}

@media (max-width: 1050px) {
    .site-header {
        border-radius:3.5rem!important;
        width: calc(100% - 28px)!important;
        padding-left: 16px!important;
        padding-right: 16px!important
    }

    .site-header .nav a {
        padding-inline:9px!important;gap: 6px!important
    }
}

@media (max-width: 760px) {
    .site-header {
        width:calc(100% - 20px)!important;
        top: 7px!important;
        height: 56px!important;
        min-height: 56px!important;
        padding: 0 14px!important;
        border-radius: 3.5rem!important
    }

    .site-header .nav.open {
        border-radius: 1.5rem!important;
        background: rgba(12,16,28,.91)!important;
        border: 1px solid rgba(224,231,255,.15)!important;
        box-shadow: 0 18px 44px rgba(0,0,0,.3)!important
    }

    .site-header .nav.open a {
        justify-content: flex-start;
        width: 100%;
        border-radius: 999px!important;
        padding: 11px 14px!important;
        min-height: 42px!important
    }

    .site-header .nav a.active::after {
        left: auto;
        right: 14px;
        bottom: 50%;
        transform: translateY(50%)
    }

    .site-header .nav-actions {
        gap: 7px!important
    }

    .site-header .nav-actions .btn {
        padding: 9px 13px!important
    }
}

@media (prefers-reduced-motion:reduce) {
    .site-header,.site-header .btn-primary::after {
        transition: none!important;
        animation: none!important
    }

    .site-header.is-hidden {
        transform: translateX(-50%)!important
    }
}

.site-header .nav a.active::after, .site-header .nav a.active:hover::after {
    left: 50%!important;
    right: auto!important;
    bottom: 4px!important;
    transform: translateX(-50%)!important;
    margin: 0!important;
}

.site-header .nav-actions .btn-primary {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 7px!important;
    padding-inline:15px!important;letter-spacing: 0!important;
    background: linear-gradient(115deg,#a08bff 0%,#8064f5 48%,#6da8ff 100%)!important;
    box-shadow: 0 8px 24px rgba(115,87,237,.32),inset 0 1px 0 rgba(255,255,255,.28)!important;
    transition: transform .22s ease,box-shadow .22s ease,filter .22s ease!important;
}

.site-header .nav-actions .btn-primary:hover {
    transform: translateY(-1px)!important;
    filter: saturate(1.12) brightness(1.06)!important;
    box-shadow: 0 11px 30px rgba(115,87,237,.42),inset 0 1px 0 rgba(255,255,255,.32)!important;
}

.site-header .nav-actions .btn-primary i {
    margin: 0!important;
    font-size: 11px!important
}

.site-header .nav-login {
    display: inline-flex!important;
    align-items: center!important;
    gap: 7px!important
}

body.landing-section-lock {
    overflow-y: visible!important;
    overscroll-behavior-y: none!important
}

main:has(> section.hero-section#top) {
    display: block!important;
    width: 100%!important;
    max-width: none!important;
    margin: 0!important;
    padding: 0!important
}

main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
    width: 100%!important;
    max-width: none!important;
    margin: 0!important;
    min-height: calc(100svh - 82px)!important;
    height: calc(100svh - 82px)!important;
    flex: 0 0 calc(100svh - 82px)!important;
    box-sizing: border-box!important;
}

@media (max-width: 760px) {
    .site-header .nav a.active::after,.site-header .nav a.active:hover::after {
        left:50%!important;
        right: auto!important;
        bottom: 4px!important;
        transform: translateX(-50%)!important;
    }

    main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
        min-height: calc(100svh - 56px)!important;
        height: auto!important;
        max-height: none!important;
        flex: 0 0 auto!important;
        margin: 0!important;
    }
}

@media (prefers-reduced-motion:reduce) {
    .site-header .nav-actions .btn-primary {
        transition: none!important
    }
}

.pricing-hero {
    width: min(100% - 40px, 1120px);
    margin: clamp(28px,5vh,64px) auto 34px;
    padding: clamp(34px,5vw,62px) clamp(24px,5vw,64px);
    text-align: center;
    align-items: center;
    border: 1px solid rgba(190,199,255,.15);
    border-radius: 3.5rem;
    background: linear-gradient(135deg,rgba(26,31,52,.62),rgba(12,19,33,.48));
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 24px 70px rgba(0,0,0,.13);
}

.pricing-hero .eyebrow {
    justify-content: center;
    margin-bottom: 16px
}

.pricing-hero h1 {
    margin-inline:auto;margin-bottom: 18px
}

.pricing-hero>p {
    margin: 0 auto;
    max-width: 620px
}

.pricing-hero .billing-switch {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 25px auto 0;
    padding: 6px;
    gap: 5px;
    border: 1px solid rgba(191,201,235,.14);
    border-radius: 999px;
    background: rgba(5,9,18,.32);
    backdrop-filter: blur(12px)
}

.billing-option {
    border-radius: 999px;
    transition: background .25s ease,box-shadow .25s ease,transform .25s ease
}

.billing-option:hover {
    transform: translateY(-1px)
}

.billing-option.active {
    background: rgba(142,119,255,.28);
    box-shadow: inset 0 0 0 1px rgba(176,158,255,.22),0 6px 22px rgba(105,81,223,.12)
}

.pricing-value-strip {
    width: min(100% - 40px,1000px);
    margin: 0 auto clamp(24px,4vh,42px);
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    justify-content: center;
    align-items: stretch;
}

.pricing-value-strip article {
    min-width: 0;
    min-height: 0;
    padding: 22px 23px 24px;
    border: 1px solid rgba(183,196,235,.15);
    border-radius: 3.5rem;
    background: linear-gradient(145deg,rgba(28,35,57,.58),rgba(13,20,34,.42));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    transition: transform .28s ease,border-color .28s ease,background .28s ease;
}

.pricing-value-strip article:hover {
    transform: translateY(-4px);
    border-color: rgba(171,151,255,.34);
    background: linear-gradient(145deg,rgba(43,44,73,.66),rgba(16,25,42,.5))
}

.pricing-value-strip i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(170,151,255,.2);
    border-radius: 50%;
    background: rgba(143,119,255,.1);
    margin-bottom: 14px
}

.pricing-value-strip b {
    font-size: 13px;
    margin: 0 0 7px;
    letter-spacing: -.015em
}

.pricing-value-strip p {
    font-size: 11px;
    line-height: 1.75;
    color: #a4b0c7
}

.pricing-grid.pricing-full {
    width: min(100% - 40px,1120px);
    gap: 16px;
    margin: 0 auto 30px
}

.price-card {
    border-radius: 3.5rem;
    padding: clamp(25px,2.7vw,36px);
    background: linear-gradient(145deg,rgba(26,34,53,.66),rgba(12,19,31,.54));
    border: 1px solid rgba(183,196,235,.16);
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 20px 55px rgba(0,0,0,.12);
}

.price-card.featured-price {
    background: radial-gradient(ellipse at 50% 0,rgba(139,112,255,.19),transparent 48%),linear-gradient(145deg,rgba(36,35,65,.74),rgba(14,21,37,.61));
    border-color: rgba(177,157,255,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 25px 70px rgba(91,68,205,.16)
}

.price-card:hover {
    transform: translateY(-5px);
    border-color: rgba(177,157,255,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 26px 64px rgba(0,0,0,.24)
}

.price-card .plan-symbol {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background: rgba(144,119,255,.12)
}

.popular-pill {
    display: inline-flex;
    margin-bottom: 18px;
    border-radius: 999px;
    padding: 9px 14px
}

.price-card .price {
    border-color: rgba(190,201,235,.15)
}

.price-card .full-btn {
    border-radius: 999px;
    min-height: 50px;
    gap: 9px
}

.pricing-note {
    width: min(100% - 40px,1000px);
    margin: 0 auto clamp(48px,7vh,80px);
    padding: 25px 30px;
    display: flex;
    gap: 17px;
    align-items: flex-start;
    border-radius: 3.5rem;
    border: 1px solid rgba(183,196,235,.15);
    background: linear-gradient(135deg,rgba(26,34,53,.55),rgba(12,19,31,.4));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.pricing-note .note-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(143,119,255,.15);
    border: 1px solid rgba(170,151,255,.2)
}

.pricing-note b {
    display: block;
    margin: 2px 0 7px;
    font-size: 13px
}

.pricing-note p {
    margin: 0;
    color: #9eabc2;
    font-size: 11px;
    line-height: 1.8
}

@media (max-width: 900px) {
    .pricing-hero {
        width:calc(100% - 32px)
    }

    .pricing-value-strip {
        width: calc(100% - 32px);
        gap: 10px
    }

    .pricing-value-strip article {
        padding: 20px 18px;
        border-radius: 3.5rem
    }

    .pricing-grid.pricing-full {
        width: calc(100% - 32px)
    }

    .price-card {
        border-radius: 3.5rem
    }

    .pricing-note {
        width: calc(100% - 32px)
    }
}

@media (max-width: 640px) {
    .pricing-hero {
        width:calc(100% - 24px);
        margin: 20px auto 22px;
        padding: 34px 20px;
        border-radius: 3.5rem
    }

    .pricing-hero .eyebrow {
        font-size: 9px;
        letter-spacing: .15em
    }

    .pricing-hero h1 {
        font-size: clamp(37px,10.5vw,52px)
    }

    .pricing-hero>p {
        font-size: 12px;
        line-height: 1.8
    }

    .pricing-hero .billing-switch {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 4px;
        padding: 5px
    }

    .billing-option {
        min-width: 0;
        padding: 10px 5px;
        font-size: 11px
    }

    .billing-option small {
        display: block;
        font-size: 8px
    }

    .pricing-value-strip {
        width: calc(100% - 24px);
        grid-template-columns: minmax(0,1fr);
        gap: 10px;
        margin-bottom: 22px
    }

    .pricing-value-strip article {
        border-radius: 3.5rem;
        padding: 20px 23px;
        display: grid;
        grid-template-columns: 42px minmax(0,1fr);
        column-gap: 13px;
        align-items: start
    }

    .pricing-value-strip i {
        grid-row: span 2;
        margin: 0;
        width: 40px;
        height: 40px
    }

    .pricing-value-strip b {
        margin: 1px 0 5px;
        font-size: 13px
    }

    .pricing-value-strip p {
        grid-column: 2;
        margin: 0;
        font-size: 11px
    }

    .pricing-grid.pricing-full {
        width: calc(100% - 24px);
        gap: 12px
    }

    .price-card {
        border-radius: 3.5rem;
        padding: 25px 23px
    }

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

    .price-card .price {
        margin: 19px 0;
        padding: 15px 0
    }

    .price-card ul {
        gap: 11px
    }

    .pricing-note {
        width: calc(100% - 24px);
        border-radius: 3.5rem;
        padding: 23px;
        margin-bottom: 40px;
        gap: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    .pricing-value-strip article,.billing-option,.price-card {
        transition: none!important
    }
}

html {
    scroll-snap-type: y mandatory!important;
    scroll-padding-top: 72px
}

main>section.snap-page {
    box-sizing: border-box;
    height: calc(100svh - 72px);
    min-height: calc(100svh - 72px);
    max-height: none;
    margin-block:0!important;scroll-snap-align: start;
    scroll-snap-stop:always;}

main>section.snap-page:first-child {
    margin-top: 0!important
}

main>section.snap-page:last-of-type {
    margin-bottom: 0!important
}

main>section.snap-page>* {
    box-sizing: border-box
}

body.landing-section-lock {
    overscroll-behavior-y: contain
}

.footer {
    margin-top: 0!important
}

@media (max-width: 760px) {
    html {
        scroll-snap-type:y proximity!important;
        scroll-padding-top: 70px
    }

    main>section.snap-page {
        height: calc(100svh - 70px);
        min-height: calc(100svh - 70px);
        scroll-snap-stop:normal}
}

@media (max-height: 650px) and (min-width:761px) {
    main>section.snap-page {
        height:auto;
        min-height: calc(100svh - 72px);
        padding-top: 28px;
        padding-bottom: 28px
    }
}

body:has(main > section.hero-section#top) .site-header .brand-mark {
    box-shadow: 0 0 0 1px rgba(164,143,255,.32),0 0 18px rgba(124,92,255,.5),0 0 38px rgba(124,92,255,.22)!important;
}

.site-header .nav a {
    position: relative!important
}

.site-header .nav a.active::after,.site-header .nav a.active:hover::after {
    left: 50%!important;
    right: auto!important;
    width: 4px!important;
    height: 4px!important;
    bottom: 3px!important;
    transform: translateX(-50%)!important;
    margin: 0!important;
}

.scroll-cue .scroll-mouse {
    animation: scrollCueBob 1.6s ease-in-out infinite,scrollCueGlow 1.6s ease-in-out infinite
}

.scroll-cue>b {
    display: inline-block;
    animation: scrollArrowBob 1.1s ease-in-out infinite
}

@keyframes scrollCueBob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(5px)
    }
}

@keyframes scrollCueGlow {
    0%,100% {
        box-shadow: 0 0 0 rgba(160,138,255,0)
    }

    50% {
        box-shadow: 0 0 14px rgba(160,138,255,.28)
    }
}

@keyframes scrollArrowBob {
    0%,100% {
        transform: translateY(0);
        opacity: .65
    }

    50% {
        transform: translateY(4px);
        opacity: 1
    }
}

.pricing-value-strip {
    width: min(calc(100% - 48px),1120px)!important;
    grid-template-columns: 1fr!important;
    justify-items: center!important;
    gap: 12px!important
}

.pricing-value-strip article {
    width: min(100%,354px)!important;
    border-radius: 3.5rem!important;
    padding: 20px 24px!important
}

.pricing-grid.pricing-full {
    width: min(calc(100% - 48px),1120px)!important
}

.price-card .card-billing-switch {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
    margin: 18px 0 4px;
    padding: 4px;
    border: 1px solid rgba(183,196,235,.12);
    border-radius: 999px;
    background: rgba(5,9,18,.38)
}

.price-card .card-billing-switch .billing-option {
    min-width: 0;
    padding: 9px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #aab5ce;
    font-size: 10px;
    white-space: nowrap
}

.price-card .card-billing-switch .billing-option.active {
    background: rgba(142,119,255,.25);
    color: #fff;
    border-color: rgba(176,158,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08)
}

main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
    height: 100svh!important;
    min-height: 100svh!important;
    max-height: none!important;
    flex-basis: 100svh!important;
    margin-block:0!important;scroll-margin: 0!important;
}

@media (max-width: 760px) {
    .pricing-value-strip {
        width:calc(100% - 32px)!important
    }

    .pricing-value-strip article {
        width: min(100%,354px)!important
    }

    .pricing-grid.pricing-full {
        width: calc(100% - 32px)!important
    }

    .price-card .card-billing-switch .billing-option {
        font-size: 10px;
        padding: 8px 2px
    }

    main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
        height: auto!important;
        min-height: 100svh!important;
        flex-basis: auto!important
    }
}

@media (prefers-reduced-motion:reduce) {
    .scroll-cue .scroll-mouse,.scroll-cue>b {
        animation: none!important
    }
}

.scroll-cue .scroll-mouse {
    animation: none!important;
    position: relative
}

.scroll-cue .scroll-mouse:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 3px;
    height: 6px;
    border-radius: 3px;
    background: #dcd5ff;
    transform: translateX(-50%);
    animation: mouseWheelOnly 1.25s ease-in-out infinite
}

.scroll-cue>b {
    animation: none!important
}

@keyframes mouseWheelOnly {
    0%,100% {
        opacity: .25;
        transform: translate(-50%,0)
    }

    45% {
        opacity: 1;
        transform: translate(-50%,6px)
    }

    70% {
        opacity: .8;
        transform: translate(-50%,6px)
    }
}

.site-header .nav a.active::after,.site-header .nav a.active:hover::after {
    left: 50%!important;
    right: auto!important;
    bottom: 3px!important;
    top: auto!important;
    transform: translateX(-50%)!important;
    width: 4px!important;
    height: 4px!important;
    margin: 0!important
}

.site-header .nav a.active {
    position: relative!important
}

.pricing-value-strip {
    width: min(calc(100% - 48px),1120px)!important;
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    justify-items: stretch!important;
    gap: 16px!important;
    margin: 0 auto 28px!important
}

.pricing-value-strip article {
    width: 100%!important;
    min-width: 0!important;
    background: rgba(255,255,255,.025)!important;
    border: 1px solid rgba(180,190,225,.16)!important;
    backdrop-filter: blur(18px);
    box-shadow: none!important;
    border-radius: 3.5rem!important
}

.pricing-value-strip article:hover {
    background: rgba(255,255,255,.055)!important
}

.price-card,.price-card.featured-price {
    background: rgba(255,255,255,.025)!important;
    border-color: rgba(180,190,225,.16)!important;
    backdrop-filter: blur(18px);
    box-shadow: none!important;
    border-radius: 3.5rem!important
}

.price-card:hover {
    background: rgba(255,255,255,.05)!important;
    box-shadow: 0 12px 32px rgba(0,0,0,.12)!important
}

.pricing-note {
    background: rgba(255,255,255,.025)!important;
    border-color: rgba(180,190,225,.16)!important;
    backdrop-filter: blur(18px);
    box-shadow: none!important;
    border-radius: 3.5rem!important
}

.pricing-grid.pricing-full {
    width: min(calc(100% - 48px),1120px)!important
}

@media (min-width: 761px) {
    main:has(> section.hero-section#top) {
        display:block!important;
        gap: 0!important
    }

    main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
        height: 100svh!important;
        min-height: 100svh!important;
        max-height: 100svh!important;
        margin: 0!important;
        padding-block:clamp(20px,3vh,44px)!important;overflow: hidden!important;
        box-sizing: border-box!important
    }
}

@media (max-width: 760px) {
    .pricing-value-strip {
        width:calc(100% - 32px)!important;
        grid-template-columns: repeat(2,minmax(0,1fr))!important;
        gap: 10px!important
    }

    .pricing-value-strip article {
        width: 100%!important;
        padding: 20px 18px!important;
        border-radius: 2rem!important
    }

    .pricing-grid.pricing-full {
        width: calc(100% - 32px)!important
    }

    .pricing-value-strip b {
        font-size: 12px
    }

    .pricing-value-strip p {
        font-size: 10px
    }

    .site-header .nav a.active::after,.site-header .nav a.active:hover::after {
        left: 50%!important;
        right: auto!important;
        top: auto!important;
        bottom: 3px!important;
        transform: translateX(-50%)!important
    }
}

@media (max-width: 420px) {
    .pricing-value-strip {
        grid-template-columns:minmax(0,1fr)!important
    }
}

@media (prefers-reduced-motion:reduce) {
    .scroll-cue .scroll-mouse:after {
        animation: none!important
    }
}

.site-header .nav a.active::after, .site-header .nav a.active:hover::after {
    content: none!important;
    display: none!important;
}

.pricing-value-strip {
    margin: 28px auto 32px!important;
}

.pricing-value-strip article, .price-card, .price-card.featured-price, .pricing-note {
    background: rgba(14,20,33,.48)!important;
    border-color: rgba(180,190,225,.19)!important;
    backdrop-filter: blur(22px) saturate(125%)!important;
    -webkit-backdrop-filter: blur(22px) saturate(125%)!important;
}

.price-card.featured-price {
    isolation: isolate;
    overflow: hidden;
    background: rgba(14,20,33,.48)!important;
}

.price-card.featured-price::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: -105px;
    left: 8%;
    right: 8%;
    height: 245px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 0%,rgba(139,112,255,.58) 0%,rgba(124,92,255,.3) 32%,rgba(124,92,255,.1) 58%,transparent 76%);
    filter: blur(27px);
    opacity: .95
}

.price-card.featured-price::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(159,133,255,.24);
}

html {
    scroll-snap-type: none!important;
    scroll-padding-top: 0!important;
}

main:has(> section.hero-section#top) {
    display: block!important;
    gap: 0!important;
}

main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
    height: calc(100svh - 82px)!important;
    min-height: calc(100svh - 82px)!important;
    max-height: none!important;
    min-block-size: calc(100svh - 82px)!important;
    margin: 0!important;
    scroll-snap-align: none!important;
    scroll-margin: 0!important;
    box-sizing: border-box!important;
}

main:has(> section.hero-section#top)>section.snap-page+section.snap-page {
    margin-top: 0!important;
}

@media (max-width: 900px) {
    main:has(> section.hero-section#top)>section.snap-page, main:has(> section.hero-section#top)>section.news-section {
        height:auto!important;
        min-height: calc(100svh - 72px)!important;
        max-height: none!important;
        overflow: visible!important;
        padding-top: 38px!important;
        padding-bottom: 38px!important;
    }
}

@media (max-width: 640px) {
    .pricing-value-strip {
        margin:24px auto 28px!important;
    }
}

.price-card.featured-price::before {
    z-index: 0!important
}

.price-card.featured-price>* {
    position: relative;
    z-index: 1
}

.price-card.featured-price::after {
    z-index: 2
}

.price-card {
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(205,210,255,.17);
    background: linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018) 48%,rgba(110,91,190,.055));
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 20px 55px rgba(0,0,0,.22);
    transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.price-card:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(120deg,rgba(255,255,255,.11),transparent 32%,transparent 70%,rgba(153,129,255,.07));
}

.price-card:hover {
    transform: translateY(-6px);
    border-color: rgba(183,168,255,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 24px 65px rgba(0,0,0,.3);
}

.featured-price {
    border-color: rgba(166,133,255,.72);
    background: linear-gradient(180deg,rgba(128,81,255,.23) 0%,rgba(98,66,190,.12) 34%,rgba(255,255,255,.035) 72%),rgba(14,15,32,.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 0 45px rgba(133,82,255,.2),0 24px 70px rgba(0,0,0,.28);
}

.featured-price:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -22%;
    left: -10%;
    right: -10%;
    height: 58%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%,rgba(157,106,255,.52),rgba(127,79,255,.2) 34%,transparent 72%);
    filter: blur(20px);
}

.featured-price .plan-symbol {
    background: linear-gradient(145deg,rgba(173,143,255,.35),rgba(114,82,231,.12));
    box-shadow: 0 0 25px rgba(151,112,255,.23);
}

.price-card .billing-switch {
    padding: 4px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(3,6,15,.28);
}

.price-card .billing-option {
    border-radius: 8px;
    transition: background .2s,box-shadow .2s;
}

.price-card .billing-option.active {
    background: rgba(139,112,255,.28);
    box-shadow: inset 0 0 0 1px rgba(185,165,255,.25);
}

.price-card .price {
    font-size: clamp(34px,3vw,42px);
    text-shadow: 0 0 28px rgba(161,137,255,.12);
}

.price-card li {
    line-height: 1.55;
}

.price-card li:before {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(86,224,176,.12);
    font-size: 10px;
}

.price-card .full-btn {
    min-height: 46px;
    border-radius: 12px;
}

.is-home .brand-mark {
    box-shadow: 0 0 0 1px rgba(188,166,255,.28),0 0 22px rgba(132,100,255,.4),0 0 42px rgba(132,100,255,.2),inset 0 1px 0 rgba(255,255,255,.3);
}

.scroll-mouse:after {
    animation: scroll-wheel-small 1.5s ease-in-out infinite;
}

@keyframes scroll-wheel-small {
    0% {
        transform: translateY(0);
        opacity: 1
    }

    75%,100% {
        transform: translateY(4px);
        opacity: 0
    }
}

.news-cards-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.news-list-card[hidden] {
    display: none!important;
}

.news-more-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 65px;
    margin-top: -38px;
}

.news-more-wrap:not(.is-finished):before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: -45px;
    height: 115px;
    pointer-events: none;
    background: linear-gradient(180deg,transparent,rgba(8,11,19,.82) 56%,#080b13);
}

.news-more-wrap .btn,.news-more-caption {
    position: relative;
    z-index: 1;
}

.news-more-caption {
    font-size: 10px;
    color: #74819b;
}

.news-more-wrap.is-finished {
    padding-top: 22px;
    margin-top: 0;
}

@media (max-width: 900px) {
    .news-cards-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    html {
        scroll-snap-type:none!important;
        scroll-behavior: smooth;
    }

    body {
        overflow-x: hidden;
    }

    .snap-page {
        height: auto!important;
        min-height: calc(100svh - 70px);
        overflow: visible;
        scroll-snap-align: none!important;
    }

    .hero-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-bottom: 72px;
    }

    .hero-copy {
        max-width: none;
    }

    .hero-visual {
        width: 100%;
        margin-top: 8px;
    }

    .scroll-cue {
        bottom: 13px;
    }

    .news-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .news-more-wrap {
        padding-top: 55px;
    }

    .price-card:hover {
        transform: none;
    }
}

.subscription-overview,.history-card,.history-empty {
    border: 1px solid rgba(205,210,255,.14)!important;
    background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018))!important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 18px 55px rgba(0,0,0,.16);
}

.snap-page,.news-section {
    margin-block:0;}

@media (min-width: 761px) {
    .snap-page {
        min-height:calc(100svh - 82px);
    }
}

@media (min-width: 761px) {
    main:has(> section.hero-section#top) {
        display:block !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        height: calc(100vh - 82px) !important;
        height: calc(100dvh - 82px) !important;
        min-height: calc(100vh - 82px) !important;
        min-height: calc(100dvh - 82px) !important;
        max-height: none !important;
        margin: 0 !important;
        margin-block:0 !important;box-sizing: border-box !important;
        scroll-snap-align: none !important;
        scroll-margin: 0 !important;
    }
}

.scroll-mouse:after {
    animation: scroll-wheel-tiny 1.5s ease-in-out infinite !important;
}

@keyframes scroll-wheel-tiny {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    75%, 100% {
        transform: translateY(2px);
        opacity: 0;
    }
}

@media (min-width: 761px) {
    html:has(main > section.hero-section#top), body:has(main > section.hero-section#top) {
        margin:0 !important;
        padding: 0 !important;
    }

    main:has(> section.hero-section#top) {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        margin-block:0 !important;border: 0 !important;
    }
}

.scroll-cue .scroll-mouse:after {
    animation: mouseWheelGentle 1.35s ease-in-out infinite !important;
}

@keyframes mouseWheelGentle {
    0%, 100% {
        opacity: .25;
        transform: translate(-50%, 0);
    }

    45% {
        opacity: 1;
        transform: translate(-50%, 3px);
    }

    70% {
        opacity: .8;
        transform: translate(-50%, 3px);
    }
}

@media (min-width: 761px) {
    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        height:calc(100dvh + 1px) !important;
        min-height: calc(100dvh + 1px) !important;
        max-height: none !important;
        margin-block:0 -1px !important;padding-block:clamp(20px, 3vh, 44px) !important;box-sizing: border-box !important;
        background-color: #070910;
    }

    main:has(> section.hero-section#top) > section.snap-page + section.snap-page, main:has(> section.hero-section#top) > section.news-section + section.snap-page {
        margin-top: -1px !important;
    }
}

.scroll-cue .scroll-mouse:after {
    animation: mouseWheelExtraGentle 1.35s ease-in-out infinite !important;
}

@keyframes mouseWheelExtraGentle {
    0%, 100% {
        opacity: .22;
        transform: translate(-50%, 0);
    }

    45% {
        opacity: .9;
        transform: translate(-50%, 2px);
    }

    70% {
        opacity: .65;
        transform: translate(-50%, 2px);
    }
}

@media (min-width: 761px) {
    html:has(main > section.hero-section#top), body:has(main > section.hero-section#top) {
        margin:0 !important;
        padding: 0 !important;
        background: #070910 !important;
        scroll-padding: 0 !important;
    }

    body:has(main > section.hero-section#top) > main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        background: #070910 !important;
        overflow: visible !important;
    }

    body:has(main > section.hero-section#top) > main > section.snap-page, body:has(main > section.hero-section#top) > main > section.news-section {
        position: relative !important;
        height: calc(100dvh + 3px) !important;
        min-height: calc(100dvh + 3px) !important;
        max-height: none !important;
        margin: 0 0 -3px 0 !important;
        padding-top: clamp(20px, 3vh, 44px) !important;
        padding-bottom: clamp(20px, 3vh, 44px) !important;
        box-sizing: border-box !important;
        background-color: #070910 !important;
        scroll-margin: 0 !important;
    }
}

:root {
    --layout-gutter: clamp(16px, 3.2vw, 56px);
    --layout-gap: clamp(16px, 2.4vw, 36px);
}

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

html {
    width: 100%;
    max-width: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

img, video, canvas, svg {
    max-width: 100%;
}

img {
    height: auto;
}

main {
    width: 100%;
    min-width: 0;
}

main:has(> section.hero-section#top) {
    display: block !important;
    width: 100%;
}

main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline:0 !important;padding-inline:var(--layout-gutter) !important;overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    scroll-snap-align: none !important;
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--layout-gap);
}

.hero-copy, .hero-visual, .product-preview-tilt, .news-head, .news-track, .section-heading, .benefit-grid, .product-feature-card, .workflow-copy, .workflow-visual, .pricing-grid, .cta-section > * {
    min-width: 0;
}

.hero-copy {
    width: 100%;
    max-width: 620px;
}

.hero-copy h1 {
    font-size: clamp(36px, 4.5vw, 76px);
    line-height: .99;
    overflow-wrap: anywhere;
}

.hero-lead, .section-heading > p, .workflow-copy > p {
    font-size: clamp(14px, 1.05vw, 18px);
}

.hero-visual {
    width: 100%;
    max-width: 100%;
}

.product-preview-tilt {
    display: block;
    width: 100%;
}

.product-preview-tilt img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.benefit-grid, .pricing-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(min(100%, 230px), 1fr));
    gap: var(--layout-gap);
}

.benefit-card, .price-card, .news-card {
    min-width: 0;
}

.product-feature-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--layout-gap);
}

.product-feature-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.workflow-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--layout-gap);
    align-items: center;
}

.news-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-gap);
}

.news-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-card-copy h3 {
    font-size: clamp(16px, 1.35vw, 22px);
    overflow-wrap: anywhere;
}

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

input, select, textarea, button {
    max-width: 100%;
}

@media (min-width: 1500px) {
    :root {
        --layout-gutter:clamp(56px, calc((100vw - 1380px) / 2), 180px);
    }

    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        padding-inline:var(--layout-gutter) !important;}
}

@media (max-width: 1050px) {
    .hero-section {
        grid-template-columns:minmax(0, 1fr) minmax(0, .95fr);
    }

    .news-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-feature-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .benefit-grid, .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    :root {
        --layout-gutter:clamp(16px, 4.5vw, 28px);
        --layout-gap: 22px;
    }

    html {
        scroll-snap-type: none !important;
        scroll-behavior: smooth;
    }

    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-block:clamp(56px, 9vh, 88px) !important;overflow: visible !important;
    }

    .hero-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 28px;
    }

    .hero-copy {
        max-width: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(38px, 9.5vw, 64px);
    }

    .hero-visual {
        max-width: 760px;
        margin-inline:auto;}

    .scroll-cue {
        display: none;
    }

    .news-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .news-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .news-card-copy {
        padding: clamp(12px, 3vw, 20px);
    }

    .news-card-copy p {
        font-size: 13px;
    }

    .product-feature-card, .workflow-section {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-feature-image {
        order: 0;
    }

    .workflow-visual {
        min-height: clamp(240px, 60vw, 400px);
    }

    .benefit-grid, .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-card:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .section-footer, .pricing-bottom {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cta-section {
        padding-inline:var(--layout-gutter);}
}

@media (max-width: 520px) {
    .news-track, .benefit-grid, .pricing-grid {
        grid-template-columns:minmax(0, 1fr);
    }

    .news-card-copy h3 {
        font-size: 18px;
    }

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

    .hero-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .hero-proof {
        flex-wrap: wrap;
    }

    .carousel-controls {
        flex-wrap: wrap;
    }

    .section-heading h2, .cta-section h2, .workflow-copy h2 {
        font-size: clamp(30px, 9vw, 46px);
        overflow-wrap: anywhere;
    }

    .product-feature-copy {
        padding: 20px;
    }

    .price-card {
        padding: clamp(20px, 6vw, 30px);
    }

    .footer-links {
        flex-wrap: wrap;
    }
}

@media (max-height: 700px) and (min-width: 761px) {
    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        min-height:100dvh !important;
        height: auto !important;
        padding-block:24px !important;}

    .hero-section {
        padding-block:24px !important;}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

:root {
    --layout-gutter: clamp(16px, 4vw, 64px);
}

html, body {
    max-width: 100%;
    overflow-x: clip;
}

main:has(> section.hero-section#top) {
    width: 100%;
    margin: 0;
    padding: 0;
}

main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

main:has(> section.hero-section#top) > section.snap-page + section.snap-page, main:has(> section.hero-section#top) > section.news-section + section.snap-page {
    margin-top: -10px;
}

.hero-section, .benefits-section, .suite-section, .workflow-section, .pricing-teaser, .cta-section {
    justify-content: center;
    align-content: center;
    justify-items: center;
}

.hero-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px,3vw,48px);
    padding-inline:var(--layout-gutter);}

.hero-copy {
    justify-self: center;
    width: min(100%,600px);
}

.hero-visual {
    justify-self: center;
    width: min(100%,760px);
}

.product-preview-tilt {
    width: 100%;
}

.benefits-section, .suite-section, .workflow-section, .pricing-teaser, .cta-section {
    padding-inline:var(--layout-gutter);}

.section-heading {
    width: min(100%,760px);
    margin-inline:auto;}

.benefit-grid {
    width: min(100%,1240px);
    margin-inline:auto;gap: clamp(12px,1.4vw,22px);
}

.benefit-card, .price-card, .product-feature-card, .news-card {
    border: 1px solid rgba(175,190,235,.16);
    background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 55px rgba(0,0,0,.16);
}

.benefit-card {
    min-height: 0;
    padding: clamp(18px,1.7vw,28px);
    border-radius: 22px;
}

.benefit-card h3 {
    font-size: clamp(16px,1.15vw,21px);
    line-height: 1.3;
}

.benefit-card p {
    font-size: clamp(12px,.85vw,14px);
    line-height: 1.7;
}

.product-feature-card {
    width: min(100%,1240px);
    margin-inline:auto;padding: clamp(18px,2.2vw,34px);
    border-radius: 26px;
    gap: clamp(20px,3vw,44px);
}

.product-feature-image img {
    max-height: min(44vh,440px);
    object-fit: contain;
}

.workflow-section {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(24px,4vw,60px);
}

.workflow-copy {
    width: min(100%,600px);
    justify-self: center;
}

.workflow-visual {
    width: min(100%,540px);
    justify-self: center;
}

.pricing-grid {
    width: min(100%,1180px);
    margin-inline:auto;gap: clamp(12px,1.6vw,24px);
    align-items: stretch;
}

.price-card {
    position: relative;
    min-width: 0;
    height: 100%;
    padding: clamp(18px,1.8vw,28px);
    border-radius: 24px;
    overflow: visible;
}

.price-card h3 {
    font-size: clamp(18px,1.45vw,24px);
    line-height: 1.25;
    margin: 14px 0 8px;
}

.price-card > p {
    font-size: clamp(12px,.9vw,14px);
    line-height: 1.65;
}

.price-card ul {
    padding-left: 18px;
    margin: 14px 0 18px;
}

.price-card li {
    margin: 5px 0;
    font-size: clamp(12px,.86vw,14px);
}

.price-card .price {
    margin: 12px 0;
    font-size: clamp(27px,2.4vw,38px);
}

.popular-pill {
    z-index: 3;
    top: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
    padding: 7px 12px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    border: 1px solid rgba(197,179,255,.5);
    background: linear-gradient(110deg,rgba(153,120,255,.95),rgba(91,112,255,.9));
    box-shadow: 0 6px 24px rgba(125,92,255,.35);
}

.featured-price {
    border-color: rgba(153,120,255,.55);
    box-shadow: 0 0 0 1px rgba(153,120,255,.12),0 20px 65px rgba(91,65,190,.18);
}

.pricing-bottom, .section-footer {
    width: min(100%,1180px);
    margin-inline:auto;}

.news-section {
    padding-inline:var(--layout-gutter);}

.news-head, .news-track {
    width: min(100%,1240px);
    margin-inline:auto;}

.auth-layout {
    position: relative;
    isolation: isolate;
    width: min(100% - 40px,1120px);
    margin: clamp(28px,6vh,70px) auto;
    padding: clamp(20px,3vw,42px);
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.8fr);
    gap: clamp(20px,3vw,44px);
    align-items: center;
    border: 1px solid rgba(175,190,235,.16);
    border-radius: 30px;
    background: linear-gradient(135deg,rgba(19,25,43,.82),rgba(10,14,25,.92));
    box-shadow: 0 30px 100px rgba(0,0,0,.28);
    overflow: hidden;
}

.auth-promo, .auth-form-wrap {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.auth-promo {
    min-height: 430px;
    padding: clamp(12px,2vw,28px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.auth-promo h1 {
    font-size: clamp(34px,3.5vw,58px);
}

.auth-perks {
    display: grid;
    gap: 10px;
}

.auth-perks span {
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(180,190,230,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
}

.auth-character-stage {
    position: absolute;
    z-index: -1;
    right: -2%;
    bottom: 0;
    width: 54%;
    height: 92%;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.auth-character-placeholder {
    width: 74%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 48% 48% 10% 10%;
    background: radial-gradient(ellipse at 50% 28%,rgba(145,121,255,.2),transparent 62%);
    color: rgba(185,170,255,.25);
    font: 800 clamp(50px,8vw,120px) 'Space Grotesk',sans-serif;
}

.auth-character-fade {
    position: absolute;
    inset: 45% -5% 0;
    background: linear-gradient(180deg,transparent 0%,rgba(12,16,29,.55) 60%,#0b101b 100%);
}

.auth-form-wrap {
    padding: clamp(20px,2.5vw,36px);
    border: 1px solid rgba(175,190,235,.13);
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(20px);
}

.auth-unavailable {
    padding: 22px 0 4px;
}

.auth-unavailable-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 15px;
    color: white;
    font-size: 24px;
    background: linear-gradient(140deg,#a18cff,#6347db);
    box-shadow: 0 8px 30px #7656ed45;
}

.auth-unavailable h2 {
    margin: 10px 0;
    font-size: clamp(22px,2vw,30px);
    line-height: 1.2;
}

.auth-unavailable p {
    margin: 0 0 24px;
    color: var(--muted);
}

@media (min-width: 1600px) {
    .hero-section {
        grid-template-columns:minmax(0,560px) minmax(0,680px);
    }
}

@media (max-width: 1100px) {
    .hero-section {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }

    .hero-copy h1 {
        font-size: clamp(38px,4.5vw,62px);
    }

    .pricing-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .auth-layout {
        width: min(100% - 32px,900px);
    }
}

@media (max-width: 820px) {
    .hero-section {
        grid-template-columns:1fr;
        text-align: center;
        padding-block:36px 64px;}

    .hero-copy {
        margin-inline:auto;}

    .hero-copy .eyebrow, .hero-actions, .hero-proof {
        justify-content: center;
    }

    .hero-lead {
        margin-inline:auto;}

    .hero-visual {
        max-width: 620px;
    }

    .workflow-section {
        grid-template-columns: 1fr;
    }

    .workflow-visual {
        min-height: 300px;
    }

    .pricing-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .auth-layout {
        grid-template-columns: 1fr;
        width: min(100% - 28px,620px);
        padding: 16px;
    }

    .auth-promo {
        min-height: 300px;
    }

    .auth-character-stage {
        width: 42%;
        opacity: .7;
    }
}

@media (max-width: 520px) {
    .pricing-grid, .benefit-grid {
        grid-template-columns:minmax(0,1fr);
    }

    .price-card {
        padding: 22px;
    }

    .popular-pill {
        top: 10px;
        right: 10px;
        font-size: 9px;
    }

    .auth-layout {
        margin: 18px auto;
        border-radius: 22px;
    }

    .auth-promo {
        min-height: 260px;
        padding: 8px;
    }

    .auth-form-wrap {
        padding: 20px;
    }

    .auth-character-stage {
        width: 50%;
        opacity: .45;
    }

    .section-heading h2 {
        font-size: clamp(29px,8vw,40px);
    }
}

@media (max-height: 760px) and (min-width:821px) {
    main:has(> section.hero-section#top) > section.snap-page, main:has(> section.hero-section#top) > section.news-section {
        height:auto;
        min-height: calc(100dvh - 82px);
        padding-block:28px;}

    .hero-section {
        padding-block:28px 54px;}
}

:root {
    --layout-gutter: clamp(16px, 4vw, 68px);
    --content-width: 1220px;
    --glass-border: rgba(175, 190, 235, .17);
    --glass-fill: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-snap-type: none !important;
}

html {
    scroll-padding-top: 72px;
}

body {
    min-width: 320px;
}

main {
    width: 100%;
    min-width: 0;
}

.site-header {
    padding-inline:var(--layout-gutter) !important;gap: clamp(12px, 2vw, 28px);
}

.site-header > *, .nav, .nav-actions {
    min-width: 0;
}

.footer {
    margin-top: 0 !important;
}

body.is-home main {
    display: block;
}

body.is-home main > section, body.is-home main > section.snap-page, body.is-home main > section.news-section {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(42px, 6vw, 82px) var(--layout-gutter) !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    scroll-snap-stop:normal !important;box-sizing: border-box;
}

body.is-home main > section + section {
    margin-top: 0 !important;
}

body.is-home main > .hero-section#top {
    display: grid;
    grid-template-columns: minmax(0, 550px) minmax(0, 630px);
    justify-content: center;
    align-items: center;
    gap: clamp(22px, 3.5vw, 52px);
    padding-top: clamp(38px, 5vw, 68px) !important;
    padding-bottom: clamp(44px, 5.5vw, 76px) !important;
}

.hero-copy {
    width: 100%;
    max-width: 550px;
    justify-self: center;
}

.hero-copy h1 {
    font-size: clamp(38px, 4.7vw, 68px);
    text-wrap: balance;
}

.hero-lead {
    max-width: 490px;
}

.hero-visual {
    width: 100%;
    max-width: 630px;
    justify-self: center;
    min-width: 0;
}

.product-preview-tilt {
    display: block;
    width: 100%;
    transform: none;
}

.product-preview-tilt:hover {
    transform: translateY(-3px);
}

.product-preview-tilt img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.scroll-cue {
    display: none !important;
}

body.is-home .news-section .news-head, body.is-home .news-section .news-track {
    width: min(100%, var(--content-width));
    margin-inline:auto;}

body.is-home .news-head {
    align-items: end;
    gap: 20px;
}

body.is-home .news-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.is-home .news-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

body.is-home .benefits-section, body.is-home .suite-section, body.is-home .workflow-section, body.is-home .pricing-teaser, body.is-home .cta-section {
    justify-content: center;
    align-content: center;
}

body.is-home .section-heading {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 0 auto clamp(24px, 3vw, 38px);
}

body.is-home .section-heading h2, body.is-home .workflow-copy h2, body.is-home .cta-section h2 {
    text-wrap: balance;
}

body.is-home .benefit-grid {
    display: grid;
    width: min(100%, var(--content-width));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    margin: 0 auto;
}

.benefit-card, .suite-card, .news-card, .price-card, .product-feature-card, .workflow-visual, .editorial-card, .faq-item, .install-card, .product-page-card, .dash-card, .history-card, .settings-panel, .subscription-card, .ticket-item, .roadmap-item, .pricing-value-strip article, .pricing-note {
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
    box-shadow: 0 18px 54px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.035);
}

.benefit-card, .suite-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0 !important;
    height: 100%;
    padding: clamp(18px, 1.8vw, 26px);
    border-radius: 22px;
}

.benefit-card p, .suite-card p {
    font-size: 12px;
    line-height: 1.75;
}

.benefit-card > a, .suite-card .btn {
    margin-top: auto;
}

body.is-home .suite-section .section-heading, body.is-home .suite-section .product-feature-card, body.is-home .workflow-section .workflow-copy, body.is-home .workflow-section .workflow-visual, body.is-home .pricing-teaser .pricing-grid, body.is-home .pricing-teaser .pricing-bottom {
    width: min(100%, var(--content-width));
    margin-inline:auto;}

body.is-home .product-feature-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    padding: clamp(18px, 2.3vw, 32px);
    border-radius: 28px;
}

body.is-home .product-feature-image img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}

body.is-home .workflow-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
}

body.is-home .workflow-copy {
    max-width: 590px;
    justify-self: center;
}

body.is-home .workflow-visual {
    max-width: 540px;
    justify-self: center;
}

body.is-home .pricing-teaser .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

body.is-home .price-card {
    min-width: 0;
}

body.is-home .cta-section {
    text-align: center;
    align-items: center;
}

body.is-home .cta-section > * {
    max-width: min(100%, 780px);
}

body.is-home .cta-section .eyebrow, body.is-home .cta-section .hero-actions, body.is-home .cta-section .cta-meta {
    justify-content: center;
    margin-inline:auto;}

.content-page, .products-page, .dashboard-page, .admin-page {
    width: min(calc(100% - (var(--layout-gutter) * 2)), var(--content-width)) !important;
    max-width: var(--content-width);
    margin-inline:auto !important;}

.inner-hero {
    width: min(100%, 980px);
    margin-inline:auto;}

.editorial-grid, .feature-detail-grid, .install-grid, .support-grid, .dashboard-grid {
    width: 100%;
    min-width: 0;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 16px;
}

.history-card, .dash-card, .settings-panel {
    border-radius: 22px;
}

.subscription-overview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: clamp(20px, 3vw, 32px);
}

.subscription-overview > div {
    min-width: 0;
}

.history-card {
    padding: clamp(18px, 2.5vw, 28px);
}

.history-heading {
    gap: 16px;
}

.inline-note {
    width: min(100%, var(--content-width));
    margin: 16px auto 0;
}

.pricing-hero {
    width: min(calc(100% - (var(--layout-gutter) * 2)), 1050px);
    margin-inline:auto;padding-top: clamp(38px, 5vw, 68px);
}

.pricing-grid.pricing-full {
    display: grid;
    width: min(calc(100% - (var(--layout-gutter) * 2)), 1160px) !important;
    max-width: 1160px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(12px, 1.6vw, 22px);
    margin: 0 auto clamp(24px, 3vw, 38px) !important;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto !important;
    min-height: 0;
    padding: clamp(20px, 2.1vw, 30px);
    overflow: hidden;
    border-radius: 26px;
    background: radial-gradient(ellipse at 15% 0%, rgba(125,153,255,.10), transparent 44%), linear-gradient(145deg, rgba(22,31,50,.82), rgba(10,15,27,.73));
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(164,145,255,.42);
    box-shadow: 0 24px 64px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.06);
}

.price-card.featured-price {
    border-color: rgba(153,120,255,.64);
    background: radial-gradient(ellipse at 50% 0%, rgba(139,112,255,.22), transparent 58%), linear-gradient(145deg, rgba(30,28,57,.90), rgba(11,16,29,.83));
    box-shadow: 0 0 0 1px rgba(153,120,255,.09), 0 24px 68px rgba(91,65,190,.15);
}

.price-card .plan-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.price-card .plan-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(185,176,255,.26);
    background: linear-gradient(145deg, rgba(132,108,255,.24), rgba(77,119,255,.10));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(98,81,211,.12);
}

.price-card .plan-name {
    font-size: 11px;
    letter-spacing: .16em;
    color: #c1c9e5;
}

.price-card h3 {
    margin: 18px 0 7px;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.25;
}

.price-card > p {
    color: #a6b1c8;
    font-size: 12px;
    line-height: 1.7;
    min-height: 0;
}

.price-card .price {
    margin: 14px 0 12px;
    font-size: clamp(29px, 2.5vw, 38px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.04em;
}

.price-card .price small {
    font-size: 11px;
    font-weight: 600;
    color: #9daac3;
    letter-spacing: 0;
}

.price-card ul {
    flex: 1;
    margin: 12px 0 22px;
    padding-left: 17px;
    color: #b3bfd5;
}

.price-card li {
    margin: 7px 0;
    font-size: 12px;
    line-height: 1.55;
}

.price-card li::marker {
    color: #a797ff;
}

.price-card .subscribe-form {
    margin-top: auto;
}

.price-card .full-btn {
    min-height: 44px;
    border-radius: 14px;
}

.price-card .popular-pill {
    top: 15px;
    right: 15px;
    max-width: calc(100% - 30px);
    padding: 7px 10px;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .06em;
    border-radius: 999px;
    white-space: normal;
    text-align: center;
}

.billing-switch, .card-billing-switch, .pricing-hero .billing-switch {
    border-radius: 3.5rem !important;
    border: 1px solid rgba(183,196,235,.18) !important;
    padding: 5px !important;
    gap: 4px !important;
    background: rgba(3,8,20,.5) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.13);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}

.price-card .card-billing-switch {
    display: grid !important;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 0 2px !important;
}

.billing-option, .price-card .billing-option, .card-billing-switch .billing-option {
    min-width: 0;
    border-radius: 3.5rem !important;
    padding: 10px clamp(4px, .7vw, 12px) !important;
    line-height: 1.2;
    font-size: 11px;
    background: transparent;
    white-space: nowrap;
}

.billing-option.active, .price-card .billing-option.active, .card-billing-switch .billing-option.active {
    color: #fff;
    background: linear-gradient(110deg, rgba(126,100,255,.95), rgba(74,125,255,.86)) !important;
    box-shadow: 0 5px 20px rgba(100,91,255,.25), inset 0 1px 0 rgba(255,255,255,.2);
}

.pricing-value-strip {
    width: min(calc(100% - (var(--layout-gutter) * 2)), 1160px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 auto 24px !important;
}

.pricing-value-strip article {
    min-width: 0;
    width: 100% !important;
    padding: 20px !important;
    border-radius: 22px !important;
}

.pricing-note {
    width: min(calc(100% - (var(--layout-gutter) * 2)), 1160px);
    margin: 0 auto 48px !important;
    padding: clamp(18px, 2.4vw, 28px);
    border-radius: 22px;
}

.auth-layout {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .78fr);
    align-items: stretch;
    gap: clamp(18px, 2.5vw, 34px);
    width: min(calc(100% - (var(--layout-gutter) * 2)), 1180px) !important;
    max-width: 1180px;
    min-height: 600px;
    margin: clamp(24px, 5vh, 56px) auto !important;
    padding: clamp(14px, 1.7vw, 22px);
    border: 1px solid rgba(175,190,235,.18);
    border-radius: clamp(24px, 3vw, 34px);
    background: radial-gradient(ellipse at 15% 0%, rgba(111,103,255,.12), transparent 46%), linear-gradient(145deg, rgba(17,25,43,.9), rgba(7,11,21,.94));
    box-shadow: 0 28px 90px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
}

.auth-promo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    min-height: 560px;
    padding: clamp(20px, 3vw, 42px);
    overflow: hidden;
    border-radius: 26px;
    background: radial-gradient(ellipse at 75% 46%, rgba(87,102,255,.12), transparent 58%);
}

.auth-promo-content {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(100%, 570px);
}

.auth-promo .eyebrow {
    margin-bottom: 18px;
    font-size: 9px;
}

.auth-emblem {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 24px;
    padding: 9px 13px;
    border: 1px solid rgba(171,158,255,.27);
    border-radius: 14px;
    background: rgba(139,112,255,.09);
    color: #e9e8ff;
    font: 800 16px 'Space Grotesk', sans-serif;
    letter-spacing: -.06em;
    box-shadow: 0 10px 28px rgba(91,71,190,.14), inset 0 1px 0 rgba(255,255,255,.08);
}

.auth-emblem b {
    color: #84b8ff;
    font-size: 19px;
}

.auth-promo h1 {
    max-width: 580px;
    margin: 0 0 18px;
    font-size: clamp(34px, 3.5vw, 57px);
    line-height: 1.08;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.auth-promo h1 span {
    background: linear-gradient(100deg,#a898ff,#75b7ff);
    color: transparent;
    background-clip: text;
}

.auth-promo-content > p {
    max-width: 480px;
    color: #a2aec5;
    font-size: 13px;
    line-height: 1.85;
}

.auth-perks {
    display: grid;
    gap: 9px;
    margin-top: 26px;
    color: #bdc8df;
}

.auth-perks span {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 9px 13px;
    border: 1px solid rgba(180,190,230,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 11px;
}

.auth-perks i {
    display: inline-grid;
    place-items: center;
    width: 20px;
    color: #a8a0ff;
}

.auth-art-caption {
    position: absolute;
    bottom: -58px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #75839f;
    font-size: 8px;
    letter-spacing: .18em;
}

.auth-art-caption > span {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg,#987cff,transparent);
}

.auth-art-caption b {
    margin-left: auto;
    font-weight: 600;
    color: #5e6c87;
}

.auth-character-stage {
    position: absolute;
    z-index: 0;
    right: -4%;
    bottom: 0;
    width: 68%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.auth-character-placeholder {
    position: absolute;
    inset: 8% -4% 0 6%;
    background: radial-gradient(ellipse at 52% 20%, rgba(173,184,255,.23) 0 5%, transparent 5.8%), radial-gradient(ellipse at 52% 40%, rgba(103,120,220,.15) 0 15%, transparent 16%), radial-gradient(ellipse at 52% 77%, rgba(64,81,144,.13) 0 32%, transparent 33%), radial-gradient(ellipse at 50% 53%, rgba(109,89,255,.16), transparent 62%);
    filter: blur(1px);
    opacity: .85;
}

.auth-character-fade {
    position: absolute;
    z-index: 1;
    inset: 36% -2% 0;
    background: linear-gradient(180deg, transparent 0%, rgba(10,14,25,.22) 30%, rgba(10,14,25,.75) 72%, #090d17 100%);
}

.auth-form-wrap {
    position: relative;
    z-index: 2;
    align-self: center;
    min-width: 0;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(175,190,235,.17);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    backdrop-filter: blur(24px) saturate(130%);
    box-shadow: 0 20px 65px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}

.auth-form-head {
    margin-bottom: 25px;
}

.auth-form-head .form-kicker {
    color: #a9a1ff;
    font-size: 9px;
    letter-spacing: .18em;
    font-weight: 800;
}

.auth-form-head h2 {
    margin: 14px 0 10px;
    font-size: clamp(25px, 2.3vw, 34px);
    line-height: 1.15;
    letter-spacing: -.045em;
}

.auth-form-head p {
    margin: 0;
    color: #a5b1c8;
    font-size: 12px;
    line-height: 1.8;
}

.auth-status-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-top: 22px;
    border-radius: 18px;
    color: #e7e4ff;
    font-size: 19px;
    border: 1px solid rgba(173,156,255,.32);
    background: linear-gradient(145deg, rgba(136,111,255,.24), rgba(75,118,255,.12));
    box-shadow: 0 12px 32px rgba(102,83,220,.16), inset 0 1px 0 rgba(255,255,255,.1);
}

.auth-maintenance-status {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 24px 0;
    padding: 14px;
    border: 1px solid rgba(161,178,221,.14);
    border-radius: 16px;
    background: rgba(4,9,20,.32);
}

.auth-maintenance-status .status-indicator {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #a99aff;
    box-shadow: 0 0 13px rgba(169,154,255,.65);
}

.auth-maintenance-status b, .auth-maintenance-status small {
    display: block;
}

.auth-maintenance-status b {
    color: #e8eafa;
    font-size: 11px;
    margin-bottom: 4px;
}

.auth-maintenance-status small {
    color: #8593ac;
    font-size: 10px;
    line-height: 1.6;
}

.auth-notice-panel .btn {
    margin-top: 9px;
}

.auth-secondary-action {
    background: rgba(255,255,255,.025);
}

.auth-small-print {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 22px 0 0;
    color: #75829b;
    font-size: 9px;
    line-height: 1.7;
}

.auth-small-print i {
    margin-top: 2px;
    color: #8e9cff;
}

@media (max-width: 1100px) {
    body.is-home main > .hero-section#top {
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    }

    body.is-home .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.is-home .news-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-grid.pricing-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-value-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .auth-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    }

    .auth-promo {
        padding: 24px;
    }
}

@media (max-width: 820px) {
    html {
        scroll-padding-top:70px;
    }

    .site-header {
        padding-inline:18px !important;}

    body.is-home main > .hero-section#top {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 25px;
    }

    body.is-home .hero-copy {
        margin-inline:auto;}

    body.is-home .hero-copy .eyebrow, body.is-home .hero-actions, body.is-home .hero-proof {
        justify-content: center;
    }

    body.is-home .hero-lead {
        margin-inline:auto;}

    body.is-home .hero-visual {
        max-width: 640px;
    }

    body.is-home .news-head {
        align-items: flex-start;
    }

    body.is-home .workflow-section {
        grid-template-columns: minmax(0, 1fr);
    }

    body.is-home .workflow-copy {
        width: min(100%, 620px);
    }

    body.is-home .workflow-visual {
        width: min(100%, 580px);
        min-height: 240px;
    }

    body.is-home .product-feature-card {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    body.is-home .product-feature-copy {
        max-width: 680px;
        margin-inline:auto;text-align: left;
    }

    .auth-layout {
        grid-template-columns: minmax(0, 1fr);
        width: min(calc(100% - 32px), 620px) !important;
        min-height: 0;
    }

    .auth-promo {
        min-height: 460px;
    }

    .auth-form-wrap {
        width: 100%;
    }
}

@media (max-width: 620px) {
    body.is-home main > section {
        padding-block:40px !important;
    }

    body.is-home main > .hero-section#top {
        padding-top: 34px !important;
    }

    body.is-home .news-track, body.is-home .benefit-grid, body.is-home .pricing-teaser .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.is-home .benefit-grid {
        max-width: 460px;
    }

    body.is-home .news-head {
        display: flex;
        flex-direction: column;
    }

    body.is-home .hero-actions .btn {
        flex: 1 1 auto;
    }

    .pricing-grid.pricing-full {
        grid-template-columns: minmax(0, 1fr);
        width: min(calc(100% - 28px), 460px) !important;
    }

    .price-card {
        padding: 22px;
    }

    .price-card h3 {
        margin-top: 15px;
    }

    .price-card ul {
        margin-bottom: 18px;
    }

    .pricing-value-strip {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(calc(100% - 28px), 460px) !important;
    }

    .pricing-value-strip article {
        border-radius: 20px !important;
    }

    .pricing-note {
        width: calc(100% - 28px);
    }

    .billing-option, .price-card .billing-option {
        padding-inline:3px !important;font-size: 10px;
    }

    .auth-layout {
        width: calc(100% - 24px) !important;
        margin: 14px auto !important;
        padding: 9px;
        border-radius: 23px;
        gap: 10px;
    }

    .auth-promo {
        min-height: 400px;
        padding: 18px;
        border-radius: 18px;
    }

    .auth-promo h1 {
        font-size: clamp(31px, 8.4vw, 42px);
    }

    .auth-character-stage {
        right: -12%;
        width: 88%;
        opacity: .76;
    }

    .auth-art-caption {
        bottom: -29px;
        font-size: 7px;
    }

    .auth-form-wrap {
        padding: 22px 18px;
        border-radius: 19px;
    }

    .subscription-overview {
        align-items: flex-start;
    }

    .subscription-overview .btn {
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 820px) {
    .site-header {
        position:sticky;
    }

    .site-header .nav {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: var(--layout-gutter);
        right: var(--layout-gutter);
        z-index: 120;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border: 1px solid rgba(175,190,235,.18);
        border-radius: 18px;
        background: rgba(8,12,23,.96);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        box-shadow: 0 24px 60px rgba(0,0,0,.38);
    }

    .site-header .nav.open {
        display: flex;
    }

    .site-header .nav a {
        padding: 11px 13px;
        border-radius: 10px;
        font-size: 12px;
    }

    .site-header .nav a:hover, .site-header .nav a.active {
        background: rgba(139,112,255,.12);
    }

    .site-header .nav-actions .nav-login, .site-header .nav-actions .nav-user {
        display: none;
    }

    .site-header .mobile-menu {
        display: block;
        flex: 0 0 auto;
        margin-left: 4px;
    }
}

html:has(main > section.hero-section#top) {
    scroll-snap-type: none !important;
    scroll-padding: 0 !important;
}

body.is-home:has(main > section.hero-section#top) > main > section.snap-page, body.is-home:has(main > section.hero-section#top) > main > section.news-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    margin-block:0 !important;padding-block:clamp(42px, 6vw, 82px) !important;overflow: visible !important;
    scroll-snap-align: none !important;
    scroll-snap-stop:normal !important;}

body.is-home:has(main > section.hero-section#top) > main > section.snap-page + section.snap-page, body.is-home:has(main > section.hero-section#top) > main > section.news-section + section.snap-page {
    margin: 0 !important;
    margin-block-start:0 !important;}

@media (max-width: 620px) {
    body.is-home:has(main > section.hero-section#top) > main > section.snap-page, body.is-home:has(main > section.hero-section#top) > main > section.news-section {
        padding-block:40px !important;
    }

    body.is-home:has(main > section.hero-section#top) > main > section.hero-section#top {
        padding-top: 34px !important;
    }
}

.pricing-hero.compact-pricing-hero {
    width: min(calc(100% - (var(--layout-gutter) * 2)), 960px);
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(34px, 4vw, 52px) 0 clamp(20px, 2.4vw, 30px);
    text-align: center;
}

.pricing-hero.compact-pricing-hero .eyebrow {
    justify-content: center;
    margin-bottom: 12px;
}

.pricing-hero.compact-pricing-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(34px, 4.4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.055em;
}

.pricing-hero.compact-pricing-hero h1 span {
    color: transparent;
    background: linear-gradient(100deg, #a898ff, #75b7ff);
    background-clip: text;
}

.pricing-hero.compact-pricing-hero > p {
    max-width: 690px;
    margin: 0 auto;
    color: #a2aec4;
    font-size: 13px;
    line-height: 1.8;
}

.pricing-hero-proof {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.pricing-hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(175,190,235,.13);
    border-radius: 999px;
    color: #aebbd4;
    font-size: 10px;
    background: rgba(255,255,255,.035);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.pricing-hero-proof i {
    color: #a99aff;
}

.pricing-grid.pricing-full {
    margin-top: 0 !important;
}

@media (max-width: 520px) {
    .pricing-hero.compact-pricing-hero {
        padding-top:28px;
    }

    .pricing-hero-proof {
        gap: 6px;
    }

    .pricing-hero-proof span {
        padding: 7px 9px;
        font-size: 9px;
    }
}

:root {
    --layout-gutter: clamp(16px, 3vw, 52px);
    --content-width: 1240px;
    --glass-line: rgba(175,190,235,.16);
    --glass-surface: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-snap-type: none !important;
}

body {
    min-width: 320px;
}

.site-header {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 28px), 1180px) !important;
    max-width: 1180px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 14px !important;
    gap: clamp(8px, 1.1vw, 16px) !important;
    border-radius: 999px !important;
}

.site-header .brand {
    flex: 0 0 auto;
    gap: 8px;
    font-size: 13px;
}

.site-header .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.site-header .nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: clamp(2px,.35vw,6px) !important;
}

.site-header .nav a {
    min-height: 34px !important;
    padding: 0 clamp(6px,.65vw,10px) !important;
    gap: 6px !important;
    font-size: 10px !important;
    white-space: nowrap;
}

.site-header .nav a i {
    font-size: 9px !important;
    margin: 0 !important;
}

.site-header .nav-actions {
    flex: 0 0 auto;
    gap: 6px !important;
}

.site-header .nav-login, .site-header .nav-user {
    padding: 7px 9px !important;
    font-size: 10px !important;
}

.site-header .nav-actions .btn {
    padding: 8px 12px !important;
    font-size: 10px !important;
}

.site-header .mobile-menu {
    font-size: 19px;
}

@media (max-width: 1050px) {
    .site-header {
        width:calc(100% - 24px) !important;
        padding-inline:12px !important;}

    .site-header .nav {
        gap: 1px !important;
    }

    .site-header .nav a {
        padding-inline:6px !important;}
}

@media (max-width: 760px) {
    .site-header {
        width:calc(100% - 16px) !important;
        top: 6px !important;
        min-height: 54px !important;
        height: 54px !important;
        padding-inline:11px !important;border-radius: 999px !important;
    }

    .site-header .nav {
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 10px !important;
        gap: 4px !important;
    }

    .site-header .nav.open a {
        padding: 10px 13px !important;
        font-size: 12px !important;
    }

    .site-header .brand {
        font-size: 11px;
    }

    .site-header .brand small {
        font-size: 7px;
    }

    .site-header .brand-mark {
        width: 31px;
        height: 31px;
    }

    .site-header .nav-actions .btn {
        padding: 8px 10px !important;
    }
}

body.is-home main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

body.is-home main > section, body.is-home main > section.snap-page, body.is-home main > section.news-section {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(84px, 10vh, 108px) var(--layout-gutter) clamp(42px, 5vh, 58px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    scroll-snap-align: none !important;
    scroll-snap-stop:normal !important;scroll-margin: 0 !important;
    border: 0 !important;
}

body.is-home main > section + section {
    margin-block-start:0 !important;}

body.is-home main > .hero-section#top {
    display: grid !important;
    grid-template-columns: minmax(0, 550px) minmax(0, 610px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(22px, 3.4vw, 50px) !important;
    padding-top: clamp(88px, 10vh, 116px) !important;
    padding-bottom: clamp(42px, 5vh, 60px) !important;
    background-color: #080b13 !important;
}

body.is-home .hero-copy {
    width: 100%;
    max-width: 550px;
    justify-self: center;
}

body.is-home .hero-copy h1 {
    font-size: clamp(38px, 4.4vw, 68px);
    line-height: 1.02;
    text-wrap: balance;
}

body.is-home .hero-lead {
    max-width: 480px;
}

body.is-home .hero-visual {
    width: 100%;
    max-width: 610px;
    justify-self: center;
    min-width: 0;
}

body.is-home .product-preview-tilt {
    display: block;
    width: 100%;
    transform: none;
}

body.is-home .product-preview-tilt img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

body.is-home .scroll-cue {
    display: none !important;
}

body.is-home .news-section, body.is-home .benefits-section, body.is-home .suite-section, body.is-home .pricing-teaser, body.is-home .cta-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: clamp(18px, 2.5vh, 28px) !important;
}

body.is-home .workflow-section {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,.92fr) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(24px, 4vw, 58px) !important;
}

body.is-home .news-head, body.is-home .news-track, body.is-home .benefit-grid, body.is-home .section-heading, body.is-home .suite-section .product-feature-card, body.is-home .workflow-copy, body.is-home .workflow-visual, body.is-home .pricing-teaser .pricing-grid, body.is-home .pricing-teaser .pricing-bottom, body.is-home .section-footer {
    width: min(100%, var(--content-width)) !important;
    max-width: var(--content-width) !important;
    margin-inline:auto !important;}

body.is-home .news-head {
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

body.is-home .news-track {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: clamp(12px,1.25vw,18px) !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.is-home .news-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    height: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 22px !important;
    background: var(--glass-surface) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 16px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.is-home .news-card > a {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

body.is-home .news-card img, body.is-home .news-card .news-cover {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

body.is-home .news-card img {
    display: block;
}

body.is-home .news-card .news-cover {
    justify-content: center;
    gap: 10px;
}

body.is-home .news-card .news-cover i {
    font-size: clamp(28px,3.2vw,44px);
}

body.is-home .news-card-copy {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: clamp(14px,1.3vw,19px) !important;
}

body.is-home .news-card-copy time {
    margin-bottom: 8px;
    font-size: 9px;
}

body.is-home .news-card-copy h3 {
    margin: 0 0 8px;
    font-size: clamp(14px,1.1vw,17px) !important;
    line-height: 1.35;
    text-wrap: balance;
}

body.is-home .news-card-copy p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.65;
}

body.is-home .news-read {
    margin-top: auto;
    padding-top: 2px;
    font-size: 10px;
}

body.is-home .benefit-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: clamp(12px,1.4vw,18px) !important;
}

body.is-home .benefit-card {
    min-width: 0;
    height: 100%;
    padding: clamp(16px,1.6vw,23px) !important;
    border-radius: 22px !important;
}

body.is-home .benefit-card h3 {
    font-size: clamp(15px,1.15vw,19px);
    line-height: 1.3;
}

body.is-home .benefit-card p {
    font-size: 11px;
    line-height: 1.7;
}

body.is-home .section-heading {
    margin: 0 auto clamp(10px,1.6vh,18px) !important;
}

body.is-home .section-heading h2, body.is-home .workflow-copy h2, body.is-home .cta-section h2 {
    text-wrap: balance;
}

body.is-home .suite-section .product-feature-card {
    grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
    align-items: center;
    padding: clamp(18px,2.2vw,30px) !important;
    border-radius: 26px !important;
}

body.is-home .product-feature-image img {
    display: block;
    width: 100%;
    max-height: min(42vh,390px);
    object-fit: contain;
}

body.is-home .workflow-copy {
    max-width: 590px;
}

body.is-home .workflow-visual {
    max-width: 540px;
}

body.is-home .pricing-teaser .section-heading {
    text-align: center;
}

body.is-home .pricing-teaser .section-heading .eyebrow {
    justify-content: center;
}

body.is-home .pricing-teaser .pricing-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    align-items: stretch;
    gap: clamp(12px,1.5vw,20px) !important;
}

body.is-home .price-card {
    height: 100% !important;
}

body.is-home .pricing-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 10px;
}

body.is-home .cta-section {
    text-align: center;
    align-items: center !important;
}

body.is-home .cta-section > * {
    max-width: min(100%,780px);
}

body.is-home .cta-section .eyebrow, body.is-home .cta-section .hero-actions, body.is-home .cta-section .cta-meta {
    justify-content: center;
    margin-inline:auto;}

.news-cards-grid {
    align-items: stretch;
}

.news-list-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.news-list-card .news-cover {
    aspect-ratio: 16/9;
    height: auto;
    min-height: 0;
}

.news-list-card h2 {
    text-wrap: balance;
}

body:not(.is-home) main:has(> .pricing-hero) {
    padding-top: 76px !important;
}

.pricing-hero.compact-pricing-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(calc(100% - 36px), 960px) !important;
    max-width: 960px !important;
    margin: 0 auto 18px !important;
    padding: clamp(20px,3.2vh,32px) 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

.pricing-hero.compact-pricing-hero .eyebrow {
    justify-content: center;
    margin: 0 0 12px;
    font-size: 9px;
    letter-spacing: .19em;
}

.pricing-hero.compact-pricing-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(34px,4vw,54px) !important;
    line-height: 1.1;
    letter-spacing: -.055em;
}

.pricing-hero.compact-pricing-hero > p {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(12px,1.1vw,15px);
    line-height: 1.7;
    color: #9ba8c0;
}

.pricing-period-wrap {
    width: min(calc(100% - 40px), 560px);
    margin: 0 auto clamp(18px,2.6vh,26px);
    text-align: center;
}

.pricing-period-switch {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 100%;
    padding: 5px !important;
    gap: 4px !important;
    border-radius: 3.5rem !important;
    border: 1px solid rgba(180,190,235,.18) !important;
    background: rgba(16,22,38,.48) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0,0,0,.14);
}

.pricing-period-switch .billing-option {
    min-width: 0;
    min-height: 40px;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 3.5rem !important;
    background: transparent !important;
    color: #aeb8ce;
    font-size: 11px !important;
    font-weight: 800;
    white-space: nowrap;
    transition: color .2s, background .2s, box-shadow .2s;
}

.pricing-period-switch .billing-option.active {
    color: #fff !important;
    border-color: rgba(194,178,255,.3) !important;
    background: linear-gradient(110deg,#9a7aff,#695cf0) !important;
    box-shadow: 0 7px 22px rgba(116,86,240,.24), inset 0 1px 0 rgba(255,255,255,.24);
}

.pricing-period-hint {
    margin: 8px 0 0;
    color: #7785a0;
    font-size: 10px;
}

.pricing-period-hint i {
    margin-right: 6px;
    color: #a99aff;
}

.pricing-grid.pricing-full {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    align-items: stretch !important;
    gap: clamp(12px,1.5vw,20px) !important;
    width: min(calc(100% - 40px), 1140px) !important;
    max-width: 1140px !important;
    margin: 0 auto 16px !important;
}

body:not(.is-home) .price-card {
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-self: stretch;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 24px clamp(18px,1.8vw,25px) 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(175,190,235,.17) !important;
    border-radius: 28px !important;
    background: linear-gradient(150deg,rgba(30,37,57,.73),rgba(12,17,29,.64)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 20px 46px rgba(0,0,0,.16) !important;
    transition: transform .24s,border-color .24s,box-shadow .24s,background .24s;
}

body:not(.is-home) .price-card:hover {
    transform: translateY(-3px);
    border-color: rgba(181,161,255,.36) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 24px 50px rgba(0,0,0,.22) !important;
}

body:not(.is-home) .price-card.featured-price {
    border-color: rgba(165,139,255,.48) !important;
    background: radial-gradient(ellipse at 50% 0%,rgba(126,94,255,.28),transparent 48%),linear-gradient(150deg,rgba(37,32,65,.88),rgba(13,17,31,.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 18px 50px rgba(97,72,211,.14) !important;
}

body:not(.is-home) .price-card .popular-pill {
    position: absolute !important;
    z-index: 4 !important;
    top: 13px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(204,190,255,.34) !important;
    border-radius: 999px !important;
    background: linear-gradient(110deg,rgba(148,119,255,.95),rgba(100,100,244,.92)) !important;
    box-shadow: 0 5px 16px rgba(119,88,255,.2) !important;
    color: #fff !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
}

body:not(.is-home) .price-card .plan-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 0 14px !important;
}

body:not(.is-home) .price-card .plan-symbol {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    display: grid;
    place-items: center;
    border-radius: 13px !important;
    font-size: 19px !important;
}

body:not(.is-home) .price-card .plan-name {
    font-size: 10px !important;
    letter-spacing: .17em;
}

body:not(.is-home) .price-card h3 {
    margin: 0 0 6px !important;
    font-size: clamp(17px,1.4vw,21px) !important;
    line-height: 1.25;
    letter-spacing: -.035em;
}

body:not(.is-home) .price-card > p {
    min-height: 0 !important;
    margin: 0 0 12px !important;
    color: #9eabc2 !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}

body:not(.is-home) .price-card .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    margin: 0 0 12px !important;
    padding: 13px 0 !important;
    border-block:1px solid rgba(180,190,230,.13) !important;font-size: 12px !important;
    color: #b4a5ff !important;
}

body:not(.is-home) .price-card .tier-price {
    font-size: clamp(30px,2.6vw,36px) !important;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.055em;
    color: #f2f3ff !important;
}

body:not(.is-home) .price-card .price small {
    margin-left: 2px;
    font-size: 10px !important;
    font-weight: 600;
    color: #929fba !important;
    white-space: nowrap;
}

body:not(.is-home) .price-card ul {
    display: grid;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    list-style: none;
    border: 0 !important;
    min-height: 0 !important;
}

body:not(.is-home) .price-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    color: #b8c3d9 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

body:not(.is-home) .price-card li::before {
    content: '✓';
    flex: 0 0 16px;
    display: inline-grid !important;
    place-items: center;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: rgba(86,224,176,.12) !important;
    color: #5bdfb4 !important;
    font-size: 9px !important;
}

body:not(.is-home) .price-card .subscribe-form {
    margin-top: auto !important;
    padding-top: 2px;
}

body:not(.is-home) .price-card .full-btn {
    width: 100%;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
}

body:not(.is-home) .price-card.featured-price .full-btn {
    box-shadow: 0 8px 24px rgba(112,83,239,.24),inset 0 1px 0 rgba(255,255,255,.18);
}

.pricing-bottom-full {
    width: min(calc(100% - 40px),1140px) !important;
    margin: 0 auto 24px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: #8290aa;
    font-size: 10px;
}

.pricing-bottom-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9ba8c0;
}

.pricing-bottom-note i {
    color: #65dbb5;
}

.pricing-value-strip {
    width: min(calc(100% - 40px),1140px) !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 0 auto 24px !important;
}

.pricing-value-strip article {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px !important;
    border-radius: 20px !important;
}

.pricing-value-strip article > i {
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0 0 12px !important;
    border-radius: 12px !important;
    background: rgba(143,119,255,.12);
    color: #b2a5ff;
}

.pricing-value-strip article b {
    margin: 0 0 6px;
    font-size: 12px;
}

.pricing-value-strip article p {
    margin: 0;
    font-size: 10px;
    line-height: 1.65;
}

.pricing-note {
    width: min(calc(100% - 40px),1140px) !important;
    margin: 0 auto 44px !important;
    padding: 20px 24px !important;
    border-radius: 20px !important;
}

.pricing-note p {
    font-size: 10px;
    line-height: 1.75;
}

@media (max-width: 1100px) {
    body.is-home main > .hero-section#top {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    }

    body.is-home .benefit-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    body.is-home .news-track {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .pricing-grid.pricing-full {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }

    .pricing-value-strip {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width: 820px) {
    body.is-home main > section, body.is-home main > section.snap-page, body.is-home main > section.news-section {
        padding-top:78px !important;
        padding-bottom: 38px !important;
    }

    body.is-home main > .hero-section#top {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 22px !important;
        padding-top: 82px !important;
    }

    body.is-home .hero-copy {
        max-width: 640px;
        text-align: center;
        margin-inline:auto;}

    body.is-home .hero-copy .eyebrow, body.is-home .hero-actions, body.is-home .hero-proof {
        justify-content: center;
    }

    body.is-home .hero-lead {
        margin-inline:auto;}

    body.is-home .hero-visual {
        max-width: 620px;
    }

    body.is-home .news-head {
        align-items: flex-start;
    }

    body.is-home .workflow-section {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 22px !important;
    }

    body.is-home .workflow-copy, body.is-home .workflow-visual {
        max-width: 640px;
        margin-inline:auto;}

    body.is-home .suite-section .product-feature-card {
        grid-template-columns: minmax(0,1fr) !important;
    }

    body.is-home .suite-section .product-feature-image img {
        max-height: 300px;
    }

    .pricing-grid.pricing-full {
        width: min(calc(100% - 32px),700px) !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    body:not(.is-home) .price-card {
        padding: 22px 18px 18px !important;
    }

    body:not(.is-home) .price-card.featured-price .plan-top {
        padding-top: 12px;
    }

    .pricing-value-strip {
        width: min(calc(100% - 32px),700px) !important;
    }

    .pricing-note, .pricing-bottom-full {
        width: min(calc(100% - 32px),700px) !important;
    }
}

@media (max-width: 620px) {
    .site-header {
        top:6px !important;
    }

    body.is-home main > section, body.is-home main > section.snap-page, body.is-home main > section.news-section {
        padding: 76px 16px 34px !important;
    }

    body.is-home main > .hero-section#top {
        padding-top: 78px !important;
    }

    body.is-home .news-head {
        flex-direction: column;
        align-items: flex-start;
    }

    body.is-home .news-track {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }

    body.is-home .news-card {
        border-radius: 17px !important;
    }

    body.is-home .news-card-copy {
        padding: 12px !important;
    }

    body.is-home .news-card-copy h3 {
        font-size: 13px !important;
    }

    body.is-home .news-card-copy p {
        -webkit-line-clamp: 3;
        font-size: 10px;
    }

    body.is-home .benefit-grid {
        grid-template-columns: minmax(0,1fr) !important;
        max-width: 460px !important;
    }

    body.is-home .benefit-card {
        padding: 17px !important;
    }

    body.is-home .pricing-teaser .pricing-grid {
        grid-template-columns: minmax(0,1fr) !important;
        max-width: 460px !important;
    }

    body.is-home .price-card {
        padding: 21px !important;
    }

    body.is-home .pricing-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .pricing-hero.compact-pricing-hero {
        width: calc(100% - 32px) !important;
        padding-top: 18px !important;
        margin-bottom: 18px !important;
    }

    .pricing-hero.compact-pricing-hero h1 {
        font-size: clamp(32px,8.8vw,42px) !important;
    }

    .pricing-hero.compact-pricing-hero > p {
        max-width: 420px;
        font-size: 12px;
    }

    .pricing-period-wrap {
        width: calc(100% - 32px);
        margin-bottom: 18px;
    }

    .pricing-period-switch {
        padding: 4px !important;
        gap: 3px !important;
    }

    .pricing-period-switch .billing-option {
        min-height: 38px;
        padding: 8px 4px !important;
        font-size: 10px !important;
    }

    .pricing-grid.pricing-full {
        width: calc(100% - 32px) !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 12px !important;
    }

    body:not(.is-home) .price-card {
        padding: 22px 20px 18px !important;
        border-radius: 24px !important;
    }

    body:not(.is-home) .price-card.featured-price .plan-top {
        padding-top: 0;
    }

    body:not(.is-home) .price-card .plan-symbol {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px;
    }

    body:not(.is-home) .price-card h3 {
        font-size: 19px !important;
    }

    body:not(.is-home) .price-card .tier-price {
        font-size: 32px !important;
    }

    .pricing-bottom-full {
        width: calc(100% - 32px) !important;
        flex-direction: column;
        align-items: flex-start;
    }

    .pricing-value-strip {
        width: calc(100% - 32px) !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 10px !important;
    }

    .pricing-value-strip article {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        column-gap: 12px;
        align-items: start;
        padding: 16px !important;
    }

    .pricing-value-strip article > i {
        grid-row: span 2;
        margin: 0 !important;
    }

    .pricing-value-strip article b {
        margin: 0 0 4px;
    }

    .pricing-value-strip article p {
        grid-column: 2;
    }

    .pricing-note {
        width: calc(100% - 32px) !important;
        padding: 17px !important;
    }
}

@media (max-width: 420px) {
    body.is-home .news-track {
        grid-template-columns:minmax(0,1fr) !important;
        max-width: 390px !important;
    }

    .pricing-hero.compact-pricing-hero .eyebrow {
        font-size: 8px;
    }

    .pricing-period-hint {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion:reduce) {
    body.is-home .news-card, body:not(.is-home) .price-card, .pricing-period-switch .billing-option {
        transition: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    body.is-home .product-hero-visual .product-preview-tilt {
        transform:rotate(-1deg) translateY(0) scale(1);
        transform-origin: 55% 50%;
        transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .55s ease;
        will-change: transform;
    }

    body.is-home .product-hero-visual .product-preview-tilt:hover, body.is-home .product-hero-visual .product-preview-tilt:focus-visible {
        transform: rotate(-.2deg) translateY(-3px) scale(1.008);
    }

    body.is-home .product-hero-visual .product-preview-tilt img {
        transition: filter .55s cubic-bezier(.2,.75,.2,1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-home .product-hero-visual .product-preview-tilt, body.is-home .product-hero-visual .product-preview-tilt img {
        transition: none !important;
    }
}