:root {
    --ink:#172d4b;
    --muted:#52627a;
    --blue:#2859e7;
    --blue-dark:#1743bb;
    --line:#dce3ee;
    --paper:#f6f8fc;
    --green:#18705a;
    --radius:18px
}

* {
    box-sizing:border-box
}

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

body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased
}

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

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

button {
    font:inherit;
    cursor:pointer
}

button:disabled {
    cursor:default
}

button,a,summary {
    touch-action:manipulation
}

button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:5px
}

button[hidden],[hidden] {
    display:none!important
}

img,svg {
    max-width:100%
}

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

h1,h2,h3 {
    line-height:1.15
}

h2 {
    font-size:clamp(30px,3vw,42px);
    font-weight:650;
    letter-spacing:-1.6px
}

h2>span {
    color:var(--muted)
}

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

.eyebrow {
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    line-height:1.5;
    color:var(--blue)
}

.signal-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:currentColor;
    border-radius:50%;
    box-shadow:0 0 0 4px rgb(40 89 231 / 8%);
    flex:none
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.skip-link {
    position:fixed;
    z-index:100;
    left:16px;
    top:-100px;
    padding:12px 20px;
    background:var(--ink);
    color:#fff;
    border-radius:6px
}

.skip-link:focus {
    top:12px
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgb(255 255 255 / 96%);
    border-bottom:1px solid var(--line)
}

.header-inner {
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

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

.brand img {
    display:block;
    height:auto
}

.site-header nav {
    display:flex;
    align-items:center;
    gap:34px;
    font-size:13px;
    font-weight:600
}

.site-header nav>a:not(.nav-cta):hover {
    color:var(--blue)
}

.nav-cta {
    display:flex;
    align-items:center;
    gap:22px;
    padding:11px 18px;
    border:1px solid var(--line);
    border-radius:7px;
    background:white
}

.nav-cta:hover {
    border-color:var(--blue);
    color:var(--blue)
}

.menu-toggle {
    display:none
}

.hero {
    overflow:hidden;
    background:var(--paper);
    background-image:radial-gradient(#dde5f2 .7px,transparent .7px);
    background-size:22px 22px
}

.hero-grid {
    display:grid;
    grid-template-columns:1.04fr 1fr;
    gap:66px;
    align-items:center;
    padding-top:70px;
    padding-bottom:64px
}

.hero-copy .eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:10px;
    letter-spacing:1.5px
}

.hero h1 {
    position:relative;
    font-size:clamp(58px,5.8vw,80px);
    letter-spacing:-4px;
    font-weight:700;
    margin:24px 0 24px;
    line-height:1.04
}

.hero h1>span {
    color:var(--blue)
}

.heading-target {
    width:46px;
    height:46px;
    margin-left:16px;
    fill:none;
    stroke:#98ade4;
    stroke-width:1.7;
    vertical-align:middle
}

.heading-target .target-dot {
    fill:var(--blue);
    stroke:none
}

.hero-description {
    font-size:22px;
    line-height:1.5;
    font-weight:550;
    letter-spacing:-.45px
}

.hero-detail {
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
    max-width:425px;
    margin-top:16px
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:30px;
    flex-wrap:wrap
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:27px;
    padding:14px 20px;
    font-size:13px;
    font-weight:650;
    border-radius:7px;
    transition:background .2s,transform .2s;
    min-height:48px
}

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

.button-primary {
    background:var(--blue);
    color:#fff;
    box-shadow:0 4px 10px rgb(40 89 231 / 12%)
}

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

.button>span {
    font-size:20px;
    line-height:1
}

.text-link {
    font-size:13px;
    font-weight:650;
    display:inline-flex;
    gap:13px;
    align-items:center
}

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

.hero-assurance {
    margin-top:32px;
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--muted);
    font-size:11px;
    line-height:1.8
}

.hero-assurance strong {
    font-weight:600;
    color:var(--ink)
}

