/* ============================================
   MY TENTH STEP - MARKETING SITE STYLES
   Brand Colors from app theme:
   - Primary Blue: #3366FF / #598BFF
   - Success Green: #00B383 / #00E096
   - Error Red: #FF3D71
   - Warning Amber: #FFAA00
   - Info Blue: #0095FF
   ============================================ */

/* ============================================
   CSS Variables & Reset
   ============================================ */
:root {
    /* Brand Colors */
    --primary: #3366FF;
    --primary-light: #598BFF;
    --primary-dark: #2952CC;

    /* Semantic Colors */
    --success: #00B383;
    --success-light: #00E096;
    --error: #FF3D71;
    --warning: #FFAA00;
    --info: #0095FF;

    /* Prestige Colors */
    --gold: #D4AF37;
    --platinum: #E5E4E2;
    --diamond: #c2c2ff;

    /* Neutrals */
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --black: #000000;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================
   Layout
   ============================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

h4 {
    font-size: 1.125rem;
}

p {
    color: var(--gray-600);
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(51, 102, 255, 0.4);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 20px rgba(51, 102, 255, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--white);
    color: var(--gray-800);
    border: 2px solid var(--gray-200);
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.125rem;
}

.btn-block {
    width: 100%;
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /*
      Padding is fixed, not scroll-dependent. It used to shrink on scroll,
      which moved the logo and menu button up by 16px — the bar appeared to
      jump rather than the background simply appearing behind it.
    */
    padding: var(--space-md) 0;
    background: transparent;
    /*
      Only the background, blur and shadow animate. `transition: all` also
      animated padding and any future layout property, which is what made the
      shift visible instead of instant.
    */
    transition: background-color var(--transition-base),
        backdrop-filter var(--transition-base),
        box-shadow var(--transition-base);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
}

.logo-icon {
    color: var(--primary);
    font-size: 1.75rem;
}

.logo-image {
    height: 32px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-links a {
    font-weight: 500;
    color: var(--gray-600);
    transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: relative;
    padding: 160px 0 100px;
    background: linear-gradient(180deg, #F8FAFF 0%, var(--white) 100%);
    overflow: hidden;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(51, 102, 255, 0.1);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
}

.hero h1 {
    margin-bottom: var(--space-lg);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--gray-500);
    margin-bottom: var(--space-xl);
    max-width: 500px;
}

.hero-cta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: var(--space-2xl);
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.phone-mockup {
    position: relative;
    width: 300px;
    height: 600px;
    background: var(--gray-900);
    border-radius: 40px;
    padding: 12px;
    box-shadow: var(--shadow-2xl);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--gray-100);
    border-radius: 32px;
    overflow: hidden;
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, transparent 0%, var(--white) 100%);
    pointer-events: none;
}

/* Placeholder Images */
.placeholder-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    min-height: 200px;
    width: 100%;
    height: 100%;
}

.placeholder-image span {
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: var(--space-sm);
}

.placeholder-image small {
    font-size: 0.75rem;
    color: var(--gray-400);
    max-width: 200px;
}

.placeholder-image.hero-phone {
    border-radius: 32px;
}

.placeholder-image.large {
    min-height: 400px;
}

/* ============================================
   Trusted By Section
   ============================================ */
.trusted-by {
    padding: var(--space-3xl) 0;
    background: var(--white);
    text-align: center;
}

.trusted-label {
    font-size: 0.875rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-lg);
}

.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

.trust-badge {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-400);
}

/* ============================================
   Features Section
   ============================================ */
.features {
    padding: var(--space-4xl) 0;
    background: var(--gray-50);
}

.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-3xl);
}

.section-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.section-header h2 {
    margin-bottom: var(--space-md);
}

.section-header p {
    font-size: 1.125rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.feature-card {
    position: relative;
    background: var(--white);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.feature-card.featured {
    border: 2px solid var(--primary);
}

.featured-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: 4px 10px;
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.feature-card h3 {
    margin-bottom: var(--space-sm);
}

.feature-card > p {
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--gray-600);
}

.feature-list li::before {
    content: "✓";
    color: var(--success);
    font-weight: 700;
}

/* ============================================
   How It Works Section
   ============================================ */
.how-it-works {
    padding: var(--space-4xl) 0;
    background: var(--white);
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xl);
}

