/* Standalone product-page styles. The existing legal-page css/app.css is untouched. */
:root { color-scheme: light; --ink:#172b25; --muted:#50645b; --green:#0b6e4f; --green-dark:#074d38; --line:#dbe5df; --soft:#f3f7f3; --cream:#fafbf7; --white:#fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; color:var(--ink); background:var(--white); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
html[lang="zh-HK"] [data-language="en"], html[lang="en"] [data-language="zh-HK"], [hidden] { display:none !important; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:var(--green); text-underline-offset:4px; }
a:hover { color:var(--green-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #b26b14; outline-offset:5px; border-radius:3px; }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.2; font-weight:650; }
h2 { font-size:clamp(30px,3.9vw,46px); letter-spacing:-.045em; }
h3 { font-size:21px; letter-spacing:-.025em; }
.container { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; gap:32px; min-height:86px; }
.wordmark { display:inline-flex; gap:0; align-items:center; color:var(--ink); font-size:25px; font-weight:750; letter-spacing:-1px; text-decoration:none; line-height:1; white-space:nowrap; }
.wordmark img { margin-right:10px; }
.brand-green { color:var(--green); }
.header-nav { display:flex; gap:30px; margin-left:auto; }
.header-nav a, .site-footer nav a { color:var(--muted); font-size:14px; font-weight:550; text-decoration:none; padding:10px 0; }
.header-nav a:hover, .site-footer nav a:hover { color:var(--green); text-decoration:underline; }
.language-switch { display:flex; border:1px solid var(--line); padding:3px; border-radius:7px; }
.language-switch button { border:0; color:var(--muted); background:transparent; cursor:pointer; border-radius:4px; padding:6px 12px; font-size:14px; min-height:36px; min-width:44px; font-weight:650; }
.language-switch button[aria-pressed="true"] { background:var(--green); color:white; }
.hero { padding:70px 0 66px; background:var(--cream); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:65px; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.65; letter-spacing:.06em; text-transform:uppercase; color:var(--green); font-weight:650; margin-bottom:22px; }
.status-dot { width:7px; height:7px; background:var(--green); border-radius:50%; flex:none; }
h1 { font-size:clamp(40px,4.8vw,62px); letter-spacing:-.055em; line-height:1.16; }
html[lang="zh-HK"] h1 { line-height:1.4; letter-spacing:-.045em; }
h1 em { font-style:normal; color:var(--green); }
.hero-description { max-width:530px; margin-top:26px; color:var(--muted); font-size:18px; line-height:1.85; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:34px; }
.store-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#download { scroll-margin-top:110px; }
@media (max-width:600px) { .store-actions { grid-template-columns:1fr; } .store-download { width:100%; } }
.button { display:inline-flex; gap:28px; justify-content:space-between; align-items:center; min-height:52px; padding:12px 22px; border-radius:6px; font-size:15px; font-weight:650; text-decoration:none; }
.button-primary { color:white; background:var(--green); }
.button-primary:hover { background:var(--green-dark); color:white; }
.button.store-download { min-width:0; min-height:84px; padding:14px 16px; gap:12px; line-height:1.5; align-self:stretch; }
.store-symbol { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; }
.platform-icon { display:block; flex:none; }
.store-label { flex:1; min-width:0; overflow-wrap:anywhere; }
.store-download small { display:block; font-size:12px; font-weight:400; margin-bottom:3px; }
.store-arrow { flex:none; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:650; text-decoration:none; padding-block:10px; }
.text-link:hover { text-decoration:underline; }
.hero-note { max-width:480px; margin-top:20px; font-size:14px; line-height:1.7; color:var(--muted); }
.hero-visual { justify-self:end; width:100%; max-width:395px; background:#e9f0e7; padding:18px 30px 16px; border:1px solid #d5e1d1; border-radius:16px; transform:rotate(2deg); }
.preview-topline { display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:18px; color:var(--green-dark); }
.preview-topline > :first-child { font-weight:750; }
.onboarding-preview { width:266px; margin-inline:auto; border:1px solid #dae1df; border-radius:10px; box-shadow:0 16px 40px rgba(23,43,37,.1); }
figcaption { text-align:center; font-size:12px; color:var(--muted); line-height:1.6; margin-top:15px; }
.trust-strip { border-block:1px solid var(--line); }
.trust-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-block:23px; }
.trust-inner p { font-size:13px; color:var(--muted); }
.trust-inner strong { color:var(--ink); font-weight:650; }
.section { padding-block:100px; }
.section-heading { max-width:650px; margin-bottom:46px; }
.section-heading .eyebrow { margin-bottom:16px; }
.section-heading > p:last-child { margin-top:20px; color:var(--muted); max-width:570px; }
.journey { padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:38px; }
.journey li { border-top:1px solid #aec9ba; padding-top:22px; }
.step-label { display:flex; align-items:center; gap:14px; color:var(--green); font-size:13px; font-weight:550; margin-bottom:24px; }
.step-number { font-size:28px; font-weight:400; letter-spacing:-1px; }
.journey p { color:var(--muted); margin-top:16px; }
.section-footnote { color:var(--muted); font-size:13px; margin-top:34px; max-width:820px; }
.records-section { background:var(--soft); }
.records-grid { display:grid; grid-template-columns:.95fr 1.2fr; gap:95px; align-items:center; }
.settings-visual { justify-self:center; width:100%; max-width:322px; }
.settings-visual img { border:1px solid #d6e0da; border-radius:26px; width:100%; box-shadow:0 20px 60px rgba(23,43,37,.08); }
.records-copy > .eyebrow { margin-bottom:16px; }
.records-copy h2 { margin-bottom:34px; }
.feature-row { display:flex; gap:20px; padding-block:21px; border-top:1px solid var(--line); }
.feature-number { color:var(--green); font-size:13px; font-weight:600; padding-top:2px; white-space:nowrap; }
.feature-row h3 { font-size:19px; }
.feature-row p { color:var(--muted); margin-top:11px; }
.records-copy > .text-link { margin-left:42px; margin-top:7px; }
.centered { margin-inline:auto; text-align:center; max-width:760px; }
.centered .eyebrow { justify-content:center; }
.centered > p:last-child { margin-inline:auto; }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:840px; margin-inline:auto; }
.price-card { padding:32px; border:1px solid var(--line); border-radius:12px; }
.price-card.annual { border-color:#a3c6b1; background:#f3f8f3; }
.plan-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.plan-name { font-size:17px; font-weight:650; }
.saving { color:var(--green-dark); font-size:12px; font-weight:550; padding:3px 8px; background:#e0eddf; border-radius:4px; }
.price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; font-size:64px; font-weight:550; line-height:1.2; letter-spacing:-3px; margin-top:30px; }
.currency { font-size:21px; font-weight:450; letter-spacing:0; margin-right:2px; }
.price-period { font-size:15px; color:var(--muted); letter-spacing:0; font-weight:400; margin-left:4px; }
.price-card > p:not(.price,.plan-name) { margin-top:16px; color:var(--muted); font-size:14px; min-height:48px; }
.availability { display:block; font-size:14px; font-weight:600; border-top:1px solid var(--line); margin-top:24px; padding-top:20px; color:var(--green); text-decoration:none; }
.availability:hover { text-decoration:underline; }
.trial-note { max-width:840px; margin:28px auto 0; padding:24px 28px; background:var(--cream); border-left:3px solid var(--green); }
.trial-note h3 { font-size:17px; margin-bottom:10px; }
.trial-note p { color:var(--muted); font-size:14px; }
.billing-details { max-width:840px; margin:20px auto 0; color:var(--muted); font-size:13px; line-height:1.9; }
.faq-section { background:var(--cream); border-top:1px solid var(--line); }
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; }
.faq-grid .eyebrow { margin-bottom:16px; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { cursor:pointer; padding:22px 4px 22px 0; font-weight:600; font-size:17px; }
.faq-list summary::marker { color:var(--green); }
.faq-list p { color:var(--muted); margin-bottom:20px; padding-left:20px; }
.faq-list a { overflow-wrap:anywhere; }
.contact-section { background:var(--green-dark); color:white; padding-block:64px; }
.contact-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.contact-section .eyebrow { color:#bcdbbf; font-size:12px; margin-bottom:14px; }
.contact-section h2 { font-size:clamp(28px,3.5vw,40px); }
.contact-section p:last-child { color:#d0dfd5; margin-top:16px; }
.button-light { background:#f1f7ec; color:var(--green-dark); flex-shrink:0; min-width:165px; }
.button-light:hover { background:white; }
.site-footer { padding-block:34px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.site-footer .wordmark { font-size:21px; }
.site-footer p { font-size:12px; margin-top:10px; color:var(--muted); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:20; background:white; border:2px solid var(--green); padding:8px 16px; }
.skip-link:focus { top:12px; }
.noscript-message { padding:20px; margin:0 auto; max-width:1160px; font-size:14px; }
@media (max-width:1000px) { .container { width:calc(100% - 48px); } .hero-grid { gap:32px; grid-template-columns:1.25fr .9fr; } .hero-visual { padding:16px; transform:none; } .hero h1 { font-size:44px; } .hero-description { font-size:17px; } .hero-actions { gap:15px; } .trust-inner { gap:12px 30px; justify-content:flex-start; } .records-grid { gap:50px; } .journey { gap:24px; } .faq-grid { gap:35px; } .header-nav { gap:20px; } }
@media (max-width:720px) { .container { width:calc(100% - 40px); } .header-inner { min-height:72px; gap:12px; justify-content:space-between; flex-wrap:wrap; padding-block:10px; } .wordmark { font-size:23px; } .wordmark img { width:30px; height:30px; } .header-nav { display:none; } .hero { padding:45px 0; } .hero-grid { grid-template-columns:1fr; gap:40px; } .hero-copy { max-width:550px; } .hero h1 { font-size:clamp(38px,8.9vw,56px); } .hero .eyebrow { font-size:12px; margin-bottom:20px; } .hero-description { font-size:17px; } .hero-visual { justify-self:center; max-width:360px; padding:18px 24px; } .onboarding-preview { width:252px; } .hero-actions { gap:16px; } .hero-note { font-size:13px; } .trust-inner { padding-block:22px; flex-direction:column; align-items:flex-start; gap:8px; } .trust-inner p { font-size:14px; } .section { padding-block:64px; } .section-heading { margin-bottom:34px; } .journey { grid-template-columns:1fr; gap:28px; } .journey li { padding-top:16px; } .step-label { margin-bottom:14px; } .journey p { margin-top:12px; } .section-footnote { font-size:14px; } .records-grid { grid-template-columns:1fr; gap:35px; } .records-copy { grid-row:1; } .records-copy h2 { margin-bottom:24px; } .settings-visual { max-width:285px; } .feature-row p { font-size:16px; } .price-grid { grid-template-columns:1fr; gap:16px; } .price-card { padding:26px; } .price-card > p:not(.price,.plan-name) { min-height:0; } .price { margin-top:22px; font-size:58px; } .trial-note { padding:20px; } .trial-note p, .billing-details { font-size:14px; } .faq-grid { grid-template-columns:1fr; gap:30px; } .faq-list summary { font-size:16px; } .faq-list p { padding-left:0; } .contact-inner { align-items:flex-start; flex-direction:column; gap:28px; } .contact-section { padding-block:48px; } .footer-inner { align-items:flex-start; flex-direction:column; gap:20px; } .site-footer nav { gap:12px 22px; } }
@media (max-width:360px) { .container { width:calc(100% - 28px); } .hero-actions { align-items:flex-start; flex-direction:column; } .language-switch button { padding:5px 9px; } .hero-visual { padding:16px; } .price-card { padding:22px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .site-header { position:static; } .language-switch, .hero-actions, .contact-section, .skip-link { display:none !important; } .container { width:100%; } .section, .hero { padding-block:24px; } .hero-visual { transform:none; } .journey, .records-grid, .price-grid { break-inside:avoid; } a { color:inherit; } }