.landing-page {
    --lp-ink:#183b32;
    --lp-muted:#657169;
    --lp-paper:#f8f8f0;
    --lp-line:#dde3d8;
    background:var(--lp-paper);
    color:var(--lp-ink);
    font-family:"Segoe UI",Arial,sans-serif;
    line-height:1.6;
    overflow:hidden
}

.landing-page a {
    text-decoration:none
}

.landing-page h1,.landing-page h2,.landing-page h3,.landing-page p {
    margin:0
}

.landing-page h1,.landing-page h2 {
    font-weight:500;
    letter-spacing:-.055em;
    line-height:1.08
}

.landing-page h1 {
    font-size:clamp(2.8rem,4.7vw,5rem)
}

.landing-page h2 {
    font-size:clamp(2.2rem,3.3vw,3.5rem)
}

.landing-page em {
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    color:#62836a
}

.landing-page a:focus-visible,.landing-page summary:focus-visible {
    outline:3px solid #91782f;
    outline-offset:5px
}

.landing-page section[id] {
    scroll-margin-top:30px
}

/* Blazor focuses the heading after navigation; it is not an interactive control. */
.landing-page h1:focus {
    outline:none;
}

.lp-header {
    max-width:1440px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:26px 5%;
    border-bottom:1px solid var(--lp-line)
}

.lp-brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:19px;
    font-weight:700;
    letter-spacing:-.5px;
    white-space:nowrap
}

.lp-brand-icon {
    display:grid;
    place-items:center;
    background:var(--lp-ink);
    color:#fff;
    width:34px;
    height:34px;
    border-radius:9px;
    font-size:26px;
    line-height:1;
    padding-bottom:4px
}

.lp-brand-dot {
    width:6px;
    height:6px;
    background:#87a36c;
    border-radius:50%;
    align-self:flex-start;
    margin:8px 0 0 -5px
}

.lp-header nav,.lp-header-actions {
    display:flex;
    align-items:center;
    gap:30px;
    font-size:13px;
    font-weight:600
}

.landing-page nav a:hover,.lp-text-link:hover {
    color:#6a8054
}

.lp-header-actions {
    gap:24px
}

.lp-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    background:var(--lp-ink);
    color:#fff;
    padding:16px 23px;
    border-radius:6px;
    font-size:14px;
    font-weight:600;
    transition:background .15s,transform .15s
}

.lp-button:hover {
    background:#2d5845;
    transform:translateY(-2px)
}

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

.lp-button-small {
    padding:12px 18px;
    font-size:12px;
    gap:18px
}

.lp-header-start {
    padding:14px 22px;
    font-size:14px;
    gap:18px
}

.lp-skip {
    position:absolute;
    top:-100px;
    left:20px;
    background:#fff;
    padding:12px;
    z-index:100
}

.lp-skip:focus {
    top:10px
}

.lp-hero {
    max-width:1440px;
    margin:auto;
    padding:94px 5% 82px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:7%
}

.lp-eyebrow {
    font-size:11px;
    font-weight:700;
    letter-spacing:1.7px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:23px!important
}

.lp-eyebrow>span {
    height:7px;
    width:7px;
    background:#78976d;
    border-radius:50%;
    box-shadow:0 0 0 4px #e9eddf
}

.lp-hero .lp-eyebrow {
    letter-spacing:.7px
}

.lp-lead {
    color:var(--lp-muted);
    font-size:16px;
    line-height:1.85;
    max-width:470px;
    margin-top:26px!important
}

.lp-hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
    margin-top:18px
}

.lp-hero-actions .lp-trial-note {
    margin-top:0!important
}

.lp-paths {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:34px
}

.lp-path {
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 20px 20px 18px;
    border:1.5px solid var(--lp-ink);
    border-radius:10px;
    background:#fff;
    color:var(--lp-ink);
    text-align:left;
    transition:background .15s,transform .15s,box-shadow .15s
}

.lp-path:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(25,61,50,.16)
}

.lp-path-primary {
    background:var(--lp-ink);
    color:#fff
}

.lp-path-primary:hover {
    background:#2d5845
}

.lp-path-icon {
    flex:none;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#e6eedb;
    color:var(--lp-ink);
    font-size:20px
}

.lp-path-text {
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
    min-width:0
}

.lp-path-text strong {
    font-size:17px;
    font-weight:650;
    line-height:1.25
}

.lp-path-text small {
    font-size:12.5px;
    line-height:1.4;
    opacity:.78
}

.lp-path-arrow {
    flex:none;
    font-size:22px;
    line-height:1;
    transition:transform .15s
}