.small-target {
    width:24px;
    height:24px;
    border:1.5px solid #b5c4dd;
    border-radius:50%;
    position:relative;
    flex:none
}

.small-target:before,.small-target:after {
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid var(--blue);
    border-radius:50%
}

.small-target:after {
    inset:9px;
    background:var(--blue)
}

.demo-scene {
    position:relative;
    scroll-margin-top:120px;
    min-width:0
}

.orbit {
    position:absolute;
    border:1px solid #dce4f2;
    border-radius:50%;
    pointer-events:none
}

.orbit-one {
    width:580px;
    height:580px;
    top:-25px;
    left:-39px
}

.orbit-two {
    width:675px;
    height:675px;
    top:-73px;
    left:-86px
}

.demo-card {
    position:relative;
    background:#fff;
    border:1px solid #dce3ef;
    border-radius:15px;
    box-shadow:0 22px 65px -25px rgb(29 57 114 / 25%);
    overflow:hidden
}

.demo-topbar {
    background:#fdfdff;
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #edf0f6;
    align-items:center
}

.demo-label {
    display:flex;
    gap:9px;
    align-items:center;
    color:var(--blue);
    font-size:9px;
    font-weight:700;
    letter-spacing:1.2px
}

.demo-label .signal-dot {
    width:5px;
    height:5px
}

.demo-reference {
    font-family:Consolas,monospace;
    font-size:10px;
    color:#758298
}

.scenario-controls {
    display:flex;
    gap:3px;
    background:#f1f4f9;
    margin:20px 24px 0;
    padding:4px;
    border-radius:7px
}

.scenario-controls button {
    flex:1;
    border:0;
    background:transparent;
    color:var(--muted);
    border-radius:5px;
    padding:8px 4px;
    font-size:10px;
    font-weight:600;
    line-height:1.4;
    min-height:34px
}

.scenario-controls button[aria-pressed="true"] {
    background:#fff;
    color:var(--blue);
    box-shadow:0 1px 5px #172d4b12
}

.scenario-controls button:hover {
    color:var(--blue)
}

.demo-heading {
    display:flex;
    align-items:center;
    gap:13px;
    margin:25px 24px 18px
}

.alert-icon {
    display:grid;
    place-items:center;
    background:#fff2dc;
    color:#97520e;
    width:41px;
    height:41px;
    flex:none;
    border-radius:11px;
    font-size:22px;
    font-weight:650
}

.demo-category {
    font-size:8px;
    font-weight:700;
    letter-spacing:1.1px;
    color:var(--muted);
    margin-bottom:5px
}

.demo-heading h2 {
    font-size:19px;
    letter-spacing:-.5px;
    font-weight:650
}

.demo-status-line {
    margin:0 24px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:9px;
    color:var(--muted)
}

.status-badge {
    background:#eaf6f0;
    color:var(--green);
    padding:4px 9px;
    border-radius:4px;
    font-size:9px;
    font-weight:650;
    white-space:nowrap
}

.status-badge.pending {
    background:#edf2ff;
    color:var(--blue)
}

.timeline {
    list-style:none;
    margin:0 24px 0;
    padding:0;
    min-height:236px
}

.timeline li {
    position:relative;
    display:grid;
    grid-template-columns:22px 1fr auto;
    gap:11px;
    min-height:59px;
    padding-bottom:15px;
    color:#66768c
}

.timeline li:not(:last-child):before {
    content:"";
    position:absolute;
    width:1px;
    left:10px;
    top:23px;
    bottom:0;
    background:#e0e6ef
}

.timeline-marker {
    background:#f5f7fb;
    border:1px solid #dde4ee;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    font-size:10px;
    z-index:1
}

.timeline li.complete .timeline-marker {
    background:#ecf7f1;
    color:var(--green);
    border-color:#d4e9dc
}

.timeline li.current .timeline-marker {
    background:var(--blue);
    border-color:var(--blue);
    color:white
}

.timeline strong {
    font-weight:600;
    font-size:11px;
    display:block;
    line-height:22px;
    color:var(--ink)
}

