/* iPad Media Queries - 768px to 1024px */

/* Home Page - Hero Section */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        min-height: 90vh;
        padding: 0 3rem;
    }
    
    .hero-content {
        max-width: 1200px;
        gap: 3rem;
        margin-top: 2rem;
    }
    
    .hero-text {
        flex: 0 1 50%;
    }
    
    .title {
        font-size: 3.8rem;
        line-height: 1.1;
        margin-bottom: 2rem;
    }
    
    .subtitle {
        font-size: 1.3rem;
        line-height: 1.7;
        margin-bottom: 3rem;
    }
    
    .cta-container {
        gap: 1.5rem;
    }
    
    .cta-button,
    .secondary-button {
        padding: 1.2rem 2.5rem;
        font-size: 1.1rem;
    }
    
    .hero-visual {
        flex: 0 1 45%;
    }
}

/* Home Page - Services Section */
@media (min-width: 768px) and (max-width: 1024px) {
    .services {
        padding: 80px 0;
    }
    
    .services-container {
        max-width: 1200px;
        padding: 0 3rem;
    }
    
    .section-header {
        margin-bottom: 4rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .section-subtitle {
        font-size: 1.2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .service-card {
        padding: 2.5rem;
    }
    
    .service-title {
        font-size: 1.8rem;
    }
    
    .service-description {
        font-size: 1.1rem;
        line-height: 1.7;
    }
    
    /* Make checklist and SVG side by side on iPad */
    .service-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "icon icon"
            "title title"
            "description description"
            "mockup features"
            "link link";
        gap: 1rem;
    }
    
    .service-card .service-icon {
        grid-area: icon;
    }
    
    .service-card .service-title {
        grid-area: title;
    }
    
    .service-card .service-description {
        grid-area: description;
    }
    
    .service-features {
        grid-area: features;
        gap: 1rem;
        font-size: 1rem;
        border-top: none;
        margin-top: 0;
        margin-bottom: 1rem;
        padding-left: 1rem;
    }
    
    .service-features .feature {
        font-size: 1rem;
    }
    
    .service-mockup {
        grid-area: mockup;
        height: 200px;
        margin: 0;
    }
    
    .service-card .service-link {
        grid-area: link;
    }
    
    .services-cta {
        margin-top: 4rem;
    }
    
    .services-cta p {
        font-size: 1.2rem;
    }
    
    .services-cta .cta-button {
        padding: 1.2rem 2.5rem;
        font-size: 1.1rem;
    }
}

/* Home Page - About Section */
@media (min-width: 768px) and (max-width: 1024px) {
    .about {
        padding: 80px 0 !important;
    }
    
    .about-container {
        max-width: 1200px !important;
        padding: 0 3rem !important;
    }
    
    .about-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 4rem !important;
        align-items: center !important;
        grid-template-columns: none !important;
    }
    
    /* Remove section divider line on iPad */
    .about-content::before {
        display: none !important;
    }
    
    .about-text {
        flex: none !important;
        width: 100% !important;
        max-width: 800px !important;
        text-align: center !important;
    }
    
    .about-heading {
        font-size: 2.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    .about-text p {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .values-section {
        margin-top: 3rem !important;
    }
    
    .values-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .differentials-container {
        gap: 2rem !important;
        justify-content: center !important;
    }
    
    .differential-item {
        padding: 1.5rem !important;
    }
    
    .differential-item h4 {
        font-size: 1.2rem !important;
    }
    
    .about-values {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        margin-top: 3rem !important;
    }
    
    .value-item {
        padding: 2rem !important;
    }
    
    .value-item h4 {
        font-size: 1.4rem !important;
    }
    
    .value-item p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .about-cards {
        flex: none !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
        max-width: 900px !important;
    }
    
    .about-card {
        padding: 2rem !important;
    }
    
    .card-title {
        font-size: 1.4rem !important;
        margin-bottom: 1rem !important;
    }
    
    .card-content {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .card-feature {
        font-size: 0.95rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .about-cta-section {
        margin-top: 4rem !important;
        text-align: center !important;
    }
    
    .about-cta .cta-button {
        padding: 1.2rem 2.5rem !important;
        font-size: 1.1rem !important;
    }
}

/* Hero Section - About Page */
@media (min-width: 768px) and (max-width: 1024px) {
    .about-hero {
        min-height: 70vh;
    }
    
    .hero-container {
        padding: 0 2rem;
    }
    
    .hero-content {
        padding-top: 100px;
        min-height: 70vh;
        justify-content: center;
        padding-bottom: 3rem;
    }
    
    .hero-title {
        font-size: 4.2rem;
        letter-spacing: -1px;
        margin-bottom: 1.2rem;
    }
    
    .title-line:first-child {
        font-size: 0.65em;
        letter-spacing: 3px;
        margin-bottom: 1.5rem;
    }
    
    .title-line.highlight::after {
        width: 110px;
        bottom: -20px;
    }
    
    .hero-description {
        font-size: 1.3rem;
        margin-top: 2rem;
        max-width: 700px;
        line-height: 1.8;
    }
}

/* Services Section - About Page */
@media (min-width: 768px) and (max-width: 1024px) {
    .services-detailed {
        padding: 80px 0;
    }
    
    .services-container {
        padding: 0 3rem;
    }
    
    .section-header {
        margin-bottom: 4rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .section-subtitle {
        font-size: 1.2rem;
    }
    
    .service-detailed-card {
        padding: 2.5rem;
    }
    
    .service-content {
        gap: 2.5rem;
    }
    
    .service-title {
        font-size: 2.2rem;
    }
    
    .service-features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .examples-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .services-cta-section {
        padding: 80px 0;
    }
    
    .services-cta-content h3 {
        font-size: 2.5rem;
    }
    
    .services-cta-content p {
        font-size: 1.2rem;
    }
    
    .cta-buttons {
        flex-direction: row;
        gap: 1.5rem;
    }
    
    .cta-button {
        width: auto;
        padding: 1.2rem 2.5rem;
    }
}

/* Pricing Section - About Page */
@media (min-width: 768px) and (max-width: 1024px) {
    .pricing-section {
        padding: 80px 0;
    }
    
    .pricing-container {
        padding: 0 3rem;
    }
    
    .pricing-section .section-title {
        font-size: 3rem;
    }
    
    .pricing-category-card {
        padding: 2.5rem;
    }
    
    .category-title {
        font-size: 1.8rem;
    }
    
    .category-header {
        margin-bottom: 2rem;
    }
    
    .strip-content {
        padding: 2rem;
    }
    
    .strip-title {
        font-size: 1.6rem;
    }
    
    .strip-price {
        font-size: 2rem;
    }
    
    .pricing-cta {
        padding: 80px 0;
    }
    
    .pricing-cta-content h3 {
        font-size: 2.5rem;
    }
    
    .pricing-cta-buttons {
        flex-direction: row;
        gap: 1.5rem;
    }
    
    .cta-button {
        width: auto;
        padding: 1.2rem 2.5rem;
    }
    
    .monthly-costs-card {
        padding: 2.5rem;
    }
    
    .monthly-costs-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .monthly-title {
        font-size: 1.8rem;
    }
    
    .cost-category {
        padding: 2rem;
    }
    
    .price-range {
        font-size: 1.6rem;
    }
    
    .cost-info {
        padding: 1.5rem;
    }
    
    .info-content p {
        font-size: 1rem;
    }
}

/* Category Info Cards - About Page */
@media (min-width: 768px) and (max-width: 1024px) {
    .category-info-card {
        padding: 2rem;
    }
    
    .info-header h4 {
        font-size: 1.4rem;
    }
    
    .category-info-card .info-content p {
        font-size: 1rem;
    }
    
    .category-info-card .pricing-note {
        padding: 1rem;
        font-size: 0.9rem;
    }
}

/* Service Pricing Links - About Page */
@media (min-width: 768px) and (max-width: 1024px) {
    .pricing-link-button {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .service-pricing-link {
        margin-top: 2rem;
    }
    
    .service-link-button {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .pricing-service-link {
        margin-top: 2rem;
    }
}