@import url('./styles.tokens.css');

/* Base reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-family-sans); background: var(--color-bg-1); color: var(--color-text); }

/* Global word wrapping - prevent hyphenation, allow natural word breaks */
* {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* Title/description pair padding - 16px top and bottom for each pair */
.heading-pair {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Sticky header modeled on best practices */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; }
.nav-bar {
    background: rgba(28, 28, 30, 0.7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    backdrop-filter: blur(10px);
    padding: var(--space-3) var(--space-5);
    display: flex; align-items: center; justify-content: space-between;
    position: static;
}

/* Ensure nav bar hugs the very top on desktop */
@media (min-width: 768px) {
    .nav-bar {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
        margin-top: var(--space-3); /* 12px spacing scale */
    }
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { width: 40px; height: 40px; border-radius: var(--radius-2); object-fit: cover; }
.brand-text { color: var(--color-text); font-weight: 500; letter-spacing: -0.01em; font-size: var(--font-size-24); }

.primary-nav { display: none; align-items: center; gap: var(--space-8); }
.primary-nav a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-13); opacity: 0.9; }
.primary-nav a:hover { opacity: 1; }
.primary-nav .nav-cta { background: #fff; color: #000; padding: var(--space-2) var(--space-4); border-radius: var(--radius-2); font-weight: 600; }

.nav-toggle { width: 28px; height: 24px; display: inline-flex; flex-direction: column; justify-content: space-between; background: transparent; border: 0; cursor: pointer; }
.nav-toggle .bar { width: 100%; height: 2px; background: #fff; }

@media (min-width: 768px) {
    .primary-nav { display: inline-flex; }
    .nav-toggle { display: none; }
}

/* Mobile header adjustments: hide hamburger, clear bg, center brand */
@media (max-width: 767px) {
    .nav-toggle { display: none !important; }
    .primary-nav { display: none !important; }
    .nav-bar { 
        background: transparent; 
        border: none; 
        backdrop-filter: none; 
        justify-content: center; 
    }
    
    /* Ensure main content doesn't get hidden behind header on mobile */
    main { margin-top: 80px; }
}

/* Sections */
.section { padding-top: var(--space-11); padding-bottom: var(--space-11); }
.section--dark { background: var(--color-bg-1); }
.section--darker { background: var(--color-bg-2); }

/* Adjust habits section padding and center content */
#habits.section { 
    padding-top: calc(var(--space-11) * 0.75); /* 75% of original top padding */
    padding-bottom: calc(var(--space-11) * 0.5); /* 50% of original bottom padding */
}

/* Center the entire habits section content */
#habits .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Title + subheader pair component */
.heading-pair { display: grid; gap: var(--heading-gap-pair); }
.heading-pair + * { margin-top: calc(var(--heading-gap-pair) * 3); } /* Increased from * 2 to * 3 for more space after description */
/* Consistent button spacing after heading blocks */
.heading-pair + .actions,
.heading-pair + .btn,
.text-container + .btn { margin-top: var(--space-6); }
.heading-title { font: 700 clamp(28px, 6vw, 56px)/var(--line-tight) var(--font-family-sans); color: var(--color-text); }
.text-primary { color: var(--color-primary); }
/* Increase only on mobile so first two words sit on first line */
@media (max-width: 767px) {
    .heading-title { font-size: clamp(28px, 8.5vw, 44px); }
}
.heading-sub { font-size: var(--font-size-20); line-height: var(--line-normal); color: var(--color-text-secondary); }

/* Text Container Component */
.text-container {
    display: flex;
    flex-direction: column;
}

/* Alignment variants */
.text-container[data-align="center"] { text-align: center; }
.text-container[data-align="left"] { text-align: left; }
.text-container[data-align="right"] { text-align: right; }

/* Size variants */
/* Large variant - based on hero section */
.text-container[data-size="large"] .heading-title {
    font: 700 clamp(28px, 6vw, 56px)/var(--line-tight) var(--font-family-sans);
    color: var(--color-text);
}
.text-container[data-size="large"] .heading-sub {
    font-size: var(--font-size-20);
    line-height: var(--line-normal);
    color: var(--color-text-secondary);
}
@media (max-width: 767px) {
    .text-container[data-size="large"] .heading-title {
        font-size: clamp(28px, 8.5vw, 44px);
    }
}

/* Medium variant - based on habits section */
.text-container[data-size="medium"] .heading-title {
    font: 700 clamp(22px, 4.5vw, 36px)/var(--line-tight) var(--font-family-sans);
    color: var(--color-text);
}
.text-container[data-size="medium"] .heading-sub {
    font-size: var(--font-size-18);
    line-height: var(--line-normal);
    color: var(--color-text-secondary);
}
@media (max-width: 767px) {
    .text-container[data-size="medium"] .heading-title {
        font-size: clamp(22px, 6vw, 32px);
    }
    .text-container[data-size="medium"] .heading-sub {
        font-size: var(--font-size-16);
    }
}

/* Small variant - based on features section with smaller fonts and 600 weight */
.text-container[data-size="small"] .heading-title {
    font: 600 clamp(18px, 3.5vw, 24px)/var(--line-tight) var(--font-family-sans);
    color: var(--color-text);
}
.text-container[data-size="small"] .heading-sub {
    font-size: var(--font-size-16);
    line-height: var(--line-normal);
    color: var(--color-text-secondary);
}
@media (max-width: 767px) {
    .text-container[data-size="small"] .heading-title {
        font-size: clamp(16px, 4vw, 20px);
    }
    .text-container[data-size="small"] .heading-sub {
        font-size: var(--font-size-14);
    }
}

/* Prevent hero heading cropping/wrap issues on small screens */
@media (max-width: 767px) {
    .heading-title { 
        word-break: normal; 
        overflow-wrap: break-word; 
        hyphens: none;
    }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-2); font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-primary { background: #fff; color: #000; }
.btn-primary .icon { width: 16px; height: 16px; display: inline-block; }

/* Image placeholders */
.placeholder { background: #0f0f12; border: 1px dashed var(--color-border); border-radius: var(--radius-2); }
.placeholder--lg { width: 100%; max-width: 420px; aspect-ratio: 9 / 16; height: auto; }
.placeholder--md { width: 100%; max-width: 300px; height: 200px; }
.placeholder--sm { width: 100%; max-width: 160px; height: 120px; }

/* Utilities */
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.text-secondary { color: var(--color-text-secondary); }

/* 12-column grid system */
.container-grid { display: grid; gap: 20px; }
/* Mobile: 4-column grid with 32px side padding */
@media (max-width: 767px) { 
    /* Mobile nav: transparent sticker-style bar */
    .nav-bar {
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
    /* Animate brand text hide/show on scroll - Apple-inspired motion design */
    .brand-text { 
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1), opacity 400ms cubic-bezier(0.23, 1, 0.32, 1); 
        will-change: transform, opacity; 
    }
    
    /* Smooth transitions for brand container and logo movement */
    .brand { 
        transition: width 400ms cubic-bezier(0.23, 1, 0.32, 1), gap 400ms cubic-bezier(0.23, 1, 0.32, 1), justify-content 400ms cubic-bezier(0.23, 1, 0.32, 1);
        will-change: width, gap, justify-content;
    }
    
    .brand-logo { 
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
        will-change: transform;
    }
    /* When collapsed, keep logo centered and take text out of layout so width equals logo */
    .site-header.is-collapsed .brand { position: relative; gap: 0; width: 40px; overflow: hidden; justify-content: center; }
    .site-header.is-collapsed .brand-logo { position: relative; z-index: 2; }
    .site-header.is-collapsed .brand-text { position: absolute; left: 0; z-index: 1; opacity: 0; transform: translateX(-8px); pointer-events: none; }
    .container-grid { 
        grid-template-columns: repeat(4, minmax(0, 1fr)); 
        padding-left: 32px; 
        padding-right: 32px; 
    }
    /* Remove padding for hero-grid specifically to eliminate wasted space */
    #hero .container-grid {
        padding-left: 0;
        padding-right: 0;
    }
    /* Remove padding for habits containers to match hero */
    #habits .container { 
        padding-left: 0; 
        padding-right: 0; 
    }
    #habits .container-grid {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Tablet Container-Grid Padding Adjustment */
@media (min-width: 768px) and (max-width: 1024px) {
    #hero .container-grid {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    #habits .container-grid {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}
/* Reserve space for fixed header */
main { margin-top: 96px; }
/* Desktop: 12-column grid */
@media (min-width: 1025px) { 
    .container-grid { 
        grid-template-columns: repeat(12, minmax(0, 1fr)); 
        gap: var(--space-7); 
        /* Use outer `.container` gutters; avoid double-padding so columns stay centered */
        padding-left: 0; 
        padding-right: 0; 
    } 
}

/* Column span utilities */
.span-12 { grid-column: span 12; }
.span-11 { grid-column: span 11; }
.span-10 { grid-column: span 10; }
.span-9 { grid-column: span 9; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }
.span-1 { grid-column: span 1; }

/* Mobile: 4-column grid spans */
@media (max-width: 767px) { 
    .span-12, .span-11, .span-10, .span-9, .span-8, .span-7, .span-6 { grid-column: 1 / -1; } /* Full width */
    .span-5 { grid-column: 1 / -1; } /* Full width */
    .span-4 { grid-column: span 4; } /* Full width */
    .span-3 { grid-column: span 3; } /* 3 of 4 columns */
    .span-2 { grid-column: span 2; } /* 2 of 4 columns */
    .span-1 { grid-column: span 1; } /* 1 of 4 columns */
}

/* Hero specific layout using 12-column grid */
#hero .container { max-width: 1200px; }
#hero .hero-grid { align-items: center; }
#hero .hero-copy { max-width: 640px; }
#hero .actions { display: inline-flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
/* Spacer column between hero text and image: hidden on mobile */
.hero-spacer { display: none; }
@media (min-width: 1025px) { .hero-spacer { display: block; } }

  /* Mobile: center the hero image and make it full-width within a max */
  @media (max-width: 767px) {
      #hero .hero-image {
          grid-column: 1 / -1;
          justify-self: center;
          align-self: center;
          display: block;
          margin-left: auto;
          margin-right: auto;
          margin-top: var(--space-6);
          width: 60%;
          max-width: min(420px, 88vw);
          height: auto;
          border-radius: 20px;
          margin-top: 24px;
      }
      #hero .hero-spacer { display: none !important; }

      #hero .btn, .mobile-sticky-cta .btn {
        margin-top: 0px;
      }
  }

/* Restore generous desktop spacing in hero */
@media (min-width: 768px) {
    #hero .heading-pair { gap: var(--space-6); }
    #hero .heading-pair + * { margin-top: var(--space-8); }
}
@media (min-width: 1025px) {
    #hero { padding-top: 40px; }
}

/* Reduce hero top padding on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    #hero { padding-top: 80px; }
}

/* Reduce hero top padding on mobile */
@media (max-width: 767px) {
    #hero.section { padding-top: calc(var(--space-11) * 0.6); }
}

/* Footer - explicitly exclude from alternating colors */
.site-footer { 
    background: #000000 !important; 
    height: 48px; 
    display: flex; 
    align-items: center; 
    width: 100%; 
}
.footer-bar { width: 100%; align-items: center; gap: var(--space-6); justify-content: center; }
.footer-left { display: flex; justify-content: center; }
.footer-left .footer-brand { display: inline-flex; align-items: center; gap: var(--space-1); }
.footer-left .footer-brand img { width: var(--space-5); height: var(--space-5); max-width: var(--space-5); max-height: var(--space-5); object-fit: contain; aspect-ratio: 1 / 1; display: block; }
.footer-right { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-6); }
.site-footer a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-13); }
.site-footer a:hover { color: var(--color-text); }

