/* Shared appearance tokens. Existing values are preserved; hierarchy review is deferred. */
:root {
    --hero-logo-size: 80px;
    --feature-icon-size: 24px;
    --feature-icon-stroke-width: 2;
    --rain-home-opacity: 0.75;
    --rain-legal-opacity: 0.1;
    --rain-far-speed: 0.3;
    --rain-far-size: 16;
    --rain-far-opacity: 0.25;
    --rain-far-blur: 2;
    --rain-middle-speed: 0.7;
    --rain-middle-size: 22;
    --rain-middle-opacity: 0.5;
    --rain-middle-blur: 1;
    --rain-near-speed: 1.3;
    --rain-near-size: 28;
    --rain-near-opacity: 0.9;
    --rain-near-blur: 0;
    --rain-font: 'Ma Shan Zheng', 'Kaiti SC', serif;
    --rain-head-rgb: 215, 198, 160;
    --rain-tail-rgb: 139, 130, 118;
    --rain-head-opacity: 0.9;
    --rain-tail-opacity: 0.1;
    --rain-initial-gap: 200;
    --rain-reset-gap: 100;
    --rain-column-width: 45;
    --rain-character-spacing: 1.2;
    --rain-cull-margin: 50;
    --rain-density: 0.5;
    --space-page-section-compact: 100px;
    --bg-deep: #020408;
    --bg-glow: #0B101A;
    --surface-bg: rgba(20, 25, 35, 0.4);
    --surface-border: rgba(255, 255, 255, 0.06);
    --sutra-gold: #D8C8A5;
    --sutra-gold-dim: #948C7E;
    --text-primary: rgba(255, 255, 255, 0.94);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --font-shufa: "Ma Shan Zheng", "Kaiti SC", "STKaiti", serif;
    --font-song: "Noto Serif SC", "Songti SC", serif;
    --font-display: "Cinzel", serif;
    --font-body-en: "Cormorant Garamond", "Times New Roman", serif;
    --max-width: 1080px;
    --section-spacing: 160px;
    --radius-card: 20px;
    --radius-capsule: 999px;
    --font-shufa-document: "Ma Shan Zheng", serif;
    --font-song-document: "Noto Serif SC", serif;
    --font-body-en-document: "Cormorant Garamond", serif;
    --max-width-support: 800px;
    --space-hairline: 1px;
    --space-control-inset: 3px;
    --space-micro: 6px;
    --space-compact: 8px;
    --space-small: 10px;
    --space-inline: 12px;
    --space-label: 16px;
    --space-item: 20px;
    --space-page: 24px;
    --space-comfortable: 28px;
    --space-panel: 30px;
    --space-wide: 32px;
    --space-section: 40px;
    --space-large: 48px;
    --space-roomy: 50px;
    --space-block: 60px;
    --space-section-header: 80px;
    --space-title-relative: 0.2em;
    --space-hero-label: 2.5rem;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --body-background-image: radial-gradient(circle at 50% 0%, var(--bg-glow) 0%, var(--bg-deep) 70%);
    --body-line-height: 1.8;
    --body-show-en-font-size: 18px;
    --body-show-cn-letter-spacing: 0.06em;
    --container-margin: 0 auto;
    --container-padding: 0 32px;
    --lang-switcher-top: max(40px, env(safe-area-inset-top) + 20px);
    --lang-switcher-right: 32px;
    --lang-switcher-z-index: 100;
    --lang-switcher-background: rgba(0,0,0,0.2);
    --lang-switcher-backdrop-filter: blur(20px);
    --lang-switcher-border: 1px solid var(--surface-border);
    --lang-switcher-transition: opacity 0.3s;
    --lang-btn-font-size: 0.7rem;
    --lang-btn-padding: 8px 16px;
    --lang-btn-transition: all 0.3s ease;
    --lang-btn-letter-spacing: 0.05em;
    --tag-soon-font-size: 0.6rem;
    --tag-soon-padding: 3px 8px;
    --tag-soon-border: 1px solid rgba(215, 198, 160, 0.4);
    --tag-soon-border-radius: 4px;
    --tag-soon-opacity: 0.8;
    --section-title-font-size: 3rem;
    --section-title-line-height: 1.2;
    --en-section-title-letter-spacing: -0.02em;
    --cn-section-title-letter-spacing: 0.15em;
    --cn-section-title-font-size: 2.6rem;
    --section-sub-font-size: 1.2rem;
    --cn-section-sub-font-size: 1.1rem;
    --cn-section-sub-letter-spacing: 0.1em;
    --page-home-animation: fadeIn 1.2s ease;
    --hero-min-height: 700px;
    --rain-canvas-opacity: 0.75;
    --rain-canvas-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    --hero-content-z-index: 2;
    --hero-content-max-width: 900px;
    --hero-content-padding: 0 24px;
    --hero-content-animation: fadeInUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --hero-label-font-size: 0.85rem;
    --hero-label-opacity: 0.9;
    --hero-label-border-bottom: 1px solid rgba(215, 198, 160, 0.2);
    --en-hero-label-letter-spacing: 0.2em;
    --cn-hero-label-letter-spacing: 0.4em;
    --hero-headline-font-size: 5.5rem;
    --hero-headline-line-height: 1.05;
    --hero-headline-text-shadow: 0 10px 40px rgba(0,0,0,0.5);
    --cn-hero-headline-font-size: 6rem;
    --cn-hero-headline-line-height: 1.3;
    --hero-sub-font-size: 1.4rem;
    --hero-sub-max-width: 640px;
    --hero-sub-line-height: 1.6;
    --cn-hero-sub-font-size: 1.25rem;
    --cn-hero-sub-letter-spacing: 0.08em;
    --btn-padding: 18px 48px;
    --btn-font-size: 0.9rem;
    --btn-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --btn-border: 1px solid transparent;
    --btn-min-width: 220px;
    --en-btn-font-size: 0.8rem;
    --btn-primary-box-shadow: 0 0 30px rgba(215, 198, 160, 0.1);
    --btn-primary-hover-background-color: #e6d3ad;
    --btn-primary-hover-transform: translateY(-2px);
    --btn-primary-hover-box-shadow: 0 15px 40px rgba(215, 198, 160, 0.25);
    --btn-ghost-background: rgba(255,255,255,0.02);
    --btn-ghost-backdrop-filter: blur(10px);
    --feature-card-backdrop-filter: blur(40px);
    --feature-card-padding: 50px 45px;
    --feature-card-transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --feature-card-hover-transform: translateY(-8px);
    --feature-card-hover-background: rgba(30, 35, 45, 0.5);
    --feature-card-hover-border-color: rgba(215, 198, 160, 0.2);
    --feature-card-hover-box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    --card-header-border-bottom: 1px solid rgba(255,255,255,0.04);
    --card-title-font-size: 1.5rem;
    --card-title-letter-spacing: -0.01em;
    --cn-card-title-font-size: 1.6rem;
    --card-icon-opacity: 0.4;
    --card-desc-line-height: 1.9;
    --card-meta-font-size: 0.75rem;
    --card-meta-letter-spacing: 2px;
    --card-meta-opacity: 0.7;
    --philosophy-grid-background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
    --philosophy-grid-border-top: 1px solid var(--surface-border);
    --philosophy-grid-border-bottom: 1px solid var(--surface-border);
    --philosophy-col-padding: 70px 40px;
    --philosophy-col-transition: background 0.6s;
    --philosophy-col-hover-background: rgba(255,255,255,0.015);
    --philo-text-font-size: 1.05rem;
    --philo-text-line-height: 2.1;
    --pricing-card-padding: 60px 48px;
    --pricing-card-transition: transform 0.4s;
    --pricing-card-hover-transform: translateY(-5px);
    --pricing-card-pro-background: linear-gradient(165deg, rgba(215, 198, 160, 0.04), rgba(0,0,0,0));
    --pricing-card-pro-border: 1px solid rgba(215, 198, 160, 0.25);
    --pricing-card-pro-box-shadow: 0 0 60px rgba(215, 198, 160, 0.03);
    --badge-top: -14px;
    --badge-padding: 6px 18px;
    --badge-border-radius: 99px;
    --badge-box-shadow: 0 5px 20px rgba(215, 198, 160, 0.3);
    --price-title-font-size: 2rem;
    --price-list-li-padding: 20px 0;
    --price-list-li-before-width: 6px;
    --price-list-li-before-height: 6px;
    --price-list-li-before-opacity: 0.6;
    --section-padding: var(--section-spacing) 0;
    --cta-section-padding: 120px 0;
    --cta-title-font-size: 3.5rem;
    --cn-cta-title-font-size: 3.2rem;
    --footer-padding: 100px 0;
    --footer-z-index: 10;
    --footer-a-transition: color 0.2s;
    --legal-page-padding: 80px 24px;
    --legal-page-animation: fadeIn 0.5s ease;
    --legal-container-max-width: 800px;
    --nav-back-transition: color 0.3s ease;
    --content-card-legal-padding: 60px 50px;
    --content-card-legal-box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    --legal-header-border-bottom: 1px solid rgba(255,255,255,0.06);
    --legal-subtitle-font-size: 1rem;
    --legal-body-h3-border-left: 2px solid var(--sutra-gold);
    --legal-disclaimer-background: rgba(215, 198, 160, 0.05);
    --legal-disclaimer-border: 1px solid rgba(215, 198, 160, 0.1);
    --legal-disclaimer-border-radius: 8px;
    --legal-card-footer-border-top: 1px dashed rgba(255,255,255,0.1);
    --legal-toggle-link-border-bottom: 1px solid transparent;
    --legal-toggle-link-transition: all 0.2s;
    --legal-toggle-link-padding: 10px 20px;
    --legal-toggle-link-border: 1px solid rgba(215, 198, 160, 0.3);
    --legal-toggle-link-border-radius: 20px;
    --legal-toggle-link-hover-background: rgba(215, 198, 160, 0.1);
    --faq-item-border-radius: 12px;
    --faq-item-summary-padding: 18px 24px;
    --faq-item-summary-after-font-size: 1.3rem;
    --faq-item-summary-after-transition: transform 0.2s ease;
    --faq-item-p-padding: 0 24px 18px;
    --faq-item-p-font-size: 0.93rem;
    --faq-item-p-line-height: 1.65;
    --from-transform: translateY(40px);
    --cn-hero-headline-font-size-compact: 4rem;
    --feature-grid-philosophy-grid-pricing-grid-max-width: 500px;
    --philosophy-col-background: rgba(255,255,255,0.03);
    --philosophy-col-border-radius: 16px;
    --philosophy-col-padding-compact: 50px 30px;
    --content-card-legal-padding-compact: 40px 30px;
    --legal-page-padding-compact: 60px 20px 40px;
    --legal-title-cn-font-size: 2.5rem;
    --hero-headline-font-size-compact: 2.8rem;
    --cta-title-font-size-compact: 2.2rem;
    --inline-index-border-radius: 18px;
    --inline-index-box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    --lang-switcher-top-compact: 40px;
    --lang-btn-transition-compact: all 0.3s;
    --legal-container-padding: 100px 24px 60px;
    --nav-back-transition-compact: color 0.3s;
    --lang-switcher-top-narrow: 20px;
    --lang-switcher-right-compact: 20px;
    --lang-switcher-top-alternate: 24px;
    --lang-switcher-right-narrow: 28px;
    --content-card-padding: 56px 48px;
    --support-title-font-size: 2.4rem;
    --contact-section-background: rgba(216, 200, 165, 0.06);
    --contact-section-border: 1px solid rgba(216, 200, 165, 0.12);
    --faq-q-font-size: 0.95rem;
    --faq-a-line-height: 1.7;
    --footer-links-a-margin: 0 12px;
    --content-card-padding-compact: 36px 24px;
    --support-title-font-size-compact: 1.8rem;
    --text-on-gold: #050505;
}

