/* Script Product Page Styles */

/* Top Navigation with Links */
.top-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(0.625rem);
}

.top-links {
    display: flex;
    gap: 2rem;
}

.top-links a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.0625rem;
    transition: var(--transition);
    opacity: 0.8;
}

.top-links a:hover {
    opacity: 1;
    color: var(--accent-gold);
}

.top-links .highlight-link {
    color: var(--accent-gold);
    font-weight: 700;
}

/* Adjust Navbar padding when inside top-nav-bar */
.top-nav-bar .navbar {
    padding: 1rem 0;
}

/* Hero / Screenplay Animation Section */
.screenplay-animation-section {
    background-color: #e0f2fe;
    /* Light blue background as in mockup */
    height: 100vh;
    min-height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding-top: 5rem;
    /* Account for fixed header */
}

#node-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* Increased to ensure visibility above other elements */
}


.animation-container {
    width: 100%;
    max-width: 87.5rem;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    padding: 0 2rem;
    position: relative;
    z-index: 20;
    height: 100%;
    align-items: center;
}

.side-column {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    height: 100%;
    justify-content: center;
}

.left-column {
    align-items: flex-end;
}

.right-column {
    align-items: flex-start;
}

/* Center Screenplay */
.center-column {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.screenplay-paper {
    background: #fdfdfc;
    width: 100%;
    max-width: 37.5rem;
    box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.15);
    border: 0.0625rem solid #ddd;
    padding: 3rem;
    position: relative;
}

.screenplay-content {
    font-family: 'Courier Prime', 'Courier New', Courier, monospace;
    color: #222;
    font-size: 0.875rem;
    line-height: 1.4;
}

.scene-heading {
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-weight: bold;
    width: 100%;
}

.page-number {
    float: right;
    font-weight: normal;
}

.action {
    margin-bottom: 1.2rem;
}

.character {
    text-align: center;
    margin-top: 1.5rem;
    text-transform: uppercase;
    width: 60%;
    margin-left: 20%;
    display: block;
}

.parenthetical {
    text-align: center;
    margin-left: 25%;
    width: 50%;
    display: block;
}

.dialogue {
    margin-left: 20%;
    width: 60%;
    margin-bottom: 1.2rem;
}

.highlight {
    background-color: #fef08a;
    padding: 0.125rem 0.25rem;
    border-radius: 0.2rem;
}

.highlight-green {
    background-color: #bbf7d0;
    padding: 0.125rem 0.25rem;
    border-radius: 0.2rem;
}

/* Injection Boxes */
.injection-box {
    background: #f9fafb;
    /* Main Shell Light */
    border: 0.0625rem solid #c7ccd5;
    /* Light Border */
    border-radius: 0.375rem;
    width: 100%;
    max-width: 17.5rem;
    box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.1);
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.injection-box:active {
    cursor: grabbing;
    transform: scale(1.02);
    z-index: 100;
}

/* Box Window Header */
.box-window-header {
    background: #fff4c0;
    /* Soft Yellow Header Bg */
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 0.0625rem solid #c7ccd5;
}



.box-close {
    font-size: 0.875rem;
    color: #aa7a00;
    font-weight: bold;
    cursor: default;
}

/* Box Body */
.box-body {
    padding: 0;
    /* Let internal areas handle padding */
    flex: 1;
    background: #ffffff;
}

/* Notes List (Board Mode Style) */
.notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notes-list li {
    font-size: 0.8rem;
    color: #444;
    padding: 0.625rem 0.75rem;
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
    line-height: 1.4;
    background: #ffffff;
}

.notes-list li:nth-child(even) {
    background: #fffdf5;
    /* Row Stripe Soft Yellow */
}

.notes-list li:last-child {
    border-bottom: none;
}

/* Image Placeholder */
.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.625rem;
    border: 0.0625rem dashed #e2d3a5;
    margin: 0.75rem;
    border-radius: 0.25rem;
    color: #aa7a00;
}

.image-placeholder svg {
    width: 2rem;
    height: 2rem;
    opacity: 0.7;
}

.image-placeholder span {
    font-size: 0.7rem;
    font-family: monospace;
    opacity: 0.8;
}

/* XL Table (Board Mode Style) */
.xl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.xl-table th {
    text-align: left;
    background: #fff4c0;
    padding: 0.5rem 0.75rem;
    color: #aa7a00;
    font-weight: 700;
    border-bottom: 0.0625rem solid #c7ccd5;
}