/* Remove section padding from footer on desktop */
@media (min-width: 768px) {
    .site-footer.section { 
        padding-top: 0; 
        padding-bottom: 0; 
    }
}

/* Sticky header enabled across breakpoints */

/* Mobile sticky download CTA */
.mobile-sticky-cta { display: none; }
@media (max-width: 767px) {
    /* Footer: hide links, center content, ensure full-width bg */
    .site-footer { height: auto; padding-top: calc(var(--space-3) / 2); padding-bottom: calc(var(--space-3) / 2); }
    .site-footer .container { width: 100%; max-width: 600px; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
    .footer-bar { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); }
    .footer-left { width: 100%; display: flex; justify-content: center; }
    .footer-right { display: none; } /* Hide footer links on mobile */
    .footer-left .footer-brand { gap: var(--space-1); }
    /* Hide inline hero download button on mobile */
    .download-button { display: none !important; }
    /* Reserve space so content isn't hidden behind the fixed bar */
    .mobile-sticky-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0; /* stick to bottom edge */
        background: rgba(0, 0, 0, 0.1); /* black with opacity */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding-top: var(--space-4); /* reduced one notch from space-5 */
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0)); /* include safe area */
        z-index: 100000; /* ensure above hero and other elements */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 180ms ease;
        will-change: transform;
    }
    .mobile-sticky-cta .container { display: flex; justify-content: center; }
}

