:root {
  color-scheme: light;
  --bg:#f5f6ef; --ink:#1a251e; --forest:#172a21; --green:#365c2d; --mute:#546054;
  --line:#dce2d6; --paper:#fcfdf8; --white:#fff; --lime:#d8f779; --error:#a33328;
  --body: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --mono: "Cascadia Code","SFMono-Regular",Consolas,monospace;
  font-family:var(--body); color:var(--ink); background:var(--bg);
  font-synthesis:none; line-height:1.55;
}
*,*::before,*::after { box-sizing:border-box }
[hidden] { display:none!important }
body { margin:0; min-width:280px }
body:has(dialog[open]) { overflow:hidden }
a { color:inherit; text-decoration:none }
button,input { font:inherit; color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed; opacity:.58 }
:focus-visible { outline:3px solid #426b25; outline-offset:4px }
::selection { background:var(--lime); color:var(--ink) }
.wrap { width:min(1220px,calc(100% - 88px)); margin-inline:auto }
.skip { position:absolute; z-index:5; left:8px; top:-100px; background:var(--white); padding:12px }
.skip:focus { top:8px }
.header { border-bottom:1px solid #e2e5da; background:#f8f9f3 }
.header-in { height:77px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px }
.brand { display:inline-flex; align-items:center; gap:10px; justify-self:start; width:max-content }
.brand strong { display:block; font-weight:800; font-size:16px; letter-spacing:.025em; line-height:1.25 }
.brand small { display:block; color:#4a5d4c; font:700 9px/1.4 var(--mono); letter-spacing:.19em; margin-top:4px }
nav { display:flex; align-items:center; gap:30px }
nav a { display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--mute); white-space:nowrap }
nav a:hover,nav a[aria-current] { color:#213c25; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#819e5d }
.account { justify-self:end; min-height:44px; display:flex; align-items:center; gap:7px; padding:7px 16px;
  border:1px solid #d6ded1; border-radius:8px; background:transparent; font-size:14px; font-weight:700 }
.account:hover { background:#e8eedf }
#account-label { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hero { position:relative; isolation:isolate; margin-top:33px; min-height:390px; overflow:hidden; border-radius:17px;
  background:radial-gradient(ellipse at 72% 68%,#2d4130 0,transparent 58%),#172b22; color:#f7f9ef }
.hero-copy { position:relative; z-index:1; padding:51px 0 54px 54px; width:55% }
.eyebrow { display:flex; align-items:center; gap:9px; color:#d4e6c8; font:700 11px/1.6 var(--mono); letter-spacing:.12em }
.sep { opacity:.62 }
.green { color:#395733 }
.signal { width:7px; height:7px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 4px #d8f77920; margin-right:4px }
h1,h2,h3,p { margin:0 }
.hero h1 { font-size:clamp(40px,4.85vw,70px); line-height:1.13; letter-spacing:-.06em; margin:24px 0 19px; font-weight:850 }
.hero h1 span { color:var(--lime) }
.hero p { color:#d6ded2; font-size:15px; max-width:340px; line-height:1.75 }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:27px }
.button { border:1px solid transparent; border-radius:8px; min-height:45px; padding:10px 15px; display:inline-flex;
  gap:14px; align-items:center; justify-content:center; font-size:14px; font-weight:750; text-align:center; line-height:1.35 }
.button span { font-size:16px }
.lime { background:var(--lime); color:#18291a; padding-inline:17px }
.lime:hover { background:#e4ff9c }
.lime:focus-visible,.hero-secondary:focus-visible { outline-color:var(--lime) }
.hero-secondary { font-size:13px; color:#e0ead9; padding-block:11px }
.hero-secondary span { margin-left:3px }
.hero-secondary:hover { text-decoration:underline; text-underline-offset:4px }
.hero-art { position:absolute; inset:0 2% 0 auto; width:52%; height:100%; pointer-events:none }
.hero-index { position:absolute; bottom:18px; right:23px; color:#a6bc9d; display:flex; gap:10px; align-items:center; font:10px var(--mono); letter-spacing:.13em }
.hero-index span { width:25px; height:1px; background:#789571 }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:10px; margin-top:18px; background:#fafbf6 }
.benefits div { min-height:76px; display:flex; gap:12px; align-items:center; padding:12px 20px }
.benefits div+div { border-left:1px solid var(--line) }
.benefit-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:6px; background:#ebf1e3; font:700 12px var(--mono); color:#3f5e33 }
.benefits b,.benefits small { display:block }
.benefits b { font-size:13px; font-weight:800 }
.benefits small { font-size:12px; color:var(--mute); margin-top:2px }
.plans,.help { margin-top:50px; scroll-margin-top:20px }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:19px }
.section-head h2,.help h2,.orders h1 { font-size:clamp(28px,3.2vw,42px); letter-spacing:-.05em; line-height:1.15; margin:8px 0 10px; font-weight:850 }
.section-head p,.help p { color:var(--mute); font-size:14px }
.filters { display:inline-flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:9px; background:#ecefe6; width:max-content }
.filters button { min-height:42px; color:#4d5b4c; border:1px solid transparent; background:transparent; border-radius:6px; padding:4px 13px; white-space:nowrap; font-size:13px; font-weight:680 }
.filters button[aria-pressed="true"] { background:#fff; color:#263c27; border-color:#dce2d6; box-shadow:0 1px 2px #20221a10 }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px }
.product { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; padding:9px; background:var(--paper) }
.product:has(.card-tag:not([hidden])) { border-color:#a9ba82 }
.card-art { position:relative; min-height:110px; overflow:hidden; background:#ebefe2; border-radius:7px; color:#687a55 }
.product:nth-child(3n+2) .card-art { background:#e9efd4; color:#5a743a }
.product:nth-child(3n+3) .card-art { background:#e7ecdf; color:#506a4f }
.product.permanent .card-art { background:#243b2c; color:#dbf294 }
.card-art .card-type { position:absolute; top:12px; left:12px; font:700 10px var(--mono); letter-spacing:.12em }
.card-tag { position:absolute; right:10px; top:9px; border-radius:4px; padding:2px 6px; color:#2c4626; background:#e0f5ac; font-size:11px; font-weight:800 }
.card-art svg { position:absolute; bottom:4px; width:83%; height:75%; right:0; opacity:.9 }
.product-info { display:flex; flex-direction:column; flex:1; padding:14px 9px 8px }
.product h3 { font-size:19px; font-weight:830; letter-spacing:-.025em }
.description { font-size:13px; color:var(--mute); line-height:1.55; margin:4px 0 11px; min-height:2.6em; overflow-wrap:anywhere }
.card-price { display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; margin-top:auto }
.price { font:750 29px/1.15 var(--mono); letter-spacing:-.075em }
.original,.duration { font-size:12px; color:var(--mute) }
.limits { color:var(--mute); font-size:12px; margin:9px 0 12px; overflow-wrap:anywhere }
.card-action,.outline { border-color:#d7dfd2; color:#2a402b; background:transparent }
.card-action { display:flex; justify-content:space-between; margin-top:auto }
.card-action:hover,.outline:hover { background:#edf4df; border-color:#adbd9f }
.primary { color:#fafdf4; background:#253a29 }
.primary:hover:not(:disabled) { background:#38533a }
.full { width:100% }
.help { display:grid; grid-template-columns:1fr 1.65fr; gap:40px; padding:25px 0 45px; border-top:1px solid var(--line) }
.faq details { border-bottom:1px solid var(--line); padding:7px 0 }
.faq summary { font-size:14px; font-weight:740; padding:11px 4px; min-height:44px; cursor:pointer }
.faq details p { margin:0 4px 13px; line-height:1.7 }
.faq a,.text-button { text-decoration:underline; text-underline-offset:4px; color:var(--green) }
.surface-message { border:1px solid var(--line); border-radius:8px; padding:16px; color:var(--mute); margin-bottom:15px; background:var(--paper) }
.surface-message:empty,.message:empty { display:none }
.footer { border-top:1px solid #e1e5d8; margin-top:20px }
.footer-in { display:flex; align-items:center; gap:22px; min-height:87px; padding-block:14px; color:var(--mute); font-size:12px }
.footer .brand strong { font-size:13px; color:var(--ink) }
.footer-in div { margin-left:auto; display:flex; gap:19px }
.footer-in a:hover { text-decoration:underline }
.orders { min-height:65vh; padding-top:35px; padding-bottom:45px }
.back { display:inline-flex; align-items:center; min-height:44px; color:var(--green); margin-bottom:13px; font-size:14px }
.order-list { display:grid; gap:9px }
.order-card { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:14px 19px }
.order-card h3 { font-size:16px }
.order-card p { margin-top:4px; color:var(--mute); font-size:13px }
dialog { width:min(480px,calc(100% - 28px)); max-height:calc(100% - 36px); overflow:auto; padding:27px;
  background:var(--paper); border:1px solid #c3cfbb; border-radius:14px; color:var(--ink); box-shadow:0 18px 60px #0e181545 }
dialog::backdrop { background:#112118ac }
.close { position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; border-radius:6px; background:transparent; color:#445442; font-size:26px }
.close:hover { background:#edf1e7 }
dialog h2 { margin:9px 26px 7px 0; font-size:27px; line-height:1.2; letter-spacing:-.035em; overflow-wrap:anywhere }
.muted { color:var(--mute); font-size:14px; line-height:1.6 }
.receipt { background:#f0f3eb; padding:10px 14px; margin:17px 0; border-radius:8px; font-size:14px }
.receipt div { display:grid; grid-template-columns:68px minmax(0,1fr); gap:12px; padding-block:7px }
.receipt div+div { border-top:1px solid #dfe6d8 }
.receipt dt { color:var(--mute) }
.receipt dd { margin:0; text-align:right; overflow-wrap:anywhere; font-weight:680 }
.message { color:var(--mute); font-size:13px; margin:12px 0 }
.message.is-error { color:var(--error) }
.form { display:grid; gap:12px; margin-top:16px }
.form label,.copy-label { display:grid; gap:5px; font-size:13px; font-weight:750 }
.form input,.copy-row input { width:100%; min-width:0; min-height:44px; border:1px solid #cdd8c9; border-radius:6px; padding:8px; background:#fff }
.auth-filters { margin-top:14px }
.text-actions,.dialog-actions,.copy-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.text-actions { justify-content:space-between }
.text-button { background:transparent; border:0; min-height:44px; padding:7px 0; font-weight:690; font-size:13px }
#signed-in { margin-top:16px }
.copy-row { flex-wrap:nowrap; margin:5px 0 6px }
.copy-row input { font-family:var(--mono); font-size:12px }
.dialog-actions { margin-top:12px }
@media (max-width:900px) {
  .wrap { width:calc(100% - 44px) }
  .hero { min-height:350px }
  .hero-copy { padding:43px 0 42px 35px }
  .hero-art { right:0; width:51% }
  .benefits div { padding-inline:11px; gap:8px }
}
@media (max-width:640px) {
  .wrap { width:calc(100% - 30px) }
  .header-in { height:auto; min-height:64px; padding-top:10px; grid-template-columns:1fr 1fr; row-gap:1px }
  nav { grid-row:2; grid-column:1/-1; justify-content:flex-start; gap:22px }
  nav a { min-height:44px; font-size:13px }
  .header .brand img { width:34px; height:34px }
  .account { padding-inline:11px }
  .hero { margin-top:16px; min-height:0; border-radius:12px }
  .hero-copy { width:100%; padding:29px 22px 3px }
  .hero h1 { font-size:clamp(34px,9vw,48px); margin:16px 0 12px }
  .hero p { font-size:14px; max-width:290px }
  .hero-actions { margin-top:17px; gap:14px }
  .hero-art { position:relative; inset:auto; width:100%; height:213px; display:block }
  .hero-index { bottom:9px; right:11px; font-size:8px }
  .benefits { margin-top:11px; grid-template-columns:1fr }
  .benefits div { min-height:58px; padding:8px 11px }
  .benefits div+div { border-left:0; border-top:1px solid var(--line) }
  .benefit-icon { width:31px; height:31px; flex-basis:31px }
  .plans,.help { margin-top:35px }
  .section-head { align-items:start; flex-direction:column; margin-bottom:13px }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
  .product { padding:6px }
  .card-art { min-height:77px }
  .card-art .card-type { font-size:9px; top:8px; left:8px }
  .card-tag { top:6px; right:5px; font-size:9px; padding-inline:4px }
  .product-info { padding:10px 4px 4px }
  .product h3 { font-size:16px }
  .price { font-size:23px }
  .description { font-size:12px }
  .card-action { font-size:12px; gap:6px; padding-inline:8px }
  .help { grid-template-columns:1fr; gap:15px }
  .footer-in { flex-wrap:wrap; gap:10px 18px }
  .footer-in div { width:100%; margin:0 }
  .order-card { grid-template-columns:minmax(0,1fr) auto; padding:10px; gap:7px }
  .order-card .order-charge { display:none }
}
@media (max-width:330px) { .cards { grid-template-columns:1fr } }