/* base reset + global */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
/* ... your global rules ... */


    
    body, p, div {
        font-weight: 400;
        line-height: 1.55;
    }

    h1 {

        font-size: 2.8rem;
        font-family: "Cormorant Garamond";
        font-style: normal;
        font-weight: 700;
        color: var(--color-too-dark);

        span {
            font-size: 2.4rem;
            font-family: "Cormorant Garamond";
            font-style: normal;
            font-weight: 700;
            color: white;
        }
    }

    h2 {

        font-family: "Monaspace Neon";
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;

        font-size: 1.8rem;
        line-height: 1.3;
        color: var(--color-too-dark);
    }

    h2.bordered-header {
        color: var(--color-too-dark);
        border-bottom: 2px solid var(--color-too-dark);
    }

    *, p {
        font-family: "Monaspace Neon";
        font-style: normal;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.55;
    }


    .button-group {
          display: flex;
          gap: 1rem;
          margin-top: 2rem;
        }

        button {
          padding: 0.75rem 1.5rem;
          border: 2px solid var(--color-too-dark);
          border-radius: 6px;
          font-size: 1rem;
          line-height: 1.55;
          font-weight: 500;
          cursor: pointer;
          transition: background-color 0.2s;
          flex-grow: 0;
        }

        button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .btn-primary {
          background-color: var(--color-too-dark);
          color: white;
        }

        .btn-primary:hover:not(:disabled) {
          background-color: var(--color-too-dark);
        }

        .btn-secondary {
          background-color: var(--color-bg);
          color: var(--color-too-dark);
          border-color: var(--color-too-dark);
        }

        .btn-secondary:hover:not(:disabled) {
          background-color: #e5e7eb;
        }

        .error-message {
          color: #dc2626;
          font-size: 0.875rem;
          margin-top: 0.5rem;
        }

        .summary {
          background: #f9fafb;
          padding: 1rem;
          border-radius: 6px;
          margin-bottom: 1rem;
        }

        .summary-item {
          display: flex;
          justify-content: space-between;
          padding: 0.5rem 0;
          border-bottom: 1px solid #e5e7eb;
        }

        .summary-item:last-child {
          border-bottom: none;
        }

        .summary-label {
          font-weight: 500;
          color: #6b7280;
        }

        .summary-value {
          color: #374151;
        }    



    body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

   .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: calc(100vw - 1.5rem);

        @media (min-width: 1024px) {
            width: 100%; 
        }
    }
        
    .container-small {
        
        max-width: 600px;
    } 
    
    .container-large {
        max-width: 1000px;
    } 

    .container-full {

        width: 100vw;
    }

    .centered {
        justify-content: center;
        align-items: center;
    }

    .flex-row {
        flex-direction: row;
    }



    nav { 

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        ul {

            list-style: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;

        }

        a { 
       
            color: var(--color-too-dark);
            font-style: normal;
            font-weight: 400;
            font-size: 1rem;
            text-transform: lowercase;
        }

    }


    footer {
        min-height: 5rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: var(--color-too-dark);
        color: white;

        > .container {
         
            flex-direction: column;

            @media(min-width: 1024px) {
                flex-direction: row;
            }
         
            > * {
                padding: 1.5rem;
                flex: 1;
                position: relative;

                @media(min-width: 1024px) {
                    flex: 1;
                }
            }   
        }

        h1 {
            color: var(--color-bg);
            font-size: 2.8rem;
            margin: 0;
                > span {
                    font-size: 2.8rem;
                }
        }

        nav {
        
            width: 100%;

            ul {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                a {
                    color: white;
                }
            }
        }
    }


    .tabs-container {
        margin-bottom: 2rem;
        width: 100%;
    }

    .tabs {
        display: flex;
        gap: 0;
        margin: 0 auto -1px auto;
        padding: 0 1.5rem;
    }

    .tab {
        padding: 1rem 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-too-dark);
        transition: all 0.2s;
        border-bottom: 2px solid var(--color-too-dark);
        border-radius: 0;
    }

    .tab:hover {
        color: black;
    }

    .tab.active {
        color: var(--color-too-dark);
        border-bottom-color: white;
        border-left: 2px solid var(--color-too-dark);
        border-top: 2px solid var(--color-too-dark);
        border-right: 2px solid var(--color-too-dark);
        border-bottom: 2px solid var(--color-bg);
    }

    .tab:last-of-type {
    
        flex: 1;
        text-align: left;
    }
    
/* ... rest ... */