/* Tablet: use mobile footer layout */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-footer { height: auto; padding-top: calc(var(--space-3) / 2); padding-bottom: calc(var(--space-3) / 2); }
    .site-footer.section { padding-top: calc(var(--space-3) / 2); padding-bottom: calc(var(--space-3) / 2); }
    .site-footer .container { width: 100%; max-width: 600px; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
    .footer-bar { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); }
    .footer-left { width: 100%; display: flex; justify-content: center; }
    .footer-right { display: none; }
    .footer-left .footer-brand { gap: var(--space-1); }
}

/* Habits section */
.habits-grid { 
    display: grid; 
    grid-template-columns: repeat(1, minmax(0, 1fr)); 
    gap: var(--space-7);
    padding-top: var(--space-8); /* Top padding for both mobile and desktop */
    padding-bottom: var(--space-8); /* Bottom padding for both mobile and desktop */
    justify-content: center;
    justify-items: center;
    margin: 0 auto; /* Center the grid within its container */
    max-width: fit-content; /* Only take up the space it needs */
}

/* Mobile Swiper carousel for habits */
@media (max-width: 767px) {
    .habits-swiper {
        width: 100vw; /* full-bleed */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 40px; /* requested spacing above swiper */
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
        /* No gutters on the sides */
        --swiper-centered-offset-before: 0px;
        --swiper-centered-offset-after: 0px;
        overflow: hidden;
    }
    .habits-swiper .swiper-wrapper {
        align-items: center;
    }
    .habits-swiper .swiper-slide {
        width: 180px; /* match habit card size */
        height: 180px;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
    }
    .habits-swiper .swiper-slide .habit-card {
        width: 100%;
        height: 100%;
    }
    .habits-swiper .swiper-pagination {
        position: relative;
        margin-top: var(--space-4);
    }
    .habits-swiper .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.45);
        opacity: 1;
    }
    .habits-swiper .swiper-pagination-bullet-active {
        background: #ffffff;
    }
}
/* Tablet breakpoint (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .habits-grid { 
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        overflow: visible;
        flex-wrap: nowrap;
    }
    .habit-card {
        flex: 0 0 180px;
        height: 180px;
        width: 180px;
        aspect-ratio: 1;
        margin-left: -20px; /* Negative margin for overlap */
        box-shadow: -2px 0 0.5px rgba(0, 0, 0, 0.25); /* 2px black drop shadow to the left with 1px blur */
    }
    .habit-card:first-child {
        margin-left: 0; /* First card has no negative margin */
        box-shadow: none; /* No shadow on first card */
    }
}