.xl-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
    color: #444;
}

.xl-table tr:nth-child(even) td {
    background: #fffdf5;
}

.status-ok {
    color: #166534;
    font-weight: bold;
}

.status-pending {
    color: #aa7a00;
    opacity: 0.6;
}

/* Music Notation */
.music-notation {
    padding: 0.9375rem 0.75rem;
    text-align: center;
}

.staff {
    border-top: 0.0625rem solid #aa7a00;
    border-bottom: 0.0625rem solid #aa7a00;
    padding: 0.375rem 0;
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
}

.staff::after,
.staff::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0.0625rem;
    background: rgba(170, 122, 0, 0.3);
}

.staff::after {
    top: 33%;
}

.staff::before {
    bottom: 33%;
}

.clef {
    font-size: 1.5rem;
    font-family: serif;
    color: #aa7a00;
}

.notes-strip {
    font-size: 1.2rem;
    letter-spacing: 0.375rem;
    color: #444;
}

.music-desc {
    font-size: 0.7rem;
    font-style: italic;
    color: #aa7a00;
    opacity: 0.8;
}

/* Calendar */
.calendar-view {
    padding: 0.75rem;
    text-align: center;
}

.cal-header {
    font-size: 0.75rem;
    font-weight: bold;
    color: #aa7a00;
    margin-bottom: 0.625rem;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.cal-grid span {
    font-size: 0.7rem;
    padding: 0.375rem;
    color: #666;
}

.cal-today {
    background: #fff4c0;
    border-radius: 0.25rem;
    font-weight: bold;
    color: #aa7a00 !important;
    border: 0.0625rem solid #e2d3a5;
}

.cal-event {
    font-size: 0.65rem;
    background: #fffdf5;
    padding: 0.5rem;
    border: 0.0625rem solid #e2d3a5;
    border-radius: 0.25rem;
    color: #aa7a00;
}

.box-text-internal {
    font-size: 0.8rem;
    color: #444;
    padding: 0.75rem;
    line-height: 1.4;
}

.foley-item {
    font-size: 0.75rem !important;
    font-style: italic;
}

.float-wrapper {
    width: 100%;
    max-width: 17.5rem;
}

@media (min-width: 1025px) and (max-width: 1600px) {
    .screenplay-animation-section {
        align-items: flex-start;
        padding-top: 15rem;
        margin-top: -8rem;
        /* Clip the empty overhead under the navbar */
        overflow: hidden;
    }
}

/* ─── Fix for 1080p screens where actual viewport height is ~950px ─── */
/* On real monitors, OS chrome (taskbar, browser bar) reduces 1080px to ~950px */
@media (min-width: 1025px) and (max-height: 980px) {
    .screenplay-animation-section {
        height: auto;
        min-height: 100vh;
        /* Give bottom boxes breathing room */
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .screenplay-animation-section {
        height: 75vh;
        /* Reduced from 100vh to tighten the top space */
        min-height: 50rem;
        padding: 2rem 0 20rem;
        /* Reduced top padding */
    }




    .animation-container {
        grid-template-columns: 1fr 1.8fr 1fr;
        /* Better balance for iPad Pro */
        gap: 0.5rem;
        /* Reduced gap for smaller tablets */
        padding: 0 1rem;
        /* Reduced padding */
        align-items: center;
        height: auto;
    }


    .side-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70rem;
        /* Condensed height for better fit on all tablets */
        /* Fixed height for consistent vertical distribution */
        padding: 4rem 0;
        transform: translateY(18rem);
        /* Move boxes down to align with lowered script */
    }



    .screenplay-paper {
        padding: 4rem 3rem;
        height: 85rem;
        /* Taller script body to contain 3 rows of highlights */
        width: 100%;
        box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.08);
        transform: translateY(20rem);
        /* Script lowered to overlap Section 2 */
    }



    .screenplay-content {
        font-size: 0.95rem;
        /* Larger for tablet readability */
        line-height: 1.6;
    }

    .float-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        perspective: 1000px;
    }

    .injection-box {
        width: 100%;
        max-width: 12rem;
        /* Slightly smaller for iPad Mini */
        /* More compact, like in the mockup */
        border-radius: 0.4rem;
    }



    .box-title {
        font-size: 0.75rem;
    }

    .box-text,
    .notes-list li {
        font-size: 0.65rem;
        line-height: 1.4;
    }

    .xl-table th,
    .xl-table td {
        padding: 0.4rem;
        font-size: 0.6rem;
    }

    .music-desc {
        font-size: 0.6rem;
    }

    .cal-header {
        font-size: 0.7rem;
    }

    .cal-grid span {
        font-size: 0.6rem;
    }

    /* Use position relative and top to lift bottom boxes out of the flex-end slot 
       without affecting the middle boxes in the space-between layout */
    .float-2,
    .float-6 {
        position: relative;
        top: -8rem;
        /* Adjusted lift value, tweak if necessary */
    }








}





