:root {
    --input:        rgba(200,200,200,0.9);
    --hover:        var(--brack);
    --text:         var(--white);
    --textaction:   var(--white);
    --lowlink:      var(--cafe);
    --youSay:       var(--brock) ;
}



* {  }



.bkg ~ *                    { color: inherit; }

body.front                  { color: white; }
.login                      { color: white; }
main a                      { color: white; }

main .bkg                   { position: fixed; }
main .veil                  { position: fixed !important; }
h2                          { font-family: Annie; font-size: 3em; }


.VP                             { grid-template-rows: 1fr 2fr; grid-gap: 5rem; place-items: unset; place-content: unset; padding: 0; width: max-content; height: max-content; min-height: 100vh; }
.VP > div                       { position: relative; height: auto; margin: auto; }
.VP > div:first-of-type         { margin-bottom: 0 !important; }
.VP > div:last-of-type          { margin-top: 0 !important; justify-content: space-around; }
.VP div, .VP h2, .VP p          { width: max-content; margin: auto !important; }

/*
.VP                             { grid-template-rows: 1fr 2fr; grid-gap: 5rem; place-items: unset; place-content: unset; padding: 9em 3em 3em; min-height: 100vh; }
.VP > div                       { position: relative; height: auto; margin: auto; }
.VP > div:first-of-type         { margin-bottom: 0; }
.VP > div:last-of-type          { margin-top: 0; justify-content: space-around; }

.VP > div > div                 { /*position: absolute; left: 0; right: 0; top: auto; bottom: 0; margin: auto;*/ }



.vsplit             { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.vsplit > div       { position: relative; height: 100%; width:  100%; padding: 9em 2em 3em; display: grid; place-content: center; }

.vsplit .bkg        { position: absolute; padding: 0 !important; display: block; top: 0; bottom: 0; right: 0; left: 0; }
.vsplit .veil       { position: absolute; }


.front .overlay                 { background-color: var(--lowbkg); position: absolute; max-width: unset; min-height: 100vh; }
.front .fineprint               { opacity: 0.5; padding: 1em; }
.front .backdrop                { opacity: 0.3; color: #543;  z-index: 0; }


.front p.main { -webkit-filter: drop-shadow(1px 1px 2px black); }



@media only screen and (orientation: landscape) { 
    .VP                            { grid-template-rows: 1fr 3fr; grid-gap: 3rem; padding-top: 5em; }
    .VP > div:first-child > *:first-child      { padding-top: 0; }

}


@media only screen and (max-width: 609px) {
    .VP                         { /* height: auto; */}
    .VP > div > div             { padding-bottom: 1em; }
    h2                          { font-size: 2.3em; }
}


.front button { background-color: transparent; }
.front input  { color: var(--brown); font-variation-settings: "wght" 550; }

.front label svg { opacity: 0.5; font-size: 1em; margin-right: 0.5em; padding: 0; top: unset; }
.front :checked + label svg { opacity: 1; color: var(--action); }



ul                  { margin: 0 auto; }


@media only screen and (max-width: 981px) {
    .VP .backdrop       { top: 30%;  }
}
@media only screen and (max-width: 609px) {
    .VP .backdrop       { top: 27%;  }
}




.icons span         { opacity: 0; }
.icons :hover span  { opacity: 1; }

.basic .block label  { font-size: 1em; }

.oneline             { margin: auto; }

.feats                  { text-align: center; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); justify-content: center; }
.feats li               { grid-template-rows: 4em auto 1fr auto; border: none; max-width: 16em; padding: 2em 1.2em;  place-content: center; }
.feats li *             { margin: auto; }
.feats li svg           { width: 3.5em; padding: 0; margin: auto; }
.feats li p.quote       { padding: 0; color: var(--cafli); font-size: 1.4em; }

.feats.recto            {  }
.feats.recto li         { background-color: rgba(0, 0, 0, 0.1); color: var(--text); aspect-ratio: 1 / 1; min-height: unset; grid-template-rows: auto; padding: 2em; }
.feats.recto li:hover   {  }
.feats.recto li h4      { font-family: Annie; font-variation-settings: "wght" 150; position: relative; top: 0.7em; font-size: 1.2em; }
.feats.recto li svg     { width: 5em; }

.recto li:hover div:nth-child(2)    { display: grid; grid-template-rows: 3fr 1fr; grid-gap: 0.3em; place-content: center; width: inherit; }
.recto li .quote                    { font-family: Annie;  }
.recto li .cta                      { opacity: 1; color: var(--text); padding: 0; font-variation-settings: "wght" 150; font-size: 1.2em; width: auto; }

.checks input[type] + label         { font-variation-settings: "wght" 700; }




@media only screen and (max-width: 1201px) and (orientation: landscape) { 
    .feats              { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }

}



@media only screen and (max-width: 769px) {
    main                 { font-size: 0.85em; }
    .VP                  { padding: 7em 2em 3em; }
    .VP > div > div      { padding-bottom: 1em; }
    .backdrop            { /*top: auto;*/  }
    .feats li            { aspect-ratio: unset; min-height: 20em; padding: 3em 1em; }
    .feats.recto         { grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); justify-content: center; width: 100%; }
    .feats.recto li      { min-height: unset; padding: 1em; }
    .feats.recto li svg  { width: 3.5em; }
    .feats li p.quote    { font-size: 1.2em; }
    .feats.recto li .cta { bottom: 0.5em; }
    .front .wide         { max-width: calc(100vw - 4em); }
}

@media only screen and (max-width: 609px) {
    
}

@media only screen and (max-width: 421px) {
    .feats li            { aspect-ratio: unset; max-width: unset; padding: 1em; min-height: 8em; }
    .VP                  { padding: 7em 1em 2em; grid-template-rows: 15vh auto; }
    .backdrop            { top: 25%;  }
}


/* ////////////////////     LAYOUT */

.front .footer.sub { position: relative; top: unset; height: auto; padding: 2em 1em; margin: 0; color: var(--text); -webkit-filter: none; }