:root {
   font-family: "IBM Plex Sans", sans-serif;
   /*old-color: #17202a;*/
   color: #141414;
   background: #f5f7fa;
   font-weight: 425;
   /*
   --primary: #2457d6;
   --danger: #b42318;
   --success: #147a3d
   */
   --primary: #2457d6;
   --info: #1FB3D1;
   --danger: #E61744;
   --success: #10A170;
   --warning: #FFB700;
}

* {
   box-sizing: border-box
}

body {
   margin: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column
}

header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem max(1rem, calc((100vw - 1120px)/2));
   background: #fff;
   border-bottom: 1px solid #dfe3e8
}

nav {
   display: flex;
   gap: 1rem
}

.brand {
   font-weight: 650;
   text-decoration: none;
   color: #002E5D
}

a {
   color: #1748b0
}

main {
   width: min(1120px, calc(100% - 2rem));
   margin: 2rem auto;
   flex: 1
}

footer {
   text-align: center;
   padding: 2rem;
   color: #666666
}

.hero {
   padding: 5rem 0;
   max-width: 720px
}

.hero h1,
h1 {
   font-size: clamp(2rem, 5vw, 3.5rem);
   font-weight: 650;
   margin: .2rem 0 1rem
}

.eyebrow,
.step {
   text-transform: uppercase;
   letter-spacing: .08em;
   color: #506078;
   font-weight: 600
}

.card {
   background: #fff;
   border: 1px solid #dfe3e8;
   border-radius: 12px;
   padding: 1.5rem;
   box-shadow: 0 6px 20px #1822300c
}

.narrow {
   max-width: 620px;
   margin: auto
}

.dashboard,
.grid-form {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1rem
}

.full {
   grid-column: 1/-1
}

form {
   display: grid;
   gap: 1rem
}

label {
   display: grid;
   gap: .35rem;
   font-weight: 600
}

input,
textarea,
select,
button,
.button {
   font: inherit;
   border: 1px solid #9da8b5;
   border-radius: 6px;
   padding: .7rem .8rem;
   background: #fff
}

button,
.button {
   cursor: pointer;
   text-decoration: none;
   width: max-content
}

.primary,
button {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary);
   font-weight: 600
}

.actions {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin: 1.5rem 0
}

.alert {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: 1rem;
   border-radius: 6px;
   margin: 1rem 0
}

.alert.error {
   background: #fef0ed;
   color: var(--danger)
}

.alert.success {
   background: #eaf8ef;
   color: var(--success)
}

.policy {
   background: #f7f9fc;
   padding: 1rem;
   border-radius: 8px
}

.policy h2 {
   font-size: 1rem
}

.policy ul {
   list-style: none;
   padding: 0
}

.policy li {
   display: flex;
   align-items: center;
   gap: .4rem;
   color: var(--danger)
}

.policy li.met {
   color: var(--success)
}

.material-symbols-outlined {
   font-size: 1.2rem
}

.availability.available {
   color: var(--success)
}

.availability.unavailable,
.availability.invalid {
   color: var(--danger)
}

.suffix-input {
   display: flex
}

.suffix-input input {
   flex: 1;
   border-radius: 6px 0 0 6px
}

.suffix-input span {
   padding: .7rem;
   background: #eef1f5;
   border: 1px solid #9da8b5;
   border-left: 0;
   border-radius: 0 6px 6px 0
}

.results article {
   border-top: 1px solid #dfe3e8;
   padding: 1rem 0
}

.results form {
   display: inline-flex;
   margin: .25rem
}

.secret-output {
   font-family: monospace;
   font-size: 1.1rem
}

@media(max-width:700px) {
   header {
      align-items: flex-start;
      gap: 1rem
   }

   nav {
      flex-direction: column
   }

   .hero {
      padding: 2rem 0
   }
}