:root{
    --bg-color : #F9F6FE;
    --white: #fff;
    --darker-white : hsl(0, 0%, 97%);
    --more-darker-white: hsl(0, 0%, 96%);
    --primary-color: #9042F1;
    --primary-darker: #190432;

}

*, *::before, *::after{
    margin:0;
    padding:0;
    font-family:"instrument sans", Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    background-color: var(--bg-color);
}

button{
    cursor: pointer;
}

p.error{
    font-weight: 900;
    color: rgb(88, 6, 6);
}

.toast{
    position: absolute;
    bottom:1rem;
    right:1rem;
    background-color: var(--white);
    display:flex;
    align-items: center;
    gap: 1rem;
    padding:.5rem;
    border: 1px solid rgba(0, 0, 0, 0.24);
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: .6rem;
    -webkit-border-radius: .6rem;
    -moz-border-radius: .6rem;
    -ms-border-radius: .6rem;
    -o-border-radius: .6rem;
    animation: load .5s ease forwards ;
    -webkit-animation: load .5s ease forwards ;
}

.toast img{
    animation: grow 2s infinite ease;
    -webkit-animation: grow 2s infinite ease;
}

.toast.hidden{
    display: none;
}

@keyframes grow{
    0%{
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    50%{
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
    }
    100%{
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

@keyframes load{
    from{
        opacity: 0;
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
}
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

body > header{
    height:5.5rem;
    background-color: var(--white);
    box-shadow: 0 0 2rem .2rem rgba(0, 0, 0, 0.055);
}

main{
    max-height:calc(100vh - 5.5rem);
}

hr{
    opacity: .3;
}

body > header .header-inner{
    width:95%;
    padding: 1rem 0;
    margin: auto;
    max-width: 150rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.header-inner .attribution a{
    display: flex;
    column-gap: .4rem;
    font-size: 1.4rem;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.header-inner .attribution img{
    width:4rem;
}

.logo-container{
    display: flex;
    align-items: center;
}

.logo-container h1{
    font-size: 1.8rem;
    margin: 0 0 0 .4rem;
}

.chat-section{
    max-height: 100%;
}

.chat-inner {
    width: 90%;
    max-width: 60rem;
    margin: auto;
    min-height: 0; /* Allow it to shrink if needed */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Ensure chats stay at the bottom */
    height: calc(100vh - 6rem); /* Adjust height to fit within the viewport */
}

.chat-inner .chats-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    flex: 1; /* Allow it to grow and take available space */
    overflow-y: auto; /* Enable scrolling when content overflows */
    padding: 2rem 0;
    align-items: flex-start;
    justify-content: flex-start; /* Align chats at the top */
}

.user-message{
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    align-self: flex-end;
}

.user-message .user-bubble{
    border: 1px solid rgba(0, 0, 0, 0.24);
    background-color: var(--white);
    font-size: 1.4rem;
    padding: .8rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}

.user-message .user-icon{
    width:3rem;
    aspect-ratio: 1/1;
    background-image: linear-gradient(to bottom right, hsl(98, 86%, 60%),hsl(120, 56%, 66%));
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.ruta-message{
    display: flex;
    align-items: start;
    gap: 1rem;
}

.ruta-bubble > p{
    margin: 0 0 .5rem 0;
    font-size: 1.4rem;
    font-weight: 500;
}

.ruta-bubble .ruta-status{
    border: 1px solid rgba(0, 0, 0, 0.24);
    padding-bottom: .8rem;
    max-width: fit-content;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
}

.ruta-status .top{
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    padding:.5rem 1.5rem;
    margin: 0 0 .5rem 0;
    background-color: var(--darker-white);

    p{
        font-size: 1.4rem;
        font-weight: 600;
    }
}

.ruta-status .status{
    display: flex;
    padding: 0 1.5rem .5rem;
    align-items: center;
    gap: .4rem;

    p{
        font-size: 1.2rem;
    }
}

.ruta-status button{
    margin: 0rem 0 0 1.5rem;
    padding:.5rem 1.8rem;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: .4rem;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    -ms-border-radius: .4rem;
    -o-border-radius: .4rem;
}

.ruta-status .status .dot{
   width:.5rem;
   box-shadow: 0rem 0rem 0rem .2rem rgba(128, 0, 128, 0.342);
   aspect-ratio: 1/1;
   background-color: var(--primary-color);
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.ruta-status .status .dot.done{
    width:.5rem;
    box-shadow: 0rem 0rem 0rem .2rem rgba(0, 128, 0, 0.342);
    aspect-ratio: 1/1;
    background-color: hsl(120, 78%, 45%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.ruta-status .status .dot.error{
    width:.5rem;
    box-shadow: 0rem 0rem 0rem .2rem rgba(231, 79, 79, 0.541);
    aspect-ratio: 1/1;
    background-color: hsl(0, 95%, 31%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chat-inner .chat-input{
    background-color: #fff;
    padding: .5rem;
    min-height: 9rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    align-items: end;

    textarea{
        flex:1;
        width:100%;
        background-color: transparent;
        border: none;
        resize: none;
        outline: none;
    }

    button{
        width:3rem;
        border:none; 
        border-radius: .4rem;
        background-color: var(--primary-darker);
        height:3rem;
        -webkit-border-radius: .4rem;
        -moz-border-radius: .4rem;
        -ms-border-radius: .4rem;
        -o-border-radius: .4rem;

        .stop{
            display:none;
        }
}}

.welcome-message{
    width: 90%;
    margin: auto;
}

.welcome-message h1{
    font-size: 2.6rem;
    letter-spacing: -.1rem;
    color: var(--primary-darker);
    text-align: center;
    margin: 0 0 .5rem 0;
}

.welcome-message p{
    font-size: 1.6rem;
    opacity: .8;
    text-align: center;
    width:80%;
    margin: auto;
}

.test-skills h3{
    margin: 0rem 0 .6rem;
    opacity: .8;
    font-weight: normal;
}

.test-skills .all-test-skills{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: .5rem;
    margin: 0 0 .5rem 0;
}

.all-test-skills span{
    border:1px solid rgba(0, 0, 0, 0.24);
    border-radius: 5rem;
    padding:.5rem 1.5rem;
    font-size: 1.2rem;
    background-color: var(--darker-white);
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    cursor: pointer;
}

.timeline{
    position: fixed;
    top: 5.5rem;
    height: calc(100vh - 5.5rem);
    overflow-y: auto;
    background-color: var(--white);
    left:0;
    width:100%;
    pointer-events: all;
    z-index: 500; /* sitting above chat workspace bubbles */
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.timeline.hidden{
    opacity:0;
    pointer-events: none;
    transform: translateY(20px);
}

.timeline .timeline-top{
    background-color: var(--darker-white);
    padding: 1rem 0;
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    position: sticky;
    top:0;
    left:0;
    z-index:2;

    .timeline-top-inner{
        width:90%;
        max-width: 60rem;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        gap:1rem;
    }
}

.timeline-top-inner h1{
    max-width: 20rem;
    font-size: 1.6rem;
}

.timeline-top-inner h1 .fake-h1 {
    width:34rem;
    border-radius:.5rem;
    height:3rem;
    border: 1px solid rgba(0, 0, 0, 0.11);
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, white 25%, #fafafa 50%, white 75%);
    background-size: 200% 100%;
    animation: loading-effect 1.5s infinite linear;
    color: transparent;
    -webkit-border-radius:.5rem;
    -moz-border-radius:.5rem;
    -ms-border-radius:.5rem;
    -o-border-radius:.5rem;
}

@keyframes loading-effect {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.timeline-top-inner button {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.24);
    padding:.4rem .4rem 0;
    border-radius: .4rem;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    -ms-border-radius: .4rem;
    -o-border-radius: .4rem;
}

.timeline-top-inner button.down{
    background-color: transparent;
    border:none;
}

.timeline-top-inner button > span{
    display:none;
}

.timeline-top-inner .views{
    display: flex;
    flex:1;
    max-width: 10rem;
    align-items: center;
    border-inline: 1px solid rgba(0, 0, 0, 0.24);
    padding-inline: 1.5rem;
    justify-content: space-between;
}

.views button{
    background-color: transparent;
    opacity: .8;
    border:none;
}

.views button.active{
    background-color: var(--white);
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.24);
}

.timeline-top-inner.disabled button:not(.down){
    opacity: .4;
    pointer-events: none;
}

.timeline-top-inner.disabled .down{
    opacity: 1 !important;
    pointer-events: all !important;
}

.timeline-content .timeline-content-inner{
    width:90%;
    max-width:60rem;
    padding:1rem 0;
    margin:auto;
}

.timeline-content-inner .timeline-loader{
    width: fit-content;
    margin: 5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.timeline-content-inner .timeline-error{
    max-width: 30rem;
    margin: 5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.timeline-error h2{
    font-size: 1.8rem;
    font-weight: 900;
    color: rgb(88, 6, 6);
    text-align: center;
}

.timeline-error p{
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

.timeline-error button{
    background-color: var(--more-darker-white);
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.438);
    padding: .5rem 2rem;
    margin: .5rem 0 0 0;
    border-radius: .8rem;
    -webkit-border-radius: .8rem;
    -moz-border-radius: .8rem;
    -ms-border-radius: .8rem;
    -o-border-radius: .8rem;
    font-weight: 600;
}

.timeline-loader.hidden,
.timeline-error.hidden
{
    display:none;
}

.timeline-loader p{
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem 0 0 0;
}

.timeline-node{
    border: 1px solid rgba(0, 0, 0, 0.24);
    position: relative;
    border-radius: .8rem;
    -webkit-border-radius: .8rem;
    -moz-border-radius: .8rem;
    -ms-border-radius: .8rem;
    -o-border-radius: .8rem;
    padding:0 0 .5rem 0;
    margin: 0 auto 4rem auto;
    max-width:30rem;
    page-break-inside: avoid;
    break-inside: avoid;

    .top{
        background-color: var(--darker-white);
        text-align: center;
        padding:1rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.24);
        margin:0 0 .5rem 0;
        border-top-left-radius: .8rem;
        border-top-right-radius: .8rem;
    }

    p{
        font-size:1.4rem;
        font-weight: 500;
        width:70%;
        margin:auto;
        text-align: center;
    }
}

.timeline-node:not(:last-of-type)::after{
    content: "";
    height:3rem;
    width:.1rem;
    background-color: rgba(0, 0, 0, 0.596);
    position: absolute;
    bottom:-3.5rem;
    left:50%;
}


.spinner {
    width: 56px;
    height: 56px;
    display: grid;
    border: 4.5px solid #0000;
    border-radius: 50%;
    border-right-color: var(--primary-color);
    animation: spinner-a4dj62 1s infinite linear;
 }
 
 .spinner::before,
 .spinner::after {
    content: "";
    grid-area: 1/1;
    margin: 2.2px;
    border: inherit;
    border-radius: 50%;
    animation: spinner-a4dj62 2s infinite;
 }
 
 .spinner::after {
    margin: 8.9px;
    animation-duration: 3s;
 }
 
 @keyframes spinner-a4dj62 {
    100% {
       transform: rotate(1turn);
    }
 }

 
.timeline-content .single-timeline-info{
    position: relative;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 3rem;
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0 3rem 0;
}

.single-timeline-info::after{
    content: "";
    height:85%;
    width:.1rem;
    background-color: rgba(0, 0, 0, 0.103);
    position: absolute;
    top:5rem;
    left:2rem;
}


.single-timeline-info .circle{
    width:4rem;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.single-timeline-info header .date{
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 .5rem 0;
}

.single-timeline-info header span{
    font-weight: normal;
    opacity: .8;
}

.single-timeline-info header h1{
    font-size: 1.6rem;
    margin: 0 0 .5rem 0;
    color: var(--primary-darker);
}

.single-timeline-info .intro{
    margin: 1rem 0;
    font-size: 1.2rem;
}

.single-timeline-info h3{
    margin: .8rem 0;
    opacity: .8;
    font-weight: normal;
}

.single-timeline-info .single-resource{
    display: flex;
    gap: 1rem;
    margin: 0 0 1.5rem 0;
   
}

.single-resource a{
    font-size: 1.2rem;
    font-weight: 600;
    color: black;
    border-left: 1px solid rgba(0, 0, 0, 0.24);
    padding: 0 0 0 .8rem;
}

@media screen and (min-width : 900px) {
    main{
        display:grid;
        grid-template-columns: auto 1fr;
        width:95%;
        max-width: 150rem;
        margin: auto;
        column-gap: 4rem;
    }

    .chat-section{
        width: 40rem;
    }

    .timeline{
        all:unset;
        width:100%;
        height: calc(100vh - 8.5rem);
        margin: 2rem 0 0;
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.24);
        border-radius: 1rem;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
        -ms-border-radius: 1rem;
        -o-border-radius: 1rem;
}

.timeline.hidden{
    all:unset;
        width:100%;
        height: calc(100vh - 8.5rem);
        margin: 2rem 0 0;
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.24);
        border-radius: 1rem;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
        -ms-border-radius: 1rem;
        -o-border-radius: 1rem;
}

.timeline .timeline-top{
    border-top: none;
    border-inline: none;

    .timeline-top-inner{
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

.ruta-status button{
    display:none;
}

.timeline-top-inner h1{
    max-width: 35rem;
    font-size: 2rem;
    grid-column: span 4;
}

.timeline-top-inner button.down{
    display:none;
}

.timeline-top-inner button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem;
}

.timeline-top-inner button > span{
    display:initial;
    font-weight: 500;
}

.timeline-top-inner .views{
    max-width: 100%;
    gap:.5rem;
    grid-column: span 3;
    padding-inline: 1rem;
}

.single-timeline-info .intro{
    font-size: 1.4rem;
}

.single-resource a{
    font-size: 1.3rem;
}
}

@media screen and (min-width:1024px) {
    .timeline .timeline-top .timeline-top-inner{
       display: flex;
        width:95%;
        max-width: 150rem;
        margin: auto;
        column-gap: 2rem;
    }

    .timeline-top-inner h1{
        max-width: 40rem;
    }

    .timeline-top-inner .views{
        padding-inline: 1.5rem;
        flex:1;
    }

}

/* User Profile Header styles */
.header-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.user-menu {
    display: flex;
    align-items: center;
}

.user-menu .auth-link {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-darker);
    text-decoration: none;
    padding: 0.6rem 1.6rem;
    border: 1px solid var(--primary-darker);
    border-radius: 0.6rem;
    transition: all 0.2s ease;
}

.user-menu .auth-link:hover {
    background-color: var(--primary-darker);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(25, 4, 50, 0.15);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-profile.hidden {
    display: none !important;
}

.user-avatar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(144, 66, 241, 0.2);
}

.user-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-darker);
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-btn {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(25, 4, 50, 0.6);
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0.4rem 1.2rem;
    border-radius: 0.4rem;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    color: #c1271f;
    border-color: #c1271f;
    background-color: rgba(193, 39, 31, 0.05);
}

.user-avatar-link {
    text-decoration: none;
    transition: transform 0.2s ease;
    display: block;
}

.user-avatar-link:hover {
    transform: scale(1.08);
}

.user-profile .dashboard-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.4rem 1.2rem;
    border: 1px solid var(--primary-color);
    border-radius: 0.4rem;
    transition: all 0.2s ease;
}

.user-profile .dashboard-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 2px 6px rgba(144, 66, 241, 0.15);
}

/* Header Fork button styles */
.timeline-top-inner button.fork-btn {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem 0.2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.3);
}

.timeline-top-inner button.fork-btn:hover {
    background-color: rgba(46, 125, 50, 0.05);
    border-color: rgba(46, 125, 50, 0.5);
    color: #1b5e20;
}

.timeline-top-inner button.fork-btn.hidden {
    display: none !important;
}

.timeline-top-inner button.fork-btn.show-fork {
    display: inline-flex !important;
}

/* ==========================================
   LANDING PAGE REFRESH (PHASE 4)
   ========================================== */

/* Layout & Page-level Styles */
main {
    max-height: none !important; /* Allow landing page to scroll naturally */
}

main.app-active {
    max-height: calc(100vh - 5.5rem) !important; /* Lock height when app workspace is active */
    overflow: hidden !important;
}

.landing-section {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 6rem;
}

.landing-section.hidden {
    display: none !important;
}

.app-workspace {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}

.app-workspace.hidden {
    display: none !important;
}

/* Workspace Grid Fix */
.workspace-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media screen and (min-width: 900px) {
    main {
        display: block !important; /* Avoid default column grid dividing landing and workspace */
        width: 95%;
        max-width: 150rem;
        margin: auto;
    }
    
    .workspace-inner {
        display: grid;
        grid-template-columns: 40rem 1fr; /* Keep original chat sidebar and timeline column layout */
        column-gap: 4rem;
        width: 100%;
    }
}

/* Top Mesh Gradient Glow - High Contrast */
.mesh-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55rem;
    background: 
        radial-gradient(circle at 15% -5%, rgba(144, 66, 241, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(0, 209, 108, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 0%, rgba(25, 4, 50, 0.03) 0%, transparent 60%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

/* Hero Section */
.hero-container {
    padding: 8rem 2rem 6rem;
    text-align: center;
    max-width: 85rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-badge {
    background: rgba(144, 66, 241, 0.07);
    border: 1px solid rgba(144, 66, 241, 0.18);
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 0.6rem 1.6rem;
    border-radius: 9999px;
    margin-bottom: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.hero-badge::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background-color: #00D16C;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px #00D16C;
}

.hero-container h1 {
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(3.6rem, 7vw, 6.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--primary-darker);
    margin-bottom: 2rem;
}

.hero-container h1 br {
    display: block;
}

.hero-subtitle {
    font-size: clamp(1.6rem, 2.5vw, 1.9rem);
    line-height: 1.5;
    color: rgba(25, 4, 50, 0.7);
    max-width: 68rem;
    margin-bottom: 4rem;
    font-weight: 500;
}

/* Central Playground Prompt Box - Frost Glass with Dot Grid */
.playground-card {
    position: relative;
    width: 100%;
    max-width: 72rem;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 1px 2px rgba(25, 4, 50, 0.02),
        0 12px 36px rgba(25, 4, 50, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    padding: 3rem;
    margin-bottom: 3.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.playground-card:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(144, 66, 241, 0.15);
    box-shadow: 
        0 1px 2px rgba(25, 4, 50, 0.02),
        0 20px 48px rgba(25, 4, 50, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.playground-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(144, 66, 241, 0.08) 1.2px, transparent 1.2px);
    background-size: 16px 16px;
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
}

.playground-input-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
}

@media (min-width: 600px) {
    .playground-input-form {
        flex-direction: row;
        align-items: center;
        background: var(--white);
        border: 1px solid rgba(25, 4, 50, 0.1);
        border-radius: 9999px;
        padding: 0.6rem 0.6rem 0.6rem 2rem;
        box-shadow: 0 4px 12px rgba(25, 4, 50, 0.03);
    }
}

.playground-input-form input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--primary-darker);
    outline: none;
    padding: 1.2rem 1.5rem;
}

@media (max-width: 599px) {
    .playground-input-form input {
        background: var(--white);
        border: 1px solid rgba(25, 4, 50, 0.1);
        border-radius: 1.2rem;
        padding: 1.4rem 1.6rem;
    }
}

.playground-input-form input::placeholder {
    color: rgba(25, 4, 50, 0.4);
}

.playground-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #762ad1 100%);
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    padding: 1.2rem 2.8rem;
    box-shadow: 0 4px 12px rgba(144, 66, 241, 0.25);
    transition: all 0.2s ease;
}

.playground-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(144, 66, 241, 0.35);
}

.playground-btn svg {
    transition: transform 0.2s ease;
}

.playground-btn:hover svg {
    transform: translateX(3px);
}

/* Secondary Hero Actions */
.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    background: var(--primary-darker);
    color: var(--white);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 1.2rem 2.6rem;
    border-radius: 9999px;
    border: 1px solid var(--primary-darker);
    box-shadow: 0 4px 12px rgba(25, 4, 50, 0.12);
    transition: all 0.2s ease;
}

.hero-actions .btn-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 6px 16px rgba(144, 66, 241, 0.2);
    transform: translateY(-1px);
}

.hero-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--primary-darker);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 1.2rem 2.6rem;
    border-radius: 9999px;
    border: 1px solid rgba(25, 4, 50, 0.15);
    transition: all 0.2s ease;
}

.hero-actions .btn-secondary:hover {
    background: rgba(25, 4, 50, 0.04);
    border-color: rgba(25, 4, 50, 0.3);
}

/* Feature Spotlight Section */
.features-section {
    padding: 8rem 2rem;
    background-color: var(--white);
    border-top: 1px solid rgba(25, 4, 50, 0.05);
    position: relative;
    z-index: 2;
}

.section-header {
    text-align: center;
    max-width: 65rem;
    margin: 0 auto 6rem;
}

.section-header h2 {
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-darker);
    margin-bottom: 1.5rem;
}

.section-header p {
    font-size: clamp(1.4rem, 2vw, 1.6rem);
    line-height: 1.5;
    color: rgba(25, 4, 50, 0.6);
    font-weight: 500;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 120rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feature-card {
    border-radius: 2rem;
    padding: 4rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(25, 4, 50, 0.06);
}

/* Curated HARMONIOUS Spotlight color palettes */
.glass-blue {
    background: linear-gradient(180deg, rgba(235, 244, 255, 0.4) 0%, rgba(219, 234, 254, 0.3) 100%);
}
.glass-blue:hover {
    border-color: rgba(59, 130, 246, 0.15);
}

.glass-purple {
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.4) 0%, rgba(237, 233, 254, 0.3) 100%);
}
.glass-purple:hover {
    border-color: rgba(139, 92, 246, 0.15);
}

.glass-green {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.4) 0%, rgba(204, 251, 241, 0.3) 100%);
}
.glass-green:hover {
    border-color: rgba(20, 184, 166, 0.15);
}

