:root {
    --paper:#f6f5f0;
    --ink:#202b29;
    --muted:#58615d;
    --blue:#3458d4;
    --blue-hover:#2646b4;
    --line:#d8dcd4;
    --peach:#f1cfb9;
    --sage:#e5eadd;
    --white:#fff;
    --body:'DM Sans',sans-serif;
    --heading:'Manrope',sans-serif;
    --mono:'JetBrains Mono',monospace
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:24px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6
}
h1,h2,h3,p,figure {
    margin:0
}
h1,h2,h3 {
    font-family:var(--heading);
    font-weight:600
}
h1,h2 {
    letter-spacing:-.065em;
    line-height:1.08
}
h3 {
    letter-spacing:-.035em;
    line-height:1.25
}
a {
    color:inherit
}
button,input {
    font:inherit
}
button,summary {
    cursor:pointer
}
a,button,summary {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:5px
}
img {
    max-width:100%;
    height:auto;
    display:block
}
code,kbd,pre {
    font-family:var(--mono);
    font-size:.86em
}
code {
    overflow-wrap:anywhere
}
button {
    color:inherit
}
button:disabled {
    cursor:default
}
[hidden] {
    display:none!important
}
::selection {
    background:#cfdbff;
    color:#152660
}
.wrap {
    width:min(1200px,calc(100% - 96px));
    margin-inline:auto
}
.skip-link {
    position:fixed;
    z-index:10;
    left:12px;
    top:-80px;
    background:var(--ink);
    color:white;
    padding:12px 20px
}
.skip-link:focus {
    top:12px
}
.site-header {
    height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:32px
}
.logo {
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-family:var(--heading);
    font-size:27px;
    font-weight:800;
    letter-spacing:-1.5px
}
.logo img {
    border-radius:9px;
    flex:none
}
.logo-dot {
    color:var(--blue)
}
.desktop-nav {
    display:flex;
    gap:30px;
    margin-left:auto
}
.desktop-nav a {
    text-decoration:none;
    font-size:14px
}
.desktop-nav a:hover {
    color:var(--blue)
}
.button {
    background:var(--blue);
    color:white;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    padding:17px 23px;
    border:1px solid transparent;
    border-radius:6px;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    line-height:1.5;
    transition:background .18s,transform .18s
}
.button:hover {
    background:var(--blue-hover);
    transform:translateY(-2px)
}
.button span[aria-hidden] {
    font-size:20px;
    line-height:1
}
.button-small {
    font-size:13px;
    padding:12px 17px;
    gap:18px;
    background:var(--ink)
}
.button-small:hover {
    background:#394b46
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:24px;
    text-decoration:none;
    font-size:14px;
    padding-bottom:5px;
    border-bottom:1px solid currentColor
}
.text-link:hover {
    color:var(--blue)
}
.mobile-menu {
    display:none
}
.eyebrow {
    font-size:11px;
    font-weight:700;
    letter-spacing:.085em;
    display:flex;
    align-items:center;
    gap:9px
}
.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#508365;
    display:inline-block;
    flex:none
}
.hero {
    display:grid;
    grid-template-columns:1fr 1.06fr;
    align-items:center;
    gap:50px;
    padding-top:82px;
    padding-bottom:78px
}
.hero h1 {
    font-size:clamp(58px,6.3vw,84px);
    margin:25px 0 25px;
    font-weight:600
}
.hero h1>span {
    color:var(--blue)
}
.hero-spark {
    width:43px;
    height:43px;
    stroke:#cc603c;
    stroke-width:3.5;
    vertical-align:baseline;
    margin-left:15px
}
.hero-description {
    max-width:430px;
    color:var(--muted);
    font-size:18px;
    line-height:1.65
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:27px;
    margin-top:29px
}
.fine-print {
    font-size:12px;
    color:var(--muted);
    line-height:1.75
}
.hero .fine-print {
    margin-top:18px
}
.hero-art {
    position:relative;
    background:#e5eafb;
    min-width:0;
    padding:37px 23px 25px;
    border-radius:110px 7px 7px 7px;
    isolation:isolate
}
.art-orbit {
    position:absolute;
    z-index:-1;
    right:-14px;
    top:-18px;
    width:152px;
    height:152px;
    background:var(--peach);
    border-radius:50%
}
.art-note {
    font-size:14px;
    text-align:right;
    margin:6px 1px 27px;
    letter-spacing:-.02em
}
.demo-window {
    background:#fff;
    border:1px solid #c2c9db;
    border-radius:11px;
    box-shadow:0 22px 45px -25px #24376255;
    overflow:hidden
}
.window-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:46px;
    padding:0 15px;
    background:#f5f6f8;
    border-bottom:1px solid #e3e6ed;
    font-size:12px;
    font-weight:600
}
.traffic-lights {
    display:flex;
    gap:5px
}
.traffic-lights i {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ee8276
}
.traffic-lights i:nth-child(2) {
    background:#e6c46f
}
.traffic-lights i:nth-child(3) {
    background:#8abc8a
}
.window-mark {
    color:#6c7585;
    font-size:16px;
    width:35px;
    text-align:right
}
.demo-controls {
    display:flex;
    gap:4px;
    padding:14px 13px 0;
    flex-wrap:wrap
}
.demo-controls button {
    border:0;
    border-radius:4px;
    background:transparent;
    font-size:11px;
    line-height:1.4;
    padding:9px 10px;
    color:#626b7a
}
.demo-controls button[aria-pressed=true] {
    background:#eaf0ff;
    color:#2448bf
}
.demo-controls button:hover {
    background:#f0f3fa
}
.demo-content {
    padding:23px 22px 15px;
    min-height:253px
}
.demo-label {
    font-size:9px;
    letter-spacing:.09em;
    font-weight:700;
    color:#667184
}
.demo-prompt {
    font-size:20px;
    line-height:1.4;
    margin-top:6px;
    letter-spacing:-.035em;
    font-weight:500;
    max-width:340px
}
.demo-answer {
    margin-top:23px;
    padding-top:18px;
    border-top:1px solid #e5e9f1
}
.demo-answer .demo-label {
    color:#3458b6
}
.tiny-spark {
    font-size:14px;
    margin-right:3px
}
.demo-answer code {
    display:block;
    font-size:12px;
    line-height:1.7;
    color:#263350;
    margin-top:10px
}
.demo-answer>p:last-child {
    font-size:12px;
    color:#637084;
    margin-top:10px;
    line-height:1.6
}
.demo-bottom {
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding:13px 15px;
    border-top:1px solid #e6e9f0;
    background:#fbfcfd;
    font-size:10px
}
.demo-bottom .status-dot {
    width:5px;
    height:5px;
    margin-right:4px
}
.demo-bottom button {
    border:1px solid #c9d3e6;
    border-radius:4px;
    background:white;
    padding:8px;
    font-size:10px
}
.demo-bottom button:hover {
    background:#eef2fc
}
.demo-result {
    margin-top:14px;
    padding:12px;
    background:#f0f5ec;
    border-radius:5px
}
.demo-result pre {
    white-space:pre-wrap;
    font-size:11px;
    margin:6px 0 0;
    color:#325343;
    line-height:1.8;
    overflow-wrap:anywhere
}
.art-caption {
    display:flex;
    gap:10px;
    align-items:center;
    margin:23px 0 11px;
    font-size:13px
}
.caption-rule {
    height:1px;
    width:35px;
    background:var(--ink)
}
.demo-disclaimer {
    font-size:10px;
    color:#586584
}
.intro-strip {
    border-block:1px solid var(--line);
    padding:25px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    font-size:13px
}
.intro-strip p {
    line-height:1.65
}
.intro-strip>span {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted)
}
.intro-strip>span:before {
    content:'✳';
    font-size:17px;
    color:#a2593d
}
.section {
    padding-block:100px
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:45px;
    margin-bottom:48px
}
.section-heading .eyebrow {
    margin-bottom:22px
}
h2 {
    font-size:clamp(38px,4.5vw,57px)
}
.section-heading>p {
    max-width:310px;
    color:var(--muted);
    font-size:16px;
    padding-bottom:4px
}
.outcomes {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:35px
}
.outcome {
    padding-top:24px;
    border-top:1px solid var(--line)
}
.outcome-symbol {
    display:flex;
    width:55px;
    height:55px;
    align-items:center;
    justify-content:center;
    color:var(--blue);
    background:#e6eafd;
    border-radius:15px;
    font-family:var(--mono);
    font-size:23px;
    margin-bottom:25px
}
.outcome-symbol.orange {
    color:#a64c2f;
    background:#f5dfcf;
    font-size:32px
}
.outcome-symbol.green {
    color:#467253;
    background:#e2eadb;
    font-size:31px
}
.mini-label {
    font-size:10px;
    letter-spacing:.09em;
    font-weight:700;
    color:var(--muted)
}
.outcome h3 {
    font-size:24px;
    margin:13px 0 15px
}
.outcome>p {
    color:var(--muted);
    font-size:14px;
    line-height:1.8
}
.example-line {
    display:block;
    font-size:12px;
    margin-top:24px;
    color:#476067
}
.app-section {
    background:#ecede7
}
.app-gallery {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px
}
.app-shot {
    background:#dce3d4;
    padding:25px 30px 23px;
    border-radius:6px
}
.settings-shot {
    background:#e9dcca
}
.shot-header {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:.1em;
    margin-bottom:23px
}
.app-shot a {
    display:block;
    border-radius:10px;
    transition:transform .2s;
    box-shadow:0 12px 25px -15px #26302577
}
.app-shot a:hover {
    transform:translateY(-4px)
}
.app-shot img {
    border-radius:10px;
    width:100%
}
.app-shot figcaption {
    padding-top:25px;
    display:flex;
    flex-direction:column;
    gap:4px
}
.app-shot figcaption strong {
    font-size:16px;
    font-weight:500;
    letter-spacing:-.025em
}
.app-shot figcaption span {
    font-size:12px;
    color:var(--muted)
}
.gallery-note {
    font-size:11px;
    color:var(--muted);
    text-align:center;
    margin-top:17px
}
.app-details {
    display:flex;
    gap:20px;
    justify-content:space-between;
    flex-wrap:wrap;
    margin:35px 0;
    font-size:13px
}
.app-details span:before {
    content:'✓';
    margin-right:7px;
    color:#44714f
}
.shortcut-details {
    border-block:1px solid #cfd5c9;
    padding:18px 0;
    scroll-margin-top:20px
}
.shortcut-details summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    font-size:15px;
    list-style:none
}
.shortcut-details summary>span {
    font-size:12px;
    color:var(--muted)
}
.shortcut-details summary span span {
    font-size:20px;
    margin-left:20px
}
.shortcut-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 40px;
    margin:25px 0
}
.shortcut-grid p {
    display:flex;
    justify-content:space-between;
    font-size:13px
}
.shortcut-grid kbd {
    border:1px solid #c9cec3;
    border-radius:3px;
    padding:1px 6px
}
.shortcut-details>.text-link {
    margin-top:10px
}
.ai-options {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
}
.ai-options article {
    border-top:1px solid var(--line);
    padding:19px 0 0;
    display:flex;
    flex-direction:column
}
.option-number {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:var(--mono);
    font-size:12px
}
.option-number span {
    font-family:var(--body);
    font-size:9px;
    letter-spacing:.04em;
    color:var(--muted)
}
.ai-options h3 {
    font-size:27px;
    margin:27px 0 14px
}
.ai-options p {
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
    flex:1
}
.option-footer {
    background:#eceee7;
    border-radius:4px;
    padding:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:12px;
    margin-top:25px
}
.ai-options article:nth-child(2) .option-footer {
    background:#e8ecfa
}
.ai-options article:nth-child(3) .option-footer {
    background:#f3e3d6
}
.reassurance {
    display:flex;
    align-items:center;
    gap:20px;
    background:var(--sage);
    border-radius:6px;
    margin-top:47px;
    padding:23px 26px
}
.reassurance-mark {
    border:1px solid #8d9f83;
    border-radius:50%;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none
}
.reassurance p {
    font-size:13px;
    color:#4f5c4f;
    flex:1;
    max-width:760px
}
.reassurance strong {
    display:block;
    color:var(--ink);
    font-size:14px;
    margin-bottom:3px
}
.reassurance .text-link {
    white-space:nowrap;
    font-size:12px
}
.provider-link {
    margin-top:20px;
    font-size:12px
}
.pro-section {
    background:#e9edfb;
    padding:55px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    border-radius:8px
}
.pro-intro .eyebrow {
    font-size:10px
}
.pro-intro h2 {
    font-size:46px;
    margin:22px 0
}
.pro-intro>p:not(.eyebrow) {
    font-size:15px;
    color:var(--muted);
    max-width:320px
}
.pro-intro .text-link {
    margin-top:25px
}
.pro-features article {
    display:flex;
    gap:20px;
    padding:23px 0;
    border-bottom:1px solid #cdd4e8
}
.pro-features article:first-child {
    padding-top:0
}
.pro-features article:last-child {
    border-bottom:0;
    padding-bottom:0
}
.pro-features article>span {
    font-family:var(--mono);
    font-size:11px;
    color:var(--blue);
    padding-top:6px
}
.pro-features h3 {
    font-size:21px
}
.pro-features p {
    font-size:13px;
    color:var(--muted);
    margin-top:9px;
    line-height:1.75
}
.pricing-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
}
.price-card {
    border:1px solid var(--line);
    border-radius:7px;
    padding:36px 40px;
    display:flex;
    flex-direction:column
}
.plan-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.plan-top h3 {
    font-size:27px
}
.plan-top>span {
    font-size:9px;
    letter-spacing:.07em;
    color:var(--muted)
}
.price {
    font-family:var(--heading);
    font-size:64px;
    line-height:1.2;
    letter-spacing:-.06em;
    margin:25px 0 12px;
    font-weight:500
}
.price span {
    font-size:14px;
    letter-spacing:0;
    color:var(--muted)
}
.price #pro-amount {
    font-size:inherit;
    letter-spacing:inherit;
    color:var(--ink)
}
.plan-description,#pro-subnote {
    font-size:14px;
    color:var(--muted);
    margin-bottom:25px;
    min-height:24px
}
.price-card>.button {
    width:100%;
    justify-content:space-between
}
.button-outline {
    background:transparent;
    border-color:var(--ink);
    color:var(--ink)
}
.button-outline:hover {
    background:#e9ece3
}
.plan-list {
    list-style:none;
    margin:27px 0 25px;
    padding:0;
    flex:1
}
.plan-list li {
    font-size:14px;
    padding:7px 0 7px 23px;
    position:relative
}
.plan-list li:before {
    content:'✓';
    position:absolute;
    left:0;
    color:#397045
}
.price-pro {
    background:#eaf0e3;
    border-color:#c7d3ba
}
.billing-toggle {
    display:flex;
    align-self:flex-start;
    background:#dce5d3;
    border-radius:5px;
    padding:3px;
    margin-top:17px
}
.billing-toggle button {
    background:transparent;
    border:0;
    padding:7px 12px;
    border-radius:3px;
    font-size:12px;
    min-height:34px
}
.billing-toggle button[aria-pressed=true] {
    background:#fff;
    box-shadow:0 1px 3px #20302a20
}
.billing-toggle button>span {
    font-size:9px;
    margin-left:6px;
    color:#426b35
}
.price-pro .price {
    margin-top:18px
}
.price-card:first-child .price {
    margin-top:76px
}
.pricing-note {
    font-size:12px;
    text-align:center;
    margin-top:22px;
    color:var(--muted)
}
.faq-section {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    padding-bottom:100px
}
.faq-section h2 {
    font-size:42px;
    margin:23px 0
}
.faq-section .text-link {
    margin-top:9px
}
.faq-list details {
    border-top:1px solid var(--line)
}
.faq-list details:last-child {
    border-bottom:1px solid var(--line)
}
.faq-list summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    list-style:none;
    padding:21px 0;
    font-size:15px;
    font-weight:500
}
.faq-list summary>span {
    font-size:22px;
    font-weight:400
}
.faq-list details[open] summary>span {
    transform:rotate(45deg)
}
.faq-list details p {
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
    padding-bottom:25px
}
.install-section {
    background:var(--peach)
}
.install-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    padding-block:70px;
    align-items:center
}
.install-inner h2 {
    font-size:65px;
    margin:23px 0
}
.install-inner h2+p {
    font-size:17px;
    color:#5c5147;
    margin-bottom:25px
}
.install-inner .fine-print {
    margin-top:14px;
    color:#62564d
}
.install-options {
    min-width:0
}
.install-options img {
    margin-bottom:30px;
    border-radius:23px;
    box-shadow:0 15px 30px -20px #3d2513aa
}
.install-options>p:not(.fine-print) {
    font-size:14px
}
.install-command {
    margin-top:12px;
    background:#f8e5d7;
    border:1px solid #caa88f;
    border-radius:5px;
    padding:15px;
    display:flex;
    gap:12px;
    align-items:center
}
.install-command code {
    font-size:11px;
    line-height:1.9;
    flex:1;
    min-width:0;
    user-select:all
}
.install-command button {
    background:transparent;
    border:1px solid #b9977f;
    border-radius:3px;
    padding:9px;
    font-size:11px
}
.install-command button:hover {
    background:#f1d4bd
}
.install-links {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:25px
}
.install-links a {
    font-size:12px
}
.footer-main {
    padding:55px 0 40px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:35px
}
.footer-brand p {
    font-size:13px;
    color:var(--muted);
    max-width:340px;
    margin-top:18px
}
.footer-main nav {
    display:flex;
    flex-direction:column;
    gap:10px
}
.footer-main nav a {
    font-size:13px;
    text-decoration:none
}
.footer-main nav a:hover {
    text-decoration:underline
}
.footer-bottom {
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
    padding:22px 0 35px;
    font-size:11px;
    color:var(--muted)
}
.cli-details {
    max-width:360px;
    min-width:0
}
.cli-details summary {
    font-size:11px
}
.cli-details p {
    margin-top:10px
}
.cli-details code {
    overflow-wrap:anywhere
}
summary::-webkit-details-marker {
    display:none
}
.cli-details summary {
    list-style:none;
    text-decoration:underline
}
@media(min-width:1400px) {
    .hero {
        gap:65px
    }
    .hero h1 {
        font-size:87px
    }
    .hero-art {
        padding:42px 27px 29px
    }
    .demo-content {
        min-height:285px;
        padding:27px
    }
    .demo-controls {
        padding:16px 20px 0
    }
    .demo-prompt {
        font-size:23px
    }
}
@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 64px)
    }
    .desktop-nav {
        gap:20px
    }
    .hero {
        gap:28px;
        padding-top:64px
    }
    .hero h1 {
        font-size:65px
    }
    .hero-description {
        font-size:16px
    }
    .hero-actions {
        gap:18px;
        flex-wrap:wrap
    }
    .hero-art {
        padding:30px 15px 20px
    }
    .demo-controls button {
        font-size:10px;
        padding:8px
    }
    .demo-content {
        padding:20px 17px;
        min-height:255px
    }
    .demo-prompt {
        font-size:19px
    }
    .demo-bottom {
        padding:12px 10px;
        font-size:9px;
        gap:7px
    }
    .demo-bottom button {
        font-size:9px
    }
    .art-note {
        font-size:12px
    }
    .hero-spark {
        width:33px;
        height:33px
    }
    .section {
        padding-block:80px
    }
    .section-heading>p {
        max-width:265px;
        font-size:14px
    }
    .outcomes {
        gap:24px
    }
    .outcome h3 {
        font-size:22px
    }
    .pro-section {
        padding:40px;
        gap:40px
    }
    .pro-intro h2 {
        font-size:39px
    }
    .price-card {
        padding:30px
    }
    .faq-section {
        gap:40px
    }
    .install-inner {
        gap:50px
    }
    .intro-strip>span {
        font-size:11px
    }
}
@media(max-width:800px) {
    .site-header {
        height:80px;
        gap:20px
    }
    .desktop-nav {
        display:none
    }
    .header-download {
        margin-left:auto
    }
    .mobile-menu {
        display:block;
        position:relative
    }
    .mobile-menu summary {
        font-size:13px;
        list-style:none;
        padding:10px 0
    }
    .mobile-menu summary span {
        margin-left:10px
    }
    .mobile-menu nav {
        position:absolute;
        z-index:5;
        right:0;
        top:40px;
        min-width:190px;
        padding:18px 23px;
        background:var(--paper);
        border:1px solid var(--line);
        box-shadow:0 10px 25px #202b2920;
        border-radius:5px;
        display:flex;
        flex-direction:column;
        gap:18px
    }
    .mobile-menu nav a {
        font-size:14px;
        text-decoration:none
    }
    .hero {
        grid-template-columns:1fr;
        padding:55px 0 50px;
        gap:45px
    }
    .hero h1 {
        font-size:76px
    }
    .hero h1 br:nth-child(2) {
        display:none
    }
    .hero h1>span:before {
        content:' '
    }
    .hero-description {
        max-width:520px;
        font-size:18px
    }
    .hero-art {
        width:100%;
        max-width:560px;
        justify-self:center;
        padding:30px
    }
    .demo-controls button {
        font-size:12px;
        padding:9px 12px
    }
    .demo-content {
        min-height:245px;
        padding:25px
    }
    .demo-prompt {
        font-size:23px;
        max-width:400px
    }
    .demo-bottom {
        font-size:11px;
        padding:14px
    }
    .demo-bottom button {
        font-size:11px
    }
    .demo-disclaimer {
        font-size:11px
    }
    .art-note {
        font-size:14px
    }
    .intro-strip {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .intro-strip>span {
        font-size:13px
    }
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:25px
    }
    .section-heading>p {
        max-width:450px;
        font-size:16px
    }
    .outcomes {
        grid-template-columns:1fr;
        gap:35px
    }
    .outcome {
        display:grid;
        grid-template-columns:60px 1fr;
        gap:0 20px
    }
    .outcome-symbol {
        grid-column:1;
        grid-row:1/5;
        margin:0
    }
    .outcome>span:not(.outcome-symbol),.outcome h3,.outcome p {
        grid-column:2
    }
    .outcome h3 {
        font-size:25px;
        margin-top:10px
    }
    .outcome h3 br {
        display:none
    }
    .example-line {
        margin-top:14px
    }
    .app-shot {
        padding:20px
    }
    .app-shot figcaption strong {
        font-size:14px
    }
    .app-shot figcaption span {
        font-size:11px
    }
    .app-details {
        justify-content:flex-start;
        gap:15px 25px
    }
    .shortcut-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .ai-options {
        gap:20px
    }
    .ai-options h3 {
        font-size:22px
    }
    .option-number {
        align-items:flex-start;
        gap:10px
    }
    .option-number>span {
        max-width:95px;
        text-align:right;
        font-size:8px
    }
    .option-footer {
        font-size:11px
    }
    .reassurance {
        flex-wrap:wrap
    }
    .reassurance p {
        flex-basis:75%
    }
    .reassurance .text-link {
        margin-left:50px
    }
    .pro-section {
        grid-template-columns:1fr;
        gap:35px
    }
    .pro-intro h2 {
        font-size:46px
    }
    .pro-intro>p:not(.eyebrow) {
        max-width:500px
    }
    .price-card {
        padding:25px
    }
    .plan-top>span {
        font-size:8px
    }
    .price-card .button {
        font-size:13px;
        padding:15px
    }
    .plan-list li {
        font-size:12px
    }
    .price {
        font-size:54px
    }
    .price span {
        font-size:11px
    }
    .billing-toggle button {
        font-size:11px;
        padding:6px 8px
    }
    .faq-section {
        grid-template-columns:1fr;
        gap:30px
    }
    .install-inner {
        gap:30px
    }
    .install-inner h2 {
        font-size:49px
    }
    .install-command {
        flex-wrap:wrap
    }
    .install-command code {
        flex-basis:100%
    }
    .footer-main {
        grid-template-columns:1.5fr 1fr 1fr;
        gap:25px
    }
    .footer-bottom {
        flex-wrap:wrap
    }
}
@media(max-width:540px) {
    .wrap {
        width:calc(100% - 40px)
    }
    .site-header {
        height:76px;
        gap:15px
    }
    .logo {
        font-size:24px
    }
    .logo img {
        width:29px;
        height:29px
    }
    .header-download {
        font-size:11px;
        padding:9px 11px;
        gap:10px
    }
    .mobile-menu summary {
        font-size:12px
    }
    .hero {
        padding-top:42px;
        gap:35px
    }
    .eyebrow {
        font-size:9px
    }
    .hero h1 {
        font-size:64px;
        line-height:1.09;
        margin:22px 0
    }
    .hero h1 br:nth-child(2) {
        display:initial
    }
    .hero h1>span:before {
        content:none
    }
    .hero-spark {
        width:33px;
        height:33px;
        margin-left:13px
    }
    .hero-description {
        font-size:16px;
        line-height:1.7
    }
    .hero-actions {
        gap:22px;
        margin-top:25px;
        flex-wrap:wrap
    }
    .hero-actions .button {
        font-size:13px;
        gap:20px;
        padding:16px 18px
    }
    .hero-actions .text-link {
        font-size:12px;
        gap:12px
    }
    .hero .fine-print {
        font-size:11px
    }
    .hero-art {
        padding:22px 12px 18px;
        border-top-left-radius:65px
    }
    .art-orbit {
        width:92px;
        height:92px;
        right:-5px;
        top:-9px
    }
    .art-note {
        font-size:12px;
        margin:3px 0 20px
    }
    .demo-controls {
        padding:12px 8px 0;
        gap:1px
    }
    .demo-controls button {
        font-size:9px;
        padding:8px
    }
    .demo-content {
        padding:21px 15px;
        min-height:260px
    }
    .demo-prompt {
        font-size:21px
    }
    .demo-answer code {
        font-size:11px
    }
    .demo-bottom {
        font-size:9px;
        gap:5px;
        padding:11px 9px;
        flex-wrap:wrap
    }
    .demo-bottom button {
        font-size:9px;
        padding:8px
    }
    .art-caption {
        font-size:12px
    }
    .demo-disclaimer {
        font-size:9px;
        line-height:1.7
    }
    .intro-strip {
        font-size:11px;
        gap:16px 10px;
        padding:23px 0
    }
    .intro-strip>span {
        font-size:10px;
        gap:5px
    }
    .intro-strip>span:before {
        font-size:13px
    }
    .section {
        padding-block:64px
    }
    .section-heading {
        gap:20px;
        margin-bottom:32px
    }
    .section-heading .eyebrow {
        margin-bottom:18px
    }
    h2 {
        font-size:39px
    }
    .section-heading>p {
        font-size:15px
    }
    .outcome {
        grid-template-columns:42px 1fr;
        gap:0 16px
    }
    .outcome-symbol {
        width:41px;
        height:41px;
        border-radius:10px;
        font-size:19px
    }
    .outcome-symbol.orange,.outcome-symbol.green {
        font-size:26px
    }
    .outcome h3 {
        font-size:23px
    }
    .outcome p {
        font-size:13px
    }
    .mini-label {
        font-size:9px
    }
    .example-line {
        font-size:11px
    }
    .app-gallery {
        grid-template-columns:1fr;
        gap:22px
    }
    .app-shot {
        padding:20px
    }
    .app-shot figcaption strong {
        font-size:17px
    }
    .app-shot figcaption span {
        font-size:12px
    }
    .gallery-note {
        font-size:10px
    }
    .app-details {
        font-size:11px;
        gap:12px 18px
    }
    .shortcut-details summary {
        font-size:13px
    }
    .shortcut-details summary>span {
        font-size:10px
    }
    .shortcut-details summary span span {
        margin-left:7px
    }
    .shortcut-grid {
        grid-template-columns:1fr
    }
    .ai-options {
        grid-template-columns:1fr;
        gap:32px
    }
    .option-number span {
        font-size:9px;
        max-width:none
    }
    .ai-options h3 {
        font-size:28px;
        margin-top:20px
    }
    .option-footer {
        font-size:12px;
        margin-top:18px
    }
    .reassurance {
        padding:20px;
        gap:14px
    }
    .reassurance-mark {
        display:none
    }
    .reassurance p {
        font-size:12px
    }
    .reassurance .text-link {
        margin-left:0
    }
    .pro-section {
        padding:30px 24px
    }
    .pro-intro .eyebrow {
        font-size:8px
    }
    .pro-intro h2 {
        font-size:36px
    }
    .pro-features h3 {
        font-size:20px
    }
    .pricing-grid {
        grid-template-columns:1fr
    }
    .price-card {
        padding:28px
    }
    .price-card:first-child .price {
        margin-top:25px
    }
    .plan-top>span {
        font-size:9px
    }
    .price {
        font-size:61px
    }
    .price span {
        font-size:13px
    }
    .plan-list li {
        font-size:14px
    }
    .price-card .button {
        font-size:14px
    }
    .billing-toggle button {
        font-size:12px;
        padding:8px 12px
    }
    .faq-section {
        padding-bottom:64px
    }
    .faq-section h2 {
        font-size:38px
    }
    .faq-list summary {
        font-size:14px
    }
    .install-inner {
        grid-template-columns:1fr;
        padding-block:55px;
        gap:35px
    }
    .install-inner h2 {
        font-size:58px
    }
    .install-options {
        padding-top:28px;
        border-top:1px solid #caa68b
    }
    .install-options img {
        width:64px;
        height:64px;
        border-radius:15px;
        margin-bottom:20px
    }
    .install-command {
        flex-wrap:nowrap
    }
    .install-command code {
        flex-basis:auto
    }
    .footer-main {
        grid-template-columns:1fr 1fr;
        gap:35px;
        padding-top:40px
    }
    .footer-brand {
        grid-column:1/-1
    }
    .footer-bottom {
        gap:16px;
        font-size:10px
    }
    .cli-details {
        order:3;
        flex-basis:100%;
        max-width:100%
    }
}
@media(max-width:360px) {
    .wrap {
        width:calc(100% - 32px)
    }
    .header-download {
        display:none
    }
    .mobile-menu {
        margin-left:auto
    }
    .hero h1 {
        font-size:57px
    }
    .hero-spark {
        width:27px;
        height:27px
    }
    .hero-actions .text-link {
        padding:6px 0
    }
    .demo-controls button {
        font-size:8px;
        padding:8px 6px
    }
    .demo-bottom {
        gap:10px
    }
    .hero-art {
        padding-inline:10px
    }
    .intro-strip {
        grid-template-columns:1fr
    }
    .intro-strip>span {
        font-size:12px
    }
    h2 {
        font-size:34px
    }
    .pro-intro h2 {
        font-size:32px
    }
    .price-card {
        padding:23px
    }
    .shortcut-details summary>span {
        font-size:0
    }
    .shortcut-details summary span span {
        font-size:18px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}