.wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
        .hero { text-align: center; margin-bottom: 48px; }
        .hero .tag { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--accent-light);
            color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
        .hero h1 { font-size: 40px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
        .hero p { font-size: 17px; color: var(--text-secondary); line-height: 1.6; max-width: 560px; margin: 0 auto 28px; }
        .hero a { display: inline-block; padding: 14px 28px; background: var(--accent); color: white;
            border-radius: 10px; font-weight: 700; text-decoration: none; }
        .pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 40px; }
        .pill { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; background: white; }
        .pill.hl { border-color: var(--accent); background: #eff6ff; color: var(--accent); }
        .section { margin-bottom: 48px; }
        .section h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
        .mode { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
        .mode i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
        .mode .text { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }
        .mode .text strong { color: var(--text-primary); }
        .solution { background: var(--bg-muted); border-radius: 14px; padding: 32px; margin-bottom: 48px; }
        .solution h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
        .benefit { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
        .benefit i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
        .benefit .text { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }
        .compare-mini { margin-bottom: 48px; }
        .compare-mini h2 { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
        .compare-mini table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
        .compare-mini th, .compare-mini td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border); font-size: 13px; }
        .compare-mini th { background: #f9fafb; font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--text-muted); }
        .compare-mini th.us { background: var(--accent); color: white; }
        .compare-mini td:first-child { text-align: left; font-weight: 600; }
        .compare-mini .us-val { background: #f0f4ff; font-weight: 700; color: var(--accent); }
        .compare-mini .bad { color: #ef4444; font-weight: 600; }
        .compare-mini .no { color: #ccc; }
        .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 48px; }
        .feat { padding: 20px; border: 1.5px solid var(--border); border-radius: 12px; }
        .feat i { color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; background: var(--accent-light); border-radius: 10px; }
        .feat h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .feat p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
        .use-cases h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
        .use-case { padding: 16px; border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
        .use-case h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .use-case p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
        .integrations { text-align: center; margin: 32px 0; }
        .integrations .logos { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
        .cta-bottom { text-align: center; padding: 48px 0; }
        .cta-bottom h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
        .cta-bottom p { color: var(--text-secondary); margin-bottom: 20px; }
        .cta-bottom a { display: inline-block; padding: 14px 28px; background: var(--accent); color: white;
            border-radius: 10px; font-weight: 700; text-decoration: none; }

        /* Athon-specific mockup and section styles */
        .features-grid-compact { margin: 24px 0 40px; }
        .section-header { text-align: center; margin: 32px 0 16px; }
        .section-header h2 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
        .section-header p { font-size: 14px; color: var(--text-secondary); }
        .section-header a { color: var(--accent); font-weight: 600; }
        .mockup-center-top { text-align: center; padding-top: 8px; }
        .mockup-center-top-sm { text-align: center; padding-top: 4px; }
        .mockup-tracking-label { text-align: center; margin: 12px 0; font-size: 10px; color: #6b7280; }
        .mockup-recording-wrap { text-align: center; margin-top: 8px; }
        .m-accuracy-dot-green { background: #22c55e; }
        .mockup-photo-wrap { text-align: center; margin: 6px 0; }
        .mockup-badge-wrap { margin-top: 8px; }
        .mockup-confirm-wrap { text-align: center; padding: 40px 0; }
        .mockup-emoji-lg { font-size: 36px; margin-bottom: 12px; line-height: 0; }
        .mockup-confirm-icon, .mockup-confirm-icon svg { width: 40px; height: 40px; color: var(--accent); display: inline-block; }
        .mockup-confirm-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
        .mockup-confirm-detail { font-size: 12px; color: #6b7280; line-height: 1.4; }
        .mockup-confirm-note { font-size: 11px; color: #9ca3af; margin-top: 12px; }
        .mockup-confirm-sent { font-size: 10px; color: #9ca3af; margin-top: 8px; }
        .m-field-input-filled { color: #111; }
        .admin-wrap { max-width: 700px; margin: 0 auto 32px; }
        .m-badge-source { background: #f3f4f6; color: #374151; }
        .m-badge-admin { background: #e0e7ff; color: #3730a3; }
        .integrations-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
        .logos-wide { gap: 32px; }
        .logo-item { display: flex; align-items: center; gap: 8px; color: var(--accent); }
        .logo-item svg { fill: currentColor; flex-shrink: 0; }
        .logo-label { font-weight: 700; color: var(--accent); }
        /* Partner brand colors via class, not inline fill. SVGs use
           fill: currentColor and inherit each parent's brand color. */
        .logo-item-strava, .logo-item-strava .logo-label { color: #FC4C02; }
        .logo-item-fitbit, .logo-item-fitbit .logo-label { color: #00B0B9; }
        .logo-item-apple, .logo-item-apple .logo-label { color: #111827; }
        .logo-item-garmin, .logo-item-garmin .logo-label { color: #007CC3; }
        .logo-item-coros, .logo-item-coros .logo-label { color: #E60012; }

        /* Same fitness-logo rules from index.css, mirrored here because
           for/athon.html does NOT load index.css. Without this the
           .fitness-strip section (which uses .fitness-logo, not
           .logo-item) was rendering icons + labels with no layout and
           no brand color. */
        .fitness-logos { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
        .fitness-logo { display: flex; align-items: center; gap: 8px; color: var(--accent); }
        .fitness-logo svg { fill: currentColor; flex-shrink: 0; }
        .fitness-logo span { font-weight: 700; color: var(--accent); font-size: 15px; }
        .fitness-logo-strava, .fitness-logo-strava span { color: #FC4C02; }
        .fitness-logo-fitbit, .fitness-logo-fitbit span { color: #00B0B9; }
        .fitness-logo-apple, .fitness-logo-apple span { color: #111827; }
        .fitness-logo-garmin, .fitness-logo-garmin span { color: #007CC3; }
        .fitness-logo-coros, .fitness-logo-coros span { color: #E60012; }
        .integrations-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
        .integrations-disclaimer { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
        @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } .compare-mini { overflow-x: auto; } .compare-mini table { min-width: 480px; } .hero h1 { font-size: 28px; } }