@media (max-width: 767px) {
    .screenplay-animation-section {
        height: auto;
        padding: 0 0 8vh;
        margin-top: -15rem;
        overflow: hidden;
        background-color: #f0f9ff;
    }

    .animation-container {
        display: grid;
        grid-template-columns: 1fr 2.2fr;
        gap: 0.5rem;
        padding: 0 0.5rem;
        height: auto;
        align-items: start;
        padding-top: 2vh;
    }

    .side-column {
        display: contents;
    }

    .center-column {
        width: 100%;
        grid-column: 2;
        grid-row: 1 / span 3;
        transform: translateY(1vh);
    }

    /* Hide unused boxes */
    .float-1,
    .float-3,
    .float-5 {
        display: none !important;
    }

    /* Position used boxes — all vh-based so they scale with screen height */
    .float-4 {
        /* Table / Finances */
        grid-column: 1;
        grid-row: 1;
        top: 30vh;
    }

    .float-6 {
        /* Music */
        grid-column: 1;
        grid-row: 2;
        top: 45vh;
    }

    .float-2 {
        /* Image */
        grid-column: 1;
        grid-row: 3;
        top: -5vh;
    }

    .float-wrapper {
        width: 100%;
        max-width: 12rem;
        margin: 0 auto;
        position: relative;
    }

    .screenplay-paper {
        padding: 1.5rem 1rem;
        min-height: 80vh;
        /* Always fill the screen height */
        height: auto;
        width: 90%;
        margin: 0 auto;
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
    }

    .screenplay-content {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .injection-box {
        width: 100%;
        border-radius: 0.3rem;
    }

    .box-title {
        font-size: 0.7rem;
    }

    .box-text,
    .notes-list li {
        font-size: 0.6rem;
        line-height: 1.3;
    }

    .xl-table th,
    .xl-table td {
        font-size: 0.75rem;
        padding: 0.3rem;
    }

    .music-desc {
        font-size: 0.75rem;
    }

    .hide-mobile {
        display: none;
    }

    .scene-heading,
    .action,
    .dialogue {
        margin-bottom: 0.8rem;
    }

    .character {
        margin-top: 1rem;
        margin-left: 5%;
        width: 90%;
    }

    .dialogue {
        margin-left: 5%;
        width: 90%;
    }

    .parenthetical {
        margin-left: 10%;
        width: 80%;
    }
}


/* ─── iPhone SE & small phones (≤ 390px wide) ─── */
@media (max-width: 390px) {
    .screenplay-animation-section {
        margin-top: -14rem;
        padding: 0 0 5vh;
    }

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

    .float-wrapper {
        max-width: 9rem;
    }

    .float-4 {
        top: 32vh;
    }

    .float-6 {
        top: 46vh;
    }

    .float-2 {
        top: -8vh;
    }

    .screenplay-paper {
        min-height: 72vh;
    }

    .screenplay-content {
        font-size: 0.75rem;
    }

    .xl-table th,
    .xl-table td {
        font-size: 0.6rem;
        padding: 0.2rem;
    }

    .music-desc {
        font-size: 0.6rem;
    }
}


/* Intro Section */
.product-intro {
    padding: 8rem 10% 6rem;
    text-align: center;
    background-color: #FFF9E5;
    color: #555555;
}

.product-intro h1 {
    font-family: 'Fraunces', serif;
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
    color: #7A5800;
}

.intro-text,
.intro-cta {
    font-family: 'Lora', serif;
    max-width: 56.25rem;
    margin: 0 auto 2rem;
    font-size: 1.25rem;
    color: #555555;
    line-height: 1.8;
}

.intro-cta {
    font-weight: 700;
    margin-bottom: 3rem;
}

.intro-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.download-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.download-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.divider-vertical {
    width: 1px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.1);
}

