:root {
  --page-width: 720px;
}

body.mobile #footer {
  display: none !important;
}
.hidden {
  display: none !important;
}
h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 {
  font-size: 1.5rem; 
  border-bottom: 1px solid var(--text);
  padding: 0rem 0 1rem 0;
  margin-bottom: 1rem;
}
h4 {
  font-size: 1.5rem; 
  padding: 0rem 0 1rem 0;
  margin-bottom: 1rem;
}
body.mobile .formsection h3 {
  padding: 1rem 1rem 1rem 1rem;
}
body.mobile .formsection h4 {
  padding: 0rem 1rem 1rem 1rem;
  
}

.section-flex-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  
}
section h3 { 
  font-size: 1.5rem; 
  border-bottom: 1px solid var(--text);
  padding: 0rem 3rem 1rem 0;
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  margin-top: -1.5rem;
  position: relative;
}

section > h3 > div.sub-text {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  font-size: 0.9rem;
  background: var(--text);
  color: white;
  padding: 0.5rem 1rem;
}
section > h3 > div.sub-text .fa-search {
  margin-right: 0.5rem;
}

h3 .fa {
  display: inline-block;
  margin-right: 1rem;
}

input.prepend-pound {
  position: relative;
}
input.prepend-pound:before {
  content: '£';
  
}
.input button#unsurevalueofinvestment-1,
.input button#unsurevalueofinvestment-2 {
  color: #999;
  border-color: #999;
  background: #9f9;
  min-width: 240px;
  box-shadow: inset 0 0 100px 20px white;
}

.input button#unsurevalueofinvestment-1:hover,
.input button#unsurevalueofinvestment-2:hover {
  color: #3b9a3b;
  border-color: #3b9a3b;
  box-shadow: inset 0 0 00px 00px white;
}
.input button#unsurevalueofinvestment-1.active,
.input button#unsurevalueofinvestment-2.active {
  background: #9f9;
  box-shadow: inset 0 0 100px 20px #3b9a3b;
  color: white;
}
.input button#unsurevalueofinvestment-1.active:hover,
.input button#unsurevalueofinvestment-2.active:hover {
  
  background: #47cb47;
  box-shadow: inset 0 0 0px 00px #3b9a3b;
  color: white;
}

.input button.submit {
  width: 200px;
  padding: 0.75rem 1.5rem;
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -2rem;
  margin-bottom: 3rem;
}
.section-header p {
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
}

img.corner-icon {
  width: 7rem;
}

p, a, label, input { font-size: 1.2rem; }
.bold { font-weight: 500; }
.small {
  font-size: 0.75rem;
}
.small-degree {
  display: inline-block;
  font-size: 0.75rem;
  transform-origin: bottom;
  transform: translateY(-8px);
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.flex-row > span {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  gap: 0.5rem;
}
body.mobile .flex-row {
  flex-direction: column;
}

.flex-row .fa-pound-sign {
  font-size: 1rem;
  color: var(--text);
}


.input .flex-row input {
  margin-top: 0;
  flex-grow: 1;
  margin-bottom: 0;
}

#banner {
  width: 100%;
  height: 400px;
  background-image: url(../img/IM-Landing-BG.jpg);
  background-size: cover;
  background-position: right bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

@media screen and (min-width: 1600px) {
  
  #banner {
/*    border: 5px solid red;*/
    height: 600px;
  }
} 
#banner h1 {
  display: inline-block;
  color: var(--text);
  
  background: #ffffffee;
  backdrop-filter: blur(9px);
  padding: 1rem 2rem;
  margin: 0 auto 0 1rem;
  width: auto;
  max-width: var(--page-width);
}
#banner p {
  display: inline-flex;
  color: var(--text);
  font-size: 1.2rem;
  background: #ffffffee;
  backdrop-filter: blur(9px);
  padding: 1rem 2rem;
  margin: 0 auto 0 1rem;
  line-height: 1.5;
  width: auto;
  max-width: var(--page-width);
}

#form-wrap {
/*  min-height: 800px;*/
  display: flex;
  flex-direction: column;
