/* Fonts. */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/dm-sans-400.ttf) format("truetype");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/dm-sans-500.ttf) format("truetype");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/dm-sans-600.ttf) format("truetype");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/dm-sans-700.ttf) format("truetype");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/manrope-400.ttf) format("truetype");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/manrope-500.ttf) format("truetype");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/manrope-600.ttf) format("truetype");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/manrope-700.ttf) format("truetype");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/static/new/fonts/black-friday-intro/manrope-800.ttf) format("truetype");
}

/* Theme, shared reset and page defaults. */
h1 {
    margin: revert;
    padding: revert;
}
h2 {
    padding: revert;
}
h3,
h4,
p,
ul,
dl,
dd {
    margin: revert;
    padding: revert;
}
svg {
    width: auto;
    height: auto;
}
.black-friday-intro svg[fill="none"] {
    fill: none;
}
i,
em {
    display: revert;
    font-style: revert;
}
:root {
    --bg: #0b0f0d;
    --panel: #151c18;
    --green: #a3f635;
    --white: #f5f7f5;
    --muted: #a4aea7;
    --line: #2b342e;
    --font: "DM Sans", Arial, sans-serif;
    --heading: "Manrope", Arial, sans-serif;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}
body {
    background: var(--bg);
    font-family: var(--font);
    font-size: 16px;
    color: var(--white);
    -webkit-font-smoothing: antialiased;
}
body.modal-open {
    overflow: hidden;
}
button {
    font: inherit;
    cursor: pointer;
}
button,
a,
summary {
    -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 5px;
}
::selection {
    background: var(--green);
    color: var(--bg);
}
h2 {
    margin: 18px 0 0;
    font: 650 46px/1.15 var(--heading);
    letter-spacing: -2.2px;
}
@media (max-width: 800px) {
    h2 {
        font-size: 38px;
    }
}
@media (max-width: 520px) {
    h2 {
        font-size: 35px;
        letter-spacing: -1.6px;
    }
}
.black-friday-intro {
    --muted: #d0d9cc;
    --readable-label: #e4eddd;
    --readable-secondary: #c3d1b9;
    --readable-link: #d7f5ba;
    line-height: 1.6;
}

/* Shared layout, buttons, links and headings. */
.wrap {
    width: min(1200px, calc(100% - 96px));
    margin-inline: auto;
}
.text-link:hover {
    color: var(--green);
}
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    min-height: 52px;
    padding: 0 23px;
    border: 1px solid #46513f;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 650;
    color: var(--white);
    transition:
        transform 0.2s,
        background 0.2s;
}
.button:hover {
    background: #24301f;
    transform: translateY(-2px);
}
.button span {
    font-size: 23px;
    font-weight: 400;
}
.button.primary {
    border-color: var(--green);
    background: var(--green);
    color: #10180a;
}
.button.primary:hover {
    background: #b7ff53;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 2px;
}
.status-dot {
    display: inline-block;
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}
.text-link {
    font-size: 13px;
    white-space: nowrap;
}
.text-link span {
    margin-left: 10px;
}
.section-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 35px;
    margin-bottom: 42px;
}
.skip {
    position: fixed;
    z-index: 100;
    top: -60px;
    left: 20px;
    padding: 12px;
    background: var(--green);
    color: #111;
}
.skip:focus {
    top: 10px;
}
@media (max-width: 1100px) {
    .wrap {
        width: calc(100% - 64px);
    }
}
@media (max-width: 800px) {
    .wrap {
        width: calc(100% - 40px);
    }
    .section-intro {
        gap: 22px;
    }
}
@media (max-width: 520px) {
    .eyebrow {
        font-size: 8px;
        letter-spacing: 1.4px;
    }
    .text-link {
        font-size: 12px;
    }
    .section-intro {
        display: block;
        margin-bottom: 28px;
    }
}
.black-friday-intro .button {
    height: auto;
    padding-block: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
.black-friday-intro .text-link {
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
}
.black-friday-intro .eyebrow {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.08em;
}
.black-friday-intro .preview-strip {
    font-size: 12px;
    line-height: 1.6;
    color: var(--readable-label);
}
.black-friday-intro .preview-strip span {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}
@media (max-width: 520px) {
    .black-friday-intro .preview-strip {
        letter-spacing: 0.04em;
    }
}
.black-friday-intro .button:not(.primary) {
    border-color: #7c906f;
    color: #f5f7f5;
}
.black-friday-intro .button:not(.primary):hover {
    border-color: #acc391;
    background: #2b3c24;
}

/* Header and navigation. */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    height: 100px;
    border-bottom: 1px solid var(--line);
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--heading);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -1.5px;
}
.brand-dot {
    display: inline-block;
    align-self: flex-start;
    margin: 5px 0 0 3px;
    font: 10px var(--font);
    vertical-align: top;
    letter-spacing: 0;
}
.brand-mark {
    display: grid;
    grid-template-columns: 9px 9px;
    gap: 3px;
    transform: skew(-10deg);
}
.brand-mark i {
    height: 9px;
    background: #24ae46;
}
.brand-mark i:nth-child(2) {
    opacity: 0.55;
}
.header nav {
    display: flex;
    margin-left: auto;
}
.header nav a {
    font-size: 13px;
    color: #c1c8c3;
    transition: color 0.2s;
}
.header nav a:hover {
    color: var(--green);
}
.nav-cta {
    gap: 20px;
    min-height: 42px;
    padding-inline: 16px;
    font-size: 12px;
}
.nav-cta span {
    font-size: 18px;
}
.menu-toggle {
    display: none;
}
@media (max-width: 800px) {
    .header {
        gap: 15px;
        height: 80px;
    }
    .nav-cta {
        display: none;
    }
}
@media (max-width: 520px) {
    .header {
        position: relative;
        height: 74px;
    }
    .brand {
        font-size: 25px;
    }
    .header nav {
        position: absolute;
        z-index: 8;
        top: 64px;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        padding: 23px;
        border: 1px solid #3c5030;
        border-radius: 7px;
        background: #1a2418;
    }
    .header nav.open {
        display: flex;
    }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 13px 8px;
        border: 0;
        background: none;
    }
    .menu-toggle span {
        width: 24px;
        height: 1px;
        background: #dce5d5;
    }
}
.brand {
    font-style: italic;
    color: var(--white);
}
.brand-dot {
    font-style: normal;
}
.header nav {
    gap: 24px;
    margin-right: 0;
}
@media (max-width: 1100px) {
    .header {
        gap: 20px;
    }
    .header nav {
        gap: 17px;
    }
    .header nav a {
        font-size: 12px;
    }
}
@media (max-width: 800px) {
    .header nav a {
        font-size: 11px;
    }
}
@media (max-width: 520px) {
    .header nav {
        gap: 23px;
    }
    .header nav a {
        font-size: 14px;
    }
}
.black-friday-intro .header nav a {
    font-size: 14px;
    color: var(--readable-label);
}
.black-friday-intro .nav-cta {
    height: 42px;
    min-height: 42px;
    padding-block: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
@media (min-width: 521px) and (max-width: 1100px) {
    .black-friday-intro .header {
        flex-wrap: wrap;
        height: auto;
        min-height: 90px;
        padding-block: 18px;
    }
    .black-friday-intro .header nav {
        flex-wrap: wrap;
        gap: 12px 18px;
    }
}
@media (max-width: 520px) {
    .black-friday-intro .header nav a {
        font-size: 14px;
    }
}

/* Hero copy and offer illustration. */
.hero {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    align-items: center;
    gap: 32px;
    min-height: 680px;
    padding-block: 80px 76px;
}
.hero h1 {
    margin: 27px 0 24px;
    font-family: var(--heading);
    font-size: clamp(58px, 6.3vw, 84px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -5px;
}
.hero h1 span {
    color: var(--green);
}
.hero-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
}
.hero-actions {
    display: flex;
    align-items: center;
    margin-top: 32px;
}
.hero-actions .button {
    gap: 20px;
    padding-inline: 19px;
    font-size: 13px;
}
.hero-facts {
    display: flex;
    gap: 25px;
    margin-top: 22px;
    font-size: 11px;
    color: #a4aea7;
}
.hero-facts b {
    margin-right: 6px;
    font-weight: 400;
    color: var(--green);
}
.hero-art {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 480px;
}
.hero-art:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 10%;
    border-radius: 50%;
    background: #6b992324;
    filter: blur(70px);
}
.orbit {
    position: absolute;
    z-index: -1;
    width: 470px;
    height: 350px;
    border: 1px solid #2942207a;
    border-radius: 50%;
    transform: rotate(-30deg);
}
.orbit-two {
    width: 410px;
    height: 460px;
    transform: rotate(30deg);
}
.offer-ticket {
    position: absolute;
    top: 11px;
    right: 34px;
    width: 340px;
    height: 383px;
    padding: 25px 28px;
    overflow: hidden;
    border-radius: 13px;
    background: var(--green);
    box-shadow: 0 18px 65px #0006;
    color: #13200c;
    transform: rotate(9deg);
}
.offer-ticket:before {
    content: "";
    position: absolute;
    top: 60px;
    right: -90px;
    width: 180px;
    height: 180px;
    border: 35px solid #2f480e0b;
    border-radius: 50%;
}
.ticket-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 21px;
    border-bottom: 1px solid #25410f44;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.ticket-top > span:last-child {
    font-size: 24px;
    line-height: 15px;
}
.ticket-label {
    margin-top: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}