.mobile-only-message {
    display: none;
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(170, 122, 0, 0.05);
    border-radius: 0.5rem;
    border: 1px dashed rgba(170, 122, 0, 0.3);
}

.mobile-only-message p {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    color: #7A5800;
    line-height: 1.6;
    margin: 0;
}


.btn-primary,
.btn-secondary {
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    font-size: 1.1rem;
    border-radius: 0.375rem;
}

.product-intro .btn-primary {
    background: #FFF4C0;
    color: #AA7A00;
    border: 0.0625rem solid #E2D3A5;
}

.product-intro .btn-primary:hover {
    background: #fff0a8;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(170, 122, 0, 0.1);
}

.product-intro .btn-secondary {
    border: 0.0625rem solid #E2D3A5;
    color: #AA7A00;
}

.product-intro .btn-secondary:hover {
    background: rgba(255, 244, 192, 0.3);
    transform: translateY(-0.125rem);
}

.mirror-layout {
    flex-direction: row-reverse;
}

.f-scheme-section.magazine-layout h2 {
    font-family: 'Fraunces', serif;
    color: #111;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.2;
}

/* Feature Mockups - Placeholders */
.feature-img-1 {
    background-image: url('media/markdown-feature.jpg');
    background-size: cover;
    background-position: center;
}

.feature-img-2 {
    background-image: url('media/edit-feature.jpg');
}

.feature-img-3 {
    background-image: url('media/image-video-feature.jpg');
}

.feature-img-4 {
    background-image: url('media/music-feature.jpg');
}

.feature-img-5 {
    background-image: url('media/budget-feature.jpg');
}

.mockup-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: 0.0625rem solid #EFE4CF;
    /* Lighter shade of brown for a softer frame */
    border-radius: 0.5rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
    /* Increased opacity for better visibility */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mockup-image-container:hover {
    transform: scale(1.01);
    box-shadow: 0 0.9375rem 2.5rem rgba(0, 0, 0, 0.15);
}

/* Lightbox Overlay */
.lightbox-overlay {
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(0.3125rem);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border: 0.0625rem solid #E2D3A5;
    border-radius: 0.25rem;
    box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.5);
    cursor: default;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 1.875rem;
    right: 2.5rem;
    color: #f1f1f1;
    font-size: 3.125rem;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
    line-height: 1;
}

.lightbox-close:hover {
    color: #E2D3A5;
    transform: scale(1.1);
}

/* Pricing Section */
.pricing-section {
    padding: 8rem 10%;
    background: #FFF9E5;
    /* Same background as Section 2 */
    text-align: center;
}

.pricing-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 68.75rem;
    margin: 0 auto;
}

.pricing-card {
    background: #ffffff;
    border: 0.0625rem solid #E2D3A5;
    padding: 3rem;
    flex: 1;
    min-width: 20rem;
    max-width: 28.125rem;
    border-radius: 0.75rem;
    transition: var(--transition);
    box-shadow: 0 0.625rem 1.875rem rgba(170, 122, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.highlighted-card {
    border: 0.125rem solid rgba(170, 122, 0, 0.3);
    transform: scale(1.02);
    box-shadow: 0 1.25rem 3.125rem rgba(170, 122, 0, 0.08);
}

.highlighted-card:hover {
    border-color: rgba(170, 122, 0, 0.6);
    transform: scale(1.03);
}

.pricing-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    letter-spacing: 0;
    color: #7A5800;
}

.price {
    margin-bottom: 3rem;
    color: #3A2A1E;
}

.price .currency {
    font-size: 1.5rem;
    vertical-align: top;
    color: #AA7A00;
}

.price .amount {
    font-size: 4rem;
    font-weight: 700;
}

.price .period {
    font-size: 1.2rem;
    color: #555555;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 3rem;
    text-align: left;
    display: inline-block;
}

.pricing-features li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #555555;
    font-family: 'Lora', serif;
}

.tick {
    color: #AA7A00;
    margin-right: 1rem;
}

.btn-buy {
    display: block;
    background: #FFF4C0;
    color: #AA7A00;
    border: 0.0625rem solid #E2D3A5;
    padding: 1.2rem;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    margin-bottom: 2rem;
    border-radius: 0.375rem;
    transition: var(--transition);
}

.btn-buy:hover {
    background: #fff0a8;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(170, 122, 0, 0.1);
}