.glass-grey {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.4) 0%, rgba(241, 245, 249, 0.3) 100%);
}
.glass-grey:hover {
    border-color: rgba(148, 163, 184, 0.15);
}

.glass-pink {
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.4) 0%, rgba(252, 231, 243, 0.3) 100%);
}
.glass-pink:hover {
    border-color: rgba(236, 72, 153, 0.15);
}

.glass-orange {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.4) 0%, rgba(254, 237, 222, 0.3) 100%);
}
.glass-orange:hover {
    border-color: rgba(249, 115, 22, 0.15);
}

.feature-icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(25, 4, 50, 0.04);
    margin-bottom: 2.5rem;
}

.feature-card h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-darker);
    letter-spacing: -0.02em;
    margin-bottom: 1.2rem;
}

.feature-card p {
    font-size: 1.45rem;
    line-height: 1.6;
    color: rgba(25, 4, 50, 0.65);
    font-weight: 500;
    margin-bottom: 2rem;
}

/* Feature 1 Mock Chat bubble style */
.mock-chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(25, 4, 50, 0.05);
    border-radius: 1.2rem;
    padding: 1.6rem;
    margin-top: auto;
}

.mock-user {
    align-self: flex-end;
    background: var(--primary-darker);
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 1rem 1rem 0.2rem 1rem;
}