.timeline p {
    font-size:10px;
    line-height:1.5
}

.timeline time {
    font-size:9px;
    line-height:22px;
    font-variant-numeric:tabular-nums;
    color:#68788f
}

.timeline li.future strong,.timeline li.future p,.timeline li.future time {
    color:#6e7c90
}

.timeline li.future .timeline-marker {
    color:#79879a
}

.demo-summary {
    background:#f3f6fc;
    border-top:1px solid #e9edf5;
    padding:14px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.demo-summary div>span {
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-bottom:2px
}

.demo-summary strong {
    font-size:19px;
    letter-spacing:-.5px;
    font-weight:650
}

.demo-summary strong>span {
    padding-inline:8px;
    color:#8b9ab1
}

.summary-check {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border:1px solid #c8d5f5;
    border-radius:50%;
    color:var(--blue);
    font-size:13px
}

.demo-player {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 24px;
    border-top:1px solid #e9edf5
}

.demo-player>span {
    font-size:9px;
    color:var(--muted)
}

.demo-player button {
    border:0;
    background:transparent;
    color:var(--blue);
    font-size:10px;
    font-weight:650;
    display:flex;
    gap:10px;
    align-items:center;
    min-height:30px;
    padding:4px
}

.demo-player button:hover {
    text-decoration:underline
}

.demo-caption {
    position:relative;
    text-align:center;
    color:#63748c;
    font-size:9px;
    margin-top:16px
}

.audience-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-top:1px solid #dce4ef;
    padding-block:25px
}

.audience-strip>span {
    font-size:9px;
    font-weight:650;
    letter-spacing:1.2px;
    color:#65748b
}

.audience-strip ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:40px;
    font-size:13px;
    font-weight:600;
    color:#52617a
}

.section-space {
    padding-block:86px
}

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

.section-heading h2,.workflow-intro h2,.faq-grid h2 {
    margin-top:17px
}

.section-heading>p {
    max-width:330px;
    color:var(--muted);
    font-size:14px;
    line-height:1.85
}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:42px
}

.feature {
    position:relative;
    border-top:1px solid var(--line);
    padding-top:22px
}

.feature-number {
    font-size:9px;
    font-weight:650;
    letter-spacing:1.7px;
    color:#68788e
}

.feature-icon {
    width:45px;
    height:45px;
    display:block;
    fill:none;
    stroke:var(--blue);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    margin:30px 0 24px
}

.feature h3 {
    font-size:20px;
    letter-spacing:-.5px;
    font-weight:650
}

.feature p {
    font-size:13px;
    color:var(--muted);
    line-height:1.85;
    margin-top:13px;
    max-width:310px
}

.workflow-section {
    background:var(--ink);
    color:#fff;
    position:relative
}

.workflow-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px
}

.workflow-intro .eyebrow {
    color:#98b4ff
}

.workflow-intro h2>span {
    color:#aebed4
}

.workflow-intro>p:not(.eyebrow) {
    color:#bbc9dc;
    font-size:14px;
    max-width:330px;
    line-height:1.85;
    margin-top:23px
}

.workflow-intro .text-link {
    margin-top:26px;
    color:#e8eeff
}

.workflow-intro .text-link:hover {
    color:#a7bfff
}

.workflow-list {
    list-style:none;
    margin:0;
    padding:0
}

.workflow-list li {
    display:flex;
    align-items:flex-start;
    gap:22px;
    padding:23px 0;
    border-top:1px solid #3b4e69
}

.workflow-list li:first-child {
    padding-top:5px;
    border:0
}

.workflow-list li:last-child {
    padding-bottom:0
}

.workflow-list li>span {
    border:1px solid #4a6181;
    border-radius:50%;
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    flex:none;
    font-size:11px;
    color:#bbcdf4
}

.workflow-list h3 {
    font-size:17px;
    font-weight:600;
    letter-spacing:-.25px;
    margin-top:5px
}