.step {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.step.reverse {
    grid-template-columns: 1fr 1fr auto;
}

.step.reverse .step-number {
    order: 3;
}

.step.reverse .step-content {
    order: 2;
    text-align: right;
}

.step.reverse .step-image {
    order: 1;
}

.step-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(51, 102, 255, 0.3);
}

.step-content h3 {
    margin-bottom: var(--space-sm);
    font-size: 1.5rem;
}

.step-content p {
    font-size: 1.0625rem;
    max-width: 400px;
}

.step.reverse .step-content p {
    margin-left: auto;
}

.step-image {
    width: 100%;
    max-width: 400px;
}

.step-image .placeholder-image {
    aspect-ratio: 4/3;
    min-height: auto;
}

/* ============================================
   Community Section
   ============================================ */
.community {
    padding: var(--space-4xl) 0;
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 100%);
}

.community .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.community-content {
    max-width: 500px;
}

.community-content h2 {
    margin-bottom: var(--space-md);
}

.community-content > p {
    font-size: 1.125rem;
    margin-bottom: var(--space-2xl);
}

.testimonials {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.testimonial {
    background: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.testimonial-content p {
    font-size: 1rem;
    color: var(--gray-700);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-info strong {
    color: var(--gray-800);
}

.author-info span {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.community-image {
    display: flex;
    justify-content: center;
}

/* ============================================
   Pricing Section
   ============================================ */
.pricing {
    padding: var(--space-4xl) 0;
    background: var(--white);
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    max-width: 800px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 8px 40px rgba(51, 102, 255, 0.15);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
}

.price {
    margin-bottom: var(--space-xl);
}

.price .amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--gray-900);
}

.price .period {
    font-size: 1rem;
    color: var(--gray-500);
}

.pricing-features {
    text-align: left;
    margin-bottom: var(--space-xl);
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--gray-600);
}

.pricing-features .check {
    color: var(--success);
    font-weight: 700;
}

/* ============================================
   Download CTA Section
   ============================================ */
.download-cta {
    padding: var(--space-4xl) 0;
    background: linear-gradient(135deg, var(--gray-900) 0%, #1a1a2e 100%);
    color: var(--white);
}

.download-cta .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.cta-content h2 {
    color: var(--white);
    margin-bottom: var(--space-md);
}

.cta-content p {
    color: var(--gray-300);
    font-size: 1.125rem;
    margin-bottom: var(--space-xl);
}

.cta-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/*
  Official store artwork, unstyled by design. The white card and padding this
  used to sit in altered the lockup, which both Apple's and Google's badge
  guidelines prohibit — the badges carry their own background and clear space.
*/
.store-badge {
    display: inline-block;
    transition: transform var(--transition-base);
}

.store-badge:hover {
    transform: translateY(-2px);
}

.store-badge img {
    /* Apple min 40px tall, Google min 60px wide; both are 3.375:1. */
    height: 48px;
    width: auto;
    display: block;
}

/* The hero is the primary conversion point, so its badges run larger. */
.hero-cta .store-badge img {
    height: 56px;
}


.cta-image {
    display: flex;
    justify-content: center;
}

.cta-image .placeholder-image {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    max-width: 400px;
}

.cta-image .placeholder-image span,
.cta-image .placeholder-image small {
    color: var(--gray-400);
}

/* ============================================
   Footer
   ============================================ */
.footer {
    padding: var(--space-3xl) 0 var(--space-xl);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-2xl);
}

.footer-brand {
    max-width: 300px;
}

.footer-brand .logo {
    margin-bottom: var(--space-md);
}

.footer-brand p {
    font-size: 0.9375rem;
    margin-bottom: var(--space-lg);
}

.social-links {
    display: flex;
    gap: var(--space-md);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-600);
    transition: all var(--transition-fast);
}