/*  flex-grow: 1;*/
/*  justify-content: flex-start;*/
/*  align-items: flex-start;*/
  min-width: 720px;
  max-width: var(--page-width);
}
body.mobile #form-wrap {
  margin-bottom: 4rem;
  min-width: 100%;
}

.formsection {
  position: relative;
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: var(--page-width);
  margin: 1rem auto;
  padding: 4rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
body.mobile .formsection {
    padding: 1rem 0;
}
.formsection:after {
  content: '';
  position: absolute;
  top: 8px;
  right: 64px;
  padding: 3rem;
  background-image: url(../img/IS-ATP-IconMethod-4.svg);
  background-size: cover;
}
body.mobile .formsection:after {
  right: 8px;
  
}
.formsection.active {
  display: flex;
}

.input {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.input.hide-next-input + .input {
  display: none;
}

.input-toggled {
  border-left: 1px solid #d9d9d9;
  padding-left: 1rem;
  padding-top: 1rem;
  margin-left: 0rem;
}

.input:has(input.error):after,
.input:has(label.error):after,
.input:has(select.error):after {
  content: 'Error: This field is required';
  margin-top: -0.5rem;
  background: red;
  color: white;
  padding: 0.25rem 0.5rem;
}
input.error,
select.error {
  border-color: red;
}
/*label.error { color: red; }*/
.input button {
  font-size: 1.1rem;
  background: var(--text);
  box-shadow: inset 0 0 100px 20px white;
  transition: 200ms linear;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1rem;
}
.input button:hover {
  background: var(--text);
  box-shadow: inset 0 0 0px 0px white;
  color: white;
  border-radius: 8px;
}
.input label {
  font-size: 1.1rem;
  font-weight: 500;
}

.input input {
  margin-top: 0.5rem;
  font-size: 1.3rem;
}
.input input:focus-within {
  outline: 1px solid hsl(200, 60%, 50%);
  outline-offset: 0px;
} 
.input select {
  border: 1px solid #d9d9d9;
  padding: 4px 8px;
  font-size: 1.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.input select:focus-within,
.input select:focus-visible {
  outline: 1px solid hsl(200, 60%, 50%);
}
#value-of-investment {
}
#value-of-investment:after {
  transform: translateY(0.5rem);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--page-width);
  margin: 0 auto;
}
.content2 {
  margin: 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--page-width);
  background: #f9f9f9;
}
body.mobile .content,
body.mobile .content2 {
  padding: 1rem;
}

.content-intro {
  background: #ffffffaa;
  
  margin: -4rem auto 2rem;
  padding: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 100px -50px #07f;
  backdrop-filter: blur(9px);
}

.buttons {
  width: 100%;
  max-width: var(--page-width);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}
body.mobile .buttons,
body.mobile .buttons-next {
  padding: 1rem;
}

.btn-prev {margin-right: auto; }
.btn-next {margin-left: auto; }
.btn-next, .btn-prev {
  background: hsl(200, 0%, 95%);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 30px -20px hsl(200, 0%, 95%), 0px 2px 4px -8px #777;
  transition: 200ms linear;
  margin-top: 1rem;
}
.btn-next:hover, .btn-prev:hover {
  box-shadow: inset 0 0 20px 20px hsl(200, 0%, 100%), 0px 8px 16px -8px #777;;
  color: var(--text);
}

.buttons-next {
  width: 100%;
  max-width: var(--page-width);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0rem;
  border-top: 1px solid #e9e9e9;
  margin-top: 2rem;
}
.buttons-next button,
.buttons button {
  border: 1px solid #ddd;
  color: #777;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  
}
.buttons button.chosen {
  background: #2abf69;
  color: white;
  border-color: #2abf69;
  box-shadow: inset 0 0 100px 20px #2abf69;
}
.buttons button[data-value="no"].chosen {
  background: #bf2a52;
  color: white;
  border-color: #bf2a52;
  box-shadow: inset 0 0 100px 20px #bf2a52;
}

a.video-button  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
a.video-button span {
  display: block;
  margin-top: 1rem;
  color: var(--text);
  font-weight: 400;
}
a.video-button img {
  height: 12rem;
  border: 2px solid #555;
  border-radius: 6px;
  object-fit: cover;
}