.mock-ruta {
    align-self: flex-start;
    background: var(--white);
    color: var(--primary-darker);
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(25, 4, 50, 0.08);
    border-radius: 1rem 1rem 1rem 0.2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Footer Section */
.landing-footer {
    padding: 10rem 2rem 4rem;
    background-color: var(--bg-color);
    border-top: 1px solid rgba(25, 4, 50, 0.04);
}

.footer-cta {
    text-align: center;
    max-width: 70rem;
    margin: 0 auto 8rem;
    background: linear-gradient(135deg, rgba(144, 66, 241, 0.04) 0%, rgba(0, 209, 108, 0.02) 100%);
    border: 1px solid rgba(144, 66, 241, 0.08);
    border-radius: 3rem;
    padding: 6rem 3rem;
    box-shadow: inset 0 0 24px rgba(255,255,255,0.5);
}

.footer-cta h2 {
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-darker);
    margin-bottom: 1.5rem;
}

.footer-cta p {
    font-size: clamp(1.4rem, 2vw, 1.6rem);
    line-height: 1.5;
    color: rgba(25, 4, 50, 0.6);
    margin-bottom: 3.5rem;
    font-weight: 500;
}

.footer-cta-btn {
    background: var(--primary-darker);
    color: var(--white);
    font-size: 1.45rem;
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    padding: 1.4rem 3.6rem;
    box-shadow: 0 4px 12px rgba(25, 4, 50, 0.12);
    transition: all 0.2s ease;
}