.social-links a:hover {
    background: var(--primary);
    color: var(--white);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.footer-column h4 {
    color: var(--gray-900);
    margin-bottom: var(--space-md);
}

.footer-column ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-column a {
    font-size: 0.9375rem;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.footer-column a:hover {
    color: var(--primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--gray-200);
}

.footer-bottom p {
    font-size: 0.875rem;
    color: var(--gray-400);
}

/* ============================================
   Legal Pages (Privacy & Terms)
   ============================================ */
.legal-header {
    padding: 160px 0 var(--space-3xl);
    background: linear-gradient(180deg, #F8FAFF 0%, var(--white) 100%);
    text-align: center;
}

.legal-header h1 {
    margin-bottom: var(--space-md);
}

.last-updated {
    color: var(--gray-500);
    font-size: 0.9375rem;
}

.legal-content {
    padding: var(--space-3xl) 0;
}

.legal-content .container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-3xl);
}

.legal-nav {
    position: sticky;
    top: 100px;
    align-self: start;
}

.legal-nav h4 {
    margin-bottom: var(--space-md);
    color: var(--gray-900);
}

.legal-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.legal-nav a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
    color: var(--gray-500);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.legal-nav a:hover {
    color: var(--primary);
    background: rgba(51, 102, 255, 0.05);
}

.legal-body {
    max-width: 800px;
}

.legal-body section {
    margin-bottom: var(--space-2xl);
    scroll-margin-top: 100px;
}

.legal-body h2 {
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--gray-200);
}

.legal-body h3 {
    font-size: 1.25rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--gray-800);
}

.legal-body p {
    margin-bottom: var(--space-md);
    color: var(--gray-600);
    line-height: 1.7;
}

.legal-body ul {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.legal-body ul li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--gray-600);
    line-height: 1.6;
}

.legal-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.highlight-box {
    background: rgba(51, 102, 255, 0.05);
    border: 1px solid rgba(51, 102, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.highlight-box.warning {
    background: rgba(255, 170, 0, 0.05);
    border-color: rgba(255, 170, 0, 0.3);
}

.highlight-box.danger {
    background: rgba(255, 61, 113, 0.06);
    border-color: rgba(255, 61, 113, 0.28);
}

.highlight-box h4 {
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.highlight-box.warning h4 {
    color: var(--warning);
}

.highlight-box.danger h4 {
    color: var(--error);
}

.btn-danger {
    background: var(--error);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(255, 61, 113, 0.35);
}

.btn-danger:hover {
    background: #e02e63;
    box-shadow: 0 6px 20px rgba(255, 61, 113, 0.45);
    transform: translateY(-2px);
}

.btn-danger:disabled {
    opacity: 0.55;
    transform: none;
    cursor: not-allowed;
    box-shadow: none;
}

.legal-body ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}

.legal-body ol li {
    margin-bottom: var(--space-sm);
    color: var(--gray-600);
    line-height: 1.6;
}

.delete-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.delete-form label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-sm);
    color: var(--gray-700);
}

.delete-form input[type="text"],
.delete-form input[type="email"],
.delete-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.delete-form input:focus,
.delete-form textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.delete-form .confirm-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.delete-form .confirm-row input[type="checkbox"] {
    margin-top: 5px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--error);
}

.delete-form .confirm-row label {
    margin: 0;
    font-weight: 400;
    color: var(--gray-700);
    line-height: 1.5;
}

.delete-form .required {
    color: var(--error);
}

.highlight-box p {
    margin-bottom: var(--space-sm);
}

.highlight-box p:last-child {
    margin-bottom: 0;
}

.contact-info {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-md);
}

.contact-info p {
    margin-bottom: var(--space-xs);
}

