/* Lemonco UI v1.0 — component layer.
   Load after the tokens:  <link rel="stylesheet" href="tokens/lemonco.css"> then this file.
   Fonts: Inter 400–700 + Fraunces 600/700 (Google Fonts, or brand/fonts/ self-hosted).
   Every colour, radius and size comes from a --lc-* token (DESIGN.md is the source of truth).
   Class prefix: lc-. Base element styles use :where() so they never out-rank site CSS. */

/* ---------- base ---------- */
:where(html){scroll-behavior:smooth}
:where(body){margin:0;background:var(--lc-paper);color:var(--lc-ink);font:400 var(--lc-text-body)/1.6 var(--lc-font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(h1,h2,h3,h4){line-height:1.2;margin:0 0 .5em;color:var(--lc-ink)}
:where(h1,h2){font-family:var(--lc-font-display);font-weight:var(--lc-weight-display);letter-spacing:-.01em}
:where(h1){font-size:clamp(2.1rem,4.6vw,var(--lc-text-display))}
:where(h2){font-size:clamp(1.6rem,3vw,2.3rem)}
:where(h3){font-size:1.1rem;font-weight:600}
:where(p){margin:0 0 1em}
:where(a){color:var(--lc-leaf);text-underline-offset:.18em}
:where(a:hover){text-decoration-thickness:2px}
:where(img,svg){max-width:100%}
:where(mark){background:linear-gradient(transparent 60%,var(--lc-lemon) 60%);color:inherit;padding:0 .08em}
::selection{background:var(--lc-lemon-soft);color:var(--lc-on-lemon)}
:where(:focus-visible){outline:2px solid var(--lc-leaf);outline-offset:3px;border-radius:4px}
:where(hr){border:0;border-top:1px solid var(--lc-line);margin:var(--lc-space-6) 0}
:where(html[lang^="zh"] body){font-family:var(--lc-font-body);line-height:1.75}
:where(html[lang^="zh"] h1,html[lang^="zh"] h2){letter-spacing:0}

/* ---------- layout ---------- */
.lc-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.lc-section{padding:84px 0;border-top:1px solid var(--lc-line)}
.lc-section:first-of-type{border-top:0}
.lc-sec-head{max-width:46em;margin-bottom:36px}
.lc-grid{display:grid;gap:20px}
.lc-g2{grid-template-columns:repeat(2,1fr)}
.lc-g3{grid-template-columns:repeat(3,1fr)}
.lc-g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.lc-g3,.lc-g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.lc-g2,.lc-g3,.lc-g4{grid-template-columns:1fr}.lc-section{padding:60px 0}}
@media (max-width:400px){.lc-wrap{padding:0 16px}}

/* ---------- type helpers ---------- */
.lc-eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lc-leaf);margin-bottom:.8rem}
html[lang^="zh"] .lc-eyebrow{letter-spacing:.12em}
.lc-lead{font-size:1.15rem;color:var(--lc-ink-2);max-width:40em}
.lc-muted{color:var(--lc-muted)}
.lc-kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lc-leaf);background:var(--lc-leaf-soft);padding:2px 8px;border-radius:var(--lc-radius-sm)}
.lc-checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.lc-checks li{position:relative;padding-left:26px}
.lc-checks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2.5px solid var(--lc-leaf);border-bottom:2.5px solid var(--lc-leaf);transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--lc-radius-pill);border:1px solid var(--lc-btn-bg);background:var(--lc-btn-bg);color:var(--lc-btn-fg);font:600 .95rem/1.2 var(--lc-font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s cubic-bezier(.2,.7,.2,1),border-color .15s,color .15s}
.lc-btn:hover{background:var(--lc-btn-hover);border-color:var(--lc-btn-hover);text-decoration:none}
.lc-btn:active{transform:translateY(1px)}
.lc-btn--accent{background:var(--lc-lemon);border-color:var(--lc-lemon);color:var(--lc-on-lemon)}
.lc-btn--accent:hover{background:#FFE066;border-color:#FFE066}
.lc-btn--ghost{background:transparent;color:var(--lc-ink);border-color:var(--lc-ink)}
.lc-btn--ghost:hover{background:var(--lc-card);border-color:var(--lc-ink)}
.lc-btn--sm{padding:8px 14px;font-size:.85rem}
.lc-btn--lg{padding:15px 26px;font-size:1.02rem}
.lc-btn[disabled],.lc-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.lc-btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- navigation ---------- */
.lc-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--lc-paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--lc-line)}
.lc-nav .lc-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.lc-nav__brand{display:flex;align-items:center;flex:none;text-decoration:none}
.lc-nav__brand img{display:block;height:46px;width:auto}
.lc-nav__links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:.95rem}
.lc-nav__links a{color:var(--lc-ink-2);text-decoration:none}
.lc-nav__links a:hover,.lc-nav__links a[aria-current="page"]{color:var(--lc-ink)}
.lc-nav__right{display:flex;align-items:center;gap:14px;min-width:0}
.lc-lang{display:flex;gap:2px;border:1px solid var(--lc-line);border-radius:var(--lc-radius-pill);padding:3px;background:var(--lc-card)}
.lc-lang a{padding:4px 10px;border-radius:var(--lc-radius-pill);font-size:.8rem;text-decoration:none;color:var(--lc-ink-2);white-space:nowrap}
.lc-lang a[aria-current="true"]{background:var(--lc-btn-bg);color:var(--lc-btn-fg)}
@media (max-width:820px){.lc-nav__links{display:none}}
@media (max-width:520px){.lc-nav .lc-btn{display:none}.lc-nav__brand img{height:40px}}

