/* Ported from web-assets mailing-list.css, -step-02.css, -step-03.css,
   on the site's design tokens (src/index.css mirrors them for the harness;
   on fortell.com they inherit from :root through the shadow boundary). */

.U6mpepHXCq7IsMqe5WnP {
  box-sizing: border-box;

  /* Inherit so the inline form reads white on the dark footer and dark elsewhere */
  color: inherit;
  font-family: var(--_typography---typeface--copy);
  width: 100%;
}

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

.ZgrEpdlgikZCGwgoZVB8 {
  max-width: 28.75rem;
}

.lkDvTnTCJRpLU0LfBigY {
  max-width: var(--_constraints---500);
}

.fUIgz_kJpJyHY7TbL3zN {
  max-width: none;
}

/* Step 1 (inline) */

.Uy8vL63JU_X7BKE31GAo {
  display: grid;
  grid-template-rows: 1fr;
  position: relative;
  width: 100%;
}

.c_DsZSJBY2fYKsRJ2_8M {
  color: inherit;
  font-size: var(--_typography---copy-16-light--16-copy);
  font-weight: var(--_typography---copy-16-light--font-weight);
  letter-spacing: var(--_typography---copy-16-light--letter-spacing);
  line-height: var(--_typography---copy-16-light--line-height);
  margin: 0;
}

/* White on the wrapper, not the input: NordPass repaints a filled input translucent teal */
.ucL_NtEIZ4_LSQLImKxw {
  background-color: var(--neutreals--white);
  border-radius: var(--_sizes---3);
  position: relative;
}

.ozr5N7jQ4mC9UGNe0GCJ {
  appearance: none;
  background-color: transparent;
  border: var(--_sizes---1) solid var(--neutreals--gray-90);
  border-radius: var(--_sizes---3);
  color: var(--neutreals--black);
  display: block;
  font-family: inherit;
  font-size: var(--_typography---copy-16-extra-light--16-copy);
  font-weight: var(--_typography---copy-16-extra-light--font-weight);
  height: 3.125rem;
  letter-spacing: var(--_typography---copy-16-extra-light--letter-spacing);
  line-height: 1.3;
  padding: var(--_sizes---8) 7.5rem var(--_sizes---8) var(--_sizes---12);
  width: 100%;
}

.ozr5N7jQ4mC9UGNe0GCJ::placeholder {
  color: var(--neutreals--gray-50);
  opacity: 1;
}

.ozr5N7jQ4mC9UGNe0GCJ:focus {
  outline: none;
}

.rvO1Cr1JhpBgF0MUOm2g {
  background: var(--_theme---button--background);
  border: 0;
  border-radius: var(--_button-structure---button-regular--corner-radius);
  bottom: var(--_sizes---3);
  color: var(--_theme---button--text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--_typography---copy-16-normal--16-copy);
  font-weight: var(--_typography---copy-16-normal--font-weight);
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  position: absolute;
  right: var(--_sizes---3);
  text-align: center;
  top: var(--_sizes---3);
  white-space: nowrap;
  width: 7.4375rem;
}

.rvO1Cr1JhpBgF0MUOm2g:hover {
  background: var(--_theme---button--background-hover);
}

.rvO1Cr1JhpBgF0MUOm2g:disabled {
  cursor: default;
  opacity: 0.7;
}

.sB8BlIcchGFc8LQo5ARc {
  color: var(--status--error-red-60);
  font-size: var(--_typography---copy-12-normal--12-copy);
  font-weight: 300;
  letter-spacing: var(--_typography---copy-12-normal--letter-spacing);
  line-height: var(--_typography---copy-12-normal--line-height);
  margin: 0;
  padding-top: var(--_sizes---4);
}

/* Dialogs (steps 2 and 3) */

/* Above the site's navbar (z 1000), below extension UI at the max z-index */
.QFKQ3ABHml1aXOdwCsgM {
  background: var(--transparent--black-75);
  inset: 0;
  position: fixed;
  z-index: 2147483000;
}