.lp-path:hover .lp-path-arrow {
    transform:translateX(3px)
}

.lp-final-cta .lp-paths {
    max-width:760px;
    margin:32px auto 0
}

.lp-final-cta .lp-path {
    border-color:#dce8c4;
    background:transparent;
    color:#fff
}

.lp-final-cta .lp-path-primary {
    background:#dce8c4;
    color:#193d32
}

.lp-final-cta .lp-path:hover {
    background:rgba(220,232,196,.12)
}

.lp-final-cta .lp-path-primary:hover {
    background:#eaf2d8
}

.lp-text-link {
    font-size:13px;
    font-weight:600;
    display:flex;
    gap:12px;
    align-items:center
}

.lp-trial-note {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--lp-muted);
    font-size:11px;
    margin-top:14px!important
}

.lp-trial-note>span:first-child {
    color:#52774d
}

.lp-audience {
    display:flex;
    align-items:center;
    gap:22px;
    border-top:1px solid var(--lp-line);
    padding-top:23px;
    margin-top:41px;
    color:var(--lp-muted);
    font-size:11px
}

.lp-audience p {
    font-size:12px;
    color:var(--lp-ink);
    font-weight:600
}

.lp-audience p span {
    color:#a3ac9a;
    padding:0 8px
}

.lp-preview {
    position:relative;
    padding:20px 0 36px;
    min-width:0
}

.lp-orbit {
    position:absolute;
    inset:-30px -30px;
    background:radial-gradient(ellipse,#dae4cc 0%,#edf0e2 55%,transparent 70%);
    border-radius:50%
}

.lp-preview-window {
    position:relative;
    background:#fff;
    border:1px solid #d5ddcb;
    border-radius:12px;
    box-shadow:0 28px 60px #24403212;
    transform:rotate(-2deg);
    overflow:hidden
}

.lp-window-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #e6eadf;
    padding:14px 19px;
    font-size:8px;
    letter-spacing:1.5px;
    color:#748071;
    background:#fafbf7
}

.lp-window-dots {
    letter-spacing:3px;
    color:#c5cfbb
}

.lp-preview-body {
    padding:28px
}

.lp-preview-heading {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.lp-preview-kicker {
    font-size:8px;
    font-weight:700;
    letter-spacing:1.7px;
    color:#7e8b77
}

.lp-preview-heading h2 {
    font-size:25px;
    letter-spacing:-1px;
    margin-top:6px
}

.lp-preview-symbol {
    font-size:32px;
    color:#769067
}

.lp-search-example {
    border:1px solid #dbe2d5;
    border-radius:5px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px;
    font-size:11px;
    margin-top:23px
}

.lp-search-example>span:first-child {
    font-size:20px;
    color:#71876b
}

.lp-search-arrow {
    margin-left:auto;
    background:#1e4438;
    color:#fff;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:4px
}

.lp-filter-examples {
    display:flex;
    gap:7px;
    margin:12px 0 23px
}

.lp-filter-examples span {
    font-size:9px;
    background:#f3f5ee;
    padding:5px 9px;
    border-radius:4px;
    color:#6e7a65
}

.lp-example-result {
    padding:19px;
    border:1px solid #dfe5d8;
    border-radius:7px;
    background:#fafcf6
}

.lp-result-top {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    font-size:8px
}

.lp-result-label {
    font-weight:700;
    letter-spacing:1px;
    background:#e6eddc;
    padding:4px 7px;
    border-radius:3px
}

.lp-result-source {
    color:#7d8973
}

.lp-example-result h3 {
    font-size:17px;
    letter-spacing:-.4px;
    margin-top:13px
}

.lp-example-result p {
    font-size:11px;
    line-height:1.7;
    color:#6e7a65;
    margin-top:8px;
    max-width:300px
}

.lp-result-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #e1e7d9;
    margin-top:17px;
    padding-top:12px;
    font-size:10px;
    font-weight:600
}

.lp-preview-steps {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:8px;
    margin-top:22px;
    color:#7c8774
}

.lp-preview-steps b {
    color:#426149;
    padding-right:4px
}

.lp-floating-note {
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    margin:-5px -10px 0 50px;
    padding:16px 19px;
    background:var(--lp-ink);
    border-radius:7px;
    color:white;
    box-shadow:0 15px 35px #183b3220;
    transform:rotate(1deg)
}

.lp-note-icon {
    display:grid;
    place-items:center;
    font-size:24px;
    width:38px;
    height:38px;
    background:#ffffff15;
    border:1px solid #ffffff30;
    border-radius:8px
}

