/* Shared brand palette for the public site and member experience. */
:root {
    --brand-ink: #1c2a31;
    --brand-ink-soft: #2c3d45;
    --brand-green: #148466;
    --brand-green-soft: #e8f3ef;
    --brand-blue: #326f8d;
    --brand-blue-soft: #e9f1f5;
    --brand-coral: #cf6854;
    --brand-coral-soft: #f8ece9;
    --brand-gold: #c88a3d;
    --brand-line: #dbe3e7;
}

body:not(.cashier-body) .site-header {
    border-bottom-color: #dbe3e7;
    background: rgba(255, 255, 255, .97);
}

body:not(.cashier-body) .brand-mark {
    border-radius: 7px;
    background: var(--brand-ink);
    box-shadow: inset 0 -3px var(--brand-green);
}

body:not(.cashier-body) .nav a {
    position: relative;
    color: #43535c;
    font-weight: 600;
}

body:not(.cashier-body) .nav a::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    content: "";
    background: transparent;
}

body:not(.cashier-body) .nav a:hover {
    color: var(--brand-blue);
}

body:not(.cashier-body) .nav a:hover::after {
    background: var(--brand-coral);
}

body:not(.cashier-body) .header-account {
    color: var(--brand-ink-soft);
    border-color: var(--brand-line);
    background: #fff;
}

body:not(.cashier-body) .header-account:hover {
    color: var(--brand-green);
    border-color: #a8cbbb;
    background: #f8fbfa;
}

/* Public home */
.image-page {
    color: var(--brand-ink);
}

.image-page .eyebrow {
    color: var(--brand-blue);
}

.image-page .eyebrow::before {
    background: var(--brand-coral);
}

.image-hero {
    border-bottom-color: var(--brand-line);
    background-color: #eef3f6;
    background-image:
        linear-gradient(90deg, rgba(244, 248, 249, 1) 0%, rgba(244, 248, 249, .98) 34%, rgba(244, 248, 249, .7) 57%, rgba(244, 248, 249, .08) 100%),
        url("/assets/img/yunqiao-screen-editor.png");
}

.image-hero .eyebrow {
    color: var(--brand-blue);
}

.image-hero h1 {
    color: #15242b;
}

.image-hero p {
    color: #53656f;
}

.image-hero .btn.primary {
    background: var(--brand-green);
    box-shadow: 0 12px 26px rgba(20, 132, 102, .2);
}

.image-hero .btn.secondary {
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
}

.image-hero .hero-stats div {
    border-color: rgba(206, 218, 224, .9);
    background: rgba(255, 255, 255, .92);
}

.image-hero .hero-stats div:nth-child(1) dt { color: var(--brand-green); }
.image-hero .hero-stats div:nth-child(2) dt { color: var(--brand-blue); }
.image-hero .hero-stats div:nth-child(3) dt { color: var(--brand-coral); }

.image-page .trust-band {
    border: 0;
    color: #d9e3e6;
    background: var(--brand-ink);
}

.image-page .trust-list span {
    position: relative;
    color: #d7e1e5;
    border-right: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
}

.image-page .trust-list span::before {
    position: absolute;
    top: 0;
    right: 22%;
    left: 22%;
    height: 3px;
    content: "";
    background: var(--brand-green);
}

.image-page .trust-list span:nth-child(3n + 2)::before { background: var(--brand-blue); }
.image-page .trust-list span:nth-child(3n + 3)::before { background: var(--brand-coral); }

.visual-showcase {
    padding: 34px 0 40px;
    color: #fff;
    background: #223239;
}

.visual-showcase-head {
    min-height: 42px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.visual-showcase-head > span {
    color: #85ceb6;
    font-size: 11px;
    font-weight: 800;
}

.visual-showcase-head > strong {
    font-size: 20px;
}

.visual-showcase-head > a {
    margin-left: auto;
    color: #a9cde0;
    font-size: 12px;
    font-weight: 800;
}

.visual-showcase-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.visual-showcase-grid figure {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1.06;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    background: #17242a;
}

.visual-showcase-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}

.visual-showcase-grid figure:hover img {
    transform: scale(1.025);
}

.visual-showcase-grid figcaption {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: grid;
    gap: 1px;
    border-radius: 5px;
    padding: 8px 9px;
    color: #fff;
    background: rgba(18, 27, 31, .82);
    backdrop-filter: blur(6px);
}

.visual-showcase-grid figcaption strong {
    font-size: 12px;
}

.visual-showcase-grid figcaption span {
    color: rgba(255, 255, 255, .7);
    font-size: 9px;
}