.NAqWVx6p35312iebExvm {
  background: transparent;
  border: 0;
  height: fit-content;
  inset: 0;
  margin: auto;
  max-height: 100dvh;
  max-width: calc(var(--_constraints---600) + 2 * var(--_sizes---16));
  overflow-y: auto;
  padding: var(--_sizes---16);
  position: fixed;
  width: calc(100vw - 2 * var(--_sizes---16));
  z-index: 2147483001;
}

.NAqWVx6p35312iebExvm:not([open]) {
  display: none;
}

.WTtTHPO1qG66nIqa9mCn {
  background-color: var(--neutreals--gray-07);
  border-radius: var(--_sizes---8);
  color: var(--neutreals--gray-90);
  font-family: var(--_typography---typeface--copy);
  margin: 0 auto;
  max-width: var(--_constraints---600);
  padding: var(--_sizes---32) var(--_sizes---20);
  position: relative;
  width: 100%;
}

@media (width >= 30rem) {
  .WTtTHPO1qG66nIqa9mCn {
    padding: var(--_sizes---32) var(--_sizes---40);
  }
}

.WTtTHPO1qG66nIqa9mCn *,
.WTtTHPO1qG66nIqa9mCn *::before,
.WTtTHPO1qG66nIqa9mCn *::after {
  box-sizing: border-box;
}

.jbAKglQ3bXSkN6O05F5r {
  align-items: center;
  background: var(--neutreals--gray-07);
  border: 0;
  color: var(--neutreals--gray-90);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--_sizes---40);
  inset: var(--_sizes---20) var(--_sizes---20) auto auto;
  justify-content: center;
  padding: 0;
  position: absolute;
  width: var(--_sizes---40);
}

.jbAKglQ3bXSkN6O05F5r:hover,
.jbAKglQ3bXSkN6O05F5r:focus {
  color: var(--neutreals--black);
}

.jbAKglQ3bXSkN6O05F5r svg {
  height: var(--_sizes---20);
  width: var(--_sizes---20);
}

.TKhqR6FVMncczETK53Mi {
  padding-right: var(--_sizes---48);
}

.TKhqR6FVMncczETK53Mi.LZAFY9XiHPzbra6a3o28 {
  padding-right: 0;
  text-align: center;
}

.THW_15uugBfpvNctl2Dd {
  display: block;
  height: var(--_sizes---48);
  margin: 0 auto var(--_sizes---12);
  width: var(--_sizes---48);
}

.YZesAo62VGqPjFoOSgeE {
  color: var(--neutreals--gray-90);
  font-family: var(--_typography---typeface--display);
  font-size: var(--_typography---display-28-book--28);
  font-weight: var(--_typography---display-28-book--font-weight);
  letter-spacing: -0.0175em;
  line-height: 1.3;
  margin: 0 0 var(--_sizes---12);
}

.LZAFY9XiHPzbra6a3o28 .YZesAo62VGqPjFoOSgeE {
  font-size: var(--_typography---display-32-book--32-display);
  margin-bottom: var(--_sizes---6);
}

.QU8f7Ppz4ReWqR8gANbN {
  color: var(--neutreals--gray-70);
  font-size: var(--_typography---copy-16-extra-light--16-copy);
  font-weight: var(--_typography---copy-16-extra-light--font-weight);
  letter-spacing: var(--_typography---copy-16-extra-light--letter-spacing);
  line-height: var(--_typography---copy-16-extra-light--line-height);
  margin: 0;
}

.Wo16T2_Xpd44iu93O9z1 {
  border: 0;
  border-top: var(--_sizes---2) solid var(--neutreals--gray-90);
  margin: var(--_sizes---16) 0 1.625rem;
}

.n7k0CNLvkS8bMHaT2tWj {
  display: grid;
  gap: var(--_sizes---12);
}

.nUdXVLVNEkCvrCEIfPoX {
  display: block;
  margin: 0;
}

.xLeYH85SsfM8hj3zLNFV {
  display: grid;
  gap: var(--_sizes---12) var(--_sizes---16);
}