.lp-floating-note strong {
    display:block;
    font-size:12px;
    font-weight:600
}

.lp-floating-note div>span {
    font-size:9px;
    color:#c5d4bd
}

.lp-value-strip {
    max-width:1440px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid var(--lp-line);
    border-bottom:1px solid var(--lp-line);
    padding:27px 5%;
    font-size:12px
}

.lp-value-strip>p {
    font-size:11px;
    color:var(--lp-muted)
}

.lp-value-strip strong {
    font-weight:600;
    color:var(--lp-ink)
}

.lp-value-strip>span {
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px
}

.lp-value-strip>span::before {
    content:"\2733";
    font-size:18px;
    color:#87a16f
}

.lp-section {
    max-width:1440px;
    margin:auto;
    padding:85px 5%
}

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

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

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

.lp-feature {
    position:relative;
    padding:28px;
    background:#fff;
    border:1px solid var(--lp-line);
    border-radius:9px;
    display:flex;
    flex-direction:column
}

.lp-feature-icon {
    font-size:28px;
    line-height:1;
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    border-radius:9px;
    background:#eef2e5;
    margin-bottom:28px
}

.lp-feature-number {
    font-size:9px;
    font-weight:600;
    letter-spacing:1.6px;
    color:#78856f;
    margin-bottom:12px
}

.lp-feature h3 {
    font-size:21px;
    line-height:1.3;
    letter-spacing:-.5px;
    font-weight:600;
    max-width:270px
}

.lp-feature p {
    color:var(--lp-muted);
    font-size:13px;
    line-height:1.8;
    margin-top:16px;
    flex:1
}

.lp-feature a {
    font-size:12px;
    font-weight:600;
    margin-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:20px;
    border-top:1px solid #e7ecdf
}

.lp-feature a:hover {
    color:#64854a
}

.lp-workflow {
    background:#eef1e5;
    padding:65px max(5%,calc((100% - 1296px)/2));
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%
}

.lp-workflow>div>p:not(.lp-eyebrow) {
    color:var(--lp-muted);
    font-size:14px;
    margin-top:22px;
    max-width:330px
}

.lp-workflow .lp-button {
    margin-top:28px
}

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

.lp-workflow-list li {
    display:flex;
    align-items:flex-start;
    gap:23px;
    padding:24px 0;
    border-bottom:1px solid #d6ddcb
}

.lp-workflow-list li:first-child {
    padding-top:0
}

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

.lp-workflow-list li>span {
    font-family:Georgia,serif;
    font-size:26px;
    color:#92a080;
    line-height:1.3
}

.lp-workflow-list h3 {
    font-size:18px;
    font-weight:600;
    letter-spacing:-.4px
}

.lp-workflow-list p {
    font-size:13px;
    color:var(--lp-muted);
    margin-top:6px;
    max-width:350px
}

.lp-faq {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:10%
}

.lp-faq>div>p:not(.lp-eyebrow) {
    font-size:14px;
    color:var(--lp-muted);
    margin-top:20px
}

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

.lp-faq details:first-child {
    border-top:1px solid var(--lp-line)
}

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

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

.lp-faq summary span {
    font-size:23px;
    font-weight:400;
    color:#829576
}

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

.lp-faq details p {
    color:var(--lp-muted);
    font-size:13px;
    line-height:1.8;
    padding:15px 30px 0 0
}

.lp-final-cta {
    position:relative;
    background:#193d32;
    color:#fff;
    text-align:center;
    padding:65px 24px
}

.lp-final-cta .lp-eyebrow {
    justify-content:center;
    color:#c4d7b2
}

.lp-final-cta h2 {
    font-size:clamp(2.5rem,4vw,4rem)
}

.lp-final-cta em {
    color:#c7d7b3
}

.lp-final-cta>p:not(.lp-eyebrow) {
    color:#c2d0c3;
    font-size:14px;
    margin-top:20px
}

.lp-final-cta .lp-button {
    background:#dce8c4;
    color:#193d32;
    margin-top:28px
}

.lp-final-cta .lp-button:hover {
    background:#eaf2d8
}

.lp-final-cta .lp-trial-note {
    justify-content:center;
    color:#bccabc
}

.lp-footer {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:20px;
    max-width:1440px;
    margin:auto;
    padding:34px 5%
}

.lp-footer>.lp-brand {
    font-size:15px
}

.lp-footer>.lp-brand .lp-brand-icon {
    width:28px;
    height:28px;
    font-size:22px
}

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