/* Existing 850px breakpoint; all page consumers are centralized here. */
@media (max-width: 850px) {
    html.web-index .hero-headline { font-size: var(--cta-title-font-size); }
    html.web-index body.show-cn .hero-headline { font-size: var(--cn-hero-headline-font-size-compact); }
    html.web-index .feature-grid, html.web-index .philosophy-grid, html.web-index .pricing-grid { grid-template-columns: 1fr; max-width: var(--feature-grid-philosophy-grid-pricing-grid-max-width); margin-left: auto; margin-right: auto; }
    html.web-index .philosophy-grid { background: transparent; border: none; gap: var(--space-page); }
    html.web-index .philosophy-col { background: var(--philosophy-col-background); border-radius: var(--philosophy-col-border-radius); padding: var(--philosophy-col-padding-compact); }
    html.web-index { --section-spacing: var(--space-page-section-compact); }
    html.web-index .content-card-legal { padding: var(--content-card-legal-padding-compact); }
    html.web-index .legal-page { padding: var(--legal-page-padding-compact); }
    html.web-index .legal-title { font-size: var(--price-title-font-size); }
    html.web-index .legal-title .cn { font-size: var(--legal-title-cn-font-size); }

}

/* Existing 600px breakpoint; all page consumers are centralized here. */
@media (max-width: 600px) {
    html.web-support .content-card { padding: var(--content-card-padding-compact); }
    html.web-support .support-title { font-size: var(--support-title-font-size-compact); }
    html.web-support body.show-cn .support-title { font-size: var(--cn-card-title-font-size); }

    html.web-terms .content-card-legal { padding: var(--content-card-legal-padding-compact); }
    html.web-terms .legal-title { font-size: var(--price-title-font-size); }
    html.web-terms .legal-title span.cn { font-size: var(--legal-title-cn-font-size); }
    html.web-terms .lang-switcher { top: var(--lang-switcher-top-narrow); right: var(--lang-switcher-right-compact); }

    html.web-privacy .content-card-legal { padding: var(--content-card-legal-padding-compact); }
    html.web-privacy .legal-title { font-size: var(--price-title-font-size); }
    html.web-privacy .legal-title span.cn { font-size: var(--legal-title-cn-font-size); }
    html.web-privacy .lang-switcher { top: var(--lang-switcher-top-narrow); right: var(--lang-switcher-right-compact); }

    html.web-index .hero-headline { font-size: var(--hero-headline-font-size-compact); }
    html.web-index body.show-cn .hero-headline { font-size: var(--cn-cta-title-font-size); }
    html.web-index .container { padding: var(--hero-content-padding); }
    html.web-index .cta-title { font-size: var(--cta-title-font-size-compact); }

}