.discount {
    margin-left: -8px;
    font: 800 153px/0.98 var(--heading);
    letter-spacing: -12px;
}
.discount span {
    position: relative;
    top: 22px;
    margin-left: 3px;
    font-size: 65px;
    vertical-align: top;
    letter-spacing: -4px;
}
.ticket-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #25410f77;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: 1.4px;
}
.ticket-code {
    font-size: 30px;
    letter-spacing: -4px;
}
.console-card {
    position: absolute;
    bottom: 31px;
    left: 0;
    width: 348px;
    overflow: hidden;
    border: 1px solid #455340;
    border-radius: 10px;
    background: #19201b;
    box-shadow: 0 18px 45px #0008;
    transform: rotate(-5deg);
}
.console-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border-bottom: 1px solid #34402e;
    background: #202920;
    font-size: 10px;
}
.console-icon {
    font-size: 17px;
    color: var(--green);
}
.live-dot {
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 9px #a3f63555;
}
.console-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 18px;
}
.console-label {
    display: block;
    margin-bottom: 7px;
    font-size: 8px;
    color: #a4aea7;
    letter-spacing: 1.6px;
}
.console-body strong {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.6px;
}
.mini-bars {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 43px;
}
.mini-bars i {
    width: 7px;
    height: 32%;
    border-radius: 2px;
    background: #a3f635;
}
.mini-bars i:nth-child(2) {
    height: 50%;
    opacity: 0.45;
}
.mini-bars i:nth-child(3) {
    height: 44%;
    opacity: 0.6;
}
.mini-bars i:nth-child(4) {
    height: 70%;
    opacity: 0.7;
}
.mini-bars i:nth-child(5) {
    height: 58%;
}
.mini-bars i:nth-child(6) {
    height: 83%;
}
.mini-bars i:nth-child(7) {
    height: 100%;
}
.console-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    border-top: 1px solid #34402e;
    font-size: 8px;
    color: #afb9ad;
}
.console-foot b {
    margin-left: auto;
    color: var(--green);
}
.art-caption {
    position: absolute;
    right: 20px;
    bottom: -9px;
    font-size: 9px;
    color: #788574;
    letter-spacing: 0.5px;
}
@media (min-width: 1500px) {
    .hero {
        min-height: 720px;
    }
    .hero h1 {
        font-size: 89px;
    }
    .hero-art {
        transform: scale(1.06);
    }
}
@media (max-width: 1100px) {
    .hero {
        gap: 15px;
        min-height: 620px;
        padding-block: 65px;
    }
    .hero h1 {
        font-size: 67px;
        letter-spacing: -4px;
    }
    .hero-description {
        font-size: 14px;
    }
    .hero-art {
        height: 410px;
    }
    .offer-ticket {
        right: 14px;
        width: 285px;
        height: 343px;
        padding: 22px;
    }
    .discount {
        font-size: 132px;
    }
    .discount span {
        font-size: 53px;
    }
    .ticket-top {
        font-size: 7px;
    }
    .console-card {
        bottom: 14px;
        left: 0;
        width: 290px;
    }
    .art-caption {
        bottom: -23px;
        font-size: 8px;
    }
    .hero-actions .button {
        padding-inline: 15px;
        font-size: 12px;
    }
    .orbit {
        width: 340px;
        height: 310px;
    }
    .orbit-two {
        width: 330px;
        height: 390px;
    }
}
@media (max-width: 800px) {
    .hero {
        gap: 20px;
        padding-top: 54px;
    }
    .hero-copy {
        max-width: 600px;
    }
    .hero h1 {
        font-size: 76px;
    }
    .hero-description {
        font-size: 15px;
    }
    .hero-art {
        justify-self: center;
        width: 480px;
        max-width: 100%;
        height: 430px;
        margin-top: 12px;
    }
    .offer-ticket {
        right: 35px;
        width: 320px;
        height: 365px;
    }
    .discount {
        font-size: 147px;
    }
    .discount span {
        font-size: 58px;
    }
    .console-card {
        bottom: 7px;
        left: 15px;
        width: 315px;
    }
    .art-caption {
        right: 29px;
        bottom: -22px;
    }
    .orbit {
        width: 400px;
    }
}
@media (max-width: 520px) {
    .hero {
        gap: 8px;
        padding-block: 42px 50px;
    }
    .hero h1 {
        margin: 23px 0 20px;
        font-size: clamp(49px, 13.5vw, 68px);
        letter-spacing: -3.7px;
    }
    .hero-description {
        max-width: 330px;
        font-size: 13px;
        line-height: 1.85;
    }
    .desktop-break {
        display: none;
    }
    .hero-actions {
        margin-top: 26px;
    }
    .hero-actions .button {
        min-height: 50px;
    }
    .hero-facts {
        gap: 20px;
        margin-top: 19px;
        font-size: 9px;
    }
    .hero-art {
        width: 340px;
        height: 365px;
        margin-top: 36px;
    }
    .offer-ticket {
        top: 0;
        right: 17px;
        width: 260px;
        height: 312px;
        padding: 19px;
    }
    .ticket-top {
        padding-bottom: 17px;
        font-size: 6px;
        letter-spacing: 1.1px;
    }
    .ticket-label {
        margin-top: 18px;
        font-size: 10px;
    }
    .discount {
        font-size: 119px;
        letter-spacing: -9px;
    }
    .discount span {
        top: 17px;
        margin-left: 5px;
        font-size: 48px;
    }
    .ticket-bottom {
        margin-top: 15px;
        padding-top: 13px;
        font-size: 6px;
    }
    .ticket-code {
        font-size: 24px;
    }
    .console-card {
        bottom: 10px;
        left: 0;
        width: 270px;
    }
    .console-head {
        padding: 11px 14px;
        font-size: 8px;
    }
    .console-body {
        padding: 19px 14px;
    }
    .console-body strong {
        font-size: 19px;
    }
    .console-label {
        font-size: 7px;
    }
    .console-foot {
        padding: 11px 14px;
        font-size: 7px;
    }
    .art-caption {
        right: 9px;
        bottom: -14px;
        font-size: 7px;
    }
    .orbit {
        width: 310px;
        height: 285px;
    }
    .orbit-two {
        width: 290px;
        height: 345px;
    }
    .hero-art .orbit {
        width: 280px;
        max-width: 90%;
        height: 310px;
        transform: none;
    }
    .hero-art .orbit-two {
        width: 300px;
        height: 280px;
        transform: none;
    }
}
.hero-copy,
.hero-art {
    min-width: 0;
}
.hero-art {
    overflow-x: clip;
    overflow-y: visible;
}
.hero-deal-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 11px;
    line-height: 1.8;
    color: #bbc9b3;
    white-space: normal;
}
.hero-actions {
    flex-wrap: wrap;
    gap: 12px;
}
@media (max-width: 800px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 520px) {
    .hero-actions {
        align-items: stretch;
    }
    .hero-actions .button {
        gap: 10px;
        padding-inline: 13px;
        font-size: 11px;
    }
    .hero-deal-link {
        max-width: 290px;
        font-size: 10px;
    }
}
.black-friday-intro .hero-actions .button {
    height: auto;
    padding-block: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
.black-friday-intro .hero h1 {
    letter-spacing: -0.04em;
}
.black-friday-intro .hero-description {
    font-size: 16px;
    line-height: 1.75;
}
.black-friday-intro .hero-deal-link {
    font-size: 14px;
    line-height: 1.6;
    color: var(--readable-link);
    white-space: normal;
}
@media (max-width: 800px) {
    .black-friday-intro .hero-description {
        font-size: 16px;
    }
}
@media (max-width: 520px) {
    .black-friday-intro .hero h1 {
        letter-spacing: -0.035em;
    }
    .black-friday-intro .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .black-friday-intro .hero-actions .button {
        min-height: 50px;
    }
    .black-friday-intro .hero-deal-link {
        max-width: 100%;
    }
}
.black-friday-intro .hero-facts,
.black-friday-intro .console-label,
.black-friday-intro .console-foot {
    color: var(--readable-label);
}
.black-friday-intro .art-caption {
    font-size: 13px;
    line-height: 1.6;
    color: var(--readable-secondary);
}
.black-friday-intro .hero-deal-link:hover {
    color: var(--green);
}

/* Hero countdown. */
.hero-countdown {
    width: fit-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid #2b392c;
    border-radius: 0;
    background: none;
}
.countdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    color: #aab7a4;
    letter-spacing: 1.4px;
}
.countdown-label svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: #9cb98b;
}
.countdown-clock {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.countdown-clock[hidden] {
    display: none;
}
.countdown-unit {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.countdown-value {
    display: inline-block;
    min-width: 1.25em;
    font: 600 46px/1 var(--heading);
    font-variant-numeric: tabular-nums;
    color: #f0f5ec;
    text-align: center;
    letter-spacing: 0;
}
.countdown-unit:last-child .countdown-value {
    color: var(--green);
}
.countdown-unit-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #82927b;
    letter-spacing: 0.5px;
}
.countdown-separator {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: #475840;
}
.countdown-caption {
    max-width: 390px;
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.7;
    color: #7d8e76;
    overflow-wrap: anywhere;
}
.hero-countdown + .hero-actions {
    margin-top: 22px;
}
@media (max-width: 520px) {
    .hero-countdown {
        margin-top: 23px;
        padding: 14px 0 0;
    }
    .countdown-label {
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: 0.6px;
    }
    .countdown-clock {
        gap: 6px;
    }
    .countdown-unit {
        gap: 3px;
    }
    .countdown-value {
        min-width: 1.2em;
        font-size: 36px;
    }
    .countdown-unit-label {
        font-size: 9px;
        letter-spacing: 0;
    }
    .countdown-separator {
        font-size: 15px;
    }
    .countdown-caption {
        max-width: 280px;
        font-size: 9px;
    }
    .hero-countdown + .hero-actions {
        margin-top: 20px;
    }
}
@media (max-width: 360px) {
    .countdown-clock {
        gap: 4px;
    }
    .countdown-value {
        min-width: 1.15em;
        font-size: 30px;
    }
    .countdown-unit {
        gap: 2px;
    }
    .countdown-unit-label {
        font-size: 8px;
    }
}
.black-friday-intro .countdown-clock {
    flex-wrap: wrap;
    row-gap: 10px;
}
.black-friday-intro .countdown-caption {
    font-size: 13px;
    color: var(--readable-secondary);
}
@media (max-width: 520px) {
    .black-friday-intro .countdown-clock {
        gap: 4px;
    }
    .black-friday-intro .countdown-unit {
        gap: 3px;
    }
    .black-friday-intro .countdown-value {
        font-size: 32px;
    }
    .black-friday-intro .countdown-separator {
        font-size: 14px;
    }
}
@media (max-width: 360px) {
    .black-friday-intro .countdown-value {
        font-size: 28px;
    }
}
.black-friday-intro .countdown-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--readable-label);
    letter-spacing: 0.06em;
}
.black-friday-intro .countdown-unit-label {
    font-size: 12px;
    line-height: 1.6;
    color: var(--readable-label);
}
.black-friday-intro .countdown-label svg,
.black-friday-intro .countdown-separator {
    color: var(--readable-secondary);
}

