:root {
    --green: #294522;
    --deep: #172814;
    --light: #eef4ea;
    --ink: #20291e;
    --muted: #687064;
    --line: #dfe3da;
    --amber: #c78b35
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: #f7f7f2;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    line-height: 1.7
}

.topbar,
.hero,
section {
    max-width: 1184px;
    margin: auto;
    padding-left: 28px;
    padding-right: 28px
}

.topbar {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none
}

.brand>span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font: 800 21px Georgia
}

.brand strong,
h1,
h2,
h3,
h4 {
    font-family: Georgia, "Noto Serif TC", serif
}

.brand small {
    padding-left: 10px;
    border-left: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted)
}

.nav-links {
    display: flex;
    gap: 24px
}

.nav-links a,
.hero-actions>a:last-child {
    color: #4d5549;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700
}

.hero {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 54px;
    align-items: center;
    min-height: 700px;
    padding-top: 55px;
    padding-bottom: 80px
}

.eyebrow {
    display: block;
    color: #557a49;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em
}

h1 {
    font-size: 55px;
    line-height: 1.25;
    letter-spacing: -.03em;
    margin: 12px 0 20px
}

h1 span {
    color: #557a49
}

.hero-copy>p {
    max-width: 570px;
    color: var(--muted);
    font-size: 17px
}

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

.primary-cta {
    padding: 13px 20px;
    border-radius: 9px;
    background: var(--green);
    color: white !important;
    text-decoration: none;
    font-weight: 800
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 24px;
    color: #667061;
    font-size: 11px
}

.product-window {
    overflow: hidden;
    border: 1px solid #d9ded4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 35px 80px #20371a25
}

.product-window>header {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f2f3ee;
    border-bottom: 1px solid var(--line);
    font-size: 9px;
    color: #8a9185
}

.product-window em {
    color: #3d6033;
    font-style: normal;
    font-weight: 800
}

.product-body {
    display: grid;
    grid-template-columns: 62px 1fr;
    min-height: 425px
}

.product-body aside {
    padding: 18px 0;
    background: var(--deep);
    color: #dce8d3;
    text-align: center;
    line-height: 3
}

.product-body section {
    padding: 30px 34px
}

.product-body h3 {
    margin: 7px 0 6px;
    font-size: 23px
}

.product-body p {
    margin: 0;
    color: #7a8276;
    font-size: 11px
}

.score {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 22px 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--light)
}

.score strong {
    font: 45px Georgia;
    color: #3d6033
}

.score span {
    font-size: 10px;
    color: #8b9287
}

.bar {
    margin: 12px 0;
    font-size: 10px;
    color: #5f685b
}

.bar span {
    display: flex;
    justify-content: space-between
}

.bar i {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: #eceee9
}

.bar em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #557a49
}

.bar.amber em {
    background: var(--amber)
}

.bar.blue em {
    background: #4f86a6
}

.next {
    display: grid;
    gap: 4px;
    margin-top: 20px;
    padding: 13px;
    border-left: 3px solid var(--amber);
    border-radius: 4px 10px 10px 4px;
    background: #fff8e9;
    font-size: 11px
}

.next small {
    color: #916320;
    font-weight: 900
}

.problem-section,
.review-section {
    text-align: center;
    padding-top: 95px;
    padding-bottom: 95px;
    max-width: none;
    background: #fff
}

.problem-section>p,
.review-section>p {
    color: var(--muted)
}

h2 {
    font-size: 38px;
    line-height: 1.35;
    margin: 10px 0 12px
}

.problem-grid,
.steps,
.plans {
    display: grid;
    gap: 18px;
    margin: 42px auto 0;
    max-width: 1128px
}

.problem-grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left
}

.problem-grid article,
.plans article {
    padding: 27px;
    border: 1px solid #eceee9;
    border-radius: 16px;
    background: #f7f7f2
}

.problem-grid i {
    color: #b6c6af;
    font: 26px Georgia
}

.problem-grid h3 {
    font-size: 19px
}

.problem-grid p {
    color: var(--muted);
    font-size: 13px
}

.problem-section blockquote {
    font: 24px Georgia;
    color: #294522
}

.how-section,
.plans-section {
    max-width: none;
    padding-top: 95px;
    padding-bottom: 95px;
    background: var(--deep);
    color: #fff;
    text-align: center
}

.how-section .eyebrow,
.plans-section .eyebrow {
    color: #aac39f
}

.how-section>p {
    color: #c9d8c3
}

.steps {
    grid-template-columns: repeat(4, 1fr);
    text-align: left
}

.steps article {
    min-height: 200px;
    padding: 22px;
    border: 1px solid #ffffff18;
    border-radius: 14px;
    background: #ffffff0a
}

.steps b {
    color: #a9c79b
}

.steps p {
    color: #c9d8c3;
    font-size: 12px
}

.feature-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px
}

.feature-section p,
.feature-section li {
    color: var(--muted)
}

.feature-section ul {
    padding: 0;
    list-style: none
}

.feature-section li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px
}

.feature-section li b {
    color: #3d6033;
    margin-right: 12px
}

figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 55px #20371a12
}

figure img {
    display: block;
    width: 100%;
    height: auto
}

figcaption {
    padding: 10px 16px;
    color: var(--muted);
    font-size: 10px;
    text-align: right
}

.handwrite figure {
    max-width: 430px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px
}

.chips span {
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--light);
    color: #3d6033;
    font-size: 10px;
    font-weight: 800
}

.solution {
    max-width: 760px;
    margin: 38px auto 0;
    padding: 28px;
    text-align: left;
    border-radius: 16px;
    background: #f7f7f2
}

.solution small {
    color: #557a49;
    font-weight: 800
}

.plans {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    max-width: 900px
}

.plans article {
    background: #fff
}

.plans article:last-child {
    color: #fff;
    background: #314d29
}

.plans article:last-child p,
.plans article:last-child li {
    color: #c7d7c0
}

.plans article>span {
    color: #557a49;
    font-size: 10px;
    font-weight: 900
}

.plans article:last-child>span {
    color: #c7d7c0
}

@media(max-width:760px) {
    .nav-links {
        display: none
    }

    .topbar {
        height: 68px
    }

    .brand small {
        display: none
    }

    .hero,
    .feature-section {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: auto;
        padding-top: 55px;
        padding-bottom: 65px
    }

    h1 {
        font-size: 39px
    }

    h2 {
        font-size: 30px
    }

    .product-body section {
        padding: 22px 17px
    }

    .problem-grid,
    .steps,
    .plans {
        grid-template-columns: 1fr
    }

    .problem-section,
    .review-section,
    .how-section,
    .plans-section {
        padding: 75px 20px
    }

    .feature-section {
        padding: 75px 20px
    }

    .handwrite figure {
        max-width: none
    }

    .handwrite figure {
        order: 2
    }
}