:root {
  --white: #FFFFFF;
  --blue: #0D68B1;
  --sky: #059FDE;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --ink: #0B2236;
  --muted: #52667A;
  --line: #D5E1EC;
  --field: #F5F9FC;
  --err: #B3261E;
  --ok-soft: #E4F4FB;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08131D;
    --card: #0F2030;
    --ink: #E8F1F8;
    --muted: #9FB4C6;
    --line: #223A50;
    --field: #0B1824;
    --err: #FF8A80;
    --ok-soft: #0F2D40;
  }
}

:root[data-theme="dark"] {
  --bg: #08131D;
  --card: #0F2030;
  --ink: #E8F1F8;
  --muted: #9FB4C6;
  --line: #223A50;
  --field: #0B1824;
  --err: #FF8A80;
  --ok-soft: #0F2D40;
}

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font: 400 17px/1.55 Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* .hero {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue) 55%, var(--sky) 100%);
  color: var(--blue);
  padding: 28px 20px 150px;
} */

.hero {
  background: var(--white);
  color: var(--blue);
  padding: 28px 20px 150px;
}

.in {
  max-width: 1040px;
  margin: 0 auto;
}

.brand {
  font: 800 22px/1 "Bricolage Grotesque", Georgia, sans-serif;
  margin-bottom: 56px;
}

h1 {
  font: 800 clamp(34px, 5.2vw, 56px)/1.04;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  /*max-width: 16ch;*/
}

.lead {
  margin: 0;
  max-width: 46ch;
  opacity: 0.92;
  color:#0B2236;
}

.main {
  max-width: 1040px;
  margin: -110px auto 0;
  padding: 0 20px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 130px 0 0;
  display: grid;
  gap: 16px;
  align-self: end;
}

.facts {
  padding-top: 128px;
}

.facts li {
  padding-left: 16px;
  border-left: 3px solid var(--sky);
}

.facts b {
  display: block;
  font-weight: 600;
}

.facts span {
  color: var(--muted);
  font-size: 15px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 18px 40px -22px rgba(13, 104, 177, 0.55);
  grid-column: 2;
  grid-row: 1;
}

.facts {
  grid-column: 1;
  grid-row: 1;
}

.card h2 {
  /*font: 600 24px/1.2 "Bricolage Grotesque", Georgia, sans-serif;*/
  font: 600 24px/1.2;
  margin: 0 0 4px;
}

.sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
}

label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.field {
  margin-bottom: 20px;
}

.hint {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}

.bvnbox {
  position: relative;
}

input[type=text], textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
}

input#bvn {
  font: 600 24px/1 "Bricolage Grotesque", ui-monospace, monospace;
  letter-spacing: 0.08em;
  padding-right: 64px;
}

.count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

textarea {
  min-height: 104px;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.invalid input[type=text],
.invalid textarea {
  border-color: var(--err);
}

.err {
  display: none;
  color: var(--err);
  font-size: 14px;
  margin-top: 6px;
}

.invalid .err,
.err.on {
  display: block;
}

.confirm {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 400;
}

.confirm input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--blue);
}

button.go {
  width: 100%;
  font: 600 17px/1 Figtree, sans-serif;
  background: var(--blue);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
}

button.go:hover {
  background: #0B5A9A;
}

button.go:disabled {
  opacity: 0.65;
  cursor: wait;
}

.safe {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
  background: var(--ok-soft);
  border-radius: 10px;
  padding: 12px 14px;
}

.done {
  display: none;
}

.tick {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.ref {
  font: 600 20px "Bricolage Grotesque", ui-monospace, monospace;
  background: var(--field);
  border: 1px dashed var(--sky);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}

.again {
  background: none;
  border: 0;
  color: var(--blue);
  font: 600 16px Figtree, sans-serif;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .again {
    color: var(--sky);
  }
}

:root[data-theme="dark"] .again {
  color: var(--sky);
}

@media (max-width: 820px) {
  .main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .card,
  .facts {
    grid-column: 1;
    grid-row: auto;
  }

  .facts {
    padding-top: 0;
  }
  
  span li {
      color: #FFFFFF !important;
  }

  .hero {
    padding-bottom: 50px;
    margin-bottom: 150px;

  }

  .brand {
    margin-bottom: 32px;
  }

  .card {
    padding: 22px;
  }
}


/* =========================================================
   API ERROR ALERT
========================================================= */

.api-alert {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px 20px;
    margin: 0 0 24px;

    border: 2px solid #dc3545;
    border-radius: 10px;

    background: #fff1f2;
    color: #842029;

    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.12);
}


/* =========================================================
   HIDDEN STATE
========================================================= */

.api-alert[hidden] {
    display: none !important;
}


/* =========================================================
   VISIBLE STATE
========================================================= */

.api-alert:not([hidden]) {
    display: flex;

    animation: apiAlertSlideDown 0.25s ease-out;
}