/* Audience band. */
.audience-band {
    padding: 27px 0;
    border-block: 1px solid var(--line);
}
.audience-band .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.audience-band .wrap > span {
    font-size: 9px;
    color: #8e9a91;
    letter-spacing: 1.5px;
}
.audience-band p {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    font-family: var(--heading);
    font-size: 15px;
    color: #bdc7be;
    letter-spacing: -0.3px;
}
.audience-band i {
    font-size: 23px;
    font-style: normal;
    color: #546b46;
}
@media (max-width: 1100px) {
    .audience-band p {
        gap: 21px;
        font-size: 12px;
    }
}
@media (max-width: 800px) {
    .audience-band .wrap {
        flex-direction: column;
        gap: 17px;
    }
    .audience-band p {
        gap: 21px;
        font-size: 12px;
    }
}
@media (max-width: 520px) {
    .audience-band {
        padding: 22px 0;
    }
    .audience-band .wrap > span {
        font-size: 8px;
    }
    .audience-band p {
        gap: 11px;
        font-size: 10px;
        letter-spacing: -0.2px;
    }
    .audience-band i {
        font-size: 16px;
    }
}
.black-friday-intro .audience-band p {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
    color: var(--muted);
}
.black-friday-intro .audience-band .wrap > span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--readable-label);
    letter-spacing: 0.06em;
}
.black-friday-intro .audience-band i {
    color: #badb9f;
}

/* Deals and pricing cards. */
.deals {
    padding-top: 100px;
    padding-bottom: 83px;
}
.intro-right {
    padding-bottom: 4px;
}
.intro-right > p {
    margin: 0 0 19px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
}
.currency-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: #c6cec7;
}
.currency-label .status-dot {
    width: 4px;
    height: 4px;
}
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.plan {
    position: relative;
    padding: 32px 37px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #111713;
}
.plan.featured {
    border-color: #83b844;
    background: linear-gradient(145deg, #1b2818, #131b14 70%);
}
.plan-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.plan-type {
    font-size: 9px;
    font-weight: 600;
    color: #a5afa5;
    letter-spacing: 1.6px;
}
.save-badge {
    padding: 6px 9px;
    border-radius: 4px;
    background: #25331e;
    font-size: 9px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.4px;
}
.plan h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 25px 0 9px;
    font: 650 27px var(--heading);
    letter-spacing: -1px;
}
.choice {
    padding: 5px 7px;
    border: 1px solid #526246;
    border-radius: 3px;
    font: 700 8px var(--font);
    color: #c0d2b1;
    letter-spacing: 1px;
}
.plan-description {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}
.price-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 32px;
}
.price-line strong {
    font: 650 72px/1 var(--heading);
    letter-spacing: -4px;
}
.price-line .currency {
    align-self: flex-start;
    padding-top: 12px;
    font-size: 18px;
    font-weight: 500;
}
.price-line > span:last-child {
    font-size: 12px;
    color: #9eaa9f;
}
.price-comparison {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.4;
}
.price-comparison s {
    font-size: 20px;
    font-weight: 500;
    color: #a2afa0;
    text-decoration-color: #809176;
    text-decoration-thickness: 1.5px;
}
.price-comparison b {
    padding: 6px 11px;
    border: 1px solid #445d31;
    border-radius: 5px;
    background: #a3f63512;
    font-size: 17px;
    font-weight: 700;
    color: var(--green);
}
.billing-note {
    min-height: 34px;
    margin: 19px 0 24px;
    font-size: 10px;
    line-height: 1.7;
    color: #98a394;
}
.plan-button {
    justify-content: space-between;
    width: 100%;
    border-color: #3f4d38;
    background: #20291e;
}
.plan-details {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid #33402e;
}
.plan-details > span {
    font-size: 8px;
    color: #889782;
    letter-spacing: 1.5px;
}
.plan-details ul {
    display: grid;
    gap: 13px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.plan-details li {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #c9d1c7;
}
.plan-details li:before {
    content: "✓";
    color: var(--green);
}
.pricing-disclaimer {
    max-width: 780px;
    margin: 22px auto 0;
    font-size: 10px;
    line-height: 1.8;
    color: #859182;
    text-align: center;
}
@media (max-width: 1100px) {
    .plan {
        padding: 28px;
    }
}
@media (max-width: 800px) {
    .deals {
        padding-top: 65px;
        padding-bottom: 60px;
    }
    .intro-right > p {
        font-size: 12px;
    }
    .plan {
        padding: 24px;
    }
    .plan-type {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .plan-description {
        min-height: 38px;
        font-size: 12px;
        line-height: 1.6;
    }
    .plan h3 {
        flex-wrap: wrap;
        gap: 9px;
        font-size: 24px;
    }
    .price-line strong {
        font-size: 62px;
    }
    .price-line {
        gap: 5px;
    }
    .price-line .currency {
        font-size: 14px;
    }
    .price-line > span:last-child {
        font-size: 10px;
    }
    .plan-details li {
        font-size: 11px;
    }
}
@media (max-width: 520px) {
    .intro-right {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 12px;
        margin-top: 22px;
    }
    .intro-right > p {
        margin: 0;
        font-size: 11px;
    }
    .currency-label {
        align-items: baseline;
        max-width: 105px;
        font-size: 8px;
        line-height: 1.7;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .plan {
        padding: 26px;
    }
    .plan-type {
        font-size: 8px;
    }
    .plan h3 {
        margin-top: 24px;
        font-size: 27px;
    }
    .plan-description {
        min-height: 0;
        font-size: 12px;
    }
    .price-line {
        margin-top: 29px;
    }
    .price-line strong {
        font-size: 68px;
    }
    .price-line .currency {
        font-size: 17px;
    }
    .price-line > span:last-child {
        font-size: 11px;
    }
    .plan-details li {
        font-size: 12px;
    }
    .plan-button {
        font-size: 13px;
    }
    .pricing-disclaimer {
        font-size: 9px;
        text-align: left;
    }
    .price-comparison {
        gap: 10px;
    }
    .price-comparison s {
        font-size: 17px;
    }
    .price-comparison b {
        padding: 6px 9px;
        font-size: 15px;
    }
}
.black-friday-intro .plan-button {
    height: auto;
    padding-block: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
.black-friday-intro .intro-right > p {
    font-size: 16px;
    line-height: 1.7;
}
.black-friday-intro .plan-description {
    min-height: 0;
    font-size: 16px;
    line-height: 1.7;
}
.black-friday-intro .plan-details li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}
.black-friday-intro .billing-note {
    min-height: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #d5e1cb;
}
.black-friday-intro .price-line {
    flex-wrap: wrap;
}
.black-friday-intro .price-line > span:last-child {
    font-size: 15px;
    line-height: 1.5;
    color: var(--readable-label);
}
.black-friday-intro .currency-label {
    max-width: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--readable-label);
}
.black-friday-intro .plan-heading,
.black-friday-intro .plan h3 {
    flex-wrap: wrap;
}
.black-friday-intro .pricing-disclaimer {
    font-size: 13px;
    line-height: 1.7;
    color: var(--readable-secondary);
}
@media (max-width: 520px) {
    .black-friday-intro .intro-right {
        flex-wrap: wrap;
    }
}
.black-friday-intro .plan-type,
.black-friday-intro .plan-details > span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--readable-label);
    letter-spacing: 0.06em;
}
.black-friday-intro .choice {
    font-size: 10px;
    line-height: 1.5;
    color: var(--readable-label);
    letter-spacing: 0.06em;
}
.black-friday-intro .price-comparison s {
    color: var(--readable-secondary);
    text-decoration-color: #b6c7a7;
}
.black-friday-intro .save-badge {
    font-size: 11px;
    line-height: 1.5;
}
.black-friday-intro .plan-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