.footer-cta-btn:hover {
    background: var(--primary-color);
    box-shadow: 0 6px 16px rgba(144, 66, 241, 0.25);
    transform: scale(1.02);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(25, 4, 50, 0.06);
    padding-top: 3rem;
}

.footer-bottom p {
    font-size: 1.25rem;
    color: rgba(25, 4, 50, 0.45);
    font-weight: 500;
}

/* Guest Warning Banner */
.guest-warning-banner {
    background: linear-gradient(90deg, rgba(255, 243, 205, 0.7) 0%, rgba(255, 238, 186, 0.7) 100%);
    border: 1px solid rgba(255, 238, 186, 1);
    color: #856404;
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-size: 1.35rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 2rem auto;
    width: 90%;
    max-width: 60rem;
    box-shadow: 0 2px 8px rgba(133, 100, 4, 0.05);
}

.guest-warning-banner a {
    color: #533f03;
    text-decoration: underline;
    font-weight: 700;
}

.guest-warning-banner a:hover {
    color: var(--primary-darker);
}

.guest-warning-banner .close-banner-btn {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    font-weight: 700;
    color: #856404;
    cursor: pointer;
    line-height: 1;
}

/* Transition Animations */
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-40px);
        display: none;
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.landing-section.transition-out {
    animation: fadeOutLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.app-workspace.transition-in {
    animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body {
    position: relative;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    /* Mobile Header Layout Refinements */
    .header-inner .attribution {
        display: none !important;
    }
    
    .user-name {
        display: none !important;
    }
    
    .header-right {
        gap: 1rem !important;
    }
    
    .user-profile {
        gap: 0.6rem !important;
    }
    
    .user-profile .dashboard-link,
    .logout-btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 1.15rem !important;
    }
    
    .logo-container h1 {
        font-size: 1.8rem !important;
    }
    
    .logo-container img {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

    /* Mobile Timeline Top Inner Grid Stacking */
    .timeline-top-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto auto !important;
        grid-template-areas: 
            "close title fork export"
            "views views views views" !important;
        gap: 1.2rem 1rem !important;
        align-items: center !important;
        width: 95% !important;
    }
    
    .timeline-top-inner .down {
        grid-area: close;
    }
    
    .timeline-top-inner h1 {
        grid-area: title;
        font-size: 1.4rem !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: left;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .timeline-top-inner .views {
        grid-area: views;
        display: flex !important;
        gap: 0.6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .timeline-top-inner .views button {
        flex: 1;
        justify-content: center !important;
        font-size: 1.15rem !important;
        padding: 0.6rem 1rem !important;
    }
    
    .timeline-top-inner button.fork-btn {
        grid-area: fork;
        margin: 0 !important;
    }
    
    .timeline-top-inner .export-btn {
        grid-area: export;
    }
}

/* Sync Calendar Button */
.sync-cal-btn {
    background: var(--white);
    color: var(--primary-color);
    border: 1px solid rgba(144, 66, 241, 0.25);
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.sync-cal-btn svg {
    transition: transform 0.2s ease;
}

.sync-cal-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(144, 66, 241, 0.2);
}

.sync-cal-btn:hover svg {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .timeline-top-inner {
        grid-template-columns: auto 1fr auto auto auto !important;
        grid-template-areas: 
            "close title fork sync export"
            "views views views views views" !important;
    }
    
    .sync-cal-btn {
        grid-area: sync;
        padding: 0.5rem 1rem !important;
        font-size: 1.15rem !important;
    }
}

/* Calendar Modal Overlay & Card styling */
.calendar-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(25, 4, 50, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: all;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.calendar-modal-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(144, 66, 241, 0.15);
    border-radius: 2rem;
    width: 90%;
    max-width: 58rem;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.02),
        0 24px 48px rgba(144, 66, 241, 0.12);
    overflow: hidden;
    transform: scale(1) translateY(0);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-modal-overlay.hidden .calendar-modal-card {
    transform: scale(0.95) translateY(20px);
}

.calendar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(25, 4, 50, 0.06);
    background: rgba(25, 4, 50, 0.02);
}

.calendar-modal-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-darker);
    margin: 0;
}