.workflow-list p {
    font-size:12px;
    color:#bdc9da;
    line-height:1.9;
    margin-top:10px
}

.plans-section {
    background:var(--paper)
}

.plans-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}

.plan {
    padding:32px 36px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:#fff;
    min-width:0
}

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

.plan-top p {
    font-size:9px;
    letter-spacing:1.4px;
    font-weight:650;
    color:var(--blue)
}

.plan-top>span {
    font-size:26px;
    line-height:1;
    color:var(--blue)
}

.plan h3 {
    font-size:27px;
    font-weight:650;
    letter-spacing:-.8px
}

.plan>p:not(.plan-note) {
    font-size:13px;
    color:var(--muted);
    line-height:1.85;
    max-width:340px;
    margin-top:14px
}

.credit-illustration,.unlimited-illustration {
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:30px
}

.credit-illustration>span {
    font-size:68px;
    line-height:1;
    letter-spacing:-3px;
    font-weight:600;
    color:var(--blue)
}

.credit-illustration>div,.unlimited-illustration>div {
    font-size:13px;
    line-height:1.8;
    color:var(--muted)
}

.credit-illustration strong,.unlimited-illustration strong {
    font-weight:600;
    color:var(--ink)
}

.plan-note {
    font-size:9px;
    color:var(--muted);
    margin-top:6px
}

.plan ul {
    list-style:none;
    margin:25px 0 0;
    padding:22px 0 0;
    border-top:1px solid var(--line);
    font-size:12px;
    color:var(--muted)
}

.plan li {
    position:relative;
    padding-left:21px;
    margin-top:10px
}

.plan li:before {
    position:absolute;
    content:"✓";
    left:0;
    color:var(--blue)
}

.plan-unlimited {
    background:#edf2ff;
    border-color:#d8e2fb
}

.unlimited-illustration {
    min-height:89px;
    margin-top:30px
}

.unlimited-illustration>span {
    font-size:88px;
    font-weight:400;
    line-height:.9;
    letter-spacing:-5px;
    color:var(--blue)
}

.plans-footnote {
    color:var(--muted);
    font-size:11px;
    margin-top:22px;
    text-align:center
}

.faq-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px
}

.faq-list details {
    border-bottom:1px solid var(--line);
    padding-block:20px
}

.faq-list details:first-child {
    padding-top:0
}

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

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

.faq-list summary>span {
    font-weight:400;
    font-size:24px;
    color:var(--blue);
    transition:transform .15s
}

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

.faq-list details p {
    font-size:13px;
    line-height:1.85;
    color:var(--muted);
    margin-top:13px;
    max-width:490px
}

.closing-section {
    padding-bottom:64px
}

.closing-inner {
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--blue);
    padding:45px 50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    color:white
}

.closing-inner>div,.closing-inner>a {
    position:relative;
    z-index:1
}

.closing-inner .eyebrow {
    color:#d1ddff;
    margin-bottom:15px
}

.closing-inner h2 {
    font-size:36px;
    letter-spacing:-1.2px
}

.button-light {
    background:#fff;
    color:var(--blue);
    flex-shrink:0
}

.button-light:hover {
    background:#edf2ff
}

.closing-target {
    position:absolute;
    right:16%;
    top:-50px;
    width:300px;
    height:300px;
    fill:none;
    stroke:#7698f5;
    stroke-width:1;
    opacity:.4
}

.site-footer {
    border-top:1px solid var(--line);
    padding-top:34px
}

.footer-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.footer-inner p {
    font-size:11px;
    color:var(--muted)
}

.footer-inner>a:last-child {
    font-size:11px;
    font-weight:600
}

.footer-inner>a:last-child:hover {
    color:var(--blue)
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#67778c;
    margin-top:28px;
    padding-block:19px;
    border-top:1px solid #edf0f5
}