/* ---------- hero ---------- */
.lc-hero{padding:80px 0 72px}
.lc-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.lc-hero__art{display:block;width:100%;height:auto}
.lc-hero .lc-btn-row{margin-top:28px}
@media (max-width:900px){.lc-hero__grid{grid-template-columns:1fr}.lc-hero__art{max-width:520px;margin:0 auto}}

/* ---------- illustration ---------- */
.lc-ill{display:block}
.lc-ill img{display:block;width:100%;height:auto}
.lc-ill--card{height:96px;margin-bottom:14px}
.lc-ill--card img{height:100%;width:auto}
.lc-ill--spot{max-width:220px}

/* ---------- cards ---------- */
.lc-card{background:var(--lc-card);border:1px solid var(--lc-line);border-radius:var(--lc-radius-lg);padding:24px}
.lc-card h3{margin-bottom:.4em}
.lc-card p{color:var(--lc-ink-2);margin:0}
.lc-card ul{margin:.6em 0 0;padding-left:1.1em;color:var(--lc-ink-2)}
.lc-card--float{box-shadow:var(--lc-shadow-card)}
.lc-card--link{text-decoration:none;color:inherit;transition:border-color .15s}
.lc-card--link:hover{border-color:var(--lc-ink)}
.lc-icon-tile{width:40px;height:40px;border-radius:var(--lc-radius-md);background:var(--lc-lemon-soft);display:grid;place-items:center;margin-bottom:14px}
.lc-icon-tile svg{width:22px;height:22px;stroke:var(--lc-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lc-steps{counter-reset:lc-step}
.lc-step{position:relative;padding-top:58px}
.lc-step::before{counter-increment:lc-step;content:counter(lc-step);position:absolute;top:20px;left:24px;width:36px;height:36px;border-radius:50%;background:var(--lc-lemon);color:var(--lc-on-lemon);font:700 1.2rem/1 var(--lc-font-display);display:grid;place-items:center}
.lc-step .lc-out{display:block;margin-top:12px;font-size:.85rem;font-weight:600;color:var(--lc-leaf)}
.lc-painfix h3{font-weight:600;color:var(--lc-muted);text-decoration:line-through;text-decoration-color:var(--lc-lemon);text-decoration-thickness:2px}
.lc-painfix .lc-fix{color:var(--lc-ink);font-weight:600}
.lc-painfix .lc-fix::before{content:"→ ";color:var(--lc-leaf)}
.lc-stat{display:grid;gap:4px}
.lc-stat__label{font-size:.8rem;font-weight:600;color:var(--lc-muted);text-transform:uppercase;letter-spacing:.06em}
.lc-stat__value{font:700 2rem/1.1 var(--lc-font-display);color:var(--lc-ink)}
.lc-stat__delta{font-size:.85rem;font-weight:600;color:var(--lc-leaf)}
.lc-stat__delta--down{color:var(--lc-alert-fg)}

/* ---------- tags & notices ---------- */
.lc-tag{display:inline-block;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:var(--lc-radius-pill);background:var(--lc-leaf-soft);color:var(--lc-leaf);white-space:nowrap}
.lc-tag--alert{background:var(--lc-alert-bg);color:var(--lc-alert-fg)}
.lc-tag--lemon{background:var(--lc-lemon);color:var(--lc-on-lemon)}
.lc-tag--quiet{background:transparent;border:1px solid var(--lc-line);color:var(--lc-ink-2)}
.lc-note{background:var(--lc-lemon-soft);border-radius:var(--lc-radius-md);padding:14px 18px;color:var(--lc-ink)}
.lc-alert{background:var(--lc-alert-bg);color:var(--lc-alert-fg);border-radius:var(--lc-radius-md);padding:14px 18px;font-weight:500}

/* ---------- dark band ---------- */
.lc-band{background:var(--lc-band);color:var(--lc-band-text);border-top:0}
.lc-band h2,.lc-band h3{color:#FFFFFF}
.lc-band .lc-eyebrow{color:var(--lc-lemon)}
.lc-band .lc-lead,.lc-band p{color:var(--lc-band-text)}
.lc-band .lc-card{background:var(--lc-band-card);border-color:var(--lc-band-line)}
.lc-band .lc-icon-tile{background:var(--lc-band-line)}
.lc-band .lc-icon-tile svg{stroke:var(--lc-lemon)}
.lc-band a{color:var(--lc-lemon)}

/* ---------- CTA panel ---------- */
.lc-cta{background:var(--lc-lemon);color:var(--lc-on-lemon);border-radius:var(--lc-radius-xl);padding:56px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.lc-cta h2,.lc-cta p{color:var(--lc-on-lemon)}
.lc-cta .lc-btn{background:#16201C;border-color:#16201C;color:#FFFFFF}
.lc-cta .lc-btn:hover{background:#000000;border-color:#000000}
.lc-cta__mail{font:700 clamp(1.3rem,2.6vw,1.9rem)/1.2 var(--lc-font-display);color:var(--lc-on-lemon);text-decoration:none;word-break:break-all}
@media (max-width:820px){.lc-cta{grid-template-columns:1fr;padding:40px 24px}}

/* ---------- table ---------- */
.lc-table-wrap{overflow-x:auto;border:1px solid var(--lc-line);border-radius:var(--lc-radius-lg);background:var(--lc-card)}
.lc-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
.lc-table th,.lc-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--lc-line);vertical-align:top}
.lc-table thead th{font-size:.85rem;font-weight:600;color:var(--lc-muted);background:var(--lc-thead)}
.lc-table tbody tr:last-child td{border-bottom:0}
.lc-table td:first-child{font-weight:600}
.lc-table .is-us{background:var(--lc-lemon-soft)}
.lc-table .lc-num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- FAQ ---------- */
.lc-faq{background:var(--lc-card);border:1px solid var(--lc-line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.lc-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.lc-faq summary::-webkit-details-marker{display:none}
.lc-faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--lc-muted)}
.lc-faq[open] summary::after{content:"–"}
.lc-faq p{margin:12px 0 0;color:var(--lc-ink-2)}

/* ---------- forms ---------- */
.lc-field{display:grid;gap:6px;margin-bottom:16px}
.lc-field label,.lc-label{font-size:.9rem;font-weight:600;color:var(--lc-ink)}
.lc-help{font-size:.82rem;color:var(--lc-muted)}
.lc-input,.lc-select,.lc-textarea{width:100%;box-sizing:border-box;font:400 1rem/1.4 var(--lc-font-body);color:var(--lc-ink);background:var(--lc-card);border:1px solid var(--lc-line);border-radius:var(--lc-radius-md);padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.lc-input::placeholder,.lc-textarea::placeholder{color:var(--lc-muted)}
.lc-input:hover,.lc-select:hover,.lc-textarea:hover{border-color:var(--lc-muted)}
.lc-input:focus,.lc-select:focus,.lc-textarea:focus{outline:none;border-color:var(--lc-leaf);box-shadow:0 0 0 3px var(--lc-leaf-soft)}
.lc-textarea{min-height:120px;resize:vertical}
.lc-field--error .lc-input,.lc-field--error .lc-select,.lc-field--error .lc-textarea{border-color:var(--lc-alert-fg)}
.lc-field--error .lc-help{color:var(--lc-alert-fg)}
.lc-check{display:flex;align-items:center;gap:10px;font-size:.95rem;cursor:pointer}
.lc-check input{width:18px;height:18px;accent-color:var(--lc-leaf);margin:0}

/* ---------- footer ---------- */
.lc-footer{padding:40px 0 56px;color:var(--lc-muted);font-size:.9rem;border-top:1px solid var(--lc-line)}
.lc-footer .lc-wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lc-footer a{color:var(--lc-ink-2)}

/* ---------- theme-paired assets ----------
   Put two images side by side: class="lc-on-light" (ink line) and class="lc-on-dark" (illustrations/dark/,
   logo reverse). Follows prefers-color-scheme and a manual [data-theme] on <html>. */
.lc-on-dark{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lc-on-light{display:none!important}
  :root:not([data-theme="light"]) .lc-on-dark{display:block!important}
}
:root[data-theme="dark"] .lc-on-light{display:none!important}
:root[data-theme="dark"] .lc-on-dark{display:block!important}

/* ---------- theme details ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :where(mark){background:none;color:var(--lc-lemon)}
}
:root[data-theme="dark"] :where(mark){background:none;color:var(--lc-lemon)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}