.close-modal-btn {
    background: transparent;
    border: none;
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(25, 4, 50, 0.4);
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
}

.close-modal-btn:hover {
    color: #c1271f;
    transform: scale(1.1);
}

.calendar-modal-body {
    padding: 2rem 2.5rem 2.5rem;
}

.modal-subtitle {
    font-size: 1.35rem;
    color: rgba(25, 4, 50, 0.6);
    line-height: 1.4;
    margin: 0 0 2rem 0;
    text-align: left;
}

.calendar-config-form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.modal-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.modal-input-group label {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(25, 4, 50, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal-input-group input,
.modal-input-group select {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(25, 4, 50, 0.12);
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-family: inherit;
    color: var(--primary-darker);
    background: var(--white);
    outline: none;
    transition: all 0.2s ease;
    height: 4rem;
}

.modal-input-group input:focus,
.modal-input-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(144, 66, 241, 0.1);
}

/* Schedule Preview Box */
.schedule-preview-box {
    border: 1px solid rgba(144, 66, 241, 0.1);
    border-radius: 1.2rem;
    background: rgba(25, 4, 50, 0.02);
    padding: 1.5rem;
    margin-top: 0.5rem;
    text-align: left;
    transition: all 0.3s ease;
}

.schedule-preview-box.hidden {
    display: none !important;
}

.schedule-preview-box h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-darker);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.schedule-preview-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 14rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom Scrollbars */
.schedule-preview-list::-webkit-scrollbar {
    width: 0.4rem;
}