@media(min-width:1450px) {
    .hero-grid {
        padding-top:84px;
        padding-bottom:76px;
        gap:86px
    }

    .hero h1 {
        font-size:84px
    }

    .hero-actions {
        gap:22px
    }

}

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

    .hero-grid {
        gap:35px
    }

    .hero h1 {
        font-size:65px
    }

    .hero-actions {
        gap:20px
    }

    .hero-actions .text-link {
        font-size:12px
    }

    .site-header nav {
        gap:22px
    }

    .audience-strip ul {
        gap:22px
    }

    .workflow-grid {
        gap:60px
    }

    .demo-heading {
        margin-inline:20px
    }

    .demo-heading h2 {
        font-size:17px
    }

    .demo-topbar,.demo-summary,.demo-player {
        padding-inline:20px
    }

    .scenario-controls {
        margin-inline:20px
    }

    .demo-status-line,.timeline {
        margin-inline:20px
    }

    .faq-grid {
        gap:60px
    }

    .hero-copy .eyebrow {
        font-size:9px;
        letter-spacing:1px
    }

    .feature-grid {
        gap:28px
    }

}

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

    .header-inner {
        height:76px
    }

    .brand img {
        width:172px;
        height:auto
    }

    .site-header nav {
        gap:17px;
        font-size:11px
    }

    .nav-cta {
        padding:9px 11px;
        gap:9px
    }

    .hero-grid {
        grid-template-columns:1fr;
        gap:52px;
        padding-top:45px;
        padding-bottom:40px
    }

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

    .hero h1 {
        font-size:76px
    }

    .hero-detail {
        max-width:500px
    }

    .hero-actions {
        gap:28px
    }

    .demo-scene {
        width:100%;
        max-width:540px;
        margin-inline:auto
    }

    .demo-heading h2 {
        font-size:21px
    }

    .timeline strong {
        font-size:12px
    }

    .timeline p {
        font-size:11px
    }

    .scenario-controls button {
        font-size:11px
    }

    .hero-assurance {
        margin-top:25px
    }

    .audience-strip {
        align-items:flex-start;
        flex-direction:column;
        gap:16px
    }

    .audience-strip ul {
        flex-wrap:wrap;
        column-gap:30px;
        row-gap:10px;
        font-size:12px
    }

    .section-space {
        padding-block:62px
    }

    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:22px;
        margin-bottom:35px
    }

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

    .feature h3 {
        font-size:18px
    }

    .feature p {
        font-size:12px
    }

    .workflow-grid {
        gap:38px;
        grid-template-columns:.9fr 1.1fr
    }

    .workflow-list li {
        gap:15px
    }

    .workflow-list h3 {
        font-size:15px
    }

    .workflow-intro h2 {
        font-size:30px
    }

    .plan {
        padding:26px
    }

    .plan h3 {
        font-size:24px
    }

    .credit-illustration,.unlimited-illustration {
        gap:15px
    }

    .credit-illustration>span {
        font-size:55px
    }

    .credit-illustration>div,.unlimited-illustration>div {
        font-size:11px
    }

    .unlimited-illustration {
        min-height:76px
    }

    .faq-grid {
        gap:35px
    }

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

    .closing-inner {
        padding:35px
    }

    .closing-inner h2 {
        font-size:30px
    }

    .closing-inner .button {
        font-size:12px;
        gap:15px
    }

    .footer-inner {
        flex-wrap:wrap
    }

    .footer-inner p {
        order:3;
        width:100%
    }

}

