/* 01. Design tokens and base */
:root {
    --blue:#2f61ff;
    --blue-dark:#224ddd;
    --ink:#172942;
    --muted:#53667f;
    --quiet:#667991;
    --line:#dfe6f1;
    --soft:#f5f7fc;
    --tint:#edf2ff;
    --radius:14px;
    --section:72px;
    --shadow:0 14px 40px #18346a0c
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:84px
}
body {
    margin:0;
    color:var(--ink);
    background:white;
    font:15px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer;
    border:0
}
img {
    display:block;
    max-width:100%;
    height:auto
}
h1,h2,h3,p,figure {
    margin:0
}
h1,h2,h3 {
    line-height:1.35;
    letter-spacing:-.025em
}
h2 {
    font-size:clamp(30px,3vw,40px);
    line-height:1.22
}
h3 {
    font-size:21px
}
p {
    color:var(--muted)
}
[hidden] {
    display:none!important
}
:focus-visible {
    outline:3px solid #1484df;
    outline-offset:4px
}
a,button {
    -webkit-tap-highlight-color:transparent
}
.container {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}
.section {
    padding:var(--section) 0
}
.soft {
    background:var(--soft);
    border-top:1px solid #edf1f7;
    border-bottom:1px solid #edf1f7
}
.skip {
    position:fixed;
    top:-100px;
    left:15px;
    z-index:30;
    background:var(--ink);
    color:white;
    padding:10px
}
.skip:focus {
    top:10px
}
/* 02. Shared typography, controls and surfaces */
.eyebrow {
    display:inline-block;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    color:var(--blue);
    margin-bottom:16px
}
.heading {
    display:block;
    max-width:760px;
    margin-bottom:32px
}
.heading>p,.heading>div+div {
    max-width:640px;
    margin-top:12px;
    font-size:15px;
    line-height:1.7
}
.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:48px;
    padding:11px 22px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    transition:background .18s,box-shadow .18s
}
.primary {
    background:var(--blue);
    color:white;
    box-shadow:0 5px 18px #2f61ff20
}
.primary:hover {
    background:var(--blue-dark);
    box-shadow:0 7px 20px #2f61ff30
}
.secondary {
    background:white;
    border:1px solid #d5deec;
    color:var(--ink)
}
.secondary:hover {
    background:#f4f7ff
}
.white {
    background:white;
    color:var(--blue)
}
.white:hover {
    background:#eaf0ff
}
.small {
    min-height:40px;
    padding:8px 15px;
    font-size:12px
}
.text-link {
    display:inline-block;
    color:var(--blue);
    font-size:14px;
    font-weight:600;
    margin-top:20px
}
.text-link:hover {
    text-decoration:underline
}
.pill {
    display:inline-block;
    padding:5px 12px;
    border-radius:20px;
    border:1px solid #d5dffc;
    background:var(--tint);
    color:#355cc1;
    font-size:12px;
    margin-bottom:18px
}
.muted-note,.section-note,.pricing-note {
    font-size:12px;
    color:var(--quiet);
    line-height:1.8;
    margin-top:18px
}
.pricing-note {
    text-align:center
}
/* 03. Navigation and hero */
header {
    position:sticky;
    top:0;
    z-index:10;
    background:#fffffff2;
    backdrop-filter:blur(14px);
    border-bottom:1px solid #e8edf6
}
.nav-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:64px
}
.brand {
    display:inline-flex;
    flex-shrink:0
}
.brand img {
    width:156px;
    height:52px;
    object-fit:contain
}
nav {
    display:flex;
    align-items:center;
    gap:23px;
    font-size:15px;
    font-weight:600;
    color:#485c77
}
nav a:hover {
    color:var(--blue)
}
.nav-actions {
    display:flex;
    align-items:center;
    gap:14px
}
.language {
    font-size:12px;
    color:#4d6079;
    background:transparent;
    padding:6px
}
.menu {
    display:none;
    background:transparent;
    font-size:23px;
    color:var(--ink)
}
.hero {
    padding:20px 0 16px;
    background:radial-gradient(ellipse at 82% 18%,#edf1ff,transparent 52%),linear-gradient(white,#f5f7ff)
}
.hero-copy {
    text-align:center
}
.hero-eyebrow {
    padding:4px 14px;
    border:1px solid #dce5fb;
    border-radius:20px;
    background:#ffffffa0
}
.hero h1 {
    font-size:clamp(34px,3.2vw,44px);
    line-height:1.18;
    letter-spacing:-.04em
}
.hero h1 span {
    color:var(--blue)
}
.hero-copy>p {
    font-size:16px;
    margin-top:12px
}
.hero-copy .hero-proof {
    font-size:12px;
    color:#627793;
    margin-top:12px
}
.actions {
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:18px
}
.hero-notes {
    display:flex;
    max-width:680px;
    justify-content:center;
    margin:16px auto 0
}
.hero-notes>a {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 24px;
    border-right:1px solid #dbe3f1
}
.hero-notes>a:last-child {
    border:0
}
.hero-notes span {
    font-weight:600;
    color:#2f486d;
    font-size:14px
}
.hero-notes small {
    font-size:12px;
    color:#61748f
}
.hero-notes a:hover span {
    color:var(--blue)
}
.hero-visual {
    width: min(960px, 100%);
    margin: 16px auto 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
}
.visual-caption {
    display:flex;
    justify-content:space-between;
    padding:7px 9px 11px;
    font-size:12px;
    color:#657890
}
.hero-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.visual-label {
    display:flex;
    align-items:center;
    gap:12px;
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    padding:12px 18px;
    min-width:415px;
    border:1px solid #e0e6f1;
    border-radius:10px;
    background:#ffffffef;
    box-shadow:var(--shadow)
}
.visual-label strong {
    font-size:13px;
    display:block
}
.visual-label small {
    font-size:12px;
    color:var(--quiet);
    display:block;
    white-space:nowrap
}
.visual-label a {
    margin-left:auto;
    font-size:23px;
    color:var(--blue)
}
.audience {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 12px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:#566982
}
.audience span {
    font-size:13px;
    margin-right:4px
}
.audience b {
    font-weight:600;
    color:#2f486d;
    padding:5px 12px;
    border-radius:999px;
    background:var(--soft);
    border:1px solid var(--line)
}
/* 04. Capabilities and operating scenario */
.features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.features article {
    background:var(--soft);
    padding:28px;
    border-radius:var(--radius);
    border:1px solid #e9edf5
}
.features img {
    margin-bottom:22px
}
.features h3 {
    font-size:20px;
    line-height:1.5;
    margin-bottom:12px
}
.features p {
    font-size:14px;
    line-height:1.7
}
.features small {
    display:block;
    padding-top:15px;
    margin-top:22px;
    border-top:1px solid var(--line);
    font-size:12px;
    color:var(--quiet)
}
.cap-status {
    font-size:12px;
    color:var(--blue);
    display:block;
    margin-bottom:15px
}
.scenario-tabs {
    display:flex;
    gap:8px;
    margin-bottom:18px;
    flex-wrap:wrap
}
.scenario-tabs button {
    padding:9px 18px;
    border:1px solid #dbe2ef;
    border-radius:var(--radius);
    background:white;
    color:#536783;
    font-size:13px
}
.scenario-tabs button[aria-selected=true] {
    background:var(--blue);
    border-color:var(--blue);
    color:white
}
.scenario-panel {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:white
}
.scenario-lead {
    padding:30px;
    background:#eaf0ff
}
.scenario-lead>span {
    font-size:12px;
    color:#486ab6
}
.scenario-lead h3 {
    font-size:32px;
    line-height:1.25;
    margin:16px 0
}
.scenario-lead p {
    font-size:14px
}
.scenario-path {
    list-style:none;
    margin:0;
    padding:12px 28px
}
.scenario-path li {
    display:flex;
    gap:14px;
    padding:17px 0;
    border-bottom:1px solid var(--line)
}
.scenario-path li:last-child {
    border:0
}
.scenario-path li>span {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:29px;
    height:29px;
    background:var(--tint);
    color:var(--blue);
    border-radius:50%;
    font-size:12px
}
.scenario-path strong {
    font-size:15px
}
.scenario-path p {
    font-size:13px;
    margin-top:5px
}
.showcase {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(280px, 1fr);
    gap: 28px;
    margin-top: 36px;
    padding: 24px;
    background: #f2f5fc;
    border: 1px solid #e2e9f5;
    border-radius: var(--radius);
    align-items: start;
}
.showcase>div { display: block; order: 2; padding: 20px 8px 0; }
.showcase figure { order: 1; }
.showcase .dots { display: none; }
.settings-points { list-style: none; padding: 0; margin: 22px 0 0; }
.settings-points li { border-top: 1px solid var(--line); padding: 13px 0; }
.settings-points strong { display: block; font-size: 15px; margin-bottom: 5px; }
.settings-points span { display: block; color: var(--muted); font-size: 13px; line-height: 1.8; }.showcase h3 {
    font-size:30px;
    margin-bottom:18px
}
.showcase p {
    font-size:14px
}
.showcase figure {
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.showcase img {
    width: 100%;
    border-radius:var(--radius)
}
figcaption {
    padding-top:10px;
    text-align:center;
    font-size:12px;
    color:var(--quiet)
}
.dots {
    display:flex;
    gap:10px;
    margin-top:24px
}
.dots i {
    width:18px;
    height:18px;
    background:var(--blue);
    border:3px solid white;
    border-radius:50%;
    box-shadow:0 0 0 1px #dce4f0
}
.dots i:nth-child(2) {
    background:#0aaf94
}
.dots i:nth-child(3) {
    background:#9163e9
}
.dots i:nth-child(4) {
    background:#f68d34
}
/* 05. Platforms, integration and community */
.platform-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center
}
.platform-layout h3 {
    font-size:29px;
    margin-bottom:18px
}
.platform-layout p {
    font-size:14px
}
.check-list {
    list-style:none;
    padding:0;
    margin:23px 0 0;
    font-size:13px
}
.check-list li {
    margin:10px 0
}
.check-list li:before {
    content:'✓';
    color:var(--blue);
    margin-right:10px
}
.phones {
    display:flex;
    align-items:start;
    justify-content:center;
    gap:22px
}
.phone {
    width:210px;
    min-width:0
}
.phone>div {
    aspect-ratio:1290/2260;
    overflow:hidden;
    border:6px solid #1b2a43;
    border-radius:29px;
    background:white;
    box-shadow:0 15px 35px #19345c16
}
.phone img {
    max-width:none;
    width:100%;
    transform:translateY(-8.1%)
}
.phone.second {
    margin-top:35px
}
.guide-panel {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden
}
.guide-intro {
    padding:34px;
    background:#f1f5ff
}
.guide-intro h2 {
    font-size:36px
}
.guide-intro p {
    font-size:14px;
    margin-top:18px
}
.setup-facts {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:22px 0
}
.setup-facts span {
    padding:4px 10px;
    background:white;
    border:1px solid var(--line);
    border-radius:5px;
    font-size:12px;
    color:#567094
}
.setup-list {
    list-style:none;
    margin:0;
    padding:12px 28px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.setup-list li {
    display:flex;
    gap:16px;
    padding:20px 0;
    border-bottom:1px solid var(--line)
}
.setup-list li:last-child {
    border:0
}
.setup-list li>span {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:8px;
    background:var(--tint);
    color:var(--blue);
    font-size:13px;
    font-weight:600
}
.setup-list h3 {
    font-size:18px;
    margin-bottom:8px
}
.setup-list p {
    font-size:13px
}
.setup-list small {
    display:block;
    font-size:12px;
    color:var(--quiet);
    margin-top:7px
}
.community-section {
    background:#f4f7ff
}
.community-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center
}
.community-demo {
    padding:26px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:white;
    box-shadow:var(--shadow)
}
.demo-caption {
    text-align:right;
    font-size:12px;
    color:var(--quiet);
    margin-bottom:20px
}
.group-heading {
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--line);
    padding-bottom:20px
}
.group-heading>span {
    width:46px;
    height:46px;
    border-radius:10px;
    background:var(--tint);
    color:var(--blue);
    display:grid;
    place-items:center;
    font-size:22px
}
.group-heading strong {
    font-size:16px
}
.group-heading small,.attachment small {
    display:block;
    color:var(--quiet);
    font-size:12px
}
.demo-message {
    margin:22px 0
}
.demo-message>small {
    color:var(--quiet);
    font-size:12px
}
.demo-message p {
    padding:14px;
    background:var(--soft);
    border-radius:0 10px 10px 10px;
    font-size:13px;
    margin-top:7px
}
.attachment {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:8px;
    margin-top:10px
}
.attachment>span:first-child {
    width:36px;
    height:40px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    background:var(--tint);
    color:#345ec4;
    border-radius:5px;
    font-size:12px
}
.attachment>span:last-child {
    margin-left:auto;
    color:var(--blue)
}
.attachment strong {
    font-size:13px
}
.demo-foot {
    font-size:12px;
    margin-top:20px
}
.community-copy article {
    margin-bottom:23px
}
.community-copy h3 {
    font-size:20px;
    margin-bottom:10px
}
.community-copy p {
    font-size:14px
}
.community-copy .pill {
    margin:0
}
.community-journey {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    padding-top:28px;
    margin-top:35px;
    border-top:1px solid #dbe4f4
}
.community-journey span {
    color:#4d73c8;
    font-size:25px;
    font-weight:600
}
.community-journey h3 {
    font-size:16px;
    margin:12px 0 10px
}
.community-journey p {
    font-size:13px
}
/* 06. Analytics */
.roadmap {
    background:#11213d;
    color:white
}
.roadmap .eyebrow {
    color:#a4bdff
}
.roadmap p {
    color:#c1cde1
}
.analytics-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.analytics-grid article {
    padding:26px;
    background:#ffffff05;
    border:1px solid #ffffff22;
    border-radius:var(--radius)
}
.analytics-icon {
    display:block;
    font-size:28px;
    color:#a8c0ff;
    margin-bottom:20px
}
.analytics-grid h3 {
    font-size:19px;
    line-height:1.5;
    margin-bottom:15px
}
.analytics-grid p {
    font-size:14px;
    line-height:1.7
}
.analytics-stage {
    display:grid;
    grid-template-columns:1.25fr .9fr .85fr;
    gap:16px;
    margin-top:22px
}
.analytics-stage>div {
    padding:16px 18px 14px;
    border-radius:12px;
    background:#ffffff0a;
    border:1px solid #ffffff1f
}
.analytics-stage span {
    display:block;
    margin-bottom:12px;
    color:#a4bdff;
    font-size:13px;
    font-weight:600
}
.analytics-stage small {
    display:block;
    margin-top:12px;
    color:#b6c6e2;
    font-size:12px
}
.stage-track {
    display:flex;
    align-items:flex-end;
    gap:8px;
    height:46px
}
.stage-track i {
    flex:1;
    height:18px;
    border-radius:4px;
    background:#8eafff
}
.stage-track i:nth-child(2) { height:28px }
.stage-track i:nth-child(3) { height:16px }
.stage-track i:nth-child(4) { height:36px }
.stage-track i:nth-child(5) { height:24px }
.stage-track b {
    width:10px;
    height:10px;
    border-radius:50%;
    background:white;
    box-shadow:0 0 0 4px #3268ff
}
.stage-dots {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    height:46px;
    align-content:center
}
.stage-dots i {
    width:12px;
    height:12px;
    margin:auto;
    border-radius:50%;
    background:#8eafff
}
.stage-dots i:nth-child(3),
.stage-dots i:nth-child(8) { background:#d7e4ff; transform:scale(1.35) }
.stage-dots i:nth-child(5),
.stage-dots i:nth-child(10) { background:#ffffff; transform:scale(1.15) }
.stage-goal ol {
    display:flex;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none
}
.stage-goal li {
    flex:1;
    padding:10px 8px;
    border-radius:8px;
    background:#ffffff10;
    color:#d5e2f8;
    font-size:13px;
    text-align:center
}
.stage-goal li:nth-child(2) {
    background:#3268ff;
    color:white;
    font-weight:600
}
.analytics-grid small {
    display:block;
    font-size:12px;
    color:#b6c6e2;
    border-top:1px solid #ffffff20;
    padding-top:14px;
    margin-top:22px
}
.analytics-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-top:32px
}
.analytics-bottom h3 {
    font-size:21px;
    margin-bottom:12px
}
.analytics-bottom p {
    font-size:14px;
    max-width:690px
}
.analytics-bottom a {
    white-space:nowrap;
    font-size:13px
}
.analytics-note {
    font-size:12px;
    margin-top:24px
}
/* 07. Pricing and comparisons */
.billing {
    display:inline-flex;
    gap:3px;
    padding:4px;
    background:#eaf0f8;
    border-radius:8px;
    margin-top:14px
}
.billing button {
    padding:7px 13px;
    border-radius:5px;
    color:#4c637e;
    font-size:12px;
    background:transparent
}
.billing button[aria-pressed=true] {
    color:var(--ink);
    background:white;
    box-shadow:0 2px 5px #142d5010
}
.billing span {
    font-size:12px;
    color:#3159bb
}
.plans {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    padding-top:14px
}
.plan {
    padding:28px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    position:relative
}
.plan.recommended {
    border:2px solid var(--blue);
    background:#f9fbff;
    padding:27px
}
.recommend-badge {
    position:absolute;
    top:-16px;
    left:23px;
    background:var(--blue);
    color:white;
    padding:4px 13px;
    border-radius:20px;
    font-size:12px
}
.plan>small {
    color:var(--quiet);
    font-size:12px
}
.plan h3 {
    font-size:23px;
    margin-top:12px
}
.price {
    color:var(--blue);
    font-size:20px;
    margin:20px 0 12px;
    white-space:nowrap
}
.price strong {
    color:var(--ink);
    font-size:48px;
    line-height:1.1;
    letter-spacing:-.05em;
    margin-left:4px
}
.price span {
    color:var(--quiet);
    font-size:12px;
    margin-left:7px
}
.plan>p {
    font-size:13px;
    min-height:47px
}
.plan>.button {
    width:100%;
    font-size:13px;
    margin:18px 0 22px;
    padding:10px
}
.plan ul {
    list-style:none;
    border-top:1px solid var(--line);
    margin:0;
    padding:15px 0 0;
    font-size:13px
}
.plan li {
    margin:12px 0
}
.plan li:before {
    content:'✓';
    color:var(--blue);
    margin-right:8px
}
.comparison-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    margin:35px 0 18px
}
.comparison-heading h3 {
    font-size:21px
}
.comparison-heading p {
    font-size:12px
}
.table-scroll {
    overflow:auto;
    border:1px solid var(--line);
    border-radius:10px
}
.comparison {
    border-collapse:collapse;
    width:100%;
    min-width:680px;
    font-size:13px
}
.comparison caption {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
}
.comparison th,.comparison td {
    text-align:left;
    padding:13px 18px;
    border-bottom:1px solid var(--line)
}
.comparison thead {
    background:#edf2fc
}
.comparison th {
    font-weight:600
}
.comparison tbody th {
    width:31%;
    font-weight:500
}
.comparison tr:last-child th,.comparison tr:last-child td {
    border:0
}
.comparison td:nth-child(3) {
    background:#f7faff
}
.comparison tbody tr:hover {
    background:#fafcff
}
/* 08. FAQ, download, footer and modal */
#faq {
    padding:42px 0
}
.faq-heading {
    display:block;
    max-width:720px;
    margin-bottom:8px
}
.faq-heading .eyebrow {
    margin:0 0 10px
}
.faq-heading h2 {
    font-size:clamp(28px,3vw,36px)
}
.faq-heading p {
    font-size:15px;
    margin-top:12px
}
.faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:48px;
    align-items:start
}
.faq-grid details {
    border-bottom:1px solid #d8e1ee;
    padding:17px 0
}
summary {
    list-style:none;
    cursor:pointer;
    position:relative;
    font-size:14px;
    font-weight:600;
    padding-right:25px
}
summary::-webkit-details-marker {
    display:none
}
summary:after {
    content:'+';
    position:absolute;
    right:0;
    top:-2px;
    color:#4e678a;
    font-size:20px;
    font-weight:400
}
details[open] summary:after {
    content:'−'
}
details p {
    font-size:13px;
    padding:10px 15px 0 0
}
#download {
    padding:38px 0
}
.download-panel {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:26px;
    padding:28px 32px;
    border-radius:var(--radius);
    background:linear-gradient(120deg,#2857f2,#416eff);
    color:white
}
.download-heading {
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0
}
.download-heading>img {
    width:60px;
    height:60px;
    border-radius:14px;
    box-shadow:0 8px 20px #0e276c25
}
.download-panel .eyebrow {
    font-size:12px;
    color:#e0e8ff;
    margin-bottom:8px
}
.download-panel h2 {
    font-size:28px
}
.download-panel p {
    color:#edf2ff;
    font-size:12px;
    margin-top:8px
}
.download-action {
    flex-shrink:0;
    text-align:center
}
.download-action .button {
    font-size:13px
}
.download-action small {
    display:block;
    font-size:12px;
    color:#e2eaff;
    margin-top:8px
}
.release-details {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:14px;
    padding:18px 22px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:var(--radius)
}
.release-details div>span {
    display:block;
    color:var(--quiet);
    font-size:12px;
    margin-bottom:4px
}
.release-details strong {
    font-size:15px;
    font-weight:600
}
.release-details>a {
    font-size:14px;
    font-weight:600;
    color:var(--blue)
}
footer {
    padding:32px 0 20px;
    border-top:1px solid var(--line);
    background:#f7f9fd
}
.footer-top {
    display:grid;
    grid-template-columns:1.4fr .75fr .75fr 1.3fr;
    gap:28px
}
footer .brand img {
    width:210px;
    height:70px
}
.footer-top p {
    font-size:13px;
    max-width:290px;
    margin-top:12px
}
.footer-top>div>strong {
    font-size:14px;
    display:block;
    margin-bottom:14px
}
.footer-top>div>a:not(.brand),.footer-top>div>span {
    font-size:13px;
    color:#4e617d;
    display:block;
    margin-bottom:8px;
    overflow-wrap:anywhere
}
.footer-top a:hover {
    color:var(--blue)
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:18px;
    margin-top:25px;
    font-size:12px;
    color:#5a6e88
}
.legal-links {
    display:flex;
    gap:20px;
    flex-wrap:wrap
}
dialog {
    width:min(450px,calc(100% - 32px));
    border:1px solid var(--line);
    border-radius:16px;
    color:var(--ink);
    padding:34px;
    text-align:center;
    box-shadow:0 25px 70px #14244b33
}
dialog::backdrop {
    background:#0b1b4066;
    backdrop-filter:blur(4px)
}
dialog>img {
    margin:0 auto 20px;
    border-radius:13px
}
dialog h2 {
    font-size:23px
}
dialog p {
    font-size:14px;
    margin:16px 0 23px
}
.dialog-close {
    position:absolute;
    right:10px;
    top:6px;
    background:transparent;
    font-size:25px;
    color:#526880;
    padding:5px 10px
}
/* 09. Supporting pages */
.document-header {
    position:static
}
.document-header .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:64px
}
.document-header a:last-child {
    font-size:13px;
    color:var(--blue)
}
.document {
    max-width:860px;
    padding-top:45px;
    padding-bottom:50px
}
.document h1 {
    font-size:35px;
    margin-bottom:14px
}
.document .document-lead {
    font-size:15px;
    padding-bottom:25px;
    border-bottom:1px solid var(--line);
    margin-bottom:25px
}
.document h2 {
    font-size:21px;
    margin:28px 0 12px
}
.document p,.document li {
    font-size:14px;
    line-height:1.95
}
.document ul {
    padding-left:22px
}
.document a {
    color:var(--blue);
    text-decoration:underline
}
.document .notice {
    background:var(--tint);
    padding:18px;
    border-radius:10px;
    margin:20px 0
}
.document .release-notes {
    background:var(--tint);
    padding:18px;
    border-radius:10px;
    margin:12px 0 20px;
    white-space:normal;
    line-height:1.7
}
.document-footer {
    padding:20px 0;
    border-top:1px solid var(--line);
    font-size:13px
}
.document-footer .container {
    display:flex;
    gap:25px;
    flex-wrap:wrap
}
/* 10. Responsive rules, only here */
@media(max-width:1100px) {
    .brand img {
        width:140px;
        height:46px
    }
    nav {
        gap:15px;
        font-size:14px
    }
    .nav-actions {
        gap:7px
    }
    .hero h1 {
        font-size:clamp(30px,4vw,40px)
    }
    .hero-copy>p {
        font-size:15px
    }
    .showcase,.platform-layout,.community-layout {
        gap:35px
    }
    .features article,.analytics-grid article {
        padding:23px
    }
    .plan {
        padding:23px
    }
    .plan.recommended {
        padding:22px
    }
    .price strong {
        font-size:42px
    }
    .guide-intro {
        padding:28px
    }
    .setup-list {
        padding:12px 24px
    }
    .download-panel h2 {
        font-size:21px
    }
    .footer-top {
        gap:20px
    }
    .faq-heading p {
        margin-left:0
    }
}
@media(max-width:900px) {
    :root {
        --section:46px
    }
    .container {
        width:calc(100% - 36px)
    }
    .nav-wrap {
        min-height:60px;
        gap:5px;
        flex-wrap:wrap
    }
    .brand img {
        width:118px;
        height:40px
    }
    .menu {
        display:block;
        order:2;
        margin-left:auto
    }
    .nav-actions {
        order:1;
        gap:2px
    }
    .nav-actions .button {
        font-size:12px;
        padding:8px 9px
    }
    .language {
        font-size:12px;
        padding:5px
    }
    nav {
        display:none;
        order:3;
        flex-basis:100%;
        padding:10px 0 18px
    }
    nav.open {
        display:flex;
        flex-wrap:wrap;
        gap:13px 24px
    }
    .hero {
        padding-top:32px
    }
    .hero h1 {
        font-size:clamp(28px,7vw,36px);
        line-height:1.25
    }
    .hero-copy>p {
        font-size:13px;
        white-space:normal;
        line-height:1.8
    }
    .hero-copy .hero-proof {
        font-size:12px;
        white-space:normal
    }
    .eyebrow {
        font-size:12px
    }
    .actions {
        gap:8px;
        margin-top:20px
    }
    .actions .button {
        font-size:12px;
        padding:10px 13px
    }
    .hero-notes {
        flex-direction:column;
        align-items:stretch;
        max-width:360px;
        margin:18px auto 0;
        border:1px solid #dbe3f1;
        border-radius:12px;
        overflow:hidden
    }
    .hero-notes>a {
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:10px 14px;
        border-right:0;
        border-bottom:1px solid #dbe3f1
    }
    .hero-notes>a:last-child {
        border-bottom:0
    }
    .hero-notes span,.hero-notes small {
        font-size:13px;
        text-align:left
    }
    .hero-notes small {
        color:#61748f
    }
    .hero-visual {
        width:100%;
        margin:18px auto 0
    }
    .visual-caption {
        font-size:12px;
        padding:5px 4px 9px
    }
    .visual-label {
        min-width:0;
        width:86%;
        bottom:10px;
        padding:9px;
        gap:8px
    }
    .visual-label strong {
        font-size:12px
    }
    .visual-label small {
        display:none
    }
    .visual-label img {
        width:25px
    }
    .visual-label a {
        font-size:20px
    }
    .audience {
        flex-wrap:wrap;
        justify-content:center;
        gap:13px;
        font-size:12px;
        padding:20px 0
    }
    .audience span {
        flex-basis:100%;
        text-align:center
    }
    .heading {
        display:block;
        margin-bottom:24px
    }
    .heading>p,.heading>div+div {
        margin-top:16px;
        max-width:none
    }
    .features,.analytics-grid,.analytics-stage {
        grid-template-columns:1fr;
        gap:15px
    }
    .features h3 {
        font-size:20px
    }
    .scenario-tabs button {
        font-size:12px;
        padding:8px 11px
    }
    .scenario-panel {
        grid-template-columns:1fr
    }
    .scenario-lead {
        padding:24px
    }
    .scenario-lead h3 {
        font-size:23px
    }
    .scenario-path {
        padding:5px 22px
    }
    .showcase,.platform-layout,.guide-panel,.community-layout {
        grid-template-columns:1fr;
        gap:25px
    }
    .showcase {
        padding:18px;
        margin-top:28px
    }
    .showcase>div { order: 1; }
    .showcase figure { order: 2; }
    .showcase>div { display: block; padding: 0; }
    .showcase h3,.platform-layout h3 {
        font-size:27px
    }
    .phones {
        gap:17px
    }
    .phone {
        width:42%
    }
    .phone>div {
        border-width:5px;
        border-radius:23px
    }
    .phone.second {
        margin-top:28px
    }
    .guide-panel {
        gap:0
    }
    .guide-intro {
        padding:24px
    }
    .guide-intro h2 {
        font-size:29px
    }
    .setup-list {
        padding:0 24px
    }
    .setup-list h3 {
        font-size:16px
    }
    .community-demo {
        padding:22px
    }
    .community-journey {
        grid-template-columns:1fr 1fr;
        gap:24px 18px;
        margin-top:28px;
        padding-top:23px
    }
    .community-journey h3 {
        font-size:15px
    }
    .community-journey p {
        font-size:12px
    }
    .analytics-bottom {
        display:block
    }
    .analytics-bottom a {
        margin-top:20px
    }
    .plans {
        grid-template-columns:1fr;
        gap:30px
    }
    .plan,.plan.recommended {
        padding:26px
    }
    .plan>p {
        min-height:0
    }
    .price strong {
        font-size:46px
    }
    .comparison-heading {
        display:block;
        margin-top:27px
    }
    .comparison-heading p {
        margin-top:10px
    }
    .comparison th,.comparison td {
        padding:12px 14px
    }
    .pricing-note {
        text-align:left
    }
    #faq {
        padding:35px 0
    }
    .faq-heading {
        display:block
    }
    .faq-heading h2 {
        font-size:26px;
        margin-top:9px
    }
    .faq-heading p {
        margin-top:12px
    }
    .faq-grid {
        grid-template-columns:1fr
    }
    #download {
        padding:28px 0
    }
    .download-panel {
        display:block;
        padding:24px
    }
    .download-heading {
        align-items:start;
        gap:12px
    }
    .download-heading>img {
        width:43px;
        height:43px;
        border-radius:10px
    }
    .download-panel h2 {
        font-size:20px;
        line-height:1.45
    }
    .download-panel .eyebrow {
        font-size:12px
    }
    .download-action {
        margin-top:20px;
        text-align:left
    }
    .download-action .button {
        width:100%
    }
    .download-action small {
        text-align:center
    }
    .release-details {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px
    }
    .release-details>a {
        grid-column:1/-1
    }
    footer {
        padding-top:25px
    }
    .footer-top {
        grid-template-columns:1fr 1fr;
        gap:24px
    }
    .footer-top>div:first-child,.footer-top>div:last-child {
        grid-column:1/-1
    }
    footer .brand img {
        width:192px;
        height:64px
    }
    .footer-top p {
        max-width:none
    }
    .footer-bottom {
        align-items:start;
        flex-direction:column;
        gap:12px;
        font-size:12px
    }
    .legal-links {
        gap:15px
    }
    .document {
        padding-top:30px
    }
    .document h1 {
        font-size:29px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .button {
        transition:none
    }
}