/* Desktop breakpoint (1025px+) */
@media (min-width: 1025px) { 
    .habits-grid { 
        display: flex;
        gap: 20px; /* Match mobile padding */
        overflow-x: hidden; /* Hide horizontal scrollbar */
        overflow-y: hidden;
        justify-content: center; /* Center the carousel */
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        max-width: none; /* Override max-width for desktop */
    } 
}

/* Mobile text alignment overrides */
@media (max-width: 767px) {
    /* Hide hero subtitle on mobile */
    #hero .text-container .heading-sub { display: none !important; }
    /* Hero section: center align on mobile */
    #hero .text-container[data-align="left"] { text-align: center; }
    /* Keep "Stop doomscrolling" on one line and center it */
    #hero .heading-title .hero-first-two { white-space: nowrap; display: inline-block; }
    
    /* Habits section: left align on mobile */
    #habits .text-container[data-align="center"] { text-align: left; }
    
    /* Features section: keep left align on mobile (no override needed) */
    
}

/* Tablet text alignment overrides */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Center align text on tablet for better balance */
    #hero .text-container[data-align="left"] { text-align: center; }
    #habits .text-container[data-align="center"] { text-align: center; }
    /* Features section: keep left align on tablet (no override needed) */
    
    /* Increase line height for headlines on mobile */
    .heading-title,
    .text-container .heading-title {
        line-height: 1.3; /* Increased from 1.2 (--line-tight) */
    }
    
    /* Tablet: stack hero into a single centered column and center actions */
    #hero .hero-grid { grid-template-columns: 1fr; justify-items: center; }
    #hero .hero-copy, #hero .hero-phone-showcase, #hero .hero-spacer { grid-column: 1 / -1; }
    #hero .hero-copy { margin-left: auto; margin-right: auto; text-align: center; }
    #hero .hero-actions { justify-content: center !important; }

    /* Tablet: ensure hero and showcase images remain centered */
    #hero .hero-phone-showcase { justify-content: center; align-items: center; }
    #phone-showcase .phone-mockup-showcase { justify-content: center; align-items: center; }
    #phone-showcase .phone-container { margin-left: auto; margin-right: auto; }

    /* Tablet: center the habits carousel container within its section */
    .habits-grid { width: fit-content; margin-left: auto; margin-right: auto; justify-content: center; align-items: center; }

    /* Ensure nav CTA remains visible on tablet */
    .primary-nav .nav-cta { display: inline-flex; }
    
    /* Consistent spacing in download section */
    #download .text-container + .actions {
        margin-top: var(--space-6);
    }
}