/* Purchase bonus and coupon rules. */
.coupon-rules {
    margin-top: 30px;
    padding: 27px 30px 20px;
    border: 1px solid #3b4f30;
    border-radius: 12px;
    background: linear-gradient(125deg, #1c2818, #121b14);
}
.coupon-rules-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 23px;
}
.coupon-rules-title {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}
.coupon-rules-title > svg {
    flex: none;
    width: 32px;
    height: 32px;
    color: var(--green);
}
.coupon-rules-title .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
}
.coupon-rules-title h3 {
    margin: 7px 0 0;
    font: 600 22px/1.4 var(--heading);
    letter-spacing: -0.5px;
}
.coupon-validity {
    flex: none;
    padding: 7px 12px;
    border: 1px solid #4a6138;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: #baceab;
}
.coupon-validity b {
    font-weight: 700;
    color: var(--green);
}
.coupon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}
.coupon-offer {
    min-width: 0;
    padding: 19px 21px;
    border: 1px solid #2e4027;
    border-radius: 8px;
    background: #0d150e88;
}
.coupon-plan {
    font-size: 10px;
    font-weight: 600;
    color: #a4bf8b;
    letter-spacing: 1px;
}
.coupon-offer h4 {
    margin: 10px 0 9px;
    font: 600 17px/1.6 var(--heading);
    color: #edf4e6;
}
.coupon-offer h4 strong {
    font-weight: 700;
    color: var(--green);
}
.coupon-offer p {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: #a9b7a1;
}
.coupon-offer p b {
    font-weight: 600;
    color: #d4edbe;
}
.coupon-limit {
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #3c4f31;
    font-size: 11px;
    line-height: 1.7;
    color: #8da17e;
}
.coupon-rules-note {
    margin: 17px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: #91a583;
}
@media (max-width: 800px) {
    .coupon-rules {
        padding: 24px;
    }
    .coupon-grid {
        gap: 16px;
    }
    .coupon-offer {
        padding: 17px;
    }
    .coupon-rules-title h3 {
        font-size: 20px;
    }
    .coupon-rules-heading {
        align-items: flex-start;
    }
    .coupon-validity {
        font-size: 11px;
    }
}
@media (max-width: 600px) {
    .coupon-rules {
        margin-top: 24px;
        padding: 21px 18px;
    }
    .coupon-rules-heading {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 19px;
    }
    .coupon-rules-title {
        gap: 12px;
    }
    .coupon-rules-title h3 {
        font-size: 19px;
        letter-spacing: 0;
    }
    .coupon-rules-title > svg {
        width: 28px;
        height: 28px;
    }
    .coupon-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .coupon-offer h4 {
        font-size: 16px;
    }
    .coupon-offer p {
        font-size: 12px;
    }
    .coupon-limit,
    .coupon-rules-note {
        font-size: 10px;
    }
}
.black-friday-intro .coupon-offer p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}
.black-friday-intro .coupon-limit,
.black-friday-intro .coupon-rules-note {
    font-size: 14px;
    line-height: 1.65;
    color: #d5e1cb;
}
.black-friday-intro .coupon-validity {
    font-size: 14px;
    color: var(--readable-label);
    white-space: normal;
}
.black-friday-intro .coupon-rules-title .eyebrow {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.08em;
}
.black-friday-intro .coupon-plan {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--readable-label);
    letter-spacing: 0.06em;
}