button[data-for] {
  width: auto;
  display: inline-block;
  border-color: #ddd;
  color: #777;
}

button[data-for].active {
  border-color: var(--text);
  color: var(--text);
}

/* toggly fields */
#companies-house { display: none; }
.buttons:has(button.chosen[data-value="yes"]) + #companies-house {
  display: flex;
  flex-direction: column;
}
#trading-styles { display: none; }
.buttons:has(button.chosen[data-value="yes"]) + #trading-styles {
  display: flex;
  flex-direction: column;
}
#vat-number { display: none; }
.buttons:has(button.chosen[data-value="yes"]) + #vat-number {
  display: flex;
  display: flex;
  flex-direction: column;
}




.panel {
  width: auto;
  max-width: var(--page-width);
  padding: 4rem;
  border: 1px solid #ddd;
  display: none;
  flex-direction: column;
}
.panel.active {
  display: flex;
}

#atp-buttons {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 550px;
}
body.mobile #atp-buttons {
  width: 100%;
}
.atp-button {
  --spacing: 120px;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: 180px;
  transform-origin: center;
  transform: scale(0.75);
  transition: 200ms ease;
  filter: saturate(.5);
  opacity: 1;
  z-index: 1;
}
body.mobile .atp-button {
  
  --spacing: 80px;
  width: 120px;
}

.atp-button:nth-child(1) {
  margin-left: 0px;
}
.atp-button:nth-child(2) {
  margin-left: var(--spacing);
}
.atp-button:nth-child(3) {
  margin-left: calc(var(--spacing) * 2);
}
.atp-button:nth-child(4) {
  margin-left: auto;
  filter: saturate(1);
}

.atp-button.active:nth-child(1) {
  margin-left: 0px;
}
.atp-button.active:nth-child(2) {
  margin-left: calc(var(--spacing) + 20px);
}
.atp-button.active:nth-child(3) {
  margin-left: calc((var(--spacing) * 2) + 20px);
}
.atp-button.active {
  transform: scale(1);
  filter: saturate(1);
  opacity: 1;
  z-index: 2;
}
.atp-button img {
  object-fit: contain;
}



.stage-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

body.small .stage-wrap {
  flex-direction: row;
}

.stage-key {
  min-width: 100px;
  min-height: 100px;
}

.stage-key ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
body.small .stage-key ul {
  
  flex-direction: column;
  gap: 3rem;
}
.stage-key ul:after {
  content: '';
  background: var(--text);
  height: 6px;
  position: absolute;
  bottom: 22px;
  left: 32px;
  right: 32px;
  z-index: -1;
}
body.small .stage-key ul:after {
  height: calc(100% - 50px);
  width: 5px;
  top: 18px;
  left: calc(50% - 3px);
  right: auto;
}
.stage-key li {
  --stage-color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.stage-key li.active {
  --stage-color: red;
}
.stage-key li .circle {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: white;
  border: 6px solid var(--stage-color);
  box-shadow: 0 0 0px 6px white;
  transition: 500ms linear;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text);
  font-weight: 700;
  font-size: 1.3rem;
  
}
.stage-key li:hover .circle {
  background: yellow;
}
.stage-key li p {
  font-size: 0.9rem;
  margin: 0.1rem 0 0.5rem 0;
  font-weight: 700;
  background: white;
  color: var(--stage-color);
  transform-origin: center;
  transform: scale(0.5);
  transition: 200ms linear;
  opacity: 0;
}
.stage-key li:hover p,
.stage-key li.active p {
  transform: scale(1.4);
  opacity: 1;
}
.stages {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  padding: 5rem 3rem 2rem 3rem;
  background: #f9f9f9;
}
body.mobile .stages {
  padding: 1rem 1rem 1rem 1rem;
}
.stage {
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transition: opacity 0.5s ease;
}
.stage.active {
  opacity: 1;
  pointer-events: all;
}

@keyframes stage {
  from: { 
    opacity: 0;
    border: 3px solid red;
  }
  to: {
    opacity: 1;
    border: 3px solid lime;
  }
}