/* ========================================
   MOBILE-FIRST RESPONSIVE FIXES
   Rizzling Dating Assistant
   ======================================== */

/* --- Base Global Fixes --- */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent horizontal scroll on sections */
.hero,
main,
section,
.hero-content,
.upload-section,
.results-section,
.ol-main,
.pr-main,
.interest-main {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Responsive images globally */
img {
    max-width: 100%;
    height: auto;
}

/* Word-wrap safety */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent double-tap zoom everywhere */
* {
    touch-action: manipulation;
}

/* Mobile menu toggle hidden on desktop */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 8px;
    color: var(--color-text);
    line-height: 1;
    border-radius: 8px;
    transition: background 0.2s;
}

.mobile-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* ========================================
   768px — MOBILE BREAKPOINT
   ======================================== */
@media (max-width: 768px) {

    /* ---- INDEX.HTML HEADER & NAV ---- */
    .header {
        padding: 10px 16px;
    }

    .nav {
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
    }

    .nav-logo {
        font-size: 1.25rem;
    }

    .back-to-home-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .back-text {
        display: none;
        /* Hide text on mobile to save space */
    }

    .logo-icon {
        font-size: 1.4rem;
    }

    .mobile-menu-toggle {
        display: block;
        order: 2;
        margin-left: auto;
    }

    .nav-links {
        display: none;
        width: 100%;
        order: 10;
        flex-direction: column;
        background: rgba(255, 248, 240, 0.98);
        border-radius: 12px;
        padding: 12px 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        margin-top: 8px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-link {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        width: 100%;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .nav-link::after {
        display: none;
    }

    .auth-buttons {
        order: 3;
        margin-left: 0;
        gap: 8px;
    }

    .user-name {
        display: none;
    }

    .user-menu-btn {
        padding: 4px 10px 4px 4px;
    }

    .user-dropdown {
        right: 0;
        left: auto;
    }


    /* ---- HERO SECTION (index.html) ---- */
    .hero {
        padding: 80px 16px 40px;
        min-height: auto;
    }

    .hero-content {
        padding: 0;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: 6px 14px;
        margin-bottom: 16px;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 28px;
        padding: 0 4px;
    }

    .hero-actions {
        grid-template-columns: 1fr !important;
        gap: 16px;
        padding: 0;
    }

    .action-card {
        padding: 28px 20px;
    }

    .action-card-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .action-card h3 {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .action-card p {
        font-size: 0.9rem;
        margin-bottom: 16px;
    }

    .action-btn {
        padding: 14px 24px;
        font-size: 1rem;
        width: 100%;
    }

    .action-stats-badge {
        font-size: 0.8rem;
    }

    .auth-lock-badge {
        font-size: 0.75rem;
    }

    .hero-trust {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .trust-number {
        font-size: 1.8rem;
    }

    .trust-label {
        font-size: 0.85rem;
    }


    /* ---- UPLOAD SECTION (index.html) ---- */
    .upload-section {
        padding: 40px 16px;
    }

    .section-header {
        margin-bottom: 24px;
    }

    .section-title {
        font-size: 1.6rem !important;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    .upload-zone {
        padding: 40px 20px;
    }

    .upload-primary {
        font-size: 1.1rem;
    }

    .upload-secondary {
        font-size: 0.8rem;
    }

    .upload-button {
        padding: 12px 28px;
    }

    .input-toggle {
        margin-bottom: 20px !important;
    }

    .toggle-btn {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .text-input {
        min-height: 160px;
        padding: 16px;
        font-size: 16px;
        /* Prevents iOS zoom */
    }

    .preview-container {
        padding: 16px;
    }

    .preview-image-wrapper {
        max-height: 350px;
    }

    .preview-image-wrapper img {
        max-height: 350px;
    }

    .analyze-button {
        font-size: 1rem;
        padding: 14px;
    }

    /* Privacy card */
    .privacy-card {
        padding: 24px 16px;
    }

    .privacy-title-small {
        font-size: 1.1rem;
    }

    .privacy-text-small {
        font-size: 0.9rem;
    }

    .privacy-badges-small {
        flex-wrap: wrap;
        gap: 8px;
    }

    .privacy-badge {
        font-size: 0.8rem;
    }


    /* ---- RESULTS SECTION (index.html) ---- */
    .results-section {
        padding: 24px 16px;
    }

    .suggestions-grid {
        gap: 16px;
    }

    .results-actions {
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .tips-container {
        padding: 20px 16px;
    }

    .tips-title {
        font-size: 1.2rem;
    }


    /* ---- HOW IT WORKS (index.html) ---- */
    .how-it-works {
        padding: 40px 16px;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .feature-card {
        padding: 24px 20px;
    }

    .feature-number {
        font-size: 2rem;
    }

    .feature-icon {
        font-size: 2.5rem;
    }

    .feature-title {
        font-size: 1.1rem;
    }

    .feature-description {
        font-size: 0.9rem;
    }


    /* ---- FOOTER ---- */
    .footer {
        padding: 32px 16px;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-tagline {
        font-size: 0.9rem;
    }

    .footer-disclaimer p {
        font-size: 0.85rem;
    }

    .footer-bottom {
        padding-top: 16px;
        font-size: 0.85rem;
    }


    /* ============================================
     OPENING LINES PAGE (ol- prefixed classes)
     ============================================ */

    /* Header */
    .ol-header {
        padding: 12px 16px;
    }

    .ol-header-content {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ol-back-btn {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .ol-header-stats {
        font-size: 0.8rem;
        display: none;
        /* hide stats on mobile to reduce clutter */
    }

    /* Hero */
    .ol-hero {
        padding: 24px 16px 16px;
    }

    .ol-hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    .ol-hero-subtitle {
        font-size: 0.95rem;
        padding: 0 4px;
    }

    .ol-success-stats {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .ol-stat-pill {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* Upload */
    .ol-upload-container {
        padding: 24px 16px;
    }

    .ol-upload-container h2 {
        font-size: 1.4rem;
    }

    .ol-upload-hint {
        font-size: 0.9rem;
    }

    .ol-input-toggle {
        margin-bottom: 20px;
    }

    .ol-toggle-btn {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .ol-drop-zone {
        padding: 40px 20px;
    }

    .ol-upload-icon {
        font-size: 3rem;
    }

    .ol-drop-zone h3 {
        font-size: 1.05rem;
    }

    .ol-browse-btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    .ol-file-types {
        font-size: 0.8rem;
    }

    .ol-text-input {
        min-height: 150px;
        padding: 16px;
        font-size: 16px;
    }

    .ol-preview-container {
        padding: 16px;
    }

    .ol-preview-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .ol-generate-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1.05rem;
    }

    /* Loading */
    .ol-loading-container {
        padding: 40px 20px;
    }

    .ol-loading-container h3 {
        font-size: 1.2rem;
    }

    .ol-loading-tip {
        font-size: 0.9rem;
    }

    /* Results */
    .ol-results-header h2 {
        font-size: 1.5rem;
        padding: 0 16px;
    }

    .ol-results-subtitle {
        font-size: 0.9rem;
        padding: 0 16px;
    }

    .ol-openers-grid {
        gap: 16px;
        padding: 0 16px;
    }

    .ol-opener-card {
        padding: 20px 16px;
    }

    .ol-opener-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ol-style-badge {
        font-size: 0.85rem;
    }

    .ol-success-rate {
        font-size: 0.8rem;
    }

    .ol-opener-text {
        font-size: 1rem;
        padding: 14px;
    }

    .ol-opener-explanation {
        font-size: 0.85rem;
        padding: 12px;
    }

    .ol-opener-actions {
        flex-direction: column;
        gap: 10px;
    }

    .ol-copy-btn,
    .ol-worked-btn {
        width: 100%;
        min-width: auto;
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    /* Tracking */
    .ol-tracking-section {
        padding: 24px 16px;
    }

    .ol-tracking-section h3 {
        font-size: 1.3rem;
    }

    .ol-tracking-stats {
        flex-direction: column;
        gap: 12px;
    }

    .ol-tracking-stat {
        width: 100%;
    }

    .ol-tracking-stat-number {
        font-size: 1.8rem;
    }

    .ol-tracking-stat-label {
        font-size: 0.85rem;
    }

    .ol-generate-more {
        padding: 0 16px;
    }

    .ol-generate-more-btn {
        width: 100%;
        padding: 14px 28px;
        font-size: 1rem;
    }

    /* Examples */
    .ol-examples-section {
        padding: 40px 16px;
    }

    .ol-examples-section h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .ol-examples-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .ol-example-card {
        padding: 20px 16px;
    }

    .ol-example-label {
        font-size: 0.8rem;
    }

    .ol-example-profile p,
    .ol-example-opener p {
        font-size: 0.9rem;
    }

    .ol-result-badge {
        font-size: 0.8rem;
    }

    /* How It Works */
    .ol-how-it-works {
        padding: 40px 16px;
    }

    .ol-how-it-works h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .ol-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .ol-step-card {
        padding: 24px 16px;
    }

    .ol-step-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .ol-step-icon {
        font-size: 2rem;
    }

    .ol-step-card h4 {
        font-size: 1.05rem;
    }

    .ol-step-card p {
        font-size: 0.9rem;
    }

    /* Tips */
    .ol-tips-section {
        padding: 40px 16px;
    }

    .ol-tips-section h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .ol-tips-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .ol-tip-card {
        padding: 20px 16px;
    }

    .ol-tip-icon {
        font-size: 2rem;
    }

    .ol-tip-card h4 {
        font-size: 1.05rem;
    }

    .ol-tip-card p {
        font-size: 0.9rem;
    }

    /* FAQ */
    .ol-faq-section {
        padding: 40px 16px;
    }

    .ol-faq-section h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .ol-faq-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .ol-faq-item {
        padding: 20px 16px;
    }

    .ol-faq-item h4 {
        font-size: 1rem;
    }

    .ol-faq-item p {
        font-size: 0.9rem;
    }

    /* Footer */
    .ol-footer {
        padding: 24px 16px;
        font-size: 0.85rem;
    }

    .ol-footer a {
        display: inline-block;
        margin: 0 6px;
    }


    /* ============================================
     PROFILE REVIEW PAGE (pr- prefixed classes)
     ============================================ */

    /* Header */
    .pr-header {
        padding: 12px 16px;
    }

    .pr-header-content {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pr-back-btn {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .pr-header-stats {
        font-size: 0.8rem;
        display: none;
    }

    /* Hero */
    .pr-hero {
        padding: 24px 16px 16px;
    }

    .pr-hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    .pr-hero-subtitle {
        font-size: 0.95rem;
        padding: 0 4px;
    }

    .pr-supported-apps {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .pr-app-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .pr-app-badge {
        font-size: 0.85rem;
    }

    /* Upload */
    .pr-upload-container {
        padding: 24px 16px;
    }

    .pr-upload-container h2 {
        font-size: 1.4rem;
    }

    .pr-upload-hint {
        font-size: 0.9rem;
    }

    .pr-input-toggle {
        margin-bottom: 20px;
    }

    .pr-toggle-btn {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .pr-drop-zone {
        padding: 40px 20px;
    }

    .pr-upload-icon {
        font-size: 3rem;
    }

    .pr-drop-zone h3 {
        font-size: 1.05rem;
    }

    .pr-browse-btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    .pr-file-types {
        font-size: 0.8rem;
    }

    .pr-text-input {
        min-height: 150px;
        padding: 16px;
        font-size: 16px;
    }

    .pr-preview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .pr-upload-actions {
        flex-direction: column;
        gap: 12px;
    }

    .pr-analyze-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1.05rem;
    }

    .pr-clear-btn {
        width: 100%;
        padding: 12px 20px;
    }

    /* Loading */
    .pr-loading-container {
        padding: 40px 20px;
    }

    .pr-loading-container h3 {
        font-size: 1.2rem;
    }

    .pr-loading-tip {
        font-size: 0.9rem;
    }

    /* Results: Score */
    .pr-score-hero {
        padding: 0 16px;
        margin-bottom: 32px;
    }

    .pr-score-hero h2 {
        font-size: 1.6rem;
        margin-bottom: 24px;
    }

    .pr-score-circle {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto 20px;
    }

    .pr-score-number {
        font-size: 3rem !important;
    }

    .pr-score-label {
        font-size: 0.85rem;
    }

    .pr-score-rank {
        font-size: 1.1rem;
    }

    .pr-score-comparison {
        font-size: 0.9rem;
    }

    /* Categories */
    .pr-category-scores {
        padding: 24px 16px;
    }

    .pr-category-scores h3 {
        font-size: 1.3rem;
    }

    .pr-categories-grid {
        gap: 14px;
    }

    /* Feedback */
    .pr-feedback-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
        padding: 0 16px;
    }

    .pr-feedback-card {
        padding: 24px 16px;
    }

    .pr-feedback-card h3 {
        font-size: 1.2rem;
    }

    .pr-feedback-card ul {
        padding-left: 20px;
    }

    .pr-feedback-card li {
        font-size: 0.9rem;
        padding: 6px 0;
    }

    /* Bio Rewrite */
    .pr-bio-rewrite {
        padding: 24px 16px;
        margin: 0 16px 24px;
    }

    .pr-bio-rewrite h3 {
        font-size: 1.3rem;
    }

    .pr-bio-comparison {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .pr-bio-arrow {
        transform: rotate(90deg);
        text-align: center;
        font-size: 1.5rem;
    }

    .pr-bio-before,
    .pr-bio-after {
        padding: 16px;
    }

    .pr-bio-text {
        font-size: 0.95rem;
    }

    .pr-copy-bio-btn {
        width: 100%;
        margin-top: 12px;
        padding: 10px 20px;
    }

    /* Tips */
    .pr-tips-section {
        padding: 24px 16px;
    }

    .pr-tips-section h3 {
        font-size: 1.3rem;
    }

    .pr-tips-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Share */
    .pr-share-section {
        padding: 24px 16px;
    }

    .pr-share-section h3 {
        font-size: 1.3rem;
    }

    .pr-share-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .pr-share-btn {
        width: 100%;
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    /* How It Works */
    .pr-how-it-works {
        padding: 40px 16px;
    }

    .pr-how-it-works h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .pr-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .pr-step-card {
        padding: 24px 16px;
    }

    .pr-step-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .pr-step-icon {
        font-size: 2rem;
    }

    .pr-step-card h4 {
        font-size: 1.05rem;
    }

    .pr-step-card p {
        font-size: 0.9rem;
    }

    /* FAQ */
    .pr-faq-section {
        padding: 40px 16px;
    }

    .pr-faq-section h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .pr-faq-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .pr-faq-item {
        padding: 20px 16px;
    }

    .pr-faq-item h4 {
        font-size: 1rem;
    }

    .pr-faq-item p {
        font-size: 0.9rem;
    }

    /* Footer */
    .pr-footer {
        padding: 24px 16px;
        font-size: 0.85rem;
    }


    /* ============================================
     INTEREST DETECTOR PAGE (generic classes)
     ============================================ */

    /* Header */
    .interest-header {
        padding: 12px 16px;
    }

    .interest-header .header-content {
        flex-wrap: wrap;
        gap: 8px;
    }

    .interest-header .back-btn {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .interest-header .logo {
        font-size: 1.2rem;
    }

    .interest-header .header-stats {
        font-size: 0.8rem;
        display: none;
    }

    /* Hero */
    .interest-hero {
        padding: 24px 16px 16px;
    }

    .interest-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    .interest-hero .subtitle {
        font-size: 0.95rem;
        padding: 0 4px;
    }

    .feature-pills {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .feature-pill {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .pill-icon {
        font-size: 1.1rem;
    }

    .pill-text {
        font-size: 0.9rem;
    }

    /* Upload */
    .interest-main .upload-container {
        padding: 24px 16px;
    }

    .interest-main .upload-container h2 {
        font-size: 1.4rem;
    }

    .interest-main .upload-hint {
        font-size: 0.9rem;
    }

    .interest-main .drop-zone {
        padding: 40px 20px;
    }

    .interest-main .drop-zone h3 {
        font-size: 1.05rem;
    }

    .interest-main .browse-btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    .interest-main .file-types {
        font-size: 0.8rem;
    }

    .interest-main .text-input {
        font-size: 16px;
    }

    .interest-main .preview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .interest-main .analyze-actions {
        flex-direction: column;
        gap: 12px;
    }

    .interest-main .analyze-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1.05rem;
    }

    .interest-main .clear-btn {
        width: 100%;
        padding: 12px 20px;
    }

    /* Loading */
    .interest-main .loading-container {
        padding: 40px 20px;
    }

    .interest-main .loading-container h3 {
        font-size: 1.2rem;
    }

    .interest-main .loading-tip {
        font-size: 0.9rem;
    }

    /* Results: Meter */
    .interest-meter-hero {
        padding: 0 16px;
        margin-bottom: 32px;
    }

    .interest-meter-hero h2 {
        font-size: 1.6rem;
        margin-bottom: 24px;
    }

    .meter-container {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto 20px;
    }

    .interest-score {
        font-size: 3rem !important;
    }

    .interest-percentage {
        font-size: 0.85rem;
    }

    .interest-level {
        font-size: 1.1rem;
    }

    .interest-emoji {
        font-size: 2rem;
    }

    /* Verdict */
    .verdict-card {
        padding: 24px 16px;
        margin: 0 16px 24px;
    }

    .verdict-card h3 {
        font-size: 1.3rem;
    }

    .verdict-card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Signals */
    .signals-container {
        padding: 0 16px;
    }

    .signals-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .signals-card {
        padding: 24px 16px;
    }

    .signals-card h3 {
        font-size: 1.2rem;
    }

    /* Breakdown */
    .breakdown-section {
        padding: 24px 16px;
    }

    .breakdown-section h3 {
        font-size: 1.3rem;
    }

    .breakdown-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Recommendation */
    .recommendation-card {
        padding: 24px 16px;
        margin: 0 16px 24px;
    }

    .recommendation-card h3 {
        font-size: 1.3rem;
    }

    .recommendation-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .recommendation-actions {
        flex-direction: column;
        gap: 12px;
    }

    /* Analyze Another */
    .analyze-another {
        padding: 0 16px;
    }

    .analyze-another-btn {
        width: 100%;
        padding: 14px 28px;
        font-size: 1rem;
    }

    /* How It Works (interest) */
    .interest-main .how-it-works {
        padding: 40px 16px;
    }

    .interest-main .how-it-works h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .interest-main .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .step-card {
        padding: 24px 16px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .step-icon {
        font-size: 2rem;
    }

    .step-card h4 {
        font-size: 1.05rem;
    }

    .step-card p {
        font-size: 0.9rem;
    }

    /* What We Analyze */
    .analyze-factors {
        padding: 40px 16px;
    }

    .analyze-factors h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .factors-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .factor-card {
        padding: 20px 16px;
    }

    .factor-icon {
        font-size: 2rem;
    }

    .factor-card h4 {
        font-size: 1.05rem;
    }

    .factor-card p {
        font-size: 0.9rem;
    }

    /* FAQ (interest) */
    .interest-main .faq-section {
        padding: 40px 16px;
    }

    .interest-main .faq-section h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .faq-item {
        padding: 20px 16px;
    }

    .faq-item h4 {
        font-size: 1rem;
    }

    .faq-item p {
        font-size: 0.9rem;
    }

    /* Footer */
    .interest-footer {
        padding: 24px 16px;
        font-size: 0.85rem;
    }

    .interest-footer a {
        display: inline-block;
        margin: 0 6px;
    }


    /* ============================================
     TOUCH-FRIENDLY / GLOBAL MOBILE UTILITIES
     ============================================ */

    /* Touch targets */
    button,
    .btn,
    .action-btn,
    a.button {
        min-height: 44px;
    }

    /* Active/tap feedback */
    button:active,
    .action-card:active,
    .ol-opener-card:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Remove iOS button default styling */
    button,
    input[type="button"],
    input[type="submit"] {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Better form controls */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    /* Better focus states */
    button:focus:not(:focus-visible),
    input:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible) {
        outline: none;
    }

    /* User-select prevention on interactive elements */
    .action-card,
    .ol-opener-card,
    button {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Auth modal scrollbar on mobile */
    .auth-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .auth-modal-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .auth-modal-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

    /* Safe area insets for notched devices */
    .header {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .ol-header,
    .pr-header,
    .interest-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

}

/* End 768px */


/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-title {
        font-size: 1.8rem !important;
    }

    .pr-score-circle,
    .meter-container {
        width: 160px !important;
        height: 160px !important;
    }

    .pr-score-number,
    .interest-score {
        font-size: 2.5rem !important;
    }

    .auth-modal-content {
        max-height: 95vh;
        padding: 20px 16px;
    }
}


/* ========================================
   VERY SMALL SCREENS (< 375px)
   ======================================== */
@media (max-width: 374px) {

    .hero-title,
    .ol-hero-title,
    .pr-hero-title {
        font-size: 1.6rem !important;
    }

    .action-card {
        padding: 20px 14px;
    }

    .action-card h3 {
        font-size: 1.15rem;
    }

    .action-card p {
        font-size: 0.85rem;
    }

    .action-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .pr-score-circle,
    .meter-container {
        width: 170px !important;
        height: 170px !important;
    }

    .pr-score-number,
    .interest-score {
        font-size: 2.5rem !important;
    }
}


/* ========================================
   TABLET (769px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 800px;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .action-card {
        padding: 32px 24px;
    }

    .ol-examples-grid,
    .ol-steps-grid,
    .ol-tips-grid,
    .ol-faq-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pr-steps-grid,
    .pr-faq-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .steps-grid,
    .factors-grid,
    .faq-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}