@media (width >= 30rem) {
  .xLeYH85SsfM8hj3zLNFV {
    grid-template-columns: 1fr 1fr;
  }
}

.MrwkoWGk_3efGXxoIMRc {
  color: var(--neutreals--gray-90);
  display: block;
  font-size: var(--_typography---copy-16-light--16-copy);
  font-weight: var(--_typography---copy-16-light--font-weight);
  letter-spacing: var(--_typography---copy-16-light--letter-spacing);
  line-height: var(--_typography---copy-16-light--line-height);
  margin-bottom: var(--_sizes---4);
}

.GlITRZrAuA_RR8Hb5htE {
  appearance: none;
  background-color: var(--neutreals--white);
  border: var(--_sizes---1) solid transparent;
  border-radius: var(--_sizes---3);
  color: var(--neutreals--black);
  font-family: inherit;
  font-size: var(--_typography---copy-16-extra-light--16-copy);
  font-weight: var(--_typography---copy-16-extra-light--font-weight);
  height: 2.75rem;
  letter-spacing: var(--_typography---copy-16-extra-light--letter-spacing);
  line-height: var(--_typography---copy-16-extra-light--line-height);
  padding: 0 var(--_sizes---12);
  width: 100%;
}

.GlITRZrAuA_RR8Hb5htE::placeholder {
  color: rgb(0 0 0 / 50%);
  opacity: 1;
}

.GlITRZrAuA_RR8Hb5htE:focus {
  outline: none;
}

.VIJLJbHYxmNQkFA0nTWH {
  align-items: center;
  background-color: var(--neutreals--white);
  border: var(--_sizes---1) solid transparent;
  border-radius: var(--_sizes---3);
  display: flex;
  padding: 0 var(--_sizes---12);
}

.rzyf6RDGb8xsNn_Gsjqy {
  color: var(--neutreals--gray-50);
  flex-shrink: 0;
  font-size: var(--_typography---copy-16-extra-light--16-copy);
  font-weight: var(--_typography---copy-16-extra-light--font-weight);
  padding-right: var(--_sizes---8);
  white-space: nowrap;
}

.VIJLJbHYxmNQkFA0nTWH .GlITRZrAuA_RR8Hb5htE {
  border: 0;
  padding-left: 0;
}

.E4TWc83ZC9cf4wjmw7V2 {
  display: flex;
  flex-flow: row wrap;
}

.KFRImt1UEiiz5OUbxoBI {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--neutreals--gray-80);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--_typography---copy-16-extra-light--16-copy);
  font-weight: var(--_typography---copy-16-extra-light--font-weight);
  gap: var(--_sizes---8);
  letter-spacing: var(--_typography---copy-16-extra-light--letter-spacing);
  line-height: 1.3;
  padding: var(--_sizes---4) var(--_sizes---16) var(--_sizes---4) 0;
}

.KFRImt1UEiiz5OUbxoBI::before {
  border: var(--_sizes---1-5) solid var(--neutreals--gray-80);
  border-radius: 50%;
  content: '';
  display: inline-block;
  flex-shrink: 0;
  height: 1.125rem;
  width: 1.125rem;
}

.j3nORXIYCxUF2FnlysRv::before {
  background-color: var(--neutreals--gray-80);
  box-shadow: inset 0 0 0 var(--_sizes---3) var(--neutreals--white);
}

.O2DsIw9RSzIweGmAWORQ {
  display: block;
  position: relative;
}

.O2DsIw9RSzIweGmAWORQ::after {
  border-color: var(--neutreals--gray-90);
  border-style: solid;
  border-width: 0 var(--_sizes---1-5) var(--_sizes---1-5) 0;
  content: '';
  height: var(--_sizes---8);
  pointer-events: none;
  position: absolute;
  right: var(--_sizes---16);
  top: calc(50% - var(--_sizes---6));
  transform: rotate(45deg);
  width: var(--_sizes---8);
}

