:root {
    --df-green: #005c45;
    --df-green-deep: #004735;
    --df-mint: #e0f2ee;
    --df-canvas: #f3f6f8;
    --df-surface: #fff;
    --df-dark: #111418;
    --df-ink: #171b1f;
    --df-muted: #626c72;
    --df-line: #dce3e6;
    --df-yellow: #f3cc4b;
    --df-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --df-mono: "IBM Plex Mono", ui-monospace, monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
.desktop-feature { overflow: hidden; background: var(--df-surface); color: var(--df-ink); font-family: var(--df-body); -webkit-font-smoothing: antialiased; }
.desktop-feature *, .desktop-feature *::before, .desktop-feature *::after { box-sizing: border-box; }
.desktop-feature__shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.desktop-feature__section { padding: 112px 0; }
.desktop-feature__eyebrow { color: var(--df-green); font: 650 11px/1.25 var(--df-mono); letter-spacing: .11em; text-transform: uppercase; }
.desktop-feature__section-heading { max-width: 650px; }
.desktop-feature__section-heading--center { margin-inline: auto; text-align: center; }
.desktop-feature__section-heading h2, .desktop-feature__related h2 { margin: 17px 0 19px; color: var(--df-ink); font-size: clamp(35px, 4vw, 54px); font-weight: 620; line-height: 1.08; letter-spacing: -.045em; }
.desktop-feature__section-heading p { margin: 0; color: var(--df-muted); font-size: 17px; line-height: 1.75; }
.desktop-feature a:focus-visible, .desktop-feature summary:focus-visible { outline: 3px solid rgba(243,204,75,.85); outline-offset: 4px; }

.desktop-feature__crumbs { display: flex; align-items: center; gap: 9px; padding-top: 94px; color: var(--df-muted); font-size: 12px; }
.desktop-feature__crumbs a { color: var(--df-green); text-decoration: none; }
.desktop-feature__crumbs span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-feature__hero { padding: 62px 0 112px; }
.desktop-feature__hero-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: 68px; }
.desktop-feature__hero h1 { max-width: 650px; margin: 23px 0 24px; color: var(--df-ink); font-size: clamp(49px, 5.3vw, 72px); font-weight: 620; line-height: 1.01; letter-spacing: -.058em; }
.desktop-feature__hero-copy > p { max-width: 610px; margin: 0; color: var(--df-muted); font-size: 18px; line-height: 1.72; }
.desktop-feature__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.desktop-feature__button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 21px; border: 1px solid transparent; border-radius: 14px; color: var(--df-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.desktop-feature__button:hover { transform: translateY(-2px); }
.desktop-feature__button--primary { background: var(--df-green); color: #fff; box-shadow: 0 13px 30px rgba(0,92,69,.2); }
.desktop-feature__button--primary:hover { background: var(--df-green-deep); color: #fff; }
.desktop-feature__button--secondary { border-color: var(--df-line); background: var(--df-surface); }
.desktop-feature__highlights { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 24px 0 0; padding: 0; color: var(--df-muted); list-style: none; font: 500 11px/1.5 var(--df-mono); }
.desktop-feature__highlights li::before { margin-inline-end: 7px; color: var(--df-green); content: "✓"; font-weight: 800; }
.desktop-feature__screenshot { min-width: 0; margin: 0; overflow: hidden; border: 8px solid var(--df-dark); border-radius: 24px; background: var(--df-dark); box-shadow: 0 34px 80px rgba(13,39,32,.2); transform: rotate(1.15deg); }
.desktop-feature__window-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 13px; }
.desktop-feature__window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #f06c63; }
.desktop-feature__window-bar i:nth-child(2) { background: #e8bd55; }
.desktop-feature__window-bar i:nth-child(3) { background: #55b980; }
.desktop-feature__window-bar span { margin-inline: auto; color: #aeb6ba; font: 500 9px/1 var(--df-mono); }
.desktop-feature__screenshot img { width: 100%; height: auto; display: block; background: #f5f7f6; }
.desktop-feature__screenshot figcaption { padding: 12px 15px 10px; color: #aeb6ba; font: 500 9px/1.5 var(--df-mono); transform: rotate(-1.15deg); }

.desktop-feature__scope { background: var(--df-canvas); }
.desktop-feature__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 54px 0 0; border-top: 1px solid var(--df-line); }
.desktop-feature__facts > div { min-width: 0; display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 20px; padding: 27px 24px 27px 0; border-bottom: 1px solid var(--df-line); }
.desktop-feature__facts > div:nth-child(even) { padding-inline: 24px 0; border-inline-start: 1px solid var(--df-line); }
.desktop-feature__facts dt { color: var(--df-green); font: 650 11px/1.5 var(--df-mono); letter-spacing: .05em; text-transform: uppercase; }
.desktop-feature__facts dd { margin: 0; color: var(--df-muted); font-size: 14px; line-height: 1.67; }

.desktop-feature__steps-section { position: relative; background: var(--df-dark); color: #fff; }
.desktop-feature__steps-section::after { position: absolute; inset: -35% -15% -50% 55%; opacity: .13; background: repeating-radial-gradient(ellipse at 100% 50%,transparent 0 24px,#79c3b0 25px 26px); content: ""; pointer-events: none; }
.desktop-feature__steps-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; }
.desktop-feature__section-heading--inverse h2 { color: #fff; }
.desktop-feature__section-heading--inverse .desktop-feature__eyebrow { color: #8fd6c3; }
.desktop-feature__section-heading--inverse p { color: #a8b1b5; }
.desktop-feature__steps { margin: 0; padding: 0; list-style: none; }
.desktop-feature__steps li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding: 0 0 36px; }
.desktop-feature__steps li:not(:last-child)::before { position: absolute; inset-inline-start: 28px; top: 46px; bottom: 5px; width: 1px; background: #384044; content: ""; }
.desktop-feature__steps li > span { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #3a4347; border-radius: 18px; background: #1a1f23; color: #8fd6c3; font: 650 11px/1 var(--df-mono); }
.desktop-feature__steps h3 { margin: 4px 0 9px; color: #fff; font-size: 21px; letter-spacing: -.025em; }
.desktop-feature__steps p { margin: 0; color: #a8b1b5; font-size: 14px; line-height: 1.7; }

.desktop-feature__failure-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 84px; }
.desktop-feature__failure-list { border-top: 1px solid var(--df-line); }
.desktop-feature__failure-list article { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--df-line); }
.desktop-feature__failure-list article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff1cf; color: #815d00; font: 750 13px/1 var(--df-mono); }
.desktop-feature__failure-list h3 { margin: 1px 0 8px; font-size: 18px; letter-spacing: -.02em; }
.desktop-feature__failure-list p { margin: 0; color: var(--df-muted); font-size: 14px; line-height: 1.68; }

.desktop-feature__downloads { background: var(--df-mint); }
.desktop-feature__download-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 48px; }
.desktop-feature__download-grid a { position: relative; min-width: 0; display: grid; gap: 8px; padding: 27px 64px 27px 27px; border: 1px solid rgba(0,92,69,.16); border-radius: 20px; background: var(--df-surface); color: var(--df-ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.desktop-feature__download-grid a:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,92,69,.1); }
.desktop-feature__download-grid b { color: var(--df-green); font: 650 10px/1 var(--df-mono); letter-spacing: .09em; }
.desktop-feature__download-grid strong { font-size: 18px; }
.desktop-feature__download-grid span { color: var(--df-muted); font: 500 10px/1.4 var(--df-mono); }
.desktop-feature__download-grid i { position: absolute; inset-inline-end: 22px; top: 50%; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--df-green); color: #fff; font-style: normal; transform: translateY(-50%); }
.desktop-feature__pricing-note { max-width: 900px; margin: 26px auto 0; color: var(--df-muted); font-size: 13px; line-height: 1.7; text-align: center; }
.desktop-feature__pricing-note a { color: var(--df-green); font-weight: 700; }

.desktop-feature__faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 86px; }
.desktop-feature__faq-list details { border-bottom: 1px solid var(--df-line); }
.desktop-feature__faq-list details:first-child { border-top: 1px solid var(--df-line); }
.desktop-feature__faq-list summary { position: relative; padding: 24px 44px 24px 0; cursor: pointer; font-size: 16px; font-weight: 650; line-height: 1.45; list-style: none; }
.desktop-feature__faq-list summary::-webkit-details-marker { display: none; }
.desktop-feature__faq-list summary::after { position: absolute; inset-inline-end: 3px; top: 22px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--df-mint); color: var(--df-green); content: "+"; font-size: 18px; transition: transform .18s ease; }
.desktop-feature__faq-list details[open] summary::after { transform: rotate(45deg); }
.desktop-feature__faq-list p { margin: -4px 52px 24px 0; color: var(--df-muted); font-size: 14px; line-height: 1.72; }

.desktop-feature__related { padding: 0 0 100px; }
.desktop-feature__related h2 { max-width: 680px; }
.desktop-feature__related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 38px; }
.desktop-feature__related-grid a { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 25px; border: 1px solid var(--df-line); border-radius: 19px; color: var(--df-ink); text-decoration: none; }
.desktop-feature__related-grid small { grid-column: 1 / -1; color: var(--df-green); font: 650 9px/1.3 var(--df-mono); letter-spacing: .08em; }
.desktop-feature__related-grid strong { font-size: 15px; line-height: 1.45; }
.desktop-feature__related-grid span { color: var(--df-green); }

[data-bs-theme="dark"] .desktop-feature { --df-canvas: #13181a; --df-surface: #0f1315; --df-ink: #f3f6f5; --df-muted: #a7b0b3; --df-line: #30383b; --df-mint: #173a31; --df-dark: #090c0d; }
[data-bs-theme="dark"] .desktop-feature__failure-list article > span { background: #433916; color: #f3cc4b; }

@media (max-width: 1000px) {
    .desktop-feature__hero-grid { grid-template-columns: 1fr; gap: 54px; }
    .desktop-feature__hero-copy { max-width: 770px; }
    .desktop-feature__screenshot { max-width: 900px; }
    .desktop-feature__steps-layout, .desktop-feature__failure-layout, .desktop-feature__faq-layout { gap: 52px; }
    .desktop-feature__download-grid, .desktop-feature__related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .desktop-feature__shell { width: min(100% - 28px, 1180px); }
    .desktop-feature__section { padding: 82px 0; }
    .desktop-feature__crumbs { padding-top: 80px; }
    .desktop-feature__hero { padding: 45px 0 80px; }
    .desktop-feature__hero h1 { font-size: 43px; }
    .desktop-feature__actions .desktop-feature__button { width: 100%; }
    .desktop-feature__screenshot { border-width: 5px; border-radius: 17px; transform: none; }
    .desktop-feature__screenshot figcaption { transform: none; }
    .desktop-feature__facts { grid-template-columns: 1fr; }
    .desktop-feature__facts > div, .desktop-feature__facts > div:nth-child(even) { grid-template-columns: 112px 1fr; padding: 23px 0; border-inline-start: 0; }
    .desktop-feature__steps-layout, .desktop-feature__failure-layout, .desktop-feature__faq-layout { grid-template-columns: 1fr; }
    .desktop-feature__steps-section::after { inset: 30% -40% -30% 10%; }
    .desktop-feature__related { padding-bottom: 76px; }
}

@media (max-width: 430px) {
    .desktop-feature__hero h1 { font-size: 38px; }
    .desktop-feature__section-heading h2, .desktop-feature__related h2 { font-size: 34px; }
    .desktop-feature__facts > div, .desktop-feature__facts > div:nth-child(even) { grid-template-columns: 1fr; gap: 8px; }
    .desktop-feature__steps li { grid-template-columns: 48px 1fr; gap: 16px; }
    .desktop-feature__steps li > span { width: 48px; height: 48px; border-radius: 15px; }
    .desktop-feature__steps li:not(:last-child)::before { inset-inline-start: 23px; top: 39px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .desktop-feature *, .desktop-feature *::before, .desktop-feature *::after { animation: none !important; transition: none !important; }
}