.schedule-preview-list::-webkit-scrollbar-track {
    background: rgba(25, 4, 50, 0.03);
    border-radius: 9999px;
}

.schedule-preview-list::-webkit-scrollbar-thumb {
    background: rgba(144, 66, 241, 0.2);
    border-radius: 9999px;
}

.schedule-preview-list::-webkit-scrollbar-thumb:hover {
    background: rgba(144, 66, 241, 0.4);
}

.preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: var(--white);
    border: 1px solid rgba(25, 4, 50, 0.05);
    border-radius: 0.6rem;
}

.preview-item .p-day {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.preview-item .p-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-darker);
    flex-grow: 1;
    margin-left: 1.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 2rem;
}

.preview-item .p-date {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(25, 4, 50, 0.6);
}

/* Modal Action Buttons */
.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1rem;
}

.primary-modal-actions {
    display: flex;
    gap: 1.2rem;
}

.btn-modal-calc,
.btn-modal-apply,
.btn-modal-download {
    padding: 1.2rem 2.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-align: center;
    width: 100%;
}

.btn-modal-calc {
    background: rgba(144, 66, 241, 0.08);
    color: var(--primary-color);
    border: 1px solid rgba(144, 66, 241, 0.15);
}

.btn-modal-calc:hover {
    background: rgba(144, 66, 241, 0.15);
    border-color: var(--primary-color);
}

