form input,
form textarea,
form fieldset,
form button {
    display:block;
}

form input {
    font-size:inherit;
    padding:0.5rem 0.75rem;
    border-radius:0.5rem;
    border:none;
    color:var(--grey);
}

form fieldset {
    padding:0.45rem 1rem 0.9rem 1rem;
    border-radius:0.8rem;
    border: solid 2px var(--white);
    width: 100%;
    margin-block:0.5rem;
}

form fieldset legend {
    padding-inline:0.5rem;
}

form fieldset input {
    width:100%;
    height:100%;
}

form fieldset:has(textarea) {
    border-bottom-right-radius: 0;
}

form fieldset textarea {
    width:100%;
    height:100%;
    resize: vertical;
    font-size:inherit;
    padding:0.5rem 0.75rem;
    border-radius:0.5rem;
    border-bottom-right-radius: 0;
    border:none;
    color:var(--grey);
}

form fieldset legend:has(+input[required])::after {
    content:'*';
    margin-left:0.4rem;
    color:var(--gold-acnt);
}

form button[type=submit] {
    margin-top:1rem;
}



form#get-started {
    max-width: calc(var(--max-width) / 2);
    margin:0 auto;
    padding:1rem;
    padding-top:0;
    display:flex;
    align-items: center;
    flex-direction: column;
}

#get-started h1 {
    font-size:2rem;
    font-weight:600;
    text-align:center;
    text-wrap: balance;
    padding:3rem;
    padding-bottom:1rem;
}

#get-started h1 .accent {
    display:inline;
    background-image:var(--gold);
    background-clip:text;
    color:transparent;
    text-shadow: var(--gold-glow);
}

#get-started .name {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    column-gap:1rem;
    row-gap:0.5rem;
    width:100%;
}

#get-started .name fieldset {
    margin-block:0;
}

#get-started button.cta {
    background-image:var(--gold);
    padding:.4rem .6rem 0.4rem 0.75rem;
    border:none;
    border-radius:0.5rem;
    color:#232428;
    box-shadow: var(--shadow);
    text-shadow: none;

    font-weight:500;
    font-size:1.1rem;

    display:flex;
    align-items:center;
    margin-inline:auto;
    gap:0.5rem;

    transition:box-shadow 0.3s ease-out, gap 0.3s ease-out, transform 0.3s ease-out;

    margin-top:1rem;
}

#get-started button.cta svg {
    fill:var(--grey);
    width:1.5rem;
}

#get-started button.cta:hover {
    cursor:pointer;
    gap:1rem;
    box-shadow: var(--gold-glow);
    transform:translateY(-.125rem);
}

#get-started #next.hidden {
    opacity: 0.5;
}

#get-started #next.hidden:hover {
    cursor:not-allowed;
    gap:0.5rem;
    box-shadow: var(--shadow);
    transform:translateY(0);
}


#get-started .dream {
    width:100%;
    display:grid;
    grid-template-rows:0fr;
    transition: grid-template-rows 0.5s ease-out, opacity 0.5s ease-out 0.5s;
    opacity: 0;
}

#get-started .dream div {
    overflow:hidden;
}

#get-started .dream.show {
    grid-template-rows:1fr;
    opacity: 1;
}