/* Tablet download section adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    #download .btn-primary {
        font-size: calc(var(--font-size-20) - 2px);
        padding: var(--space-3) var(--space-5);
    }
}

/* Mobile carousel layout - Exception: habit cards remain as carousel */
@media (max-width: 767px) {
    .habits-grid {
        display: flex;
        gap: 20px; /* Increased padding between cards for better spacing */
        overflow-x: hidden; /* Disable manual scrolling */
        overflow-y: hidden;
        /* Remove touch scrolling and scroll snapping for auto-scroll only */
        /* Remove padding to eliminate wasted space like hero */
        padding-left: 0; 
        padding-right: 0;
        /* Prevent user interaction with the scroll */
        pointer-events: none;
        /* Break out of container to be full-width */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        justify-content: center; /* Center the carousel */
        align-items: center;
        max-width: none; /* Override max-width for mobile */
    }
    .habit-card {
        flex: 0 0 180px;
        scroll-snap-align: center;
        min-width: 0;
        pointer-events: auto;
        position: relative;
        height: 180px;
        width: 180px;
        aspect-ratio: 1;
        padding: 0;
        overflow: hidden;
    }
    
    /* Make habit card content fill the square container */
    .habit-card > .habit-icon-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .habit-card > .habit-label {
        position: absolute;
        left: var(--space-2);
        bottom: var(--space-2);
        display: grid;
        gap: var(--space-1);
        z-index: 2;
        text-align: left;
    }

    /* Prevent label text from wrapping oddly on small screens */
    .habit-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .habit-time { white-space: nowrap; }
    
    /* Scale down description text on mobile by 2-3px */
    .heading-sub { font-size: calc(var(--font-size-20) - 3px); }
    .text-body { font-size: calc(var(--font-size-20) - 2px); }
    
    /* Additional mobile spacing improvements */
    .btn { 
        /* Restore compact, consistent proportions on mobile */
        padding: 12px 20px;
        min-height: 44px;
        line-height: 1;
        white-space: nowrap;
        margin-top: var(--space-6); /* More space above buttons */
        gap: var(--space-2);
    }
    /* Ensure button icons don't stretch and keep aspect ratio */
    .btn .icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
        flex: 0 0 auto;
    }
    /* Specific tweaks for hero and sticky CTA buttons */
    #hero .btn, .mobile-sticky-cta .btn {
        padding: 12px 20px;
        min-height: 44px;
        line-height: 1;
        white-space: nowrap;
    }
    
    .actions { 
        gap: var(--space-6); /* Increased gap between action buttons */
        margin-top: var(--space-6); /* middle value for hero/download */
    }
    
    /* Consistent download section spacing on mobile */
    #download .text-container + .actions {
        margin-top: var(--space-6);
    }
    /* Reduce spacing after description (heading-pair) on mobile */
    .heading-pair {
        padding-bottom: 0;
    }
    .heading-pair + * {
        margin-top: 0 !important; /* Remove the global 24px margin */
    }
    .heading-pair + .actions,
    .heading-pair + .btn,
    .text-container + .btn {
        margin-top: var(--space-3);
    }
    
    /* Better spacing for mobile sticky CTA */
    .mobile-sticky-cta {
        padding-top: var(--space-6); /* Increased from 24px */
        padding-bottom: var(--space-6); /* Increased from 24px */
    }
}