/* Pro features, explorer and product demos. */
.feature-intro {
    margin: 0 0 19px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
}
.features {
    padding: 90px 0 65px;
    border-block: 1px solid #222d23;
    background: #101612;
}
.features h2 {
    font-size: 43px;
}
.feature-intro {
    margin-bottom: 0;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 49px;
}
.feature-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 185px;
    margin-bottom: 26px;
    overflow: hidden;
    border: 1px solid #2c392b;
    border-radius: 9px;
    background: radial-gradient(ellipse at 50% 90%, #28382077, transparent 70%), #141c16;
}
.feature-number {
    font-size: 9px;
    color: #9ab482;
    letter-spacing: 1.4px;
}
.feature-item h3 {
    margin: 13px 0 12px;
    font: 600 20px var(--heading);
    letter-spacing: -0.6px;
}
.feature-item p {
    max-width: 330px;
    margin: 0;
    font-size: 12px;
    line-height: 1.85;
    color: var(--muted);
}
.browser-mini {
    position: relative;
    width: 80%;
    border: 1px solid #43513a;
    border-radius: 7px;
    background: #1d281d;
    box-shadow: 0 10px 20px #0003;
    transform: rotate(-5deg);
}
.browser-mini-top {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px;
    border-bottom: 1px solid #3a4734;
}
.browser-mini-top i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #677660;
}
.browser-mini-top span {
    margin-left: 15px;
    font-size: 6px;
    color: #9caa94;
}
.browser-mini-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 16px 30px;
}
.wp-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid #88a075;
    border-radius: 50%;
    font: italic 25px Georgia;
    color: #d1dfc5;
}
.browser-mini-body > span {
    font-size: 8px;
    line-height: 1.8;
    color: #a8b59e;
}
.browser-mini-body strong {
    font-weight: 500;
    color: #ecf3e7;
}
.backup-tag {
    position: absolute;
    right: -13px;
    bottom: -9px;
    padding: 10px 13px;
    border-radius: 4px;
    background: var(--green);
    box-shadow: 0 7px 14px #0004;
    font-size: 8px;
    color: #213212;
    transform: rotate(5deg);
}
.backup-tag span {
    margin-right: 6px;
}
.shield-visual svg {
    z-index: 1;
    width: 75px;
    height: 90px;
    fill: #253b1c;
    stroke: #9bc760;
    stroke-width: 1.1;
}
.shield-visual .shield-check {
    fill: none;
    stroke: var(--green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.shield-ring {
    position: absolute;
    width: 132px;
    height: 132px;
    border: 1px solid #354b2c;
    border-radius: 50%;
    box-shadow:
        0 0 0 20px #24361a44,
        0 0 0 40px #24361a22;
}
.shield-chip {
    position: absolute;
    right: 26px;
    bottom: 18px;
    padding: 6px 9px;
    border: 1px solid #415237;
    border-radius: 4px;
    background: #1a2517;
    font-size: 8px;
    color: #b7d89a;
}
.tasks-visual {
    flex-direction: column;
    gap: 11px;
}
.task-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 80%;
    padding: 13px 14px;
    border: 1px solid #3a4931;
    border-radius: 6px;
    background: #1b261b;
    font-size: 9px;
    transform: rotate(-3deg);
}
.task-mini:last-child {
    transform: translateX(10px) rotate(-3deg);
}
.task-check {
    display: grid;
    place-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #314727;
    color: var(--green);
}
.task-mini small {
    display: block;
    margin-top: 4px;
    font-size: 7px;
    color: #97a58b;
}
.task-line {
    width: 19px;
    height: 3px;
    margin-left: auto;
    border-radius: 2px;
    background: #86b257;
}
.features-note {
    margin: 38px 0 0;
    font-size: 10px;
    color: #7e8c78;
    text-align: center;
}
@media (max-width: 1100px) {
    .feature-grid {
        gap: 21px;
    }
}
@media (max-width: 800px) {
    .features {
        padding-block: 65px 45px;
    }
    .features h2 {
        font-size: 35px;
    }
    .feature-intro {
        font-size: 12px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .feature-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;
        column-gap: 28px;
    }
    .feature-visual {
        grid-column: 1;
        grid-row: 1/4;
        height: 170px;
        margin: 0;
    }
    .feature-number {
        align-self: end;
    }
    .feature-item h3 {
        margin-block: 12px;
        font-size: 19px;
    }
    .feature-item p {
        font-size: 12px;
    }
}
@media (max-width: 520px) {
    .features h2 {
        font-size: 33px;
    }
    .feature-intro {
        margin-top: 22px;
    }
    .feature-grid {
        gap: 36px;
        margin-top: 30px;
    }
    .feature-item {
        display: block;
    }
    .feature-visual {
        height: 195px;
        margin-bottom: 22px;
    }
    .feature-item h3 {
        font-size: 21px;
    }
    .feature-item p {
        max-width: 100%;
        font-size: 12px;
    }
    .browser-mini,
    .task-mini {
        max-width: 270px;
    }
    .features-note {
        font-size: 9px;
        text-align: left;
    }
}
.feature-grid {
    row-gap: 38px;
}
.feature-item .feature-number {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #b6d59a;
    letter-spacing: 1px;
}
.feature-access {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 8px;
    border: 1px solid #36472e;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;
    color: #b6cb9f;
    letter-spacing: 0.5px;
}
.deploy-window,
.monitor-window {
    width: 80%;
    max-width: 290px;
    overflow: hidden;
    border: 1px solid #43513a;
    border-radius: 7px;
    background: #1b261b;
    box-shadow: 0 10px 20px #0003;
}
.deploy-window {
    transform: rotate(-3deg);
}
.deploy-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 11px;
    border-bottom: 1px solid #3a4734;
}
.deploy-toolbar > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6a805b;
}
.deploy-toolbar b {
    margin-left: 9px;
    font-size: 7px;
    font-weight: 500;
    color: #a9ba9c;
    letter-spacing: 0.6px;
}
.runtime-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 19px 12px 14px;
}
.runtime-grid span {
    padding: 9px 2px;
    border: 1px solid #435635;
    border-radius: 4px;
    background: #283921;
    font-size: 9px;
    color: #c8e8ac;
    text-align: center;
}
.deploy-caption {
    padding: 0 13px 15px;
    font-size: 8px;
    color: #a6b79a;
}
.deploy-caption > span {
    margin-right: 5px;
    color: var(--green);
}
.recovery-visual {
    flex-direction: column;
    gap: 19px;
}
.recovery-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.recovery-node {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid #405633;
    border-radius: 12px;
    background: #20311b;
    color: #b5da91;
}
.recovery-node svg {
    width: 45px;
    height: 45px;
}
.recovery-arrow {
    font-size: 30px;
    color: var(--green);
}
.recovery-caption {
    padding-inline: 10px;
    font-size: 7px;
    color: #abc199;
    text-align: center;
    letter-spacing: 0.6px;
}
.monitor-window {
    padding: 17px 18px;
}
.monitor-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    font-size: 8px;
    color: #c5d7b7;
    letter-spacing: 0.7px;
}
.monitor-heading .status-dot {
    width: 4px;
    height: 4px;
}
.resource-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 10px;
}
.resource-row > span {
    width: 29px;
    font-size: 8px;
    color: #aabd9d;
}
.resource-row i {
    flex: 1;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: #34442c;
}
.resource-row b {
    display: block;
    width: 43%;
    height: 100%;
    border-radius: 3px;
    background: #a3f635;
}
.resource-row:nth-child(3) b {
    width: 64%;
    background: #82b653;
}
.resource-row:nth-child(4) b {
    width: 32%;
    background: #658f43;
}
.monitor-foot {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #36462e;
    font-size: 7px;
    color: #93a586;
}
@media (min-width: 521px) and (max-width: 800px) {
    .feature-item .feature-access {
        grid-column: 2;
        justify-self: start;
    }
    .feature-item .feature-visual {
        grid-row: 1/5;
        height: 190px;
    }
}
.feature-explorer {
    display: grid;
    grid-template-columns: minmax(270px, 0.85fr) minmax(0, 1.6fr);
    grid-template-rows: repeat(6, minmax(86px, auto));
    align-items: stretch;
    column-gap: 44px;
    margin-top: 46px;
}
.feature-entry {
    display: contents;
}
.feature-option {
    display: flex;
    grid-column: 1;
    grid-row: var(--feature-row);
    align-items: center;
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding: 20px 16px;
    border: 0;
    border-bottom: 1px solid #2b342e;
    border-radius: 0;
    background: transparent;
    color: #a4aea7;
    text-align: left;
    transition:
        background 0.2s,
        color 0.2s;
}
.feature-option:hover {
    background: #19221a;
    color: #eff7e8;
}
.feature-option-number {
    flex: none;
    font: 600 12px var(--font);
    color: #6e8069;
}
.feature-option-title {
    font: 600 17px/1.5 var(--heading);
    letter-spacing: -0.3px;
}
.feature-option-arrow {
    flex: none;
    margin-left: auto;
    font-size: 22px;
    color: #6e8069;
}
.is-active > .feature-option {
    border-bottom-color: #49643a;
    background: linear-gradient(90deg, #26381d, #182217);
    box-shadow: inset 3px 0 var(--green);
    color: #eff7e8;
}
.is-active > .feature-option .feature-option-number,
.is-active > .feature-option .feature-option-arrow {
    color: var(--green);
}
.feature-panel {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1/7;
    min-width: 0;
}
.feature-panel[hidden] {
    display: none;
}
.feature-preview-art {
    display: flex;
    flex: 1;
    justify-content: center;
}
.feature-preview-art .feature-visual {
    width: 100%;
    height: 270px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at center, #30482055, transparent 70%);
}
.feature-panel-copy {
    padding: 20px 30px 28px;
    border-top: 1px solid #2d3b27;
}
.feature-panel-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.feature-panel-meta .feature-number {
    align-self: auto;
    font-size: 14px;
    font-weight: 700;
    color: #b6d59a;
    letter-spacing: 1px;
}
.feature-panel-meta .feature-access {
    margin: 0;
    font-size: 10px;
}
.feature-panel-copy h3 {
    margin: 17px 0 12px;
    font: 600 25px/1.35 var(--heading);
    color: #f0f5eb;
    letter-spacing: -0.6px;
}
.feature-panel-copy p {
    max-width: 580px;
    margin: 0 0 17px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
}
.feature-panel-copy .text-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    color: var(--green);
    white-space: normal;
}
.feature-panel-copy .text-link span {
    margin: 0;
    font-size: 20px;
}
.feature-preview-art {
    align-items: stretch;
    min-height: 350px;
    padding: 0;
}
.product-demo {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 326px;
    background: #111a13;
    font-size: 11px;
    line-height: 1.5;
    color: #d5dfce;
}
.demo-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-bottom: 1px solid #30422a;
    border-radius: 0;
}
.demo-app-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 23px;
    height: 23px;
    color: #a3f635;
}
.demo-app-icon svg {
    width: 23px;
    height: 23px;
}
.demo-toolbar > b {
    font-size: 12px;
    font-weight: 600;
}
.demo-sample {
    margin-left: auto;
    padding: 3px 6px;
    border: 1px solid #405335;
    border-radius: 3px;
    font-size: 9px;
    color: #91a583;
    white-space: nowrap;
}
.demo-page {
    margin-left: 8px;
    font-size: 9px;
    color: #8fa77d;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.demo-body {
    flex: 1;
    min-width: 0;
}
.demo-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.demo-stats-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.demo-stat {
    min-width: 0;
    border: 1px solid #2d4026;
    border-radius: 5px;
    background: #1a2718;
}
.demo-stat > span {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    color: #b2c2a6;
}
.demo-stat strong {
    display: block;
    font: 600 20px/1.3 var(--font);
    color: #e9f6dc;
    overflow-wrap: anywhere;
}
.demo-stat em {
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    color: #acc096;
}
.demo-stat small {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    color: #829775;
}
.demo-section-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-weight: 600;
    color: #bfceb3;
}
.demo-action {
    font-size: 10px;
    font-weight: 500;
    color: #b6e586;
    text-align: right;
}
.demo-table {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #2d4026;
    border-radius: 5px;
}
.demo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.85fr) minmax(0, 0.8fr) minmax(0, 0.6fr);
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-bottom: 1px solid #273820;
}
.demo-row:last-child {
    border-bottom: 0;
}
.demo-row > span {
    min-width: 0;
    font-size: 10px;
    overflow-wrap: anywhere;
}
.demo-row > span:first-child {
    color: #d3dfc9;
}
.demo-row > span:last-child {
    color: #b3ce9b;
}
.demo-table-head {
    background: #1d2a1b;
}
.demo-table-head > span,
.demo-table-head > span:first-child,
.demo-table-head > span:last-child {
    font-size: 9px;
    font-weight: 500;
    color: #91a683;
}
.demo-three-cols .demo-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr);
}
.demo-backups .demo-row {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr) minmax(0, 0.85fr) minmax(0, 0.7fr);
}
.demo-pill {
    display: inline-block;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid #3b4d30;
    border-radius: 3px;
    font-size: 9px;
    line-height: 1.3;
    color: #b9cba9;
    text-align: center;
}
.demo-pill.positive {
    border-color: #456231;
    background: #2d462033;
    color: #c0ed9d;
}
.demo-tool-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 5px;
    background: #23321d;
    font-size: 10px;
    color: #a3cd84;
}
.demo-tool-strip > span:first-child {
    font: italic 19px Georgia;
    color: #c8dda9;
    white-space: nowrap;
}
.demo-tool-strip b {
    margin-left: 6px;
    font: 600 10px var(--font);
}
.demo-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-top: 1px solid #2b3d25;
    font-size: 9px;
    line-height: 1.5;
    color: #8da17e;
}
.demo-footer .status-dot {
    width: 4px;
    height: 4px;
}
.demo-footer > span:last-child {
    margin-left: auto;
    font-size: 9px;
    color: #6f8a5c;
    white-space: nowrap;
}
.demo-runtime-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #30422a;
}
.demo-runtime-tabs > span {
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 10px;
    color: #9cb08d;
}
.demo-runtime-tabs > .selected {
    border-color: #4b6738;
    background: #2a3b21;
    color: #c4ef9e;
}
.demo-deploy-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    margin-bottom: 15px;
}
.demo-config dl {
    margin: 0;
}
.demo-config dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 5px;
    font-size: 10px;
    line-height: 1.5;
}
.demo-config dt {
    flex: none;
    color: #849a76;
}
.demo-config dd {
    min-width: 0;
    margin: 0;
    color: #c1d3b2;
    text-align: right;
    overflow-wrap: anywhere;
}
.demo-config code {
    font-family: Consolas, monospace;
    font-size: 10px;
    color: #bce78d;
}
.demo-checklist {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid #354b2a;
    border-radius: 5px;
    background: #1c2b18;
}
.demo-checklist > b {
    font-size: 10px;
    font-weight: 500;
    color: #bbd6a4;
}
.demo-checklist > span {
    font-size: 10px;
    color: #9ab982;
}
.demo-security-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #3d5730;
    border-radius: 6px;
    background: radial-gradient(ellipse at top left, #3f602b66, transparent), #1b2a18;
}
.demo-shield {
    flex: none;
    color: #b5e77d;
}
.demo-shield svg {
    display: block;
    width: 35px;
    height: 40px;
}
.demo-security-banner > div {
    min-width: 0;
}
.demo-security-banner strong {
    display: block;
    font-weight: 600;
    color: #daedca;
}
.demo-security-banner > div > span {
    display: block;
    margin-top: 5px;
    color: #9fbb8c;
}
.demo-security-banner > .demo-pill {
    flex: none;
    margin-left: auto;
}
.demo-service {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid #2a3d24;
}
.demo-service:last-child {
    border-bottom: 0;
}
.demo-service-icon {
    display: grid;
    flex: none;
    place-items: center;
    border-radius: 6px;
    background: #2b431f;
    color: #b7ea87;
}
.demo-service > div {
    min-width: 0;
}
.demo-service b {
    font-size: 11px;
    font-weight: 500;
    color: #c4d5b7;
}
.demo-service small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    color: #819773;
}
.demo-service > .demo-pill {
    flex: none;
    margin-left: auto;
}
.demo-security-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    font-size: 9px;
    color: #93b47b;
}
.demo-security-footer > span:last-child {
    color: #7d946d;
    text-align: right;
}
.demo-chart-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.demo-chart-heading > b {
    font-size: 10px;
    font-weight: 500;
}
.demo-chart-heading > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    color: #91a982;
}
.demo-chart-heading i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a3f635;
}
.demo-chart-heading i:last-child {
    margin-left: 6px;
    background: #688e54;
}
.demo-chart {
    display: flex;
    gap: 9px;
    min-width: 0;
}
.demo-chart-axis {
    flex: none;
    width: 26px;
    font-size: 8px;
    color: #6e8960;
}
.demo-chart svg {
    width: 100%;
    min-width: 0;
    overflow: visible;
}
.chart-grid {
    fill: none;
    stroke: #30422a;
    stroke-width: 1;
    stroke-dasharray: 3 4;
}
.chart-fill {
    fill: #a3f63512;
    stroke: none;
}
.chart-cpu {
    fill: none;
    stroke: #a3f635;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.chart-memory {
    fill: none;
    stroke: #729958;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.demo-chart-times {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0 35px;
    font-size: 8px;
    color: #718a63;
}
.demo-monitor-services {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #2b3d25;
    font-size: 9px;
    color: #aec29b;
}
.demo-monitor-services > span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.demo-monitor-services i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a3f635;
}
.demo-monitor-services small {
    margin-left: auto;
    font-size: 8px;
    color: #7a926c;
    text-align: right;
}
@media (max-width: 1100px) {
    .feature-preview-art {
        padding: 0;
    }
    .demo-stats {
        gap: 7px;
    }
    .demo-deploy-grid {
        gap: 10px;
    }
    .demo-checklist {
        padding: 10px;
    }
    .demo-runtime-tabs > span {
        padding-inline: 9px;
    }
}
@media (max-width: 800px) {
    .product-demo {
        max-width: 640px;
        margin-inline: auto;
    }
}
@media (max-width: 520px) {
    .product-demo {
        min-height: 0;
    }
    .demo-toolbar {
        gap: 7px;
        padding: 10px;
    }
    .demo-toolbar > b {
        font-size: 11px;
    }
    .demo-sample {
        padding: 3px 5px;
        font-size: 8px;
    }
    .demo-app-icon,
    .demo-app-icon svg {
        width: 20px;
        height: 20px;
    }
    .demo-stats {
        gap: 6px;
    }
    .demo-stat > span {
        font-size: 9px;
    }
    .demo-stat small {
        font-size: 8px;
    }
    .demo-stats-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .demo-row {
        gap: 5px;
        padding: 9px 7px;
    }
    .demo-row > span {
        font-size: 9px;
    }
    .demo-row {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr) minmax(0, 0.8fr) minmax(0, 0.6fr);
    }
    .demo-table-head > span,
    .demo-table-head > span:first-child,
    .demo-table-head > span:last-child {
        font-size: 8px;
    }
    .demo-pill {
        padding: 3px 4px;
        font-size: 8px;
    }
    .demo-section-label {
        font-size: 10px;
    }
    .demo-action {
        font-size: 9px;
    }
    .demo-footer {
        gap: 5px;
        padding: 9px 10px;
        font-size: 8px;
    }
    .demo-footer > span:last-child {
        display: none;
    }
    .demo-tool-strip {
        gap: 6px;
        padding: 9px 8px;
        font-size: 9px;
    }
    .demo-tool-strip b {
        margin-left: 3px;
        font-size: 9px;
    }
    .demo-deploy-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }
    .demo-checklist {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 9px 11px;
    }
    .demo-checklist > span {
        font-size: 9px;
    }
    .demo-runtime-tabs {
        gap: 4px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    .demo-runtime-tabs > span {
        padding: 5px 9px;
        font-size: 9px;
    }
    .demo-config dl > div,
    .demo-config code {
        font-size: 9px;
    }
    .demo-security-banner {
        gap: 9px;
    }
    .demo-shield svg {
        width: 28px;
        height: 33px;
    }
    .demo-security-banner > .demo-pill {
        display: none;
    }
    .demo-service {
        gap: 8px;
    }
    .demo-service b {
        font-size: 10px;
    }
    .demo-service small,
    .demo-security-footer {
        font-size: 8px;
    }
    .demo-monitor-services {
        gap: 10px;
    }
    .demo-chart-times,
    .demo-monitor-services small {
        font-size: 7px;
    }
}
:lang(zh-CN) .feature-option-title,
:lang(zh-CN) .feature-panel-copy h3 {
    letter-spacing: 0;
}
@media (max-width: 1100px) {
    .feature-explorer {
        grid-template-columns: minmax(245px, 0.9fr) minmax(0, 1.5fr);
        column-gap: 26px;
    }
    .feature-option {
        gap: 12px;
        padding-inline: 13px;
    }
    .feature-option-title {
        font-size: 15px;
    }
    .feature-panel-copy {
        padding: 20px 24px 25px;
    }
    .feature-panel-copy h3 {
        font-size: 23px;
    }
    .feature-preview-art {
        padding-inline: 12px;
    }
}
@media (max-width: 800px) {
    .feature-explorer {
        display: block;
        margin-top: 32px;
    }
    .feature-entry {
        display: block;
        border-bottom: 1px solid #34432d;
    }
    .feature-option {
        gap: 16px;
        padding: 20px 14px;
        border-bottom: 0;
    }
    .feature-option-title {
        font-size: 17px;
    }
    .feature-option-arrow {
        transform: rotate(135deg);
    }
    .is-active > .feature-option .feature-option-arrow {
        transform: rotate(-45deg);
    }
    .feature-panel {
        margin: 0 0 18px;
    }
    .feature-preview-art .feature-visual {
        height: 250px;
    }
    .feature-option {
        scroll-margin-top: 18px;
    }
}
@media (max-width: 520px) {
    .feature-option {
        gap: 12px;
        padding: 18px 12px;
    }
    .feature-option-title {
        font-size: 15px;
    }
    .feature-preview-art {
        min-height: 215px;
        padding: 0;
    }
    .feature-preview-art .feature-visual {
        height: 215px;
    }
    .feature-panel-copy {
        padding: 19px 18px 23px;
    }
    .feature-panel-copy h3 {
        font-size: 21px;
    }
    .feature-panel-copy p {
        font-size: 12px;
    }
    .feature-panel-meta .feature-number {
        font-size: 13px;
    }
    .feature-panel-meta .feature-access {
        font-size: 9px;
    }
    .feature-preview-art .browser-mini-body {
        gap: 12px;
        padding: 25px 14px 30px;
    }
    .feature-preview-art .wp-mark {
        width: 38px;
        height: 38px;
        font-size: 28px;
    }
    .feature-preview-art .browser-mini-body > span {
        font-size: 10px;
    }
    .feature-preview-art .browser-mini-top span {
        font-size: 7px;
    }
    .feature-preview-art .backup-tag {
        padding: 10px;
        font-size: 9px;
    }
    .feature-preview-art .runtime-grid {
        gap: 5px;
        padding: 22px 12px 18px;
    }
    .feature-preview-art .runtime-grid span {
        padding: 12px 1px;
        font-size: 10px;
    }
    .feature-preview-art .deploy-toolbar b {
        font-size: 8px;
    }
    .feature-preview-art .deploy-caption {
        font-size: 9px;
    }
    .feature-preview-art .recovery-flow {
        gap: 18px;
    }
    .feature-preview-art .recovery-node {
        width: 63px;
        height: 63px;
    }
    .feature-preview-art .recovery-node svg {
        width: 45px;
        height: 45px;
    }
    .feature-preview-art .recovery-arrow {
        font-size: 30px;
    }
    .feature-preview-art .recovery-caption {
        font-size: 8px;
    }
    .feature-preview-art .monitor-window {
        padding: 18px;
    }
    .feature-preview-art .monitor-heading {
        margin-bottom: 15px;
        font-size: 9px;
    }
    .feature-preview-art .resource-row {
        margin-block: 12px;
    }
    .feature-preview-art .resource-row > span {
        width: 28px;
        font-size: 9px;
    }
    .feature-preview-art .monitor-foot {
        margin-top: 14px;
        font-size: 8px;
    }
    .feature-preview-art .task-mini {
        gap: 10px;
        padding: 14px 12px;
        font-size: 10px;
    }
    .feature-preview-art .task-mini small {
        font-size: 8px;
    }
    .feature-preview-art .task-check {
        width: 26px;
        height: 26px;
    }
    .feature-preview-art .task-line {
        width: 18px;
    }
    .feature-preview-art .shield-visual svg {
        width: 85px;
        height: 102px;
    }
    .feature-preview-art .shield-ring {
        width: 130px;
        height: 130px;
    }
    .feature-preview-art .shield-chip {
        right: 10%;
        bottom: 20px;
        font-size: 9px;
    }
}
.feature-panel {
    overflow: hidden;
    border: 1px solid #405237;
    border-radius: 16px;
    background: linear-gradient(145deg, #1a2619, #131c15 70%);
    box-shadow: 0 16px 40px #0002;
}
.feature-preview-art {
    position: relative;
    overflow: visible;
    background: radial-gradient(ellipse at 56% 55%, #36522155, transparent 72%);
}
.product-demo {
    overflow: hidden;
    border: 1px solid #3b5030;
    border-radius: 9px;
    box-shadow: 0 14px 35px #0004;
}
.demo-toolbar {
    background: #1d2b1b;
}
.demo-body {
    padding: 14px;
}
.demo-stat {
    padding: 8px 10px;
}
.demo-stat strong {
    font-size: 18px;
}
.demo-stats {
    margin-bottom: 12px;
}
.demo-row {
    padding-block: 8px;
}
.demo-security-banner {
    margin-bottom: 10px;
    padding: 10px 12px;
}
.demo-security-banner strong {
    font-size: 12px;
}
.demo-security-banner > div > span {
    font-size: 9px;
}
.demo-service {
    padding-block: 7px;
}
.demo-service-icon {
    width: 23px;
    height: 23px;
}
.demo-chart,
.demo-chart svg {
    height: 80px;
}
.demo-chart-axis {
    margin-top: -17px;
    line-height: 38px;
}
.demo-chart-times {
    margin-top: 6px;
}
.demo-monitor-services {
    margin-top: 9px;
    padding-top: 9px;
}
.feature-floating-note {
    position: absolute;
    z-index: 1;
    right: 5px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 88%;
    padding: 11px 15px;
    border: 1px solid #526a3b;
    border-radius: 6px;
    background: #24381c;
    box-shadow: 0 9px 22px #0005;
    font-size: 11px;
    line-height: 1.5;
    color: #d7edc1;
    transform: rotate(2deg);
}
.feature-floating-note > span {
    font-size: 20px;
    line-height: 1;
    color: var(--green);
}
.feature-entry:nth-child(even) .feature-floating-note {
    right: 26px;
    transform: rotate(-2deg);
}
@media (min-width: 801px) {
    .feature-explorer {
        grid-template-rows: repeat(6, 74px);
        align-content: center;
        column-gap: 52px;
        height: 568px;
    }
    .feature-option {
        gap: 14px;
        padding: 18px 15px;
    }
    .feature-option-title {
        font-size: 16px;
    }
    .feature-panel {
        display: grid;
        grid-template-rows: 340px minmax(0, 1fr);
        align-self: center;
        height: 568px;
        min-height: 0;
    }
    .feature-preview-art {
        align-items: center;
        height: 100%;
        min-height: 0;
        padding: 12px 22px 22px 8px;
    }
    .product-demo {
        height: 292px;
        min-height: 0;
        transform: translateX(5px) rotate(-1.2deg);
    }
    .feature-entry:nth-child(even) .product-demo {
        transform: translateX(0) rotate(0.9deg);
    }
    .feature-entry:nth-child(2) .product-demo,
    .feature-entry:nth-child(4) .product-demo,
    .feature-entry:nth-child(6) .product-demo {
        width: 94%;
        height: 258px;
        margin-left: auto;
    }
    .feature-entry:nth-child(5) .product-demo {
        height: 302px;
    }
    .demo-toolbar {
        flex-shrink: 0;
        padding-block: 10px;
    }
    .demo-body {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #49643a #172114;
    }
    .feature-panel-copy {
        display: grid;
        grid-template-rows: 28px 40px 48px 24px;
        align-content: start;
        gap: 10px;
        min-height: 0;
        padding: 18px 12px 16px 28px;
        border-top: 0;
    }
    .feature-panel-meta {
        align-self: start;
    }
    .feature-panel-copy h3 {
        font-size: 23px;
    }
    .feature-panel-copy h3,
    .feature-panel-copy p {
        align-self: start;
        margin: 0;
    }
    .feature-panel-copy .text-link {
        justify-self: start;
        align-self: start;
    }
}
@media (min-width: 801px) and (max-width: 1100px) {
    .feature-explorer {
        column-gap: 26px;
    }
    .feature-option {
        gap: 10px;
        padding-inline: 12px;
    }
    .feature-option-title {
        font-size: 15px;
    }
    .feature-preview-art {
        padding-right: 12px;
        padding-left: 4px;
    }
    .feature-panel-copy {
        padding-left: 16px;
    }
    .feature-panel-copy h3 {
        font-size: 21px;
    }
    .demo-body {
        padding: 12px;
    }
    .demo-stat {
        padding: 8px;
    }
    .demo-runtime-tabs > span {
        padding-inline: 8px;
    }
    .feature-floating-note {
        padding: 10px 12px;
        font-size: 10px;
    }
}
@media (max-width: 800px) {
    .feature-option {
        min-height: 74px;
        padding-block: 20px;
    }
    .feature-preview-art {
        align-items: center;
        min-height: 0;
        padding: 18px 10px 28px;
    }
    .product-demo {
        min-height: 0;
        transform: rotate(-0.5deg);
    }
    .feature-panel-copy {
        padding: 18px 14px 24px;
        border: 0;
    }
    .feature-floating-note {
        right: 10px;
        bottom: 8px;
        gap: 7px;
        padding: 9px 12px;
        font-size: 10px;
    }
    .feature-floating-note > span {
        font-size: 17px;
    }
    .feature-entry:nth-child(even) .feature-floating-note {
        right: 15px;
    }
    .demo-chart,
    .demo-chart svg {
        height: 85px;
    }
}
.black-friday-intro .feature-intro,
.black-friday-intro .feature-panel-copy p {
    font-size: 16px;
    line-height: 1.7;
}
.black-friday-intro .feature-panel-copy .text-link {
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
}
.black-friday-intro .feature-option-title {
    font-size: 16px;
    line-height: 1.5;
}
.black-friday-intro .feature-option-number {
    font-size: 13px;
    color: var(--readable-secondary);
}
.black-friday-intro .feature-panel-copy h3 {
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.black-friday-intro .features-note {
    font-size: 13px;
    line-height: 1.7;
    color: var(--readable-secondary);
}
@media (min-width: 801px) {
    .black-friday-intro .feature-explorer {
        grid-template-rows: repeat(6, minmax(74px, auto));
        align-content: stretch;
        height: auto;
        min-height: 568px;
    }
    .black-friday-intro .feature-panel {
        grid-template-rows: 340px auto;
        align-self: stretch;
        height: auto;
        min-height: 568px;
    }
    .black-friday-intro .feature-panel-copy {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 22px 28px 28px;
    }
    .black-friday-intro .feature-panel-meta {
        align-self: stretch;
    }
    .black-friday-intro .feature-panel-copy h3,
    .black-friday-intro .feature-panel-copy p {
        margin: 0;
    }
}
@media (max-width: 800px) {
    .black-friday-intro .feature-panel-copy {
        padding: 22px 20px 26px;
    }
}
.black-friday-intro .feature-access,
.black-friday-intro .feature-panel-meta .feature-access {
    font-size: 11px;
    line-height: 1.5;
    color: var(--readable-label);
}
.black-friday-intro .feature-option {
    color: var(--readable-label);
}
.black-friday-intro .feature-option-arrow {
    color: var(--readable-secondary);
}
.black-friday-intro .feature-option:hover {
    background: #22301f;
    color: #f5f7f5;
}
.black-friday-intro .is-active > .feature-option {
    color: #f5f7f5;
}
.black-friday-intro .is-active > .feature-option .feature-option-number,
.black-friday-intro .is-active > .feature-option .feature-option-arrow {
    color: var(--green);
}
.black-friday-intro .demo-sample,
.black-friday-intro .demo-page,
.black-friday-intro .demo-stat small,
.black-friday-intro .demo-footer,
.black-friday-intro .demo-footer > span:last-child,
.black-friday-intro .demo-config dt,
.black-friday-intro .demo-service small,
.black-friday-intro .demo-security-footer,
.black-friday-intro .demo-security-footer > span:last-child,
.black-friday-intro .demo-chart-axis,
.black-friday-intro .demo-chart-times,
.black-friday-intro .demo-chart-heading > span,
.black-friday-intro .demo-monitor-services small {
    color: var(--readable-secondary);
}
.black-friday-intro .demo-table-head > span,
.black-friday-intro .demo-table-head > span:first-child,
.black-friday-intro .demo-table-head > span:last-child,
.black-friday-intro .demo-runtime-tabs > span {
    color: #c0d0b5;
}
.black-friday-intro .demo-runtime-tabs > .selected {
    color: #d3f5b4;
}
.black-friday-intro .demo-stat > span,
.black-friday-intro .demo-stat em,
.black-friday-intro .demo-security-banner > div > span,
.black-friday-intro .demo-monitor-services {
    color: #c0d0b5;
}
.black-friday-intro .feature-number,
.black-friday-intro .feature-panel-meta .feature-number {
    color: #cce6b6;
}
.black-friday-intro .browser-mini-top span,
.black-friday-intro .browser-mini-body > span,
.black-friday-intro .task-mini small,
.black-friday-intro .deploy-toolbar b,
.black-friday-intro .deploy-caption,
.black-friday-intro .recovery-caption,
.black-friday-intro .monitor-foot,
.black-friday-intro .resource-row > span {
    color: var(--readable-secondary);
}
.black-friday-intro .feature-panel[hidden] {
    display: none;
}

/* Audience cards. */
.audiences {
    padding-block: 90px;
}
.audience-intro {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
}
.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.audience-card {
    min-width: 0;
}
.audience-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(145deg, #192319, #111713);
}
.audience-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border: 1px solid #405433;
    border-radius: 10px;
    background: #24321d;
    font: 600 21px var(--heading);
    color: var(--green);
}
.audience-icon svg {
    width: 25px;
    height: 25px;
}
.audience-card .feature-number {
    align-self: auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #b6d59a;
    letter-spacing: 1px;
}
.audience-card h3 {
    margin: 12px 0 10px;
    font: 600 22px/1.3 var(--heading);
    letter-spacing: -0.7px;
}
.audience-card p {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}
.audience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    margin-bottom: 18px;
}
.audience-tags span {
    padding: 7px 10px;
    border: 1px solid #405236;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #bdceb2;
}
.audience-card .text-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--green);
    white-space: normal;
}
.audience-card .text-link span {
    font-size: 20px;
}
@media (max-width: 1100px) {
    .audience-card {
        padding: 20px;
    }
    .audience-card h3 {
        font-size: 20px;
    }
}
@media (max-width: 800px) {
    .audiences {
        padding-block: 65px;
    }
    .audience-grid {
        gap: 14px;
    }
    .audience-card {
        padding: 20px;
    }
    .audience-card h3 {
        font-size: 19px;
    }
    .audience-card p,
    .audience-intro {
        font-size: 12px;
    }
}
@media (max-width: 1100px) {
    .audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 650px) {
    .audience-grid {
        grid-template-columns: 1fr;
    }
    .audience-card {
        padding: 20px;
    }
    .audience-icon {
        margin-bottom: 18px;
    }
    .audience-card h3 {
        font-size: 23px;
    }
    .audience-card p {
        font-size: 13px;
    }
    .audience-tags {
        margin-top: 0;
    }
    .audience-intro {
        margin-top: 22px;
    }
}
@media (max-width: 520px) {
    .audiences {
        padding-block: 55px;
    }
}
.black-friday-intro .audience-intro {
    font-size: 16px;
    line-height: 1.7;
}
.black-friday-intro .audience-card p {
    font-size: 14px;
    line-height: 1.7;
}
.black-friday-intro .audience-card .text-link {
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
}
.black-friday-intro .audience-card h3 {
    font-size: 20px;
    letter-spacing: -0.02em;
}
.black-friday-intro .audience-tags span {
    font-size: 13px;
    color: var(--readable-label);
}
.black-friday-intro .audience-card .feature-number {
    color: #cce6b6;
}