.lp-footer nav {
    display:flex;
    gap:22px;
    font-size:11px
}

.lp-footer small {
    grid-column:1/-1;
    color:#86917d;
    font-size:10px
}

@media(min-width:1500px) {
    .lp-hero {
        padding-top:110px;
        padding-bottom:110px
    }

}

@media(max-width:1100px) {
    .lp-header nav {
        gap:18px
    }

    .lp-header-actions {
        gap:15px
    }

    .lp-hero {
        gap:4%;
        padding-top:65px
    }

    .lp-audience {
        flex-wrap:wrap;
        gap:12px
    }

    .lp-hero-actions {
        gap:16px
    }

    .lp-hero .lp-paths {
        grid-template-columns:1fr
    }

    .lp-value-strip {
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:22px 35px
    }

    .lp-feature {
        padding:22px
    }

    .lp-footer {
        grid-template-columns:1fr auto
    }

    .lp-footer>p {
        grid-row:2
    }

    .lp-footer nav {
        grid-column:2;
        grid-row:1/3
    }

    .lp-footer small {
        grid-row:3
    }

}

@media(max-width:760px) {
    .lp-header {
        padding:20px 5%;
        flex-wrap:wrap;
        gap:18px
    }

    .lp-header nav {
        order:3;
        justify-content:center;
        width:100%;
        gap:32px;
        border-top:1px solid var(--lp-line);
        padding-top:14px
    }

    .lp-brand {
        font-size:16px
    }

    .lp-header-actions {
        gap:12px
    }

    .lp-paths {
        grid-template-columns:1fr
    }

    .lp-header-start {
        padding:11px 14px;
        font-size:12px;
        gap:10px
    }

    .lp-button-small {
        padding:10px 12px;
        font-size:11px;
        gap:10px
    }

    .lp-hero {
        grid-template-columns:1fr;
        padding:50px 6% 40px;
        gap:40px
    }

    .landing-page h1 {
        font-size:clamp(2.7rem,8vw,4rem)
    }

    .lp-hero-copy {
        max-width:600px
    }

    .lp-lead {
        font-size:15px;
        max-width:100%
    }

    .lp-audience {
        margin-top:28px
    }

    .lp-preview {
        width:min(100%,490px);
        margin:0 auto;
        padding:0 10px 15px
    }

    .lp-floating-note {
        margin-left:25px;
        margin-right:-5px
    }

    .lp-value-strip {
        padding:24px 6%;
        gap:18px 25px
    }

    .lp-value-strip>p {
        width:100%
    }

    .lp-value-strip>span {
        font-size:11px
    }

    .lp-section {
        padding:52px 6%
    }

    .lp-section-heading {
        display:block;
        margin-bottom:28px
    }

    .lp-section-heading>p {
        margin-top:20px;
        max-width:100%
    }

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

    .lp-feature {
        padding:25px
    }

    .lp-feature h3 {
        max-width:100%
    }

    .lp-feature-icon {
        margin-bottom:20px
    }

    .lp-workflow {
        padding:45px 6%;
        grid-template-columns:1fr;
        gap:38px
    }

    .lp-workflow-list p {
        max-width:100%
    }

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

    .lp-final-cta {
        padding:50px 6%
    }

    .lp-footer {
        grid-template-columns:1fr;
        gap:14px;
        padding:30px 6%
    }

    .lp-footer nav {
        grid-column:1;
        grid-row:auto;
        flex-wrap:wrap;
        gap:18px
    }

    .lp-footer small {
        grid-row:auto
    }

    .lp-footer>p {
        grid-row:auto
    }

    .lp-eyebrow {
        font-size:10px;
        letter-spacing:1.2px
    }

}

@media(max-width:380px) {
    .lp-brand {
        font-size:14px;
        gap:6px
    }

    .lp-header-actions {
        gap:8px
    }

    .lp-header-start {
        font-size:11px
    }

    .lp-brand-dot {
        display:none
    }

    .lp-preview-body {
        padding:20px
    }

    .lp-preview-steps {
        flex-wrap:wrap
    }

    .lp-floating-note {
        padding:13px
    }

    .lp-hero-actions {
        align-items:flex-start;
        flex-direction:column
    }

}

@media(prefers-reduced-motion:reduce) {
    .lp-path,.lp-path-arrow {
        transition:none
    }

    .lp-path:hover,.lp-path:hover .lp-path-arrow {
        transform:none
    }

    .lp-button {
        transition:none
    }

    .lp-button:hover {
        transform:none
    }

}