/* Default section: ensure first button after content has consistent spacing */
.section .container > .btn:first-of-type { margin-top: var(--space-6); }

/* (Removed px-based gap; using tokenized spacing above) */

.habit-card { 
    border-radius: 18px; 
    padding: 0; /* no padding to keep perfect square; text is absolutely positioned */
    position: relative;
    overflow: hidden;
}

/* Desktop habit card layout */
@media (min-width: 1025px) {
    .habit-card {
        display: flex; 
        align-items: flex-end; 
        aspect-ratio: 1;
        height: 180px;
        width: 180px;
        flex: 0 0 180px; /* Prevent shrinking */
        min-width: 180px;
    }
}
/* Image fills the square, preserving aspect ratio */
.habit-icon-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Tablet and Desktop habit label positioning */
@media (min-width: 768px) and (max-width: 1024px) {
    .habit-label { 
        position: absolute; 
        left: calc(var(--space-2) + 4px); 
        bottom: calc(var(--space-2) + 4px); 
        display: grid; 
        z-index: 2; 
        text-align: left;
    }
}

/* Desktop habit label positioning */
@media (min-width: 1025px) {
    .habit-label { 
        position: absolute; 
        left: var(--space-2); 
        bottom: var(--space-2); 
        display: grid; 
        z-index: 2; 
        text-align: left;
    }
}
.habit-name { 
    font-weight: 600; 
    font-size: calc(var(--font-size-20) - 4px); /* Reduced by one step (2px more) */
}
.habit-time { 
    font-size: var(--font-size-13);
}