.z3exOpb5d1YaWhIRtOWg {
  appearance: none;
  background-color: var(--neutreals--white);
  border: var(--_sizes---1) solid transparent;
  border-radius: var(--_sizes---3);
  color: var(--neutreals--gray-90);
  font-family: inherit;
  font-size: var(--_typography---copy-16-extra-light--16-copy);
  font-weight: var(--_typography---copy-16-extra-light--font-weight);
  height: 2.75rem;
  letter-spacing: var(--_typography---copy-16-extra-light--letter-spacing);
  line-height: var(--_typography---copy-16-extra-light--line-height);
  padding: 0 var(--_sizes---40) 0 var(--_sizes---12);
  width: 100%;
}

.z3exOpb5d1YaWhIRtOWg:focus {
  outline: none;
}

.XgKnACNAiAi7tZEpE6gX {
  color: var(--neutreals--gray-50);
}

.F3LqJfVuM8hCwx7MzshT {
  margin-top: var(--_sizes---6);
}

.DGEP5BhCRzkMCV2w5Neg {
  display: grid;
  gap: var(--_sizes---12);
}

.LB8gfhO6XcCe5nXyLK9y {
  color: var(--neutreals--gray-90);
  font-size: var(--_typography---copy-16-light--16-copy);
  font-weight: var(--_typography---copy-16-light--font-weight);
  letter-spacing: var(--_typography---copy-16-light--letter-spacing);
  line-height: var(--_typography---copy-16-light--line-height);
  margin: 0;
}

.IKMuoyhL3cb7oK22e1oA {
  background: var(--primary--cerulean-70);
  border: 0;
  border-radius: var(--_button-structure---button-regular--corner-radius);
  color: var(--neutreals--white);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--_typography---copy-16-normal--16-copy);
  font-weight: var(--_typography---copy-16-normal--font-weight);
  height: var(--_sizes---48);
  letter-spacing: var(--_typography---copy-16-normal--letter-spacing);
  line-height: var(--_typography---copy-16-normal--line-height);
  padding: 0.6875rem 0.875rem;
  width: 100%;
}

.IKMuoyhL3cb7oK22e1oA:hover,
.IKMuoyhL3cb7oK22e1oA:disabled {
  background: var(--primary--cerulean-75);
}

.IKMuoyhL3cb7oK22e1oA:disabled {
  cursor: default;
}

/* Focus; the invalid rules below still win on a focused invalid field */

.KFRImt1UEiiz5OUbxoBI:focus {
  outline: none;
}

.ozr5N7jQ4mC9UGNe0GCJ:focus-visible,
.GlITRZrAuA_RR8Hb5htE:focus-visible,
.z3exOpb5d1YaWhIRtOWg:focus-visible,
.VIJLJbHYxmNQkFA0nTWH:focus-within {
  border-color: var(--primary--cerulean-70);
}

.VIJLJbHYxmNQkFA0nTWH .GlITRZrAuA_RR8Hb5htE:focus-visible {
  border: 0;
}

.rvO1Cr1JhpBgF0MUOm2g:focus-visible,
.IKMuoyhL3cb7oK22e1oA:focus-visible,
.jbAKglQ3bXSkN6O05F5r:focus-visible,
.KFRImt1UEiiz5OUbxoBI:focus-visible::before {
  outline: var(--_sizes---2) solid var(--primary--cerulean-70);
  outline-offset: var(--_sizes---2);
}

/* Invalid state, last so it wins over the base field rules */

.ucL_NtEIZ4_LSQLImKxw.YtvEz91uLldDKm6DVyap .ozr5N7jQ4mC9UGNe0GCJ,
.nUdXVLVNEkCvrCEIfPoX.YtvEz91uLldDKm6DVyap .GlITRZrAuA_RR8Hb5htE,
.nUdXVLVNEkCvrCEIfPoX.YtvEz91uLldDKm6DVyap .z3exOpb5d1YaWhIRtOWg,
.nUdXVLVNEkCvrCEIfPoX.YtvEz91uLldDKm6DVyap .VIJLJbHYxmNQkFA0nTWH {
  border-color: var(--status--error-red-60);
}