/*
 *  Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}


/*
 *  Styles
 */

* {box-sizing:border-box;}

:root {

  --brand-green: #889287;
  --brand-green-hover: #768474;
  --brand-very-light-green: #e0e2df;
  
  --base-font-family: Inter, sans-serif;
  --base-font-size: 14px;
  --body-text-color: #474141;

  --heading-font-family: Lora, sans-serif;
 
  --font-awesome: "Font Awesome 5 Free";
  
}

html,
body {position:relative; display:flex; flex-direction:column; min-height:100%; flex:1;}
main {position:relative; display:flex; flex-direction:column;}

body {background:var(--brand-very-light-green);}

body,
table,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="phone"],
select,
textarea,
button,
a.button {font-family:var(--base-font-family); font-size:var(--base-font-size); color:var(--body-text-color);}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="phone"],
select,
textarea {padding:10px; border:1px solid rgba( 0,0,0, .2 ); border-radius:3px;}

input[type="email"][readonly] {background:rgba( 0,0,0, .035 );}

label {display:flex; align-items:center; gap:5px;}

button,
a.button:link,
a.button:visited {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 20px; border:0; border-radius:5px; background:rgba( 0,0,0, .1 ); color:var(--body-text-color); font-weight:600; text-decoration:none; cursor:pointer;}

button:disabled,
a.button.button-disabled {color:rgba( 0,0,0, .25 ); cursor:default;}

button:not(:disabled):hover,
a.button:not(.button-disabled):hover {background:rgba( 0,0,0, .2 );}

button i,
a.button i {color:rgba( 0,0,0, .5 );}

button[type="submit"] {background:var(--brand-green); color:white;}
button[type="submit"]:disabled {background:rgba( 0,0,0, .25 ); color:white;}
button[type="submit"]:not(:disabled):hover {background:var(--brand-green-hover);}
form button[type="submit"] i {color:rgba( 255,255,255, .5 );}

h3 {font-family:var(--heading-font-family); font-size:24px; line-height:140%; font-weight:bold; color:var(--brand-green); text-align:center;}
h3:not(:last-child) {margin:0 0 20px 0;}

hr {display:inline-block; width:100%; margin:20px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .1 );}

.pageresponse {padding:20px 30px; background:#ffc; color:black; font-weight:bold; text-align:center;}

header {display:flex; align-items:center; gap:80px; padding:30px 20px;}
header .logo {height:30px;}
header nav {flex:1; display:flex; align-items:center; gap:15px; padding:0 15px;}
header nav a {/* padding:10px 20px; border-radius:5px; */ color:var(--brand-green); text-transform:uppercase; font-weight:400; text-decoration:none;}
header nav a:hover {/* background:rgba( 0,0,0, .05 ); */}
header nav .spacer {flex:1;}

header a:not(:has(img)) {position:relative; transition:all .3s ease;}
header a:not(:has(img))::before {content:""; position:absolute; z-index:-1; left:0; top:-4px; width:100%; height:1px; background:var(--brand-green); transform:scaleY(0); transform-origin:top; transition:all .3s ease;}
header a:not(:has(img)):hover {transform:translateY(2px); color:var(--brand-green);}
header a:not(:has(img)):hover::before {transform:scaleY(1);}

@media (max-width:600px){
  header {justify-content:space-between; gap:30px;}
  header nav a {white-space:nowrap;}
  /*
  header nav:first-child {display:none;}
  header nav:last-child {flex:initial;}
  header .logo {margin-left:15px;}
  header nav .spacer {display:none;}
  */
}

main {width:100%; max-width:400px; /* min-height:60vh; */ margin:auto; padding:40px; border-radius:20px; background:white;}

main a:link,
main a:visited {color:var(--body-text-color);}
main a:hover {text-decoration:none;}

main em {font-style:italic;}

@media (max-width:600px){
  main {flex:1; max-width:none; width:auto; margin:0 20px 20px 20px;}
  /*
  main {flex:1; max-width:100%; margin:0; border-radius:0;}
  */
}

form {display:flex; flex-direction:column; /* align-items:flex-start; */ gap:10px;}
form:not(.submitting) button i {display:none;}

fieldset {display:flex; flex-direction:column; gap:10px;}
fieldset:has(input[type="radio"]),
fieldset:has(input[type="checkbox"]) {padding:10px 0;}

.field {display:flex; flex-direction:column; gap:5px;}
.field label {font-weight:600;}

.buttons {display:flex; align-items:center; gap:15px;}
.buttons button {width:100%;}

.expiry {display:flex; align-items:center; gap:10px; font-weight:bold;}
.expiry input[type="text"] {flex:1; width:80px;}

body.login {}
body.login header {justify-content:center;}
body.login .logo {margin-left:0;}
body.login main {min-height:1px; width:auto;}
body.signup main {margin-bottom:30px;}
body.login main button {width:100%;}
body.login h1 {width:100%; margin:0 0 10px 0; text-align:center; font-family:var(--heading-font-family); font-weight:bold; font-size:24px; line-height:140%; color:var(--brand-green);}

body.login .login-forms {display:flex; gap:40px;}

@media (min-width:1101px){
  body.login main {max-width:1100px; padding:50px;}
}

@media (max-width:1100px){
  body.login main {max-width:calc(100% - 60px);}
}

@media (max-width:600px){
  body.login main {max-width:calc(100% - 40px);}
}

.welcome {margin-bottom:40px; font-family:var(--heading-font-family); font-size:1.2rem; line-height:140%;}
.welcome p:not(:last-child) {margin:0 0 20px 0;}
.welcome p.image {margin-bottom:0;}
.welcome h3 {text-align:left;}

@media (max-width:600px){
  .welcome p.image {display:none;}
}

.signup .forms {display:flex; gap:40px;}
.signup .forms form p {font-family:var(--heading-font-family); font-size:0.75rem; line-height:140%;}
.signup .forms form button:not(:last-child) {margin-bottom:20px;}

@media (min-width:1101px){
  .signup .forms {gap:0; width:100%; max-width:800px; margin:auto;}
  .signup .forms form {flex:1;}
  .signup .forms form:first-child {margin-right:40px; padding-right:40px; border-right:1px solid rgba( 0,0,0, .1 );}
}

@media (max-width:1100px){
  .signup .forms {flex-direction:column;}
  .signup .forms form:first-child h1 {display:none;}
}

.banner {padding:15px; background:#ffc; border:1px solid rgba( 0,0,0, .2 ); border-radius:5px;}
.banner.centered {text-align:center;}
.banner:not(:last-child) {margin-bottom:20px;}

.signup-welcome {width:100%; max-width:800px; /* min-height:60vh; */ margin:auto auto 40px auto; padding:40px; border-radius:20px; background:white; font-family:var(--heading-font-family); font-size:1rem; line-height:140%;}
.signup-welcome p:not(:last-child) {margin-bottom:20px;}
.signup-welcome a:link,
.signup-welcome a:visited {color:var(--body-text-color);}
.signup-welcome a:hover {text-decoration:none;}

body:has(.signup-welcome) main {max-width:800px; margin-bottom:40px;}

@media (max-width:840px){
  .signup-welcome {flex:1; max-width:none; width:auto; margin:0 20px 20px 20px;}
}

@media (min-width:1101px){
  body.signup-details main {max-width:600px;}
}