/* Color blocks */
.habit--blue { background: #1E84D2; }
.habit--yellow { background: #FDC405; }
.habit--pink { background: #EB4EDB; }
.habit--cyan { background: #00C0E8; }
.habit--purple { background: #8072FF; }

/* Foreground color helpers */
.fg-light { color: #ffffff; }
.fg-dark { color: #000000; }

/* Desktop-only hover lift for habit cards */
@media (hover: hover) and (pointer: fine) {
    .habit-card {
        transition: transform 180ms ease, box-shadow 180ms ease;
        will-change: transform;
    }
    .habit-card:hover {
        transform: translateY(-8px);
    }
}


/* Hero actions container - aligns with text */
.hero-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-4);
}

/* Match text alignment for all layouts */
[data-align="left"] + .hero-actions,
.text-left .hero-actions {
    justify-content: flex-start;
}

[data-align="center"] + .hero-actions,
.text-center .hero-actions {
    justify-content: center;
}

[data-align="right"] + .hero-actions,
.text-right .hero-actions {
    justify-content: flex-end;
}

/* Ensure button alignment matches text on mobile/tablet */
@media (max-width: 1024px) {
    .hero-copy .hero-actions {
        justify-content: inherit;
    }
    
    /* If text container has center alignment, button should center too */
    .hero-copy[data-align="center"] .hero-actions,
    .hero-copy .text-center .hero-actions {
        justify-content: center;
    }
    
    /* If text container has right alignment, button should align right too */
    .hero-copy[data-align="right"] .hero-actions,
    .hero-copy .text-right .hero-actions {
        justify-content: flex-end;
    }
}

/* Mobile-specific hero tweaks: center actions and tighten spacing */
@media (max-width: 767px) {
    /* Center the hero button under centered mobile heading */
    #hero .hero-actions { justify-content: center; display: none !important; }
    /* Reduce distance between hero text and button */
    #hero .hero-actions { margin-top: var(--space-3); }
    /* Hide inline hero CTA on mobile in favor of sticky CTA */
    #hero .hero-actions { display: none !important; }
}

/* Hero Phone Showcase - Similar sizing to original GIF */
.hero-phone-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
/* Add breathing room around the phone column */
#hero .hero-phone-showcase {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
@media (max-width: 767px) {
    .hero-phone-showcase { flex-direction: column; }
}

.hero-phone-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px; /* Similar to original GIF size */
    transform: rotate(4deg);
    transform-origin: center;
}

.hero-phone-mock-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
}

.hero-app-screen {
    position: absolute;
    z-index: 1;
    width: 91%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    border-radius: 11%; /* 11% of width to match phone curvature */
}
/* Mobile-specific fine-tune to keep app screen aligned within frame */
@media (max-width: 767px) {
    .hero-app-screen { width: 89%; }
}

.hero-animated-elements-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Mobile-only hero subtitle clone placement and visibility */
@media (max-width: 767px) {
    /* Hide original subtitle inside text-container */
    #hero .text-container .heading-sub { display: none !important; }
    /* Show the mobile clone placed below the phone mock */
    .hero-sub-mobile {
        display: block;
        color: var(--color-text-secondary);
        font-size: calc(var(--font-size-20) - 3px);
        line-height: var(--line-normal);
        margin-top: var(--space-5);
        padding-top: var(--space-2);
        text-align: center;
        max-width: 32ch;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 768px) {
    .hero-sub-mobile { display: none; }
}

/* Responsive adjustments for hero phone showcase */
@media (max-width: 768px) {
    .hero-phone-container {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .hero-phone-container {
        max-width: 200px;
    }
}

/* Phone Showcase Component - For overlapping images */
.phone-mockup-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-8) 0;
    min-height: 600px;
}

.phone-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
}

.phone-mock-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    max-width: 350px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-screen {
    position: absolute;
    z-index: 1;
    width: 91%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    border-radius: 11%; /* 11% of width to match phone curvature */
}

.animated-elements-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Responsive adjustments for phone showcase */
@media (max-width: 768px) {
    .phone-mockup-showcase {
        padding: var(--space-6) var(--space-4);
        min-height: 500px;
    }
    
    .phone-container {
        max-width: 300px;
    }
    
    .phone-mock-frame {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .phone-mockup-showcase {
        padding: var(--space-5) var(--space-3);
        min-height: 400px;
    }
    
    .phone-container {
        max-width: 250px;
    }
    
    .phone-mock-frame {
        max-width: 220px;
    }
}

/* Animation support for future stickers */
.animated-elements-container > * {
    position: absolute;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Hover effects for desktop */
@media (hover: hover) and (pointer: fine) {
    .phone-container {
        transition: transform 0.3s ease;
    }
    
    .phone-container:hover {
        transform: scale(1.02);
    }
    
    .phone-mock-frame {
        transition: filter 0.3s ease;
    }
    
    .phone-container:hover .phone-mock-frame {
        filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
    }
}

/* Accordion Features Container - align to same width as hero/nav */
.accordion-container {
    display: grid;
    gap: 0;
    margin-top: var(--space-8);
    width: 100%;
}

/* Features 2-column alternating rows */
.features-rows { display: grid; gap: 0; margin-top: var(--space-6); width: 100%; }
/* Increase top padding for combined accordion + features wrapper */
.accordion-container.features-rows { padding-top: 48px; gap: 0; }
.feature-row { 
    display: grid; 
    align-items: start; 
    gap: var(--space-7); 
    padding-top: 40px; 
    padding-bottom: 40px;
}
.feature-row.container-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.feature-row--reverse .feature-text { text-align: left; }

.feature-media { 
    width: 100%; 
    height: 160px; 
    border-radius: var(--radius-2); 
    background: rgba(255,255,255,0.08); 
    justify-self: start; 
}

.feature-text { display: grid; gap: var(--space-2); }
.feature-row .feature-text { text-align: left; justify-self: stretch; }
.feature-title { font-size: var(--font-size-20); font-weight: 600; color: var(--color-text); line-height: var(--line-tight); }
.feature-desc { font-size: var(--font-size-16); color: var(--color-text-secondary); line-height: var(--line-normal); }

@media (max-width: 767px) {
    .feature-row, .feature-row--reverse { grid-template-columns: 1fr; }
    .feature-row.container-grid { grid-template-columns: 1fr; }
    /* Let image and text use full width; hide spacers on mobile */
    .feature-row.container-grid > * { grid-column: 1 / -1 !important; }
    .feature-spacer { display: none; }
    /* Always show image first on mobile */
    .feature-media { order: 1; height: 140px; width: 100%; }
    .feature-row .feature-text,
    .feature-row--reverse .feature-text { order: 2; text-align: center; }
}

/* Tablet-specific alignment fixes */
@media (min-width: 768px) and (max-width: 1024px) {
    .feature-row.container-grid { align-items: center; }
    .feature-row .feature-text { text-align: left; justify-self: stretch; }
}

.accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.accordion-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: var(--space-7) 0;
    cursor: default;
    gap: var(--space-4);
}

.accordion-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-2);
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.accordion-icon-placeholder::after {
    content: "📷";
    opacity: 0.5;
}

.accordion-question {
    font-size: var(--font-size-14);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    flex: 1;
    line-height: var(--line-tight);
}

.accordion-toggle { display: none !important; }

.accordion-content {
    padding: 0 var(--space-10) var(--space-7) var(--space-10);
    max-height: none;
    overflow: visible;
    transition: none;
    opacity: 1;
}

/* Active state no longer used; accordion always expanded */

.accordion-content p {
    font-size: var(--font-size-12);
    line-height: var(--line-normal);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Mobile responsive adjustments for Accordion */
@media (max-width: 767px) {
    .accordion-container {
        margin-top: var(--space-6);
    }
    
    .accordion-header {
        padding: var(--space-6) 0;
        gap: var(--space-3);
        cursor: default;
    }
    
    .accordion-icon-placeholder {
        width: 28px;
        height: 28px;
    }
    
    .accordion-question {
        font-size: var(--font-size-14);
    }
    
    .accordion-toggle { display: none !important; }
    
    .accordion-content {
        padding: 0 var(--space-7) var(--space-6) var(--space-7);
    }
    
    .accordion-content p {
        font-size: var(--font-size-12);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .accordion-container {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}