.image-page .service-section {
    background: #fff;
}

.image-page .service-item {
    border-color: var(--brand-line);
    box-shadow: 0 10px 28px rgba(28, 42, 49, .06);
}

.image-page .service-item:nth-child(1) { border-top: 3px solid var(--brand-green); }
.image-page .service-item:nth-child(2) { border-top: 3px solid var(--brand-blue); }
.image-page .service-item:nth-child(3) { border-top: 3px solid var(--brand-coral); }
.image-page .service-item:nth-child(4) { border-top: 3px solid var(--brand-gold); }

.image-page .section.muted {
    background: #f1f5f7;
}

.image-page .product-card {
    border-color: var(--brand-line);
    border-top: 3px solid #aebdc4;
    box-shadow: 0 10px 28px rgba(28, 42, 49, .06);
}

.image-page .product-card:nth-child(2) { border-top-color: var(--brand-blue); }
.image-page .product-card:nth-child(3) { border-top-color: var(--brand-green); }
.image-page .product-card:nth-child(4) { border-top-color: var(--brand-coral); }

.image-page .product-card.featured {
    border-color: rgba(20, 132, 102, .45);
    box-shadow: 0 16px 38px rgba(20, 132, 102, .12);
}

.image-page .product-price span,
.image-page .product-price strong,
.image-page .recharge-price {
    color: var(--brand-green);
}

.image-page .cycle {
    color: var(--brand-blue);
}

.image-page .tag {
    color: #88511e;
    background: #f9ead7;
}

.image-page .recharge-strip {
    border: 1px solid #cddde5;
    border-left: 5px solid var(--brand-blue);
    background: #edf4f7;
}

.image-page #software {
    background: #f8f6f3;
}

.image-page .download-link {
    border-top: 3px solid var(--brand-blue);
}

.image-page .download-link strong {
    color: var(--brand-blue);
}

.image-page .software-panel {
    border-color: #293c44;
    background: #22333a;
    box-shadow: 0 18px 44px rgba(23, 36, 42, .16);
}

.image-page .software-panel div {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .055);
}

.image-page .software-panel div:nth-child(1) { box-shadow: inset 0 3px var(--brand-green); }
.image-page .software-panel div:nth-child(2) { box-shadow: inset 0 3px var(--brand-blue); }
.image-page .software-panel div:nth-child(3) { box-shadow: inset 0 3px var(--brand-coral); }
.image-page .software-panel div:nth-child(4) { box-shadow: inset 0 3px var(--brand-gold); }

.image-page .software-panel strong {
    color: #fff;
}

.image-page .software-panel span {
    color: #bccbd1;
}

.image-page .scenario-card {
    border-color: var(--brand-line);
    box-shadow: 0 9px 26px rgba(28, 42, 49, .055);
}

.image-page .scenario-card:nth-child(1) { border-top: 4px solid var(--brand-green); }
.image-page .scenario-card:nth-child(2) { border-top: 4px solid var(--brand-blue); }
.image-page .scenario-card:nth-child(3) { border-top: 4px solid var(--brand-coral); }
.image-page .scenario-card:nth-child(4) { border-top: 4px solid var(--brand-gold); }

.image-page .scenario-card li {
    color: #455760;
    background: #f2f5f6;
}

.image-page .process-grid > div {
    border-color: var(--brand-line);
}

.image-page .process-grid > div:nth-child(1) b { color: var(--brand-green); }
.image-page .process-grid > div:nth-child(2) b { color: var(--brand-blue); }
.image-page .process-grid > div:nth-child(3) b { color: var(--brand-coral); }
.image-page .process-grid > div:nth-child(4) b { color: var(--brand-gold); }

.image-page .assurance-grid {
    border-color: #d9e1e5;
    border-left: 5px solid var(--brand-coral);
    background: #f2f5f6;
}

.image-page .assurance-list p {
    border-color: #dce3e6;
    background: #fff;
}

.image-page .cta {
    color: #fff;
    background: var(--brand-ink);
    box-shadow: inset 0 5px var(--brand-green);
}

.image-page .cta .eyebrow::before {
    background: var(--brand-coral);
}

/* Member center */
.member-center {
    background: #eff3f5;
}

.member-center-head {
    border-color: #263941;
    color: #fff;
    background: #203139;
    box-shadow: 0 16px 38px rgba(25, 40, 47, .14);
}

.member-center-head .eyebrow {
    color: #8fcfb9;
}

.member-center-head .eyebrow::before {
    background: var(--brand-coral);
}