@media(max-width:600px) {
    html {
        scroll-padding-top:88px
    }

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

    .header-inner {
        height:72px;
        flex-wrap:wrap;
        gap:0
    }

    .site-header nav {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        padding-bottom:16px;
        gap:10px 20px;
        background:#fff
    }

    .site-header:has(nav:not([hidden])) .header-inner {
        height:auto;
        min-height:72px;
        padding-top:16px;
        row-gap:16px
    }

    .site-header nav .nav-cta {
        border:0;
        padding:0;
        margin-left:auto
    }

    .menu-toggle {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        border:1px solid var(--line);
        background:#fff;
        padding:10px;
        border-radius:6px;
        width:40px;
        height:40px
    }

    .menu-toggle span {
        display:block;
        height:1.5px;
        width:18px;
        background:var(--ink)
    }

    .hero-grid {
        padding-top:34px;
        gap:38px
    }

    .hero-copy .eyebrow {
        font-size:8px;
        letter-spacing:1px;
        gap:10px
    }

    .hero h1 {
        font-size:clamp(50px,16vw,64px);
        letter-spacing:-3.5px;
        margin-block:22px
    }

    .heading-target {
        width:34px;
        height:34px;
        margin-left:10px
    }

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

    .hero-detail {
        font-size:14px;
        margin-top:14px
    }

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

    .hero-actions .text-link {
        font-size:12px
    }

    .hero-assurance {
        font-size:10px
    }

    .demo-scene {
        scroll-margin-top:94px
    }

    .demo-topbar {
        padding:15px 16px
    }

    .scenario-controls {
        margin:16px 16px 0
    }

    .scenario-controls button {
        font-size:9px;
        padding-inline:3px;
        min-height:36px
    }

    .demo-heading {
        margin:21px 16px 16px;
        gap:10px
    }

    .demo-heading h2 {
        font-size:18px
    }

    .demo-category {
        font-size:7px
    }

    .alert-icon {
        width:36px;
        height:36px
    }

    .demo-status-line {
        margin:0 16px 20px;
        font-size:8px
    }

    .status-badge {
        font-size:8px;
        padding:4px 6px
    }

    .timeline {
        margin-inline:16px;
        min-height:240px
    }

    .timeline li {
        gap:8px;
        min-height:61px
    }

    .timeline strong {
        font-size:11px
    }

    .timeline p {
        font-size:10px;
        max-width:205px
    }

    .timeline time {
        font-size:8px
    }

    .demo-summary {
        padding:13px 16px
    }

    .demo-player {
        padding:10px 16px
    }

    .demo-summary strong {
        font-size:18px
    }

    .audience-strip {
        padding-block:22px
    }

    .audience-strip ul {
        font-size:11px;
        column-gap:22px;
        row-gap:9px
    }

    .section-space {
        padding-block:48px
    }

    h2 {
        font-size:30px;
        letter-spacing:-1px
    }

    .eyebrow {
        font-size:9px;
        letter-spacing:1.5px
    }

    .section-heading {
        gap:19px;
        margin-bottom:30px
    }

    .section-heading>p {
        font-size:13px
    }

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

    .feature {
        padding-top:18px;
        padding-left:64px
    }

    .feature-number {
        font-size:8px
    }

    .feature-icon {
        position:absolute;
        left:0;
        top:38px;
        width:38px;
        height:38px;
        margin:0
    }

    .feature h3 {
        margin-top:14px;
        font-size:20px
    }

    .feature p {
        font-size:13px;
        max-width:none;
        margin-top:10px
    }

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

    .workflow-intro>p:not(.eyebrow) {
        max-width:none;
        font-size:13px
    }

    .workflow-intro .text-link {
        margin-top:20px
    }

    .workflow-list li {
        gap:18px
    }

    .workflow-list h3 {
        font-size:16px
    }

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

    .plan {
        padding:25px
    }

    .plan-top {
        margin-bottom:22px
    }

    .plan h3 {
        font-size:27px
    }

    .credit-illustration>span {
        font-size:62px
    }

    .credit-illustration>div,.unlimited-illustration>div {
        font-size:13px
    }

    .plan ul {
        font-size:12px
    }

    .plans-footnote {
        font-size:10px;
        text-align:left
    }

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

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

    .closing-section {
        padding-bottom:40px
    }

    .closing-inner {
        padding:30px;
        flex-direction:column;
        align-items:flex-start;
        gap:26px
    }

    .closing-inner h2 {
        font-size:30px
    }

    .closing-target {
        right:-95px;
        top:-6px
    }

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

    .footer-bottom {
        font-size:9px
    }

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

}

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

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

}