.trial-hint {
    font-size: 0.9rem;
    color: #555555;
    font-family: 'Lora', serif;
}

.trial-hint a {
    color: #AA7A00;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .pricing-container {
        gap: 3rem;
    }

    .pricing-card {
        padding: 2.5rem 1.5rem;
    }

    .highlighted-card {
        transform: none;
    }

    .highlighted-card:hover {
        transform: scale(1.01);
    }

    .price .amount {
        font-size: 5rem;
    }

    .price .currency {
        font-size: 2.5rem;
    }

    .price .period {
        font-size: 1.8rem;
    }

    .pricing-card h3 {
        font-size: 2.8rem;
    }

    .pricing-features {
        margin-bottom: 2rem;
    }

    .pricing-features li {
        font-size: 1.6rem;
    }

    .btn-buy {
        font-size: 1.6rem;
    }

    .trial-hint {
        font-size: 1.4rem;
    }

    .f-scheme-section.magazine-layout {
        flex-direction: column !important;
        padding: 6rem 3rem;
        /* 3rem gap left and right */
        gap: 4rem;
        text-align: center;
    }

    .f-text-part,
    .f-image-part {
        width: 100% !important;
        padding: 0 !important;
    }

    .f-text-part {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mockup-image-container {
        width: 100%;
        height: 40rem;
        /* Much bigger image for tablet */
        border-radius: 1rem;
    }

    .f-scheme-section.magazine-layout h2 {
        font-size: 3.5rem;
        margin-bottom: 2rem;
    }

    .narrative-subtitle {
        font-size: 1.4rem;
        max-width: 45rem;
        margin: 0 auto 3rem;
    }

    .narrative-content ul {
        text-align: left;
        max-width: 40rem;
        margin: 0 auto;
    }



    .product-intro {
        padding: 6rem 5%;
    }




    .product-intro h1 {
        font-size: 4rem;
    }

    .intro-text,
    .intro-cta {
        font-size: 2.2rem;
    }

    .mobile-only-message p {
        font-size: 2.2rem;
    }

    .desktop-only {
        display: none !important;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 2.2rem;
        padding: 1.5rem 2rem;
    }


    .mobile-only-message {
        display: block;
    }

    .top-links {
        gap: 1.5rem;
    }


    .top-link {
        font-size: 0.9rem;
    }
}


@media (max-width: 768px) {
    .f-scheme-section.magazine-layout {
        flex-direction: column !important;
        padding: 4rem 1.5rem;
        gap: 2.5rem;
    }

    .f-text-part,
    .f-image-part {
        width: 100% !important;
        padding: 0 !important;
    }

    .f-scheme-section.magazine-layout h2 {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .narrative-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .narrative-content ul li {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .mockup-image-container {
        border-radius: 0.75rem;
    }

    #download {
        padding: 5rem 1.5rem;
    }

    .lightbox-close {
        top: 1rem;
        right: 1.5rem;
        font-size: 2.5rem;
    }

    .top-nav-bar {
        padding: 1rem 1.5rem;
    }

    .top-links {
        display: none;
        /* Hide secondary top links on mobile to save space */
    }

    .product-intro {
        padding: 6rem 1.5rem 4rem;
    }

    .product-intro h1 {
        font-size: 3.5rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .intro-text,
    .intro-cta {
        font-size: 2rem;
        line-height: 1.6;
    }

    .intro-buttons {
        flex-direction: column;
        gap: 1.2rem;
        padding: 0 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 1.2rem;
        font-size: 2rem;
    }
}



@media (max-width: 1024px) {

    .lang-dropdown-btn,
    .lang-dropdown-menu .lang-btn {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {

    .lang-dropdown-btn,
    .lang-dropdown-menu .lang-btn {
        font-size: 1.8rem;
    }

    .pricing-container {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .pricing-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only-message {
        display: block;
    }

    .mobile-only-message p {
        font-size: 1.8rem;
    }

    .pricing-card h3 {
        font-size: 3rem;
    }

    .price .amount {
        font-size: 5rem;
    }

    .price .currency {
        font-size: 2.5rem;
    }

    .price .period {
        font-size: 1.8rem;
    }

    .pricing-features li {
        font-size: 1.8rem;
    }

    .btn-buy {
        font-size: 1.8rem;
    }

    .trial-hint {
        font-size: 1.5rem;
    }
}