.btn-modal-apply {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid rgba(144, 66, 241, 0.3);
}

.btn-modal-apply:hover:not(:disabled) {
    background: rgba(144, 66, 241, 0.06);
}

.btn-modal-apply:disabled,
.btn-modal-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-modal-download {
    background: #00D16C;
    color: #190432;
    box-shadow: 0 4px 10px rgba(0, 209, 108, 0.2);
}

.btn-modal-download:hover:not(:disabled) {
    background: #00fa81;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 209, 108, 0.3);
}

.btn-modal-download:active:not(:disabled) {
    transform: translateY(0);
}

@media (max-width: 600px) {
    .calendar-modal-card {
        border-radius: 1.6rem;
    }
    
    .calendar-modal-header {
        padding: 1.5rem 2rem;
    }
    
    .calendar-modal-body {
        padding: 1.5rem 2rem 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    
    .primary-modal-actions {
        flex-direction: column;
        gap: 0.8rem;
    }
}

/* Changelog Preview Section */
.changelog-preview {
    padding: 6rem 2rem 7rem;
    background: var(--darker-white);
    border-top: 1px solid rgba(25, 4, 50, 0.05);
}

.changelog-preview-grid {
    width: 95%;
    max-width: 110rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 2rem;
}

.changelog-preview-card {
    background: var(--white);
    border: 1px solid rgba(25, 4, 50, 0.08);
    border-radius: 1.6rem;
    padding: 2.2rem;
    box-shadow: 0 1.6rem 3rem rgba(25, 4, 50, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.changelog-preview-card h3 {
    font-size: 1.8rem;
    color: var(--primary-darker);
}

.changelog-preview-card p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: rgba(25, 4, 50, 0.72);
}

.changelog-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
    color: rgba(25, 4, 50, 0.6);
    font-weight: 600;
}

.changelog-pill {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(144, 66, 241, 0.12);
    color: var(--primary-darker);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
}

.changelog-date {
    font-weight: 600;
}

.changelog-preview-cta {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.changelog-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 1.2rem 2.8rem;
    border-radius: 999px;
    border: 1px solid rgba(25, 4, 50, 0.15);
    color: var(--primary-darker);
    background: var(--white);
    transition: all 0.2s ease;
}

.changelog-cta-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(25, 4, 50, 0.3);
    background: rgba(25, 4, 50, 0.04);
}

@media (max-width: 600px) {
    .changelog-preview {
        padding: 5rem 1.6rem 6rem;
    }

    .changelog-preview-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}