.contact-info p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step {
        grid-template-columns: auto 1fr;
        gap: var(--space-lg);
    }

    .step .step-image {
        display: none;
    }

    .step.reverse {
        grid-template-columns: 1fr auto;
    }

    .step.reverse .step-number {
        order: 2;
    }

    .step.reverse .step-content {
        order: 1;
        text-align: left;
    }

    .step.reverse .step-content p {
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-subtitle {
        margin: 0 auto var(--space-xl);
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-image {
        display: none;
    }

    .community .container {
        grid-template-columns: 1fr;
    }

    .community-image {
        order: -1;
    }

    .download-cta .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-buttons {
        justify-content: center;
    }

    .cta-image {
        display: none;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--space-lg);
        gap: var(--space-md);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-cta {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .legal-content .container {
        grid-template-columns: 1fr;
    }

    .legal-nav {
        position: static;
        margin-bottom: var(--space-xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .step {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .step-number {
        margin: 0 auto var(--space-md);
    }

    .step.reverse {
        grid-template-columns: 1fr;
    }

    .step.reverse .step-number {
        order: 0;
    }

    .step.reverse .step-content {
        order: 1;
        text-align: center;
    }

    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-buttons {
        flex-direction: column;
    }

    /*
      Centred, not stretched. Forcing the badge to full width distorted the
      official artwork's proportions; the row centres it instead.
    */
    .store-badge {
        display: flex;
        justify-content: center;
    }
}
/* ==========================================================================
   Mobile app CTA bar (js/app-cta.js)
   Pinned download prompt for phone visitors. Hidden above 768px, where the
   hero and footer badges are already visible.
   ========================================================================== */

.app-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    /* Tinted rather than plain white: on a white page the bar had no edge of
       its own and read as a stray image stuck to the bottom. */
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    /*
      No transform in the base state. Hiding the bar by translating it and
      relying on JS to translate it back proved fragile: if the reveal class
      lands before the element is painted, the browser can skip the transition
      and leave the bar parked off-screen with the class correctly applied —
      which is exactly what happened. The bar is simply placed where it belongs
      and animated in from its own keyframes, so a missed frame costs the slide,
      never the bar.
    */
    /* Clears the iOS home indicator. Falls back to 0 where unsupported. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
  Decorative only. The bar is fully visible from its base rule above — this
  merely plays a slide-in when the browser gets to it. Earlier revisions made
  visibility itself depend on this class and on a transition firing at mount,
  which left the bar stranded off-screen whenever that frame was missed.
*/
.app-cta-bar.is-visible {
    animation: app-cta-slide-up 0.25s ease-out;
}

@keyframes app-cta-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.app-cta-inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}


/*
  A bare link around the official badge. No background, border or tint: Apple
  and Google both prohibit altering their artwork, and the badges already carry
  their own shape and clear space.
*/
.app-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    text-decoration: none;
    /* Keeps the row a comfortable tap height even though the badge is 40px. */
    min-height: 44px;
}

.app-cta-badge {
    /*
      Apple's minimum is 40px tall and Google's is 60px wide; both badges are
      3.375:1, so one height satisfies each. Set above the minimum because 40px
      is legible but visually timid for the bar's only call to action. Back to
      40 now the icon and name share the row — at 48 the three together
      overflowed a 375px viewport.
    */
    height: 40px;
    width: auto;
    display: block;
}


/* Keeps the footer reachable above the bar. */
body.has-app-cta {
    padding-bottom: 76px;
}

/* Desktop already shows the badges in the hero and footer. */
@media (min-width: 769px) {
    .app-cta-bar {
        display: none;
    }

    body.has-app-cta {
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-cta-bar.is-visible {
        animation: none;
    }
}


}

/*
  Out of the way while a real store badge is on screen (see watchBadges in
  js/app-cta.js). Kept in the DOM rather than removed so it slides back as soon
  as the badge scrolls away.
*/
.app-cta-bar.is-covered {
    transform: translateY(100%);
    transition: transform 0.2s ease-in;
    pointer-events: none;
}

/* ==========================================================================
   Download CTA phone row
   Three real screenshots, staggered. Exported at identical size so they can be
   laid out here rather than pre-composed into one image.
   ========================================================================== */

.preview-phones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.preview-phones img {
    width: 30%;
    max-width: 180px;
    height: auto;
    border-radius: 18px;
    box-shadow: var(--shadow-xl);
}

/* The centre phone sits proud of the other two. */
.preview-phones img:nth-child(2) {
    width: 34%;
    max-width: 200px;
    z-index: 1;
}

@media (max-width: 768px) {
    .preview-phones {
        gap: var(--space-sm);
    }

    /* Two phones is plenty on a narrow screen; a third shrinks them all. */
    .preview-phones img:nth-child(3) {
        display: none;
    }
}

/*
  The prompt that anchors the CTA bar. Two short lines rather than one long
  one: it keeps the text block compact so the badge holds its full width even
  on a narrow phone.
*/
.app-cta-prompt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--gray-900);
}

/* The prompt is short enough to survive a 320px screen, so nothing is hidden. */