/* =========================================================
   ERROR ICON
========================================================= */

.api-alert-icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    background: #dc3545;
    color: #ffffff;

    font-size: 21px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.api-alert-content {
    flex: 1;
    min-width: 0;
}


/* =========================================================
   TITLE
========================================================= */

.api-alert-title {
    margin-bottom: 5px;

    color: #b02a37;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   MESSAGE
========================================================= */

.api-alert-message {
    color: #842029;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;

    word-break: break-word;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.api-alert-close {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

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

    padding: 0;

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: #842029;

    font-family: Arial, sans-serif;
    font-size: 27px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.api-alert-close:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #b02a37;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes apiAlertSlideDown {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .api-alert {
        gap: 10px;
        padding: 15px;
    }

    .api-alert-icon {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        font-size: 18px;
    }

    .api-alert-title {
        font-size: 14px;
    }

    .api-alert-message {
        font-size: 14px;
    }

    .api-alert-close {
        width: 25px;
        height: 25px;

        font-size: 24px;
    }
}


/* =========================================================
    API SUCCESS ALERT
============================================================*/
.api-alert-success {
    border-color: #198754;
    background: #eaf7ef;
    color: #146c43;
}

.api-alert-success .api-alert-icon {
    background: #198754;
    color: #ffffff;
}

.api-alert-success .api-alert-title {
    color: #146c43;
}

.api-alert-success .api-alert-message {
    color: #146c43;
}

.api-alert-success .api-alert-close {
    color: #146c43;
}

.api-alert-success .api-alert-close:hover {
    background: rgba(25, 135, 84, 0.1);
    color: #0f5132;
}
/* =========================================================
   API ERROR ALERT
========================================================= */

/*.api-alert {*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/

/*    display: flex;*/
/*    align-items: flex-start;*/
/*    gap: 14px;*/

/*    padding: 18px 20px;*/
/*    margin: 0 0 24px;*/

/*    border-radius: 10px;*/

/*    border: 2px solid #dc3545;*/

/*    background: #fff1f2;*/

/*    color: #842029;*/

/*    box-shadow:*/
/*        0 4px 12px rgba(220, 53, 69, 0.12);*/

/*    animation: apiAlertSlideDown 0.25s ease-out;*/
/*}*/


/* =========================================================
   ERROR ICON
========================================================= */

/*.api-alert-icon {*/
/*    flex: 0 0 34px;*/

/*    width: 34px;*/
/*    height: 34px;*/

/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/

/*    border-radius: 50%;*/

/*    background: #dc3545;*/
/*    color: #ffffff;*/

/*    font-size: 21px;*/
/*    font-weight: 800;*/
/*    line-height: 1;*/
/*}*/


/* =========================================================
   CONTENT
========================================================= */

/*.api-alert-content {*/
/*    flex: 1;*/
/*    min-width: 0;*/
/*}*/


/* =========================================================
   TITLE
========================================================= */

/*.api-alert-title {*/
/*    margin-bottom: 5px;*/

/*    color: #b02a37;*/

/*    font-size: 16px;*/
/*    font-weight: 800;*/
/*}*/


/* =========================================================
   MESSAGE
========================================================= */

/*.api-alert-message {*/
/*    color: #842029;*/

/*    font-size: 15px;*/
/*    font-weight: 600;*/

/*    line-height: 1.5;*/

/*    word-break: break-word;*/
/*}*/


/* =========================================================
   CLOSE BUTTON
========================================================= */

/*.api-alert-close {*/
/*    flex: 0 0 auto;*/

/*    border: 0;*/
/*    background: transparent;*/

/*    color: #842029;*/

/*    font-size: 27px;*/
/*    font-weight: 400;*/

/*    line-height: 1;*/

/*    cursor: pointer;*/

/*    padding: 0 2px;*/

/*    opacity: 0.7;*/
/*}*/

/*.api-alert-close:hover {*/
/*    opacity: 1;*/
/*}*/


/* =========================================================
   ANIMATION
========================================================= */

/*@keyframes apiAlertSlideDown {*/

/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(-8px);*/
/*    }*/

/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/

/*}*/


/* =========================================================
   MOBILE
========================================================= */

/*@media (max-width: 480px) {*/

/*    .api-alert {*/
/*        padding: 15px;*/
/*        gap: 10px;*/
/*    }*/

/*    .api-alert-icon {*/
/*        width: 30px;*/
/*        height: 30px;*/
/*        flex-basis: 30px;*/

/*        font-size: 18px;*/
/*    }*/

/*    .api-alert-title {*/
/*        font-size: 14px;*/
/*    }*/

/*    .api-alert-message {*/
/*        font-size: 14px;*/
/*    }*/

/*}*/

@media (prefers-reduced-motion: no-preference) {
  .done.show .tick {
    animation: pop 0.35s ease-out;
  }

  @keyframes pop {
    from {
      transform: scale(0.6);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }
}