/* Closing call to action. */
.closing {
    position: relative;
    padding: 51px 55px;
    overflow: hidden;
    border: 1px solid #35482c;
    border-radius: 12px;
    background: radial-gradient(ellipse at 92% 100%, #35551e77, transparent 60%), #142011;
}
.closing h2 {
    margin: 18px 0 27px;
    font-size: 60px;
    letter-spacing: -3px;
}
.closing h2 span {
    color: var(--green);
}
.closing .eyebrow {
    font-size: 8px;
}
.closing .button {
    min-height: 46px;
    font-size: 12px;
}
.closing-spark {
    position: absolute;
    top: 65px;
    right: 85px;
    font: 300 330px/0.8 Arial;
    color: var(--green);
    opacity: 0.85;
    transform: rotate(10deg);
}
@media (max-width: 1100px) {
    .closing-spark {
        right: 60px;
    }
}
@media (max-width: 800px) {
    .closing {
        padding: 40px;
    }
    .closing h2 {
        font-size: 52px;
    }
    .closing-spark {
        top: 85px;
        font-size: 230px;
    }
}
@media (max-width: 520px) {
    .closing {
        padding: 32px 25px;
    }
    .closing h2 {
        letter-spacing: -2px;
    }
    .closing-spark {
        right: -18px;
        font-size: 145px;
        opacity: 0.38;
    }
    .closing .button {
        position: relative;
        z-index: 1;
    }
    .closing .eyebrow {
        font-size: 7px;
        letter-spacing: 1.1px;
    }
}
.closing-description {
    max-width: 440px;
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.8;
    color: #b3c4a8;
}
.closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.closing-actions,
.closing-description,
.closing h2,
.closing .eyebrow,
.closing-deals {
    position: relative;
    z-index: 1;
}
.closing-deals {
    display: inline-block;
    margin-top: 23px;
    font-size: 11px;
    line-height: 1.8;
    color: #b3c4a8;
    white-space: normal;
}
.closing-spark {
    pointer-events: none;
}
@media (max-width: 1100px) {
    .closing-spark {
        opacity: 0.35;
    }
}
@media (max-width: 800px) {
    .closing-actions .button {
        gap: 14px;
        padding-inline: 16px;
    }
    .closing-spark {
        right: 15px;
    }
}
@media (max-width: 520px) {
    .closing h2 {
        font-size: clamp(35px, 10vw, 47px);
    }
    .closing-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .closing-description {
        font-size: 12px;
    }
    .closing-deals {
        font-size: 10px;
    }
    .closing-spark {
        top: 95px;
    }
}
.black-friday-intro .closing .button,
.black-friday-intro .closing-actions .button {
    height: auto;
    padding-block: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
.black-friday-intro .closing-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}
.black-friday-intro .closing-deals {
    font-size: 14px;
    line-height: 1.6;
    color: var(--readable-link);
    white-space: normal;
}
.black-friday-intro .closing .eyebrow {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.08em;
}
@media (max-width: 520px) {
    .black-friday-intro .closing h2 {
        letter-spacing: -0.035em;
    }
}
.black-friday-intro .closing-deals:hover {
    color: var(--green);
}

/* Page footer. */
.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding-block: 51px 30px;
}
.footer .brand {
    font-size: 24px;
}
.footer > p {
    font-size: 10px;
    color: #899680;
}
.footer > div {
    display: flex;
    gap: 24px;
    margin-left: auto;
    font-size: 10px;
    color: #b3c0aa;
}
.footer-note {
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid #25301f;
    font-size: 9px;
    color: #718069;
}
@media (max-width: 800px) {
    .footer {
        gap: 17px;
    }
    .footer > div {
        gap: 15px;
    }
    .footer > p {
        font-size: 9px;
    }
}
@media (max-width: 520px) {
    .footer {
        row-gap: 13px;
        column-gap: 18px;
        padding-top: 35px;
    }
    .footer > p {
        font-size: 9px;
    }
    .footer > div {
        justify-content: flex-start;
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
    .footer-note {
        margin-top: 8px;
        padding-top: 18px;
        font-size: 8px;
    }
}
.footer .brand {
    font-style: italic;
    color: var(--white);
}
@media (max-width: 520px) {
    .footer > div {
        flex-wrap: wrap;
    }
}
.black-friday-intro .footer > p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--readable-secondary);
}
.black-friday-intro .footer > div {
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.6;
    color: var(--readable-link);
}
.black-friday-intro .footer-note {
    font-size: 13px;
    line-height: 1.7;
    color: var(--readable-secondary);
}
.black-friday-intro .footer a:hover {
    color: var(--green);
}

