:root { color-scheme: light; --ink: #20352f; --muted: #4b6058; --green: #17634a; --border: #cad8cf; }
* { box-sizing: border-box; }
body { margin: 0; background: #fffefa; color: var(--ink); font-family: system-ui, "Microsoft JhengHei", sans-serif; font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.wrap { width: min(100% - 2rem, 66rem); margin-inline: auto; }
a { color: var(--green); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible { outline: 3px solid #9c4c00; outline-offset: 4px; border-radius: 2px; }
.skip-link { position: absolute; left: 1rem; top: -6rem; padding: .7rem 1rem; background: white; z-index: 10; }
.skip-link:focus { top: 1rem; }
.site-header { background: #f2f6ef; border-bottom: 1px solid var(--border); padding: 1.3rem 0 1rem; }
.brand { display: inline-block; font-weight: 750; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.brand span { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: .2rem .45rem; margin-top: .85rem; }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .65rem; }
nav a[aria-current="page"] { background: #dceadd; color: #184431; border-radius: .3rem; font-weight: 700; }
main { padding-block: 2.8rem 3.5rem; }
h1, h2, h3 { line-height: 1.45; text-wrap: balance; }
h1 { font-size: clamp(1.85rem, 4vw, 2.8rem); margin: 0 0 1rem; letter-spacing: .02em; }
h2 { font-size: 1.35rem; margin: 0 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
p { margin: .7rem 0; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 48rem; }
section { margin-top: 2.3rem; }
li + li { margin-top: .55rem; }
ul, ol { padding-left: 1.5rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-block: 1.6rem 2rem; }
.button { display: inline-block; background: var(--green); color: white; padding: .7rem 1.1rem; border-radius: .35rem; text-decoration: none; font-weight: 700; min-height: 44px; }
.button:hover { background: #104d38; }
.button.disabled { background: #52615b; cursor: not-allowed; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card { background: #fff; padding: 1.35rem; border: 1px solid var(--border); border-radius: .55rem; margin: 0; }
.plans { margin-top: 1.8rem; }
.price { font-size: 2rem; color: var(--green); font-weight: 750; }
.price span { font-size: 1rem; font-weight: 400; }
.notice { border-left: 4px solid var(--green); padding: 1.3rem 1.5rem; background: #eef5ec; margin-top: 2.3rem; border-radius: 0 .4rem .4rem 0; }
.updated { color: var(--muted); font-size: .9rem; }
dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); border-top: 1px solid var(--border); }
dt, dd { margin: 0; padding: .75rem .5rem; border-bottom: 1px solid var(--border); }
dt { font-weight: 650; }
.site-footer { border-top: 1px solid var(--border); background: #f2f6ef; padding-block: 1.7rem; font-size: .95rem; }
address { font-style: normal; }
main:focus { outline: none; }
[id] { scroll-margin-top: 1rem; }
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  main { padding-block: 2rem; }
  .notice, .card { padding: 1.1rem; }
  nav { gap: .1rem; }
  nav a { padding-inline: .5rem; }
  dl { grid-template-columns: 1fr; }
  dt { padding-bottom: 0; border-bottom: 0; }
  dd { padding-top: .2rem; }
}
@media print {
  .site-header, .skip-link, .actions { display: none; }
  body { background: white; color: black; }
  .wrap { width: 100%; }
  .card, .notice { break-inside: avoid; }
}

/* Product website: self-hosted assets, no scripts or external fonts. */
:root { --green: #164f3c; --ink: #193e30; --muted: #657269; --orange: #c77837; --border: #dfE4dc; }
body { background: #faf9f5; line-height: 1.8; }
.wrap { width: min(100% - 4rem, 77rem); }
.site-header { background: #faf9f5; padding: 1.1rem 0; }
.site-header > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.brand .brand-mark { display: grid; place-items: center; width: 42px; height: 45px; border-radius: 12px 12px 12px 3px; background: var(--green); color: #fff8e9; font-size: 24px; font-weight: 750; }
.brand .brand-word { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.4; letter-spacing: .12em; }
.brand .brand-word > span { font-size: .65rem; letter-spacing: .07em; }
.site-header nav { margin: 0; gap: .6rem; }
.site-header nav a { font-size: .88rem; text-decoration: none; }
.site-header nav a[aria-current] { background: transparent; color: var(--green); }
.site-header nav a:last-child { background: var(--green); color: white; border-radius: 6px; padding-inline: 1.1rem; }
.content-page main { max-width: 66rem; }
.home-page main { padding-top: 0; padding-bottom: 5rem; }
.home-page section { margin-top: 0; }
.home-page h2 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.45; letter-spacing: -.035em; }
.home-page p { color: var(--muted); }
.home-page .eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .09em; color: var(--green); margin: 0 0 1.1rem; }
.accent { color: var(--orange); }
.hero { display: grid; grid-template-columns: .91fr 1.09fr; gap: 2rem; align-items: center; min-height: 620px; padding: 4rem 0 4.5rem; }
.hero h1 { font-size: clamp(2.5rem, 3.7vw, 3.35rem); line-height: 1.43; letter-spacing: -.045em; margin: 0 0 1.4rem; }
.hero h1 .accent { white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #398c60; margin-right: .5rem; }
.hero-description { max-width: 29rem; font-size: 1rem; }
.button { border-radius: 6px; padding: .8rem 1.2rem; box-shadow: 0 5px 12px #173e3010; font-size: .9rem; }
.button span { margin-left: .7rem; }
.hero .actions { gap: 1.3rem; margin: 1.8rem 0 .8rem; }
.text-link { font-size: .9rem; font-weight: 650; text-decoration: none; padding-block: .5rem; display: inline-block; }
.text-link:hover { text-decoration: underline; }
.hero p.hero-note { font-size: .72rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: .55rem 1rem; font-size: .72rem; color: var(--muted); margin-top: 1.6rem; }
.hero-facts span::before { content: '✓'; color: var(--green); margin-right: .4rem; }
figure { margin: 0; min-width: 0; }
.hero-product { position: relative; background: #e9eee5; padding: 1.1rem; border: 1px solid #d5dfd1; border-radius: 13px; box-shadow: 0 24px 50px #193e3013; transform: rotate(-1deg); }
.hero-product img { display: block; width: 100%; height: auto; border-radius: 0 0 5px 5px; }
.window-bar { display: flex; align-items: center; gap: .8rem; background: #fffefa; border-radius: 5px 5px 0 0; padding: .65rem .6rem; font-size: .59rem; color: #657269; }
.window-dots { font-size: .55rem; color: #b5bfb4; white-space: nowrap; }
.window-label { margin-left: auto; background: #eaf1e5; padding: .1rem .35rem; color: #315d44; }
figcaption { font-size: .67rem; color: var(--muted); padding-top: .65rem; }
.image-callout { display: flex; align-items: center; gap: .8rem; position: absolute; bottom: -1.6rem; right: 1.5rem; background: #fffefa; padding: .85rem 1.3rem; border: 1px solid #dfE4dc; border-radius: 9px; box-shadow: 0 8px 25px #193e3012; transform: rotate(1deg); }
.callout-symbol { background: #eaf0df; padding: .35rem .8rem; border-radius: 50%; }
.image-callout strong { font-size: .82rem; display: block; }
.image-callout div > span { font-size: .72rem; color: var(--muted); display: block; }
.promise-strip { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 0; border-block: 1px solid var(--border); font-size: .78rem; color: var(--muted); }
.promise-strip p { margin: 0; font-size: .94rem; }
.promise-strip strong { color: var(--ink); }
.home-page .home-section { padding-block: 5.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { font-size: .9rem; }
.workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0; }
.workflow li { margin: 0; padding-top: 1.3rem; border-top: 2px solid #d8ded1; position: relative; }
.workflow li:not(:last-child)::after { content: '→'; position: absolute; right: -.3rem; top: 1.1rem; color: #8e9f8d; }
.step-number { font-size: .78rem; font-weight: 750; color: var(--orange); }
.workflow h3 { font-size: 1.15rem; margin-top: .6rem; }
.workflow p { font-size: .87rem; }
.feature-story, .report-story { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 4rem; border-top: 1px solid var(--border); }
.feature-copy > p { font-size: .92rem; max-width: 28rem; }
.check-list { list-style: none; padding: 0; font-size: .85rem; color: var(--muted); }
.check-list li::before { content: '✓'; color: var(--green); margin-right: .65rem; }
.detail-frame { background: #e9eee3; padding: 1.5rem; border-radius: 12px; overflow: hidden; }
.detail-frame img { width: 100%; height: 355px; object-fit: cover; object-position: 100% 20%; display: block; border-radius: 6px; }
.report-story { grid-template-columns: 1.15fr .85fr; }
.report-frame { background: #f0e9db; padding: 1.5rem; border-radius: 12px; }
.image-label { font-size: .7rem; color: #766546; margin-bottom: .8rem; letter-spacing: .05em; }
.report-frame img { width: 100%; height: 255px; object-fit: cover; object-position: left top; display: block; border: 1px solid #e4dbca; }
.reassurance { border-top: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.trust-grid article { border-top: 1px solid var(--border); padding-top: 1.3rem; }
.trust-number { color: #7b887d; font-size: .72rem; letter-spacing: .07em; }
.trust-grid h3 { font-size: 1.05rem; margin-top: 1rem; }
.trust-grid p { font-size: .87rem; }
.home-page .pricing-preview { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 3rem; padding: 3.5rem; background: #edf0e7; border-radius: 12px; }
.pricing-preview > div > p { font-size: .88rem; }
.price-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.price-pair article { background: #faf9f5; padding: 1.5rem; border: 1px solid #d9e0d2; }
.price-pair article:first-child { border-radius: 9px 0 0 9px; }
.price-pair article.annual-plan { border-radius: 0 9px 9px 0; background: #174c3a; color: white; border-color: #174c3a; }
.home-page .plan-label { font-size: .7rem; letter-spacing: .04em; }
.home-page .display-price { font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight: 750; color: var(--ink); white-space: nowrap; line-height: 1.3; margin: 1.5rem 0 1rem; }
.display-price > span { font-size: .65rem; font-weight: 450; margin-inline: .15rem; }
.price-pair article > p:last-of-type { font-size: .76rem; }
.home-page .annual-plan p { color: #e9eee4; }
.saving { display: inline-block; font-size: .66rem; color: #f0d49c; margin-top: .6rem; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; }
.faq-grid article { padding-top: 1.3rem; border-top: 1px solid var(--border); }
.faq-grid h3 { font-size: 1rem; }
.faq-grid p { font-size: .86rem; }
.home-page .final-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: #183f31; padding: 3.5rem 4rem; border-radius: 12px; color: #fff9eb; }
.final-cta .eyebrow, .final-cta p { color: #c5d4c4; }
.final-cta h2 { font-size: 2.6rem; }
.final-cta .button { background: #e7b46d; color: #233e2f; }
.final-cta > div:last-child > p { font-size: .75rem; margin-top: 1rem; }
.site-footer { padding-block: 2.5rem; background: #f0f1e9; font-size: .78rem; }
.site-footer .footer-brand { font-size: 1.4rem; font-weight: 800; letter-spacing: .1em; color: var(--ink); }
.footer-brand span { font-size: .72rem; letter-spacing: .03em; margin-left: 1rem; font-weight: 400; }
.site-footer nav a { font-size: .76rem; padding-left: 0; margin-right: 1rem; }
@media (max-width: 1050px) {
 .hero { gap: 1.5rem; min-height: auto; }
 .hero h1 { font-size: 2.6rem; }
 .hero .actions { gap: .7rem; }
 .hero-product { padding: .7rem; }
 .promise-strip { flex-wrap: wrap; justify-content: flex-start; gap: .6rem 2rem; }
 .promise-strip p { width: 100%; }
 .feature-story, .report-story { gap: 2rem; }
 .home-page .pricing-preview { padding: 2rem; gap: 1.5rem; }
 .price-pair article { padding: 1.1rem; }
}
@media (max-width: 760px) {
 .wrap { width: min(100% - 2.5rem, 40rem); }
 .site-header > .wrap { flex-wrap: wrap; gap: .8rem; }
 .site-header nav { width: 100%; justify-content: space-between; gap: .1rem; }
 .site-header nav a { font-size: .76rem; padding-inline: .4rem; }
 .site-header nav a:last-child { padding-inline: .7rem; }
 .brand .brand-word { font-size: 1.35rem; }
 .brand .brand-mark { width: 38px; height: 40px; }
 .hero { grid-template-columns: 1fr; padding-block: 2.5rem 4rem; gap: 2.5rem; }
 .hero h1 { font-size: clamp(2.1rem, 7vw, 3rem); }
 .hero-description { max-width: 35rem; }
 .hero-product { max-width: 100%; transform: none; }
 .image-callout { transform: none; right: .75rem; padding: .65rem 1rem; }
 .hero-facts { margin-top: 1rem; }
 .promise-strip { gap: .4rem 1.2rem; font-size: .67rem; padding-block: 1.3rem; }
 .home-page .home-section { padding-block: 3.5rem; }
 .section-heading { align-items: start; flex-direction: column; gap: .7rem; margin-bottom: 2rem; }
 .workflow { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
 .workflow li:nth-child(2)::after { content: none; }
 .feature-story, .report-story { grid-template-columns: 1fr; gap: 1.5rem; }
 .report-frame { order: 2; }
 .detail-frame, .report-frame { padding: 1rem; }
 .detail-frame img { height: auto; object-fit: contain; }
 .report-frame img { height: 200px; }
 .trust-grid { grid-template-columns: 1fr; gap: 1.4rem; }
 .home-page .pricing-preview { grid-template-columns: 1fr; padding: 2rem 1.2rem; gap: 1.5rem; }
 .home-page .display-price { font-size: clamp(1.5rem, 6vw, 2rem); }
 .faq-grid { grid-template-columns: 1fr; gap: 1.5rem; }
 .home-page .final-cta { align-items: start; flex-direction: column; padding: 2rem 1.5rem; }
 .final-cta h2 { font-size: 2rem; }
 .footer-brand span { display: block; margin: .2rem 0 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 360px) {
 .price-pair { grid-template-columns: 1fr; }
 .price-pair article:first-child { border-radius: 9px 9px 0 0; }
 .price-pair article.annual-plan { border-radius: 0 0 9px 9px; }
}
@media print { .hero-product { transform: none; } .home-page section { break-inside: avoid; } .image-callout { display: none; } }

/* 2026-10-29: user selected D, warm olive. */
:root{--green:#254c36;--ink:#263d2c;--muted:#435543;--border:#abb798;--orange:#854522}
body{background:#d9ddc9;color:#263d2c}
.site-header{background:#cdd3bb;border-color:#abb798}
.brand .brand-mark{background:#294f37;color:#f4f0dc}
.brand .brand-word,.brand .brand-word>span{color:#263d2c}
.site-header nav a{color:#435543}
.site-header nav a[aria-current]{color:#263d2c}
.site-header nav a:last-child,.button,.final-cta .button{background:#294f37;color:#f4f0dc}
.button:hover,.site-header nav a:last-child:hover{filter:brightness(1.1);background:#294f37}
.hero-product,.detail-frame,.report-frame{background:#c6cfb2;border-color:#abb798}
.hero-product{box-shadow:0 28px 65px #0003}
.window-bar{background:#c6cfb2;color:#435543}
.window-label{background:#d9ddc9;color:#263d2c}
.hero-product figcaption,.image-label{color:#435543}
.image-callout{background:#c6cfb2;border-color:#abb798;color:#263d2c}
.image-callout div>span{color:#435543}
.callout-symbol{background:#d9ddc9;color:#854522}
.promise-strip,.workflow li,.trust-grid article,.feature-story,.report-story,.reassurance,.faq-grid article{border-color:#abb798}
.trust-number,.step-number{color:#854522}
.home-page .pricing-preview,.home-page .final-cta{background:#c6cfb2;color:#263d2c}
.price-pair article{background:#d9ddc9;border-color:#abb798}
.price-pair article.annual-plan{background:#cdd3bb;border-color:#abb798;color:#263d2c}
.home-page .annual-plan p,.final-cta p,.final-cta .eyebrow{color:#435543}
.saving{color:#854522}
.site-footer{background:#cdd3bb;border-color:#abb798}

/* Apply the chosen palette to information pages, too. */
.content-page .card{background:#e3e6d7;border-color:#abb798}
.content-page .notice{background:#c6cfb2;border-color:#294f37}
.button.disabled,.button.disabled:hover{background:#57634e;color:#fff;filter:none}
.skip-link{background:#e3e6d7}
@media print{body,.site-header,.site-footer,.content-page .card,.content-page .notice,.home-page .pricing-preview,.home-page .final-cta{background:white;color:black}.home-page p,.home-page .eyebrow,.home-page .annual-plan p{color:black}}