<style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); .cro-container { --cro-bg: #FFFFFF; --cro-surface: #FFFFFF; --cro-surface-warm: #FAF6F0; --cro-primary: #8B263E; --cro-secondary: #A9324E; --cro-accent: #C73E5D; --cro-title-color: #4A1522; --cro-ink: #2C2224; --cro-border: #E8D5D8; --cro-border-light: #F4ECEE; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--cro-ink); width: 100% !important; max-width: 800px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box; line-height: 1.65; background: transparent; -webkit-text-size-adjust: 100%; } .cro-container *, .cro-container *::before, .cro-container *::after { box-sizing: border-box; } .cro-container img { display: block !important; width: calc(100% + 20px) !important; max-width: none !important; height: auto !important; margin: 8px -10px -10px -10px !important; border-radius: 0 0 8px 8px; object-fit: cover; } .serif-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--cro-title-color); letter-spacing: -0.3px; } /* 1. Hook / Hero Section */ .cro-hook-box { background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F0 100%); border-radius: 8px; padding: 10px 10px 0 10px; text-align: center; margin-bottom: 8px; border: 1px solid var(--cro-border); box-shadow: 0 2px 8px rgba(139, 38, 62, 0.08); overflow: hidden; } .cro-badge { display: inline-block; background: linear-gradient(135deg, #8B263E 0%, #C73E5D 100%); color: #FFFFFF; font-size: clamp(12px, 3.2vw, 13px); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(139, 38, 62, 0.2); } .cro-hook-title { font-size: clamp(22px, 6vw, 34px); margin: 0 0 4px 0; line-height: 1.25; padding: 0; } .cro-hook-subtitle { font-size: clamp(15px, 4vw, 18px); color: #5C3A42; margin: 10px 0 0 0; padding: 0 0 10px 0; font-weight: 400; line-height: 1.5; word-break: normal; } /* 2. Feature Grid (4大卖点) */ .cro-features { display: flex; flex-direction: column !important; gap: 8px; margin-bottom: 8px; width: 100%; } .cro-feature-card { background-color: var(--cro-surface); padding: 10px 10px 0 10px; border-radius: 8px; border: 1px solid var(--cro-border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); width: 100%; overflow: hidden; } .cro-feature-card:nth-child(even) { background-color: #FAF6F0; border-color: #E8D5D8; } .cro-feature-card h3 { font-size: clamp(19px, 5.2vw, 24px); margin: 0 0 4px 0; line-height: 1.3; } .cro-feature-card p { font-size: clamp(15px, 4vw, 18px); color: #5C3A42; margin: 0 0 8px 0; font-weight: 400; line-height: 1.5; word-break: normal; } /* 3. Scenario / Style Upgrade Section */ .cro-desire-box { background: var(--cro-surface); border: 1px solid var(--cro-border); border-radius: 8px; padding: 10px 10px 0 10px; margin-bottom: 8px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); overflow: hidden; } .cro-desire-box h3 { font-size: clamp(20px, 5.5vw, 26px); margin: 0 0 4px 0; line-height: 1.25; } .cro-desire-box p { font-size: clamp(15px, 4vw, 18px); color: #5C3A42; margin: 0; font-weight: 400; line-height: 1.5; word-break: normal; } /* 4. Comparison Box */ .cro-comparison-box { background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F0 100%); border-radius: 8p