/* Plan preview dialog. */
dialog {
    margin: auto;
}
dialog {
    width: min(480px, calc(100% - 32px));
    max-height: 90vh;
    padding: 40px;
    border: 1px solid #657b50;
    border-radius: 16px;
    background: #151e15;
    color: var(--white);
}
dialog::backdrop {
    background: #000b;
    backdrop-filter: blur(6px);
}
dialog h2 {
    font-size: 32px;
    letter-spacing: -1px;
}
.close-dialog {
    position: absolute;
    top: 15px;
    right: 17px;
    border: 0;
    background: none;
    font-size: 25px;
    line-height: 1;
    color: #b8c2b1;
}
.dialog-price {
    margin: 22px 0 8px;
    font: 600 34px var(--heading);
    color: var(--green);
}
.dialog-summary {
    font-size: 12px;
    line-height: 1.8;
    color: var(--muted);
}
.dialog-note {
    margin-block: 23px;
    padding: 17px;
    border: 1px solid #3a4a30;
    border-radius: 7px;
    background: #212d1d;
}
.dialog-note strong {
    font-size: 13px;
}
.dialog-note p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.8;
    color: #aebda5;
}
dialog .button {
    gap: 10px;
    width: 100%;
    padding-inline: 14px;
    font-size: 12px;
}
.back-button {
    display: block;
    margin: 21px auto 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: #b3c4a8;
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (max-width: 520px) {
    dialog {
        padding: 32px 25px;
    }
    .dialog-price {
        font-size: 30px;
    }
}
.black-friday-intro dialog .button {
    height: auto;
    padding-block: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
.black-friday-intro .dialog-summary {
    font-size: 16px;
    line-height: 1.7;
}
.black-friday-intro .dialog-note p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}
.black-friday-intro .back-button {
    font-size: 14px;
    line-height: 1.6;
    color: var(--readable-link);
    white-space: normal;
}
.black-friday-intro .dialog-note strong {
    font-size: 15px;
}
.black-friday-intro dialog {
    overflow-y: auto;
}
.black-friday-intro .close-dialog {
    color: var(--readable-link);
}
.black-friday-intro .back-button:hover,
.black-friday-intro .close-dialog:hover {
    color: var(--green);
}

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