.member-center-head h1 {
    color: #fff;
}

.member-center-head p {
    color: #bdcbd0;
}

.member-balance {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.member-balance span,
.member-balance small {
    color: #aec0c6;
}

.member-balance strong {
    color: #f2b66d;
}

.member-actions .btn.primary {
    background: var(--brand-green);
}

.member-actions .btn.secondary {
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
}

.member-metrics {
    border-color: var(--brand-line);
    box-shadow: 0 8px 22px rgba(28, 42, 49, .045);
}

.member-metrics > div:nth-child(1) { box-shadow: inset 0 3px var(--brand-green); }
.member-metrics > div:nth-child(2) { box-shadow: inset 0 3px var(--brand-blue); }
.member-metrics > div:nth-child(3) { box-shadow: inset 0 3px var(--brand-coral); }
.member-metrics > div:nth-child(4) { box-shadow: inset 0 3px var(--brand-gold); }

.member-section {
    border-color: var(--brand-line);
    box-shadow: 0 8px 22px rgba(28, 42, 49, .04);
}

.member-section-head {
    border-color: var(--brand-line);
    background: #fafbfb;
}

.member-bind-section .member-section-head {
    box-shadow: inset 4px 0 var(--brand-blue);
    background: var(--brand-blue-soft);
}

.member-password-section .member-section-head {
    box-shadow: inset 4px 0 var(--brand-coral);
    background: #faf3f1;
}

.member-section-head a {
    color: var(--brand-blue);
}

.code-list strong {
    color: var(--brand-green);
}

/* Login and registration */
.member-login-body,
.member-login-page,
.member-register-page {
    background: #edf2f5;
}

.member-login-shell,
.member-register-shell {
    border-color: #ced9de;
    box-shadow: 0 22px 56px rgba(24, 39, 47, .15);
}

.member-login-page .member-auth-visual,
.member-register-page .member-auth-visual {
    position: relative;
    background: #203139;
    box-shadow: inset 0 5px var(--brand-green);
}

.member-login-page .member-auth-visual::after,
.member-register-page .member-auth-visual::after {
    position: absolute;
    top: 5px;
    right: 0;
    width: 34%;
    height: 4px;
    content: "";
    background: var(--brand-blue);
}

.member-login-page .member-auth-visual .eyebrow,
.member-register-page .member-auth-visual .eyebrow {
    color: #8fcfb9;
}

.member-login-page .member-auth-visual .eyebrow::before,
.member-register-page .member-auth-visual .eyebrow::before {
    background: var(--brand-coral);
}

.member-login-page .member-login-intro p,
.member-register-page .member-register-intro p {
    color: #becdd2;
}

.member-register-benefits div:nth-child(1) { border-color: var(--brand-green); }
.member-register-benefits div:nth-child(2) { border-color: var(--brand-blue); }
.member-register-benefits div:nth-child(3) { border-color: var(--brand-coral); }

.member-login-form-head > div > span::before,
.member-register-form-head > div > span::before {
    background: var(--brand-coral);
}

.member-login-form-head a,
.member-register-form-head a,
.member-login-footer a {
    color: var(--brand-blue);
}

.member-login-submit,
.member-register-submit {
    background: var(--brand-green);
    box-shadow: 0 12px 26px rgba(20, 132, 102, .18);
}

body:not(.cashier-body) .site-footer {
    border-top: 5px solid var(--brand-green);
    color: #dce6e9;
    background: #19282f;
}

body:not(.cashier-body) .footer-grid p,
body:not(.cashier-body) .footer-grid span,
body:not(.cashier-body) .footer-service-row,
body:not(.cashier-body) .footer-bottom {
    color: #9fb0b8;
}

@media (max-width: 1080px) {
    .visual-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .visual-showcase-grid figure {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 760px) {
    body:not(.cashier-body) .nav {
        scrollbar-width: none;
    }

    body:not(.cashier-body) .nav::-webkit-scrollbar {
        display: none;
    }

    .image-hero {
        background:
            linear-gradient(180deg, rgba(244, 248, 249, .99) 0%, rgba(244, 248, 249, .97) 58%, rgba(244, 248, 249, .9) 100%),
            url("/assets/img/yunqiao-screen-editor.png") right -330px bottom 18px / 720px auto no-repeat,
            #eef3f6;
    }

    .image-hero .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-hero .hero-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .image-hero .hero-actions .btn {
        min-width: 0;
        padding-right: 12px;
        padding-left: 12px;
        white-space: nowrap;
    }

    .image-hero .hero-stats div {
        padding-right: 6px;
        padding-left: 6px;
    }

    .image-hero .hero-stats dd {
        font-size: 12px;
    }

    .visual-showcase {
        padding: 26px 0 30px;
    }

    .visual-showcase-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .visual-showcase-head > a {
        margin: 7px 0 0;
    }

    .visual-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .visual-showcase-grid figure {
        aspect-ratio: 1 / 1.04;
    }

    .member-balance {
        padding: 18px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
        border-left: 0;
    }

    .member-login-page,
    .member-register-page {
        background: #edf2f4;
    }
}

/* Surface hierarchy: color distinguishes page regions while white is reserved for focused content. */
body:not(.cashier-body) {
    background: #e8eef0;
}

.image-page {
    background: #edf2f3;
}

.image-page .service-section {
    background: #f0f5f3;
}

.image-page .service-item:nth-child(1) { background: #f7fbf9; }
.image-page .service-item:nth-child(2) { background: #f4f8fa; }
.image-page .service-item:nth-child(3) { background: #fbf6f4; }
.image-page .service-item:nth-child(4) { background: #faf7f1; }

.image-page #products {
    background: #e7eef1;
}

.image-page .product-card {
    background: #f9fbfb;
}

.image-page .product-card.featured {
    background: #fff;
}

.image-page #software {
    background: #f2eee9;
}

.image-page .download-link {
    background: #f8faf9;
}

.image-page #scenarios {
    background: #e8eff1;
}

.image-page .scenario-card:nth-child(1) { background: #f5faf8; }
.image-page .scenario-card:nth-child(2) { background: #f3f7f9; }
.image-page .scenario-card:nth-child(3) { background: #faf4f2; }
.image-page .scenario-card:nth-child(4) { background: #faf7f0; }

.image-page #process {
    background: #f4f6f4;
}

.image-page .process-grid > div:nth-child(1) { background: #f5faf8; }
.image-page .process-grid > div:nth-child(2) { background: #f3f7f9; }
.image-page .process-grid > div:nth-child(3) { background: #faf4f2; }
.image-page .process-grid > div:nth-child(4) { background: #faf7f0; }

.image-page .assurance-section {
    background: #e7edef;
}

.member-center {
    background: #e7edef;
}

.member-metrics > div:nth-child(1) { background: #f4faf7; }
.member-metrics > div:nth-child(2) { background: #f1f6f9; }
.member-metrics > div:nth-child(3) { background: #faf3f1; }
.member-metrics > div:nth-child(4) { background: #faf6ed; }

.member-section {
    background: #f8faf9;
}

.member-section .member-table th {
    background: #eaf0f2;
}

.member-section .member-table td {
    background: rgba(255, 255, 255, .56);
}

.member-two-columns .member-section:first-child {
    background: #f2f6f8;
}

.member-two-columns .member-section:last-child {
    background: #f7f3ed;
}

.member-two-columns .member-section:first-child .member-section-head {
    background: #e8f0f4;
}

.member-two-columns .member-section:last-child .member-section-head {
    background: #f2ebe1;
}

.order-page-body {
    background: #e7edef;
}

.order-page-body .page-hero {
    color: #fff;
    border-bottom: 1px solid #2d424a;
    background: #203139;
    box-shadow: inset 0 4px var(--brand-green);
}

.order-page-body .page-hero.compact {
    padding: 40px 0 36px;
}

.order-page-body .page-hero h1 {
    font-size: 42px;
}

.order-page-body .page-hero .eyebrow {
    color: #8fcfb9;
}

.order-page-body .page-hero h1 {
    color: #fff;
}

.order-page-body .page-hero p {
    color: #becdd2;
}

.order-page-body > main > .section,
.order-page-body main > .section {
    background: #e7edef;
}

.order-page-body .order-form {
    border-color: #ccd8dc;
    background: #f4f8f7;
    box-shadow: 0 16px 38px rgba(24, 42, 49, .09);
}

.order-page-body .order-summary {
    border-color: #d8d0c5;
    background: #f5f1eb;
    box-shadow: 0 16px 38px rgba(24, 42, 49, .08);
}

.order-page-body .radio-card {
    border-color: #d4dee1;
    background: #fff;
}

.order-page-body .service-card {
    border-color: #d6dfe2;
    background: #edf3f4;
}

@media (max-width: 760px) {
    .member-login-shell,
    .member-register-shell {
        background: #f6f9f8;
    }

    .order-page-body .page-hero.compact {
        padding: 32px 0 28px;
    }

    .order-page-body .page-hero h